113 lines
7.6 KiB
HTML
113 lines
7.6 KiB
HTML
|
|
<ng-scrollbar class="scrollHV">
|
|
<mat-toolbar>
|
|
<span style="text-align: center;">Appointment</span>
|
|
<h3 style="margin-left:35% ;">{{busName}}</h3>
|
|
</mat-toolbar>
|
|
<div class="container mt-1">
|
|
<div fxLayout="row wrap" fxLayoutAlign="center">
|
|
<div class="column mat-width" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
|
|
<mat-card class="p-2 radius">
|
|
<h2 class="base-border">Customer Information</h2>
|
|
<form [formGroup]="form" (ngSubmit)="submit()">
|
|
<div fxLayout="column" fxLayoutAlign="start stretch">
|
|
<mat-form-field style="width: 100%">
|
|
<input matInput placeholder="Name" type="text" name="cusName" formControlName="cusName" required>
|
|
<mat-error *ngIf="myError('cusName', 'required')">Name is required</mat-error>
|
|
<mat-error *ngIf="myError('cusName', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field style="width: 100%">
|
|
<input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required>
|
|
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
|
Please enter a valid email address
|
|
</mat-error>
|
|
<mat-error *ngIf="myError('email', 'required')">email is required</mat-error>
|
|
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
|
Email is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<div [ngSwitch]="otpData">
|
|
<div fxLayout="row">
|
|
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
|
|
<mat-form-field style="width: 100%">
|
|
<input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo" [readonly]="verifyOTP == '1'" required>
|
|
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
|
|
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
|
|
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
|
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
<div id="sign-in-button"></div>
|
|
</div>
|
|
<div id="sign-in-button"></div>
|
|
<div *ngIf="verifyOTP != '1'" fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
|
|
<button mat-raised-button type="button" (click)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
|
|
|
|
</div>
|
|
<span *ngIf="verifyOTP == '1'"><mat-icon style="color: #4CAF50;">verified</mat-icon></span>
|
|
</div>
|
|
<div *ngSwitchCase="1">
|
|
<div fxLayout="row" *ngIf="verifyOTP != '1'">
|
|
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
|
|
<mat-form-field style="width: 100%">
|
|
<input matInput placeholder="Enter OTP" formControlName="otp" type="text" maxlength="6">
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
|
|
<button type="button" (click)="verify(1)" mat-raised-button class="mr-1 mb-1" matTooltip="VERIFY" matTooltipPosition="below" style="background-color: #4CAF50;color:#fff;">VERIFY</button>
|
|
</div>
|
|
</div>
|
|
<div fxLayout="row" *ngIf="verifyOTP != '1'">
|
|
<button type="button" *ngIf="timeLeft != 0" mat-raised-button color="primary">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
|
<button type="button" *ngIf="timeLeft == 0" mat-raised-button color="primary" (click)="resendOTP(1)">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<mat-form-field style="width: 100%">
|
|
<input matInput placeholder="Address" type="text" name="address" formControlName="address_1">
|
|
<mat-error *ngIf="myError('address_1', 'required')">Address is required</mat-error>
|
|
<mat-error *ngIf="myError('address_1', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field style="width: 100%" class="mb-1">
|
|
<input matInput placeholder="State" type="text" name="state" formControlName="state">
|
|
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
|
|
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field style="width: 100%" class="mb-1">
|
|
<input matInput placeholder="City" type="text" name="city" formControlName="city">
|
|
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
|
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field style="width: 100%" class="mb-1">
|
|
<input matInput placeholder="Pincode" type="text" name="pincode" formControlName="pincode">
|
|
<mat-error *ngIf="myError('pincode', 'required')">City is required</mat-error>
|
|
<mat-error *ngIf="myError('pincode', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
<button class="mat-green" type="submit" mat-raised-button>Submit</button>
|
|
</div>
|
|
</form>
|
|
</mat-card>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</ng-scrollbar>
|
|
<footer>
|
|
<p>
|
|
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- <div class="contain">
|
|
<div class="row d-flex align-items-center justify-content-center">
|
|
<form class="col-md-6">
|
|
<div class="card px-5 py-5">
|
|
<div class="form-input">
|
|
<input type="text" name="phoneNumber" placeholder="Phone Number" class="form-control"
|
|
placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" min="10" max="15">
|
|
</div>
|
|
<button class="btn btn-success mt-4 signup" (click)="getOTP()">Get OTP</button> -->
|
|
|
|
<!-- </div>
|
|
</form>
|
|
</div>
|
|
--> |