dabubble/src/app/components/main-login/password-reset/password-reset.component.html
2024-05-26 19:51:04 +02:00

83 lines
2.4 KiB
HTML

<section>
<app-start-header [display]="'none'"></app-start-header>
<div class="passwordContainer">
<div class="passwordTop">
<div [routerLink]="['/login']" class="loginBackImg">
<app-small-btn
[imgSrc]="'login/arrow-back.svg'"
[imgSize]="'24px'"
[btnSize]="'48px'"
[btnBgHoverColor]="'#edeefe'"
>
</app-small-btn>
</div>
<span>{{ "passwordReset.header" | translate }}</span>
</div>
<form
(ngSubmit)="onSubmit(contactForm)"
#contactForm="ngForm"
class="contactForm"
>
<div class="inputContainer">
<img class="iconP" src="./assets/img/login/lock.png" alt="" />
<input
class="inputField"
#passwordField="ngModel"
minlength="6"
[(ngModel)]="password"
name="password"
placeholder="{{ 'passwordReset.inputfield' | translate }}"
type="password"
id="message"
required
[ngClass]="{
aktivInput: passwordField.valid && passwordField.touched
}"
cols="30"
rows="10"
/>
@if (!passwordField.valid && passwordField.touched) {
<p class="error">
{{ "passwordReset.errorText" | translate }}
</p>
}
</div>
<div class="inputContainer">
<img class="iconP" src="./assets/img/login/lock.png" alt="" />
<input
class="inputField"
#passwordRepeatField="ngModel"
minlength="6"
[(ngModel)]="passwordRepeat"
name="passwordRepeat"
placeholder="{{ 'passwordReset.inputfield2' | translate }}"
id="message"
type="password"
required
[ngClass]="{
aktivInput: passwordRepeatField.valid && passwordRepeatField.touched
}"
cols="30"
rows="10"
/>
<p
class="error"
*ngIf="passwordRepeatField.touched && !passwordsMatch()"
>
{{ "passwordReset.errorText2" | translate }}
</p>
</div>
<div class="passwordBottom">
<button
[ngClass]="{ aktivButton: contactForm.valid && passwordsMatch() }"
[disabled]="!contactForm.valid || !passwordsMatch()"
>
{{ "passwordReset.Btn" | translate }}
</button>
</div>
</form>
</div>
<app-footer></app-footer>
</section>