clean code & bugfixes
This commit is contained in:
Chneemann
parent
5aca18a217
commit
800b3ced9f
8 changed files with 110 additions and 125 deletions
|
|
@ -5,8 +5,6 @@
|
|||
<p>Enter your email to create or restart your subscription.</p>
|
||||
</div>
|
||||
<form
|
||||
id="form"
|
||||
class="register-form"
|
||||
#taskForm="ngForm"
|
||||
(ngSubmit)="onSubmit(taskForm, mail)"
|
||||
onsubmit="return false"
|
||||
|
|
@ -20,7 +18,12 @@
|
|||
class="custom-input"
|
||||
autocomplete="email"
|
||||
[(ngModel)]="authData.mail"
|
||||
[ngClass]="{ 'error-border': mail.invalid && mail.touched }"
|
||||
[class.error-border]="
|
||||
(!mail.valid && mail.touched) ||
|
||||
(mail.touched &&
|
||||
!isUserEmailValid(authData.mail.toLowerCase()) &&
|
||||
authData.mail.length > 0)
|
||||
"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "./../../../assets/style/colors.scss";
|
||||
@import "./../../../assets/style/form.scss";
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
|
|
@ -38,10 +39,8 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.register-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
form {
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
width: 500px;
|
||||
padding: 24px;
|
||||
|
|
@ -49,43 +48,22 @@ section {
|
|||
width: 70%;
|
||||
padding: 12px 18px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: $white;
|
||||
border: 2px solid $white;
|
||||
border-radius: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
|
||||
border-color 250ms ease-in-out;
|
||||
&::placeholder {
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
.error-border {
|
||||
border: 2px solid $red;
|
||||
color: $red;
|
||||
&::placeholder {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 24px;
|
||||
padding: 6px;
|
||||
width: 62%;
|
||||
p {
|
||||
color: $red;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
<div class="content">
|
||||
<div class="headline">Log in</div>
|
||||
<form
|
||||
id="form"
|
||||
class="login-form"
|
||||
#loginForm="ngForm"
|
||||
(ngSubmit)="onSubmit(loginForm)"
|
||||
onsubmit="return false"
|
||||
|
|
@ -56,14 +54,32 @@
|
|||
<p>Password is too short, min 6 characters</p>
|
||||
} }
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox"
|
||||
name="checkbox"
|
||||
#checkbox
|
||||
[(ngModel)]="authData.checkbox"
|
||||
/>
|
||||
<label for="checkbox">Remember me</label>
|
||||
</div>
|
||||
<app-btn-large
|
||||
[value]="'Log in'"
|
||||
[disabled]="
|
||||
!checkbox.checked ||
|
||||
!authData.mail ||
|
||||
(!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
|
||||
!password.valid
|
||||
"
|
||||
></app-btn-large>
|
||||
</form>
|
||||
<div class="footer">
|
||||
<a routerLink="/forgot-password">Forgot password?</a>
|
||||
<div class="footer-content">
|
||||
<p>New to Videoflix?</p>
|
||||
<a routerLink="/register">Sign Up now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "./../../../../assets/style/colors.scss";
|
||||
@import "./../../../../assets/style/form.scss";
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
|
|
@ -26,6 +27,7 @@ section {
|
|||
padding: 43px 56px;
|
||||
border-radius: 48px;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
.headline {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
|
|
@ -37,59 +39,48 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
height: 24px;
|
||||
padding: 6px;
|
||||
width: 120%;
|
||||
p {
|
||||
color: $red;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 12px;
|
||||
}
|
||||
a {
|
||||
color: $red;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
label {
|
||||
width: fit-content;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
input {
|
||||
width: 90%;
|
||||
padding: 12px 18px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: $blue;
|
||||
border: 1px solid $blue;
|
||||
border-radius: 12px;
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 43px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
a {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
|
||||
border-color 250ms ease-in-out;
|
||||
&::placeholder {
|
||||
color: rgba($blue, 0.6);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: rgba($white, 0.1);
|
||||
font-weight: 700;
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.error-border {
|
||||
border: 1px solid $red;
|
||||
color: $red;
|
||||
&::placeholder {
|
||||
color: $red;
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
gap: 24px;
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export class LoginComponent {
|
|||
authData = {
|
||||
mail: '',
|
||||
password: '',
|
||||
checkbox: false,
|
||||
send: false,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@
|
|||
</div>
|
||||
} @else {
|
||||
<form
|
||||
id="form"
|
||||
class="register-form"
|
||||
#registerForm="ngForm"
|
||||
(ngSubmit)="onSubmit(registerForm)"
|
||||
onsubmit="return false"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "./../../../../assets/style/colors.scss";
|
||||
@import "./../../../../assets/style/form.scss";
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
|
|
@ -55,52 +56,3 @@ section {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
padding: 6px;
|
||||
width: 120%;
|
||||
p {
|
||||
color: $red;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.register-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
input {
|
||||
width: 90%;
|
||||
padding: 12px 18px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: $blue;
|
||||
border: 1px solid $blue;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
|
||||
border-color 250ms ease-in-out;
|
||||
&::placeholder {
|
||||
color: rgba($blue, 0.6);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
.error-border {
|
||||
border: 1px solid $red;
|
||||
color: $red;
|
||||
&::placeholder {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
46
frontend/src/assets/style/form.scss
Normal file
46
frontend/src/assets/style/form.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
input {
|
||||
width: 90%;
|
||||
padding: 12px 18px;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: $blue;
|
||||
border: 1px solid $blue;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
|
||||
border-color 250ms ease-in-out;
|
||||
&::placeholder {
|
||||
color: rgba($blue, 0.6);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
.error-border {
|
||||
border: 1px solid $red;
|
||||
color: $red;
|
||||
&::placeholder {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
padding: 9px;
|
||||
p {
|
||||
color: $red;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue