csr_webapp/src/app/components/register/register-component.html
venbatechnologies@gmail.com 56d5e3fb8b Root folder changed
2020-01-13 15:35:13 +05:30

123 lines
11 KiB
HTML
Executable File

<div class="relative">
<div class="">
<div fxLayout="row" fxLayoutAlign="center start" >
<div fxLayout="column" fxFlex.xl="100" fxFlex.lg="200" fxFlex.md="100" fxFlex.sm="100" fxFlex.xs="100">
<mat-card class="login-session">
<div class="close_icon" (click)="closeDialog()">
<mat-icon >close</mat-icon>
</div>
<p class="mb-0" style="text-align: right;">Already Registered ? <a (click)="loginScreen()" class="mat-text-primary">Login Here</a></p>
<div>
<h2 class="base-border">Register as a new user</h2>
<p>We would need some of your information to facilitate your contributions and keep you updated on the progress of the projects or new projects</p>
<form [formGroup]="go_reg">
<div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%">
<input matInput placeholder="Name" type="text" name="name" formControlName="name" required>
<mat-error *ngIf="go_reg.controls['name'].errors">Name is Required</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required (change)="checkExists($event.target.value,'email')">
<mat-error *ngIf="go_reg.controls['email'].hasError('required')">Email is required</mat-error>
<mat-error *ngIf="go_reg.controls['email'].hasError('email')">Invalid Email</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Confirm E Mail" type="email" name="confirm_email" formControlName="confirm_email" required (keyup)="checkValidators($event.target.value,'email')">
<mat-error *ngIf="go_reg.controls['confirm_email'].hasError('required')">Email is required</mat-error>
<mat-error *ngIf="go_reg.controls['confirm_email'].hasError('email')">Invalid Email</mat-error>
</mat-form-field>
<div style="color:red;font-size: 14px;float: right" *ngIf="email_pattern_error"> Email & Confirm Email does not match.</div>
<mat-form-field style="width: 100%">
<input matInput placeholder="Phone Number" type="text" name="mobile" inputmode="numeric" pattern="[0-9]*" OnlyNumber="true" formControlName="mobile" required min="10" max="12" minlength="10" maxlength="12" (change)="checkExists($event.target.value,'mobile')">
<mat-error *ngIf="go_reg.controls['mobile'].hasError('required')">mobile number is required</mat-error>
<mat-error *ngIf="go_reg.controls['mobile'].hasError('min')">minimum 10 digit required</mat-error>
<mat-error *ngIf="go_reg.controls['mobile'].hasError('max')">maximum 12 digit is allowed</mat-error>
</mat-form-field>
<!-- <mat-form-field style="width: 100%">
<input matInput [matDatepicker]="picker" [max]="maxDate" placeholder="Date of Birth" formControlName="user_dob">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field> -->
<mat-form-field style="width: 100%">
<input matInput placeholder="Password" type="password" name="password" formControlName="password" required >
<mat-error *ngIf="go_reg.controls['password'].hasError('required')">Password is Required</mat-error>
<mat-error *ngIf="go_reg.controls['password'].hasError('minlength')">Password must be minimum of 4 Characters</mat-error>
<mat-error *ngIf="go_reg.controls['password'].hasError('maxlength')">Password must be maximum of 12 Characters</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Confirm Password" type="password" name="confirm_password" formControlName="confirm_password" required (keyup)="checkValidators($event.target.value,'pass')">
<mat-error *ngIf="go_reg.controls['confirm_password'].errors">Confirm Password is Required</mat-error>
</mat-form-field>
<div style="color:red;font-size: 14px;float: right" *ngIf="pass_pattern_error"> Password & Confirm Password does not match.</div>
<!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 25%;">
<input matInput placeholder="Phone OTP" type="number" name="pOTP" formControlName="pOTP" required>
</mat-form-field>
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 25%;">
<input matInput placeholder="Email OTP" type="emailOTP" name="emailOTP" formControlName="emailOTP" required>
</mat-form-field>
<button class="mat-green" mat-raised-button>Verify</button>
</div> -->
</div>
<hr>
<div class="mt-1 mb-1">
<label class="mr-1">Registering as on Organisation ?</label>
<mat-slide-toggle name="slideToggle" required (change)="change_fun($event)">
</mat-slide-toggle>
</div>
<div fxLayout="column" fxLayoutAlign="start stretch" formGroupName="org_info">
<div *ngIf="slide1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Organisation Name" type="text" name="orgname" formControlName="orgname" >
<mat-error *ngIf="go_reg.controls['org_info']['controls'].orgname.hasError('required')">Organisation Name is Required</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%;">
<textarea matInput placeholder="Registered Address" name="org_address" formControlName="org_address" ></textarea>
</mat-form-field>
</div>
<div class="mt-1 mb-1">
<label class="mr-1">Do you want to avail 80G Exemption</label>
<mat-slide-toggle name="slideToggle" (change)="change_fun2($event)" >
</mat-slide-toggle>
</div>
<div *ngIf="slide2">
<mat-form-field style="width: 100%">
<mat-label>PAN of the Organisation</mat-label>
<input matInput placeholder="Format:ACDEF1234Z" type="text" name="org_pan" max="10" maxlength="10" formControlName="org_pan" oninput="this.value = this.value.toUpperCase()">
<mat-error *ngIf="go_reg.controls['org_info']['controls'].org_pan.errors">Enter a valid PAN number</mat-error>
</mat-form-field>
</div>
</div>
<mat-checkbox formControlName="profile_share"> </mat-checkbox>&nbsp; <span tex-wrap>I hereby give my consent to share details of my contribution in the public domain</span><br/><br/>
<mat-checkbox formControlName="notify_pref" text-wrap></mat-checkbox>&nbsp;
<span tex-wrap>I hereby give my consent to receive periodic updates through email and other modes</span>
<!-- <mat-label>Conscent profile share to public</mat-label>
<mat-radio-group placeholder="Consent profile share to public" formControlName="profile_share">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <mat-radio-button value="yes" >Yes</mat-radio-button>&nbsp;
<mat-radio-button value="no">No</mat-radio-button>
</mat-radio-group><br/><br/>
<mat-label>Conscent Receive updates via Email</mat-label>
<mat-radio-group aria-label="Consent Receive updates via Email" formControlName="notify_pref">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <mat-radio-button value="yes" >Yes</mat-radio-button>&nbsp;
<mat-radio-button value="no">No</mat-radio-button>
</mat-radio-group><br/> --><br/><br/>
<p class="privacy-policy-text">By registering, you agree to our Policy
and confirm that you have read our <a class="footer-privacy" href="#/privacy-policy" target="_blank">Privacy Policy</a></p>
<button class="mat-red" mat-raised-button (click)="csrUserRegistration()">Register</button>
<!-- <div>
<p>Sign Up Using</p> <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a><a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a>
</div> -->
</form>
</div>
</mat-card>
</div>
</div>
</div>
</div>