opensourcecode/Hyper-M_User_Portal/src/app/common/signup-modal/signup-modal.component.html

<!-- Button trigger modal -->

<!-- Modal -->
<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <!-- <button class="btn btn-primary close" data-dismiss="modal" aria-label="Close" (click)="modelClose()" ><img src="assets/img/close_btn.png"></button> -->
            <div class="modal-body">

                <div class="row align-items-center">


                    <div class="main_content col-sm-12" *ngIf="!otp_sucess">
                        <!-- First  -->
                        <div class="col  content section1" [ngClass]="section==1||section==2 ?'section_close':''">
                            <div class="col col-sm-4 logo">
                                <img src="assets/img/shield.png" />
                            </div>
                            <div class="col col-sm-8">
                                <h2>Confirmation</h2>
                                <p>Your Registered Mobile Number</p>
                                <h5 id="userMobile"></h5>
                                <div class="btn_center text-center">
                                    <button class="btn primary fixed float-left" (click)="reject()">No</button>
                                    <button class="btn primary fixed float-right" (click)="accept()">yes</button>
                                </div>
                            </div>
                        </div>

                        <!-- Second  -->
                        <div class="col col-sm-12 content section2" [ngClass]="section==1 ?'section_open':''">

                            <div class="col col-sm-4 logo">
                                <img src="assets/img/otp.png" />
                            </div>
                            <div class="col col-sm-8">
                                <h2>OTP Sent</h2>
                                <p>Your OTP have been sent to your
                                    <span id="userMobile">
                                        <b>{{user_mobile}}</b>
                                    </span>
                                </p>
                                <div class="input_left">
                                    <form [formGroup]="otpform" (keyup.enter)="onSubmitOtp()">
                                        <div class="form-group box">
                                            <input type="password" id="otp1" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp1" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
                                                formControlName="otp1" autocomplete="off" required>
                                            <input type="password" id="otp2" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp2" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
                                                formControlName="otp2" autocomplete="off" required>
                                            <input type="password" id="otp3" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp3" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
                                                formControlName="otp3" autocomplete="off" required>
                                            <input type="password" id="otp4" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp4" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
                                                formControlName="otp4" autocomplete="off" required>
                                            <div class="color_error shake" *ngIf="otp_error!=''">
                                                <a class="text-left shake">
                                                    <img src="assets/img/error.png" />{{otp_error}} </a>
                                            </div>
                                        </div>
                                    </form>


                                    <!-- <form [formGroup]="otpform" (keyup.enter)="onSubmitOtp()">
                          <div class="form-group">
                              <input type="password" id="otp" class="form-control password" [maxlength]="4" [(ngModel)]="otp" formControlName="otp" autocomplete="off" required>
                              <label for="otp" class="control-label form-control-placeholder">Enter OTP</label>
                              <div class="color_error shake" *ngIf="!otpform.controls['otp'].valid && otpform.controls['otp'].touched&&!otp_error!=''&&resend!">
                                  <a class="text-left shake">
                                      <img src="assets/img/error.png" />Enter the SM PIN</a>
                              </div>
                              <div class="color_error shake" *ngIf="otp_error!=''">
                                  <a class="text-left shake">
                                      <img src="assets/img/error.png" />{{otp_error}} </a>
                              </div>
                              
                          </div>
                          </form> -->

                                    <div class="resent" *ngIf="resend_enable">
                                        <a (click)="resendOtp()">Resent OTP</a>
                                    </div>



                                </div>
                                <!-- <h6 *ngIf="!resend_enable">OTP Expires in {{countdown}} Sec</h6>
                  <button class="btn primary clear fixed float-right" (click)="onSubmitOtp()">Submit</button>
             -->


                                <h6 *ngIf="!resend_enable  && countdown!='1:0'">OTP Expires in {{countdown}} Sec</h6>
                                <button class="btn primary fixed float-right" (click)="onSubmitOtp()">Submit</button>
                                <button class="btn primary fixed float-right" (click)="onCancelOtp()">Cancel</button>
                            </div>
                            <div class="main_content" *ngIf="otp_sucess">
                                <div class="col col-sm-8 content success">
                                    <img src="assets/img/success.gif" />
                                    <h2>OTP Verified successfully</h2>
                                    <button class="btn primary fixed float-right" (click)="gotoChangePassword()" data-dismiss="modal" aria-label="Close">continue</button>
                                </div>
                            </div>

                        </div>

                        <!-- Third  -->
                        <div class="col col-sm-12 content section3" [ngClass]="section==2 ?'section_open':''">
                            <div class="col col-sm-4 logo">
                                <img src="assets/img/chat.png" />
                            </div>
                            <div class="col col-sm-8 mt34">
                                <h2>Simple Step to Register Your Mobile number</h2>
                                <ul class="left72">
                                    <li>Contact your dealer to update your mobile number</li>
                                    <li>Contact your AM to approve in the DMS</li>
                                    <li>After 24 hours try again</li>
                                </ul>
                                <button class="btn primary fixed float-right" data-dismiss="modal" aria-label="Close" (click)="contactDealer()">ok</button>
                            </div>
                        </div>

                    </div>

                    <div class="main_content end_success" *ngIf="otp_sucess">
                        <div class="col col-sm-4 logo">
                            <img src="assets/img/otp.png" />
                        </div>
                        <div class="col col-sm-8 success">
                            <img src="assets/img/success.gif" />
                            <h2>OTP Verified successfully</h2>
                            <button class="btn primary fixed float-right" (click)="gotoSetPassword()" data-dismiss="modal" aria-label="Close">continue</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>