first commit
This commit is contained in:
arfat qureshi
239
src/app/modules/auth/login/login.component.html
Normal file
239
src/app/modules/auth/login/login.component.html
Normal file
@@ -0,0 +1,239 @@
|
||||
<div class="app-loginWrap" [ngStyle]="{'background-image':'url(' + commonService.environmentObj.cdnBaseUrl + 'assets/banner/bg-extranet.png)'}">
|
||||
<div class="overlay"></div>
|
||||
<div class="app-loginBody" [formGroup]="SignInForm">
|
||||
<div class="login-textWrap">
|
||||
<!-- <div class="login-head"> Welcome</div>
|
||||
<div class="login-text"> Enter your credentials to unlock a world of possibilities and personalized
|
||||
experiences. We're delighted to have you here! </div> -->
|
||||
</div>
|
||||
<div class="app-loginLogo">
|
||||
<!-- <img alt="Agency Logo"> -->
|
||||
</div>
|
||||
<!-- sign In Form -->
|
||||
<div class="app-loginContent" *ngIf="!ShowUserVerificationBox && !OTPSection && !ForgetPassword">
|
||||
<div class="app-loginLogo">
|
||||
<img [src]="orgLogo"
|
||||
alt="Agency">
|
||||
</div>
|
||||
<div class="loginUser">
|
||||
<div class="loginHead">
|
||||
<h3>Sign In</h3>
|
||||
<p>Please sign in to continue</p>
|
||||
</div>
|
||||
<div class="loginForm">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="formControlWrapper mb-20">
|
||||
<span class="formLabel">Email</span>
|
||||
<div class="input-wrap">
|
||||
<input class="formInput" (keyup)="onKeyUp($event)" formControlName="EmailID"
|
||||
type="text" placeholder="Email Id"
|
||||
[ngClass]="{'errorInput':validationService.onBlur(SignInForm.controls['EmailID'],'required') || validationService.onBlur(SignInForm.controls['EmailID'],'email')}"
|
||||
placeholder="Email Id" />
|
||||
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="#8E8E8E"
|
||||
xmlns="http://www.w3.org/2000/svg" class="loginF_icons">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M20.8 4H3.2C2.54 4 2 4.54 2 5.2v12.4C2 18.92 3.08 20 4.4 20h15.2c1.32 0 2.4-1.08 2.4-2.4V5.2c0-.66-.54-1.2-1.2-1.2ZM5.65 6.3a1 1 0 1 0-1.3 1.52l6.87 5.89a1.2 1.2 0 0 0 .78.285 1.2 1.2 0 0 0 .78-.286l6.87-5.89a1 1 0 1 0-1.3-1.518L12 11.744 5.65 6.301Z"
|
||||
fill="#8E8E8E"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="errorspan"
|
||||
*ngIf="validationService.onBlur(SignInForm.controls['EmailID'],'required')">Please
|
||||
enter email</span>
|
||||
<span class="errorspan"
|
||||
*ngIf="validationService.onBlur(SignInForm.controls['EmailID'],'email')">Please
|
||||
enter valid email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="formControlWrapper mb-0">
|
||||
<div [ngClass]="{'errorpassword':validationService.onBlur(SignInForm.controls['Password'],'required')}">
|
||||
<span class="formLabel">Password</span>
|
||||
<div class="input-wrap">
|
||||
<input class="formInput loginPassword hide-eye-icon"
|
||||
type="{{ showPass ? 'text' : 'password' }}" placeholder="Password" autocomplete="off"
|
||||
(keyup)="onKeyUp($event);errorMessage = ''" formControlName="Password"><svg
|
||||
width="16px" height="16px" viewBox="0 0 24 24" id="lock"
|
||||
data-name="Flat Color" xmlns="http://www.w3.org/2000/svg"
|
||||
class="loginF_icons">
|
||||
<path id="primary"
|
||||
d="M18,8H17V7A5,5,0,0,0,7,7V8H6a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V10A2,2,0,0,0,18,8ZM9,7a3,3,0,0,1,6,0V8H9Z"
|
||||
style="fill: #8E8E8E;"></path>
|
||||
<path id="secondary"
|
||||
d="M12,12a2.5,2.5,0,0,0-1,4.79V18a1,1,0,0,0,2,0V16.79A2.5,2.5,0,0,0,12,12Z"
|
||||
style="fill: #fff;"></path>
|
||||
</svg>
|
||||
<i (click)="viewPass()"
|
||||
[ngClass]="{'pi-eye-slash' : showPass , 'pi-eye': !showPass } "
|
||||
class="pi eyeICon"></i>
|
||||
</div>
|
||||
<span class="errorspan"
|
||||
*ngIf="validationService.onBlur(SignInForm.controls['Password'],'required')">Please
|
||||
enter password </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right mt-10">
|
||||
<a class="forgetPass" (click)="ForgetPassword = true;errorMessage = ''"> Forget Password?</a>
|
||||
</div>
|
||||
<div class="userMessage text-center">
|
||||
<span class="errorspan">{{errorMessage}}</span>
|
||||
</div>
|
||||
<div class="loginFooter mt-20">
|
||||
<button class="btn btn-primary w-100" [disabled]="disableSignInButton" (click)="SignIn()">Sign
|
||||
In</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- MacId varify -->
|
||||
<div class="app-loginContent text-center" *ngIf="ShowUserVerificationBox">
|
||||
<div class="app-loginImage">
|
||||
<img [src]="commonService.environmentObj.cdnBaseUrl + 'assets/icon/send-notification.png'" alt="Image" width="100px">
|
||||
<h4 class="mb-3 mt-10">For your security</h4>
|
||||
<p>Please verify your identification by clicking on the verification link send on your mail which is
|
||||
valid for 5 minutes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- OTP section -->
|
||||
<div class="app-loginContent" *ngIf="OTPSection">
|
||||
<div class="ng-backbtn mb-10">
|
||||
<a (click)="OTPSection = false; errorMessage = ''">
|
||||
<svg fill="var(--color-body-text)" focusable="false" viewBox="0 0 24 24" aria-hidden="true"
|
||||
role="presentation" class="ng-backsvg">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
|
||||
</svg>
|
||||
<span class="ng-backtext">Back to sign in</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="app-loginOtpWrap">
|
||||
<h3 class="temp_loginPassHeading">OTP Verification</h3>
|
||||
<p class="codeText"><span>Code sent to </span> <span>{{Email}}</span></p>
|
||||
<div class="mb-20">
|
||||
<ng-otp-input #ngOtpInput [config]="config"
|
||||
(click)="commonService.focusEmptyOtpInp($event, ngOtpInput)"
|
||||
(onInputChange)="onOtpChange($event)" (keyup.enter)="Verify()"></ng-otp-input>
|
||||
</div>
|
||||
<span class="resendOTP" *ngIf="timerBtn"> Resend code in 00:{{timeLeft >= 0 && timeLeft <= 9?'0' +
|
||||
timeLeft : timeLeft}} </span>
|
||||
<div class="temp_loginOtpResndTxtWrapper mt-10">
|
||||
<a class="temp_loginOtpResndCodeLink" (click)="ReSendOTP()" *ngIf="resendBtn">Resend
|
||||
code</a>
|
||||
</div>
|
||||
<div class="temp_loginResendOtp" *ngIf="!resendBtn && !timerBtn">
|
||||
<h4 class="temp_loginOtpTitle">Didn't receive an OTP?</h4>
|
||||
<a class="temp_loginOtpLink" (click)="loginPage()">Please try again to login</a>
|
||||
</div>
|
||||
<div class="userMessage">
|
||||
<span class="errorspan">{{errorMessage}}</span>
|
||||
</div>
|
||||
<div class="verifyBtn mt-20">
|
||||
<button class="btn btn-primary w-100" (click)="Verify()">Verify</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Forget Password -->
|
||||
<div class="app-loginContent" *ngIf="ForgetPassword">
|
||||
<div class="ng-backbtn mb-3">
|
||||
<a (click)="ForgetPassword = false">
|
||||
<svg fill="#000" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"
|
||||
class="ng-backsvg">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
|
||||
</svg>
|
||||
<span class="ng-backtext">Back to sign in</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="loginHead">
|
||||
<h3>Forget Your Password</h3>
|
||||
</div>
|
||||
<div class="formControlWrapper mb-0">
|
||||
<span class="formLabel">Reset your password using your email</span>
|
||||
<div class="input-wrap">
|
||||
<input formControlName="forgetPassEmail" class="formInput" type="text" placeholder="Email Id"
|
||||
[ngClass]="{'errorInput':validationService.onBlur(SignInForm.controls['forgetPassEmail'],'required') || validationService.onBlur(SignInForm.controls['forgetPassEmail'],'email')}"
|
||||
(keyup)="onKeyup($event)" />
|
||||
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="#8E8E8E"
|
||||
xmlns="http://www.w3.org/2000/svg" class="loginF_icons">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M20.8 4H3.2C2.54 4 2 4.54 2 5.2v12.4C2 18.92 3.08 20 4.4 20h15.2c1.32 0 2.4-1.08 2.4-2.4V5.2c0-.66-.54-1.2-1.2-1.2ZM5.65 6.3a1 1 0 1 0-1.3 1.52l6.87 5.89a1.2 1.2 0 0 0 .78.285 1.2 1.2 0 0 0 .78-.286l6.87-5.89a1 1 0 1 0-1.3-1.518L12 11.744 5.65 6.301Z"
|
||||
fill="#8E8E8E"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="errorspan"
|
||||
*ngIf="validationService.onBlur(SignInForm.controls['forgetPassEmail'],'required')">Please enter
|
||||
email</span>
|
||||
<span class="errorspan"
|
||||
*ngIf="validationService.onBlur(SignInForm.controls['forgetPassEmail'],'email')">Please enter
|
||||
valid email</span>
|
||||
<div class="loginFooter">
|
||||
<button class="btn btn-primary w-100" (click)="SendMail()">Continue</button>
|
||||
<div class="loginNote">
|
||||
<h4> If you don't remember the email address you used to create your account,please <span
|
||||
class="contactUs">
|
||||
Contact us
|
||||
</span>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="app-ResetWrap">
|
||||
<div class="app-loginContent">
|
||||
<div class="ng-backbtn mb-10">
|
||||
<a>
|
||||
<svg fill="var(--color-body-text)" focusable="false" viewBox="0 0 24 24" aria-hidden="true"
|
||||
role="presentation" class="ng-backsvg">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
|
||||
</svg>
|
||||
<span class="ng-backtext">Back to sign in</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="loginHead text-start">
|
||||
<h3 class="mb-2">Password Expired</h3>
|
||||
</div>
|
||||
<span class="loginTxt">Your organization policy requires you to change your password now.</span>
|
||||
<div class="formControlWrapper mb-0 form-input-control mt-10">
|
||||
<span class="formLabel">New Password</span>
|
||||
<input class="loginInput error-input"/>
|
||||
<div style="position: relative;">
|
||||
<input class="form-control loginPassword">
|
||||
<i class="pi eyeICon"></i>
|
||||
</div>
|
||||
<span class="errorspan">
|
||||
Please enter password </span>
|
||||
<span class="errorspan">
|
||||
Please enter valid password </span>
|
||||
</div>
|
||||
<div class="conditiontrue_wrapper">
|
||||
<ul>
|
||||
<li class="PswdCriteria" >One lowercase letter
|
||||
</li>
|
||||
<li class="PswdCriteria"> One uppercase letter
|
||||
</li>
|
||||
<li class="PswdCriteria"> One number</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="PswdCriteria"> One special character</li>
|
||||
<li class="PswdCriteria"> 8
|
||||
characters minimum</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="formControlWrapper">
|
||||
<span class="formLabel">Confirm New Password</span>
|
||||
<div class="" style="position: relative;">
|
||||
<input class="form-control loginPassword">
|
||||
<i class="pi eyeICon">
|
||||
</i>
|
||||
</div>
|
||||
<span class="errorspan"> Please
|
||||
enter confirm password </span>
|
||||
</div>
|
||||
<div class="verifyBtn">
|
||||
<button class="btn btn-primary w-100" >Set Password</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<p-toast></p-toast>
|
||||
Reference in New Issue
Block a user