opensourcecode/Hyper-M_UserPortal/src/app/common/login/login.component.html

<!-- <app-main-header></app-main-header> -->
<app-signup-modal *ngIf="show_div"></app-signup-modal>
<app-forgot-password *ngIf="show_div"></app-forgot-password>
<div class="login">
    <div class="left-part">
        <h4>HYPER- M  <br>
            AI based Ecosystem Addresses Children Digital Risk</h4>
        <img src="assets/img/Hyper-M-Web_bg.png" alt="">
    </div>
    <div class="right-part">
        <div class="login_box">
            <div class="star_logo" *ngIf="!viewForgot">
                <!-- <h3>Welcome to </h3>
                <h1>
                    <span class="primary_color">Hyper-M</span></h1> -->
                    <img class="star_img" src="assets/img/star_logo.png">
            </div>
            <div *ngIf="viewForgot">
                <div class="top_icon">
                    <img src="assets/img/setpassword.png">
                </div>
                <div>
                    <h1 class="text-center sub">
                        <span class="">FORGOT PASSWORD</span>
                    </h1>
                </div>
            </div>
            <form [formGroup]="lform" class="form1" [ngClass]="viewSignUp==true||viewForgot==true ?'sliding_close':viewSignIn==true ?'sliding_open':''">
                <div class="form-group">
                    <input type="text" id="smpin"  class="form-control user" [(ngModel)]="smpin" [maxlength]="20" formControlName="smpin" autocomplete="off"
                        required>
                    <label for="smpin" class="control-label form-control-placeholder">Username</label>
                    <div class="color_error shake" *ngIf="!lform.controls['smpin'].valid &&signIn_click&&signin_error==''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />Please enter the Username</a>
                    </div>
                    <div class="info" (click)="showInfo()">
                        <img src="assets/img/info.png" />
                        <div class="info_box" *ngIf="show_info">
                            <p>
                                <b>Username:</b>
                            </p>
                            <p class="info_point">If you are dealer staff enter the SMPIN for registering and logging into the system. </p>
                            <p class="info_point">If you are Hyper-M staff enter your Employee ID for registering and logging into the system.</p>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="{{type}}" id="password" class="form-control password" [(ngModel)]="password" [maxlength]="20" formControlName="password"
                        autocomplete="off" required>
                    <label for="password" class="control-label form-control-placeholder">Password</label>
                    <div class="color_error shake" *ngIf="!lform.controls['password'].valid&&signIn_click&&signin_error==''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />Please enter the password</a>
                    </div>
                    <div class="color_error shake" *ngIf="signin_error!=''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />{{signin_error}} </a>
                    </div>
                    <div class="view_eye" *ngIf="type=='text'" (click)="toggleShow()">
                        <img src="assets/img/show.png" />
                    </div>
                    <div class="hide_eye" *ngIf="type=='password'" (click)="toggleShow()">
                        <img src="assets/img/hide.png" />
                    </div>
                </div>
                <div class="forgot text-right">
                    <a (click)="onForgotPassword()">Forgot Password?</a>
                </div>
                <button type="submit" class="btn primary" (click)="onSignIn()">LOGIN</button>
                <div class="instuction text-center">
                    Not Yet Registered?
                    <a>
                        <span (click)="goToSingUp()">Signup</span>
                    </a>
                </div>
            </form>
            <form (keyup.enter)="onSignIn()" class="form2" [ngClass]="viewSignUp==true ?'sliding_open':viewSignIn==true ?'sliding_close':''">
                <div class="form-group">
                    <input type="text" id="smpinid" class="form-control user"  [maxlength]="10" [(ngModel)]="smpinid" name="smpinid" autocomplete="off"
                        required>
                    <label for="smpinid" class="control-label form-control-placeholder">Username</label>
                    <div class="color_error shake" *ngIf="signUpSubmit && smpinid==''&&signup_error==''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />Please enter the Username</a>
                    </div>
                    <div class="color_error shake" *ngIf="signup_error!=''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />{{signup_error}} </a>
                    </div>
                </div>
                <button type="submit" class="btn primary" (click)="onSignUp()">SIGN UP</button>
                <div class="instuction text-center">
                    Already Registered?
                    <a>
                        <span (click)="goToLogin()">Login</span>
                    </a>
                </div>
            </form>
    
            <form class="form3 form_2" [ngClass]="viewForgot==true ?'sliding_open':viewSignIn==true ?'sliding_close':''">
                <div class="form-group user">
                    <input type="text" id="smpin_forgot" class="form-control"  [maxlength]="10" [(ngModel)]="smpin_forgot" name="smpin_forgot"
                        autocomplete="off" required>
                    <label for="smpin_forgot" class="control-label form-control-placeholder">Username</label>
                    <div class="info" (click)="showInfo()">
                        <img src="assets/img/info.png" />
                        <div class="info_box" *ngIf="show_info">
                            <p>
                                <b>Username:</b>
                            </p>
                            <p class="info_point">If you are dealer staff enter the SMPIN for registering and logging into the system </p>
                            <p class="info_point">If you are Hyper-M staff enter your Employee ID for registering and logging into the system</p>
                        </div>
                    </div>
                    <div class="color_error shake" *ngIf="forgot_Submit&& smpin_forgot==''&&forgot_error==''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />Please enter the Username</a>
                    </div>
                    <div class="color_error shake" *ngIf="forgot_error!=''">
                        <a class="text-left shake">
                            <img src="assets/img/error.png" />{{forgot_error}} </a>
                    </div>
                </div>
                <button type="submit" class="btn primary" (click)="forgotSubmit()">GET OTP</button>
                <div class="instuction text-center">
                    Already Registered?
                    <a>
                        <span (click)="backToLogin()">Login</span>
                    </a>
                </div>
            </form>
        </div>
    </div>

</div>