From 65f3dae4b1a0c64d5db32ba22f0d5523fa08a5f3 Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Mon, 28 Dec 2020 12:11:25 +0300 Subject: [PATCH] Add auth module. --- src/app/auth/_directives/index.ts | 1 + .../password-toggle.directive.spec.ts | 8 ++ .../_directives/password-toggle.directive.ts | 38 +++++++ src/app/auth/add-key/add-key.component.html | 56 +++++++++++ src/app/auth/add-key/add-key.component.scss | 0 .../auth/add-key/add-key.component.spec.ts | 25 +++++ src/app/auth/add-key/add-key.component.ts | 64 ++++++++++++ src/app/auth/auth-routing.module.ts | 16 +++ src/app/auth/auth.component.html | 99 +++++++++++++++++++ src/app/auth/auth.component.scss | 0 src/app/auth/auth.component.spec.ts | 25 +++++ src/app/auth/auth.component.ts | 51 ++++++++++ src/app/auth/auth.module.ts | 31 ++++++ 13 files changed, 414 insertions(+) create mode 100644 src/app/auth/_directives/index.ts create mode 100644 src/app/auth/_directives/password-toggle.directive.spec.ts create mode 100644 src/app/auth/_directives/password-toggle.directive.ts create mode 100644 src/app/auth/add-key/add-key.component.html create mode 100644 src/app/auth/add-key/add-key.component.scss create mode 100644 src/app/auth/add-key/add-key.component.spec.ts create mode 100644 src/app/auth/add-key/add-key.component.ts create mode 100644 src/app/auth/auth-routing.module.ts create mode 100644 src/app/auth/auth.component.html create mode 100644 src/app/auth/auth.component.scss create mode 100644 src/app/auth/auth.component.spec.ts create mode 100644 src/app/auth/auth.component.ts create mode 100644 src/app/auth/auth.module.ts diff --git a/src/app/auth/_directives/index.ts b/src/app/auth/_directives/index.ts new file mode 100644 index 0000000..acdd4fe --- /dev/null +++ b/src/app/auth/_directives/index.ts @@ -0,0 +1 @@ +// export * from 'password-toggle.directive'; diff --git a/src/app/auth/_directives/password-toggle.directive.spec.ts b/src/app/auth/_directives/password-toggle.directive.spec.ts new file mode 100644 index 0000000..dab2c6e --- /dev/null +++ b/src/app/auth/_directives/password-toggle.directive.spec.ts @@ -0,0 +1,8 @@ +import { PasswordToggleDirective } from './password-toggle.directive'; + +describe('PasswordToggleDirective', () => { + it('should create an instance', () => { + const directive = new PasswordToggleDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/auth/_directives/password-toggle.directive.ts b/src/app/auth/_directives/password-toggle.directive.ts new file mode 100644 index 0000000..c6b998b --- /dev/null +++ b/src/app/auth/_directives/password-toggle.directive.ts @@ -0,0 +1,38 @@ +import {Directive, ElementRef, Input, Renderer2} from '@angular/core'; + +@Directive({ + selector: '[appPasswordToggle]' +}) +export class PasswordToggleDirective { + @Input() + id: string; + + @Input() + iconId: string; + + constructor( + private elementRef: ElementRef, + private renderer: Renderer2, + ) { + this.renderer.listen(this.elementRef.nativeElement, 'click', () => { + this.togglePasswordVisibility(); + }); + } + + togglePasswordVisibility(): void { + const password = document.getElementById(this.id); + const icon = document.getElementById(this.iconId); + // @ts-ignore + if (password.type === 'password') { + // @ts-ignore + password.type = 'text'; + icon.classList.remove('fa-eye'); + icon.classList.add('fa-eye-slash'); + } else { + // @ts-ignore + password.type = 'password'; + icon.classList.remove('fa-eye-slash'); + icon.classList.add('fa-eye'); + } + } +} diff --git a/src/app/auth/add-key/add-key.component.html b/src/app/auth/add-key/add-key.component.html new file mode 100644 index 0000000..f482090 --- /dev/null +++ b/src/app/auth/add-key/add-key.component.html @@ -0,0 +1,56 @@ +
+
+
+
+ + +

CICADA

+ + +
+ +
+

Add Private Key

