Files
talenttic-crm-app/src/app/pages/login/login.component.html
2023-04-25 16:15:24 +01:00

116 lines
3.3 KiB
HTML

<div class="content ml-2 signinContainer overflow-hidden">
<div class="logo">
<img
src="../../../assets/img/logo-white.png"
class="img-fluid"
alt="logo"
style="width: 200px; height: 200px; border-radius: 50%"
/>
</div>
<div style="text-align: center; margin-bottom: 3rem;">
<h1>
TALENTTIC TECH HUB CRM
</h1>
</div>
<ng-container *ngIf="loginSuccess">
<div class="alert alert-success" role="alert">
<i class="bi bi-check-circle mr-1"></i>
<span>Logged in successfully</span>
</div>
</ng-container>
<ng-container *ngIf="loginError">
<div class="alert alert-danger" role="alert">
<i class="bi bi-exclamation-circle mr-1"></i>
<span>Invalid email or password</span>
</div>
</ng-container>
<section class="forms">
<form (ngSubmit)="signin()" [formGroup]="loginForm" novalidate>
<div class="forms__inputBox">
<input
type="email"
formControlName="companyEmail"
id="companyEmail"
data-cy="signin-email"
autocomplete="new-email"
required
/>
<label for="companyEmail">Email</label>
<div class="signinForms--error">
<ng-container
*ngIf="
formControls.companyEmail.errors?.required &&
formControls.companyEmail?.touched
"
>
<div id="emailError" aria-live="assertive">
<i class="bi bi-x"> </i>
<span>Email Required</span>
</div>
</ng-container>
<ng-container *ngIf="formControls.companyEmail.errors?.pattern">
<div id="emailError" aria-live="assertive">
<i class="bi bi-exclamation-octagon"></i>
<span>Please enter a valid email</span>
</div>
</ng-container>
</div>
</div>
<div class="forms__inputBox">
<input
type="password"
[type]="hide ? 'password' : 'text'"
formControlName="password"
id="password"
data-cy="signin-password"
autocomplete="new-password"
required
/>
<i
[class]="hide ? 'bi bi-eye-slash' : 'bi bi-eye'"
(click)="hide = !hide"
></i>
<label for="password">Password</label>
<div class="signinForms--error">
<ng-container
*ngIf="
formControls.password.errors?.required &&
formControls.password?.touched
"
>
<div id="passwordError" aria-live="assertive">
<i class="bi bi-x"></i>
<span>Password Required</span>
</div>
</ng-container>
<ng-container *ngIf="formControls.password.errors?.minlength">
<div id="passwordError" aria-live="assertive">
<i class="bi bi-exclamation-octagon"></i>
<span>Password must be at least 6 characters</span>
</div>
</ng-container>
</div>
</div>
</form>
<div class="forgotPassw">
<p>
Forgot Password?
<a routerLink="/request-reset-password">Reset password </a>
</p>
</div>
</section>
<div class="signinBtn">
<button (click)="signin()" data-cy="signin-button">Sign In</button>
</div>
</div>