127 lines
3.8 KiB
HTML
127 lines
3.8 KiB
HTML
<section>
|
|
<app-header [signUpBtn]="true"></app-header>
|
|
<form
|
|
id="form"
|
|
#taskForm="ngForm"
|
|
(ngSubmit)="onSubmit(taskForm)"
|
|
onsubmit="return false"
|
|
>
|
|
<div class="content">
|
|
<p>{{ "login.login" | translate }}</p>
|
|
<div class="line">
|
|
<img src="./../../../assets/img/login/blue-line.svg" alt="" />
|
|
</div>
|
|
<div class="input-fields">
|
|
<input
|
|
type="mail"
|
|
id="mail"
|
|
name="mail"
|
|
#mail="ngModel"
|
|
placeholder="{{ 'login.email' | translate }}"
|
|
class="custom-input"
|
|
autocomplete="email"
|
|
[(ngModel)]="loginData.email"
|
|
required
|
|
/>
|
|
@if(!loginData.email) {
|
|
<img
|
|
class="custom-img"
|
|
src="./../../../assets/img/login/mail.svg"
|
|
alt=""
|
|
/>
|
|
} @else {
|
|
<img class="custom-img" alt="" />
|
|
}
|
|
<div class="error-msg">
|
|
@if (!mail.valid && mail.touched && !isButtonDisabled()) {
|
|
<p>{{ "login.errorMail0" | translate }}</p>
|
|
} @if (loginService.errorCode == 'auth/invalid-email' &&
|
|
!isButtonDisabled()) {
|
|
<p>{{ "login.errorMail1" | translate }}</p>
|
|
} @if (mail.valid && mail.touched &&
|
|
!checkIfUserEmailIsValid(loginData.email.toLowerCase()) &&
|
|
!isButtonDisabled()) {
|
|
<p>{{ "login.errorMail2" | translate }}</p>
|
|
}
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
#password="ngModel"
|
|
[type]="loginService.passwordFieldType"
|
|
placeholder="{{ 'login.password' | translate }}"
|
|
class="custom-input"
|
|
autocomplete="current-password"
|
|
pattern="[^<>]*"
|
|
[(ngModel)]="loginData.password"
|
|
minlength="6"
|
|
required
|
|
/>
|
|
@if(!loginData.password) {
|
|
<img
|
|
class="custom-img"
|
|
src="./../../../assets/img/login/lock.svg"
|
|
alt=""
|
|
/>
|
|
} @else {
|
|
<img
|
|
class="passwordEye"
|
|
*ngIf="isPasswordIconVisible"
|
|
(click)="loginService.togglePasswordVisibility()"
|
|
[src]="loginService.passwordIcon"
|
|
/>
|
|
}
|
|
<div class="error-msg">
|
|
@if (!password.valid && password.touched && !isButtonDisabled()) {
|
|
<p>{{ "login.errorPassword0" | translate }}</p>
|
|
} @if (loginService.errorCode == 'auth/invalid-credential' &&
|
|
!isButtonDisabled()) {
|
|
<p>{{ "login.errorPassword1" | translate }}</p>
|
|
}
|
|
</div>
|
|
<div class="checkbox">
|
|
<label class="container">
|
|
<input
|
|
type="checkbox"
|
|
id="checkbox"
|
|
name="checkbox"
|
|
#checkbox
|
|
[(ngModel)]="checkboxRememberMe"
|
|
/>
|
|
{{ "login.rememberMe" | translate }}
|
|
</label>
|
|
</div>
|
|
<div class="forgot-pw">
|
|
<a routerLink="/forgot-pw">{{
|
|
"login.forgotPassword" | translate
|
|
}}</a>
|
|
</div>
|
|
</div>
|
|
<div class="form-buttons">
|
|
<app-form-btn
|
|
[class]="'btn-login'"
|
|
[type]="'submit'"
|
|
[value]="'login.login' | translate"
|
|
[disabled]="
|
|
mail.invalid ||
|
|
!loginData.email ||
|
|
password.invalid ||
|
|
!loginData.password ||
|
|
isButtonDisabled() ||
|
|
!checkIfUserEmailIsValid(loginData.email)
|
|
"
|
|
></app-form-btn>
|
|
<app-form-btn
|
|
[class]="'btn-guest-login'"
|
|
[type]="'button'"
|
|
[value]="'login.guest' | translate"
|
|
[disabled]="isButtonDisabled()"
|
|
(click)="guestLogin()"
|
|
></app-form-btn>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<app-footer></app-footer>
|
|
</section>
|
|
<app-login-loader></app-login-loader>
|