+
+ +
+ + + Private Key + + Private Key is required. + + + + +
+
+ +
+
+
+
diff --git a/src/app/auth/add-key/add-key.component.scss b/src/app/auth/add-key/add-key.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/auth/add-key/add-key.component.spec.ts b/src/app/auth/add-key/add-key.component.spec.ts new file mode 100644 index 0000000..8c4d44f --- /dev/null +++ b/src/app/auth/add-key/add-key.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddKeyComponent } from './add-key.component'; + +describe('AddKeyComponent', () => { + let component: AddKeyComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddKeyComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddKeyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth/add-key/add-key.component.ts b/src/app/auth/add-key/add-key.component.ts new file mode 100644 index 0000000..66ba825 --- /dev/null +++ b/src/app/auth/add-key/add-key.component.ts @@ -0,0 +1,64 @@ +import {AfterViewInit, Component, OnInit, Renderer2} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {CustomErrorStateMatcher} from '../../_helpers'; +import {AuthService} from '../../_services'; + +@Component({ + selector: 'app-add-key', + templateUrl: './add-key.component.html', + styleUrls: ['./add-key.component.scss'] +}) +export class AddKeyComponent implements OnInit, AfterViewInit { + keyForm: FormGroup; + passphraseForm: FormGroup; + submitted: boolean = false; + loading: boolean = false; + matcher = new CustomErrorStateMatcher(); + + constructor( + private authService: AuthService, + private formBuilder: FormBuilder, + private renderer: Renderer2 + ) { } + + ngAfterViewInit(): void { + console.debug(window.location); + const xhr = new XMLHttpRequest(); + xhr.responseType = 'text'; + xhr.open('GET', window.location.origin + '/privatekey.asc'); + xhr.onload = (e) => { + if (xhr.status !== 200) { + console.warn('failed to autoload private key ciphertext'); + return; + } + (document.getElementById('privateKeyAsc') as HTMLInputElement).value = xhr.responseText; + }; + xhr.send(); + } + + ngOnInit(): void { + this.keyForm = this.formBuilder.group({ + key: ['', Validators.required], + }); + this.passphraseForm = this.formBuilder.group({ + passphrase: ['', Validators.required], + }); + } + + get keyFormStub(): any { return this.keyForm.controls; } + get passphraseFormStub(): any { return this.passphraseForm.controls; } + + onSubmit(): void { + this.submitted = true; + + if (this.keyForm.invalid) { return; } + + this.loading = true; + this.authService.setKey(this.keyFormStub.key.value).then(); + } + + login(): void { + if (this.passphraseForm.invalid) { return; } + this.authService.login(); + } +} diff --git a/src/app/auth/auth-routing.module.ts b/src/app/auth/auth-routing.module.ts new file mode 100644 index 0000000..f4e0325 --- /dev/null +++ b/src/app/auth/auth-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { AuthComponent } from './auth.component'; +import {AddKeyComponent} from './add-key/add-key.component'; + +const routes: Routes = [ + { path: '', component: AuthComponent }, + { path: 'key', component: AddKeyComponent }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AuthRoutingModule { } diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html new file mode 100644 index 0000000..645c061 --- /dev/null +++ b/src/app/auth/auth.component.html @@ -0,0 +1,99 @@ +
+
+
+
+ +
+ + +

CIC CLIENT

+ +
+ +
+ +
+

Sign Up

+
+ +
+ +
+ + +
+
Email is required
+
+
+ +
+ +
+ +
+
+ +
+
+
+
Password is required
+
Should contain at least 1 uppercase alphabet
+
Should contain at least 1 lowercase alphabet
+
Should contain at least 1 number
+
Should be at least 8 characters
+
+
+
+ +
+ +
+ +
+
+ +
+
+
+
Password is required
+
Your passwords do not match
+
+
+
+ +
+
+ + +
+
Accept terms and conditions to continue!
+
+
+
+ +
+ +
+
{{ error }}
+ +
+
+
+ + +
+
+

Already have account? Log In

+
+
+ + +
+
+ +
+ + diff --git a/src/app/auth/auth.component.scss b/src/app/auth/auth.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/auth/auth.component.spec.ts b/src/app/auth/auth.component.spec.ts new file mode 100644 index 0000000..2e9ddd9 --- /dev/null +++ b/src/app/auth/auth.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AuthComponent } from './auth.component'; + +describe('AuthComponent', () => { + let component: AuthComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AuthComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts new file mode 100644 index 0000000..6eac975 --- /dev/null +++ b/src/app/auth/auth.component.ts @@ -0,0 +1,51 @@ +import { Component, OnInit } from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {CustomValidator} from '../_helpers'; + +@Component({ + selector: 'app-auth', + templateUrl: './auth.component.html', + styleUrls: ['./auth.component.scss'] +}) +export class AuthComponent implements OnInit { + registerForm: FormGroup; + submitted: boolean = false; + loading: boolean = false; + error: any; + + constructor( + private formBuilder: FormBuilder, + ) { } + + ngOnInit(): void { + this.registerForm = this.formBuilder.group({ + email: ['', Validators.required], + password: ['', [ + // 1. Password Field is Required + Validators.required, + // 2. check whether the entered password has a number + CustomValidator.patternValidator(/\d/, { hasNumber: true }), + // 3. check whether the entered password has upper case letter + CustomValidator.patternValidator(/[A-Z]/, { hasCapitalCase: true }), + // 4. check whether the entered password has a lower-case letter + CustomValidator.patternValidator(/[a-z]/, { hasSmallCase: true }), + // 6. Has a minimum length of 8 characters + Validators.minLength(8)]], + confirmPassword: ['', Validators.required], + terms: ['', Validators.required] + }, { + // validator for the form group + validator: CustomValidator.passwordMatchValidator + }); + } + + get form(): any { return this.registerForm.controls; } + + onSubmit(): void { + this.submitted = true; + + if (this.registerForm.invalid) { return; } + + this.loading = true; + } +} diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts new file mode 100644 index 0000000..a804bc3 --- /dev/null +++ b/src/app/auth/auth.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AuthRoutingModule } from './auth-routing.module'; +import { AuthComponent } from './auth.component'; +import {ReactiveFormsModule} from '@angular/forms'; +import {PasswordToggleDirective} from './_directives/password-toggle.directive'; +import { AddKeyComponent } from './add-key/add-key.component'; +import {MatCardModule} from '@angular/material/card'; +import {MatSelectModule} from '@angular/material/select'; +import {MatInputModule} from '@angular/material/input'; +import {MatButtonModule} from '@angular/material/button'; +import {MatRippleModule} from '@angular/material/core'; +// import {PasswordToggleDirective} from '../_directives/password-toggle.directive'; + + +@NgModule({ + declarations: [AuthComponent, PasswordToggleDirective, AddKeyComponent], + imports: [ + CommonModule, + AuthRoutingModule, + ReactiveFormsModule, + MatCardModule, + MatSelectModule, + MatInputModule, + MatButtonModule, + MatRippleModule, + // PasswordToggleDirective + ] +}) +export class AuthModule { }