Move auth component files.

This commit is contained in:
Spencer Ofwiti
2021-02-03 13:52:31 +03:00
parent f966a24014
commit 81c6b05a42
10 changed files with 160 additions and 304 deletions

View File

@@ -2,98 +2,68 @@
<div class="row justify-content-center mt-5 mb-5">
<div class="col-lg-6 col-md-8 col-sm-10">
<div class="card">
<!-- Logo-->
<div class="card-header pt-4 pb-4 text-center bg-dark">
<mat-card-title class="card-header pt-4 pb-4 text-center bg-dark">
<a routerLink="/">
<!-- <span><img src="assets/images/logo.png" alt="" height="18"></span>-->
<h1 class="text-white">CIC CLIENT</h1>
<h1 class="text-white">CICADA</h1>
</a>
</div>
<div class="card-body p-4">
</mat-card-title>
<div id="one" style="display: block" class="card-body p-4">
<div class="text-center w-75 m-auto">
<h4 class="text-dark-50 text-center mt-0 font-weight-bold">Sign Up</h4>
<h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
</div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<form [formGroup]="keyForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required placeholder="Enter your email" formControlName="email" [ngClass]="{ 'is-invalid': submitted && form.email.errors }">
<div *ngIf="submitted && form.email.errors" class="invalid-feedback">
<div *ngIf="form.email.errors.required">Email is required</div>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Private Key</mat-label>
<textarea matInput style="height: 30rem" name="privateKeyAsc" id="privateKeyAsc" formControlName="key"
placeholder="Enter your private key..." [errorStateMatcher]="matcher"></textarea>
<div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">
<mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
</div>
</div>
</mat-form-field>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password" class="form-control" placeholder="Enter your password" formControlName="password" [ngClass]="{ 'is-invalid': submitted && form.password.errors }" required>
<div class="input-group-append" data-password="false" appPasswordToggle [id]="'password'" [iconId]="'icon'">
<div class="input-group-text">
<span id="icon" class="fa fa-eye"></span>
</div>
</div>
<div *ngIf="submitted && form.password.errors" class="invalid-feedback">
<div *ngIf="form.password.errors.required">Password is required</div>
<div *ngIf="form.password.errors.hasCapitalCase">Should contain at least 1 uppercase alphabet</div>
<div *ngIf="form.password.errors.hasSmallCase">Should contain at least 1 lowercase alphabet</div>
<div *ngIf="form.password.errors.hasNumber">Should contain at least 1 number</div>
<div *ngIf="form.password.errors.minlength">Should be at least 8 characters</div>
</div>
</div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirmPassword" class="form-control" placeholder="Enter your password" formControlName="confirmPasword" [ngClass]="{ 'is-invalid': submitted && form.confirmPassword.errors }" required>
<div class="input-group-append" data-password="false">
<div class="input-group-text" appPasswordToggle [id]="'confirmPassword'" [iconId]="'icon2'">
<span id="icon2" class="fa fa-eye"></span>
</div>
</div>
<div *ngIf="submitted && form.confirmPassword.errors" class="invalid-feedback">
<div *ngIf="form.confirmPassword.errors.required">Password is required</div>
<div *ngIf="form.confirmPassword.errors.NoPasswordMatch">Your passwords do not match</div>
</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox-signup" formControlName="terms" [ngClass]="{ 'is-invalid': submitted && form.terms.errors }" required>
<label class="custom-control-label" for="checkbox-signup">I accept <a href="#" class="text-muted">Terms and Conditions</a></label>
<div *ngIf="submitted && form.terms.errors" class="invalid-feedback">
<div *ngIf="form.terms.errors.required">Accept terms and conditions to continue!</div>
</div>
</div>
</div>
<div class="form-group mb-0 text-center">
<button matRipple mat-raised-button color="primary" type="submit" [disabled]="loading">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Sign Up
</button>
</div>
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
<button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Add Key
</button>
</form>
</div> <!-- end card-body -->
</div>
<!-- end card -->
</div>
<div id="two" style="display: none" class="card-body p-4 align-items-center">
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">Already have account? <a routerLink="/auth/key" class="text-muted ml-1"><b>Log In</b></a></p>
</div> <!-- end col-->
</div>
<!-- end row -->
<div class="text-center w-75 m-auto">
<h4 class="text-dark-50 text-center font-weight-bold">Enter Passphrase</h4>
</div>
</div> <!-- end col -->
<form [formGroup]="passphraseForm" (ngSubmit)="login()">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Passphrase</mat-label>
<input matInput name="state" id="state" formControlName="passphrase"
placeholder="Enter your passphrase..." [errorStateMatcher]="matcher">
<div *ngIf="submitted && passphraseFormStub.passphrase.errors" class="invalid-feedback">
<mat-error *ngIf="passphraseFormStub.passphrase.errors.required">Passphrase is required.</mat-error>
</div>
</mat-form-field>
<div class="form-group mb-0 text-center">
<button mat-raised-button matRipple color="primary" type="submit">
<!-- <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>-->
Login
</button>
</div>
</form>
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">Change private key? <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a></p>
</div> <!-- end col-->
</div>
<!-- end row -->
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
<!--<app-footer></app-footer>-->