This commit is contained in:
Chneemann 2024-08-02 20:43:03 +02:00
parent a436dd364d
commit 65620e157a
7 changed files with 34 additions and 13 deletions

View file

@ -43,7 +43,7 @@
pattern="[^<>]*" pattern="[^<>]*"
minlength="6" minlength="6"
[class.error-border]=" [class.error-border]="
password.invalid && password.touched && authData.password.length > 0 password.invalid && password.touched && authData.password.length < 6
" "
required required
/> />
@ -51,13 +51,15 @@
@if (!password.valid && password.touched && authData.password.length < @if (!password.valid && password.touched && authData.password.length <
1) { 1) {
<p>Please enter your password</p> <p>Please enter your password</p>
} @else { @if (authData.password.length < 6 && password.touched) { } @else { @if (authData.password && authData.password.length < 6 &&
password.touched) {
<p>Password is too short, min 6 characters</p> <p>Password is too short, min 6 characters</p>
} } } }
</div> </div>
<app-btn-large <app-btn-large
[value]="'Log in'" [value]="'Log in'"
[disabled]=" [disabled]="
!authData.mail ||
(!isUserEmailValid(authData.mail) && authData.mail.length > 0) || (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
!password.valid !password.valid
" "

View file

@ -86,6 +86,10 @@ section {
} }
} }
.error-border { .error-border {
border: 1px solid red; border: 1px solid $red;
color: $red;
&::placeholder {
color: $red;
}
} }
} }

View file

@ -14,6 +14,7 @@ export class LoginComponent {
authData = { authData = {
mail: '', mail: '',
password: '', password: '',
send: false,
}; };
constructor() {} constructor() {}
@ -26,8 +27,7 @@ export class LoginComponent {
onSubmit(ngForm: NgForm) { onSubmit(ngForm: NgForm) {
if (ngForm.submitted && ngForm.form.valid) { if (ngForm.submitted && ngForm.form.valid) {
console.log(this.authData); console.log(this.authData);
this.authData.mail = ''; ngForm.resetForm();
this.authData.password = '';
} }
} }
} }

View file

@ -34,14 +34,20 @@
[(ngModel)]="authData.password" [(ngModel)]="authData.password"
pattern="[^<>]*" pattern="[^<>]*"
minlength="6" minlength="6"
[class.error-border]="password.invalid && password.touched" [class.error-border]="
password.invalid && password.touched && authData.password.length < 6
"
[disabled]="!authData.params" [disabled]="!authData.params"
required required
/> />
<div class="error-msg"> <div class="error-msg">
@if (authData.password.length < 6 && password.touched) { @if (!password.valid && password.touched && authData.password.length <
1) {
<p>Please enter a password</p>
} @else { @if (authData.password && authData.password.length < 6 &&
password.touched) {
<p>Password is too short, min 6 characters</p> <p>Password is too short, min 6 characters</p>
} } }
</div> </div>
<input <input
type="password" type="password"
@ -70,7 +76,10 @@
[value]="'Get Started'" [value]="'Get Started'"
[disabled]=" [disabled]="
(!isUserEmailValid(authData.mail) && authData.mail.length > 0) || (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
!authData.params !authData.params ||
authData.password !== authData.passwordConfirm ||
!authData.password ||
!authData.passwordConfirm
" "
></app-btn-large> ></app-btn-large>
</form> </form>

View file

@ -86,6 +86,10 @@ section {
} }
} }
.error-border { .error-border {
border: 1px solid red; border: 1px solid $red;
color: $red;
&::placeholder {
color: $red;
}
} }
} }

View file

@ -36,8 +36,10 @@ export class RegisterComponent {
onSubmit(ngForm: NgForm) { onSubmit(ngForm: NgForm) {
if (ngForm.submitted && ngForm.form.valid) { if (ngForm.submitted && ngForm.form.valid) {
console.log(this.authData.mail); let mail = this.authData.mail;
this.authData.mail = ''; console.log(this.authData);
ngForm.form.reset();
ngForm.form.patchValue({ mail: mail });
} }
} }
} }

View file

@ -3,4 +3,4 @@ $white: #fff;
$black: #000; $black: #000;
$gray: #ababab; $gray: #ababab;
$blue: #2e3edf; $blue: #2e3edf;
$red: #ff0000; $red: #ff002e;