From fe0081249ae1ed6f71a5118279b39979133130fd Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 17 Mar 2020 19:35:25 +0100 Subject: [PATCH 1/8] Change fw from light to regular --- src/app/components/utility/input/input.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/utility/input/input.component.scss b/src/app/components/utility/input/input.component.scss index 9441a96c5..44f6db071 100644 --- a/src/app/components/utility/input/input.component.scss +++ b/src/app/components/utility/input/input.component.scss @@ -175,7 +175,7 @@ text-align: left; margin-top: 10px; font-size: 12px; - font-weight: $fw-light; + font-weight: $fw-regular; color: $yellow; &.hidden { opacity: 0; From 63de52ad6b73d250396c4182f6c197e47a315509 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 17 Mar 2020 19:36:40 +0100 Subject: [PATCH 2/8] Change the template driven form to use app-input component --- .../auth/login/login.component.html | 87 +++++++------------ 1 file changed, 33 insertions(+), 54 deletions(-) diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html index b1bb930fe..ee05ffcac 100644 --- a/src/app/components/auth/login/login.component.html +++ b/src/app/components/auth/login/login.component.html @@ -1,63 +1,42 @@
  • Log In
    • + (click)="authService.resetForm()">Log In
  • Sign Up
    • + (click)="authService.resetForm()">Sign Up
-
+
-
- -
- - - -
-

Username is too short.

-

Username is required.

-
+ +
+ + +
+ +
+ + +
+
+
+
+
- -
- - - - - - -
-

Password is less than 8 characters.

-

Password is required.

-
+
+ Forgot Password or Username?
-
-
-
- -
-
- Forgot Password or Username? -
-
-
{{authService.FormError}}
-
-

- Start with a new account Sign Up -

-
- -
+
+
{{authService.FormError}}
+
+

+ Start with a new account + Sign Up +

+
+
\ No newline at end of file From b7d9387858e6022353544753575485eb270500f9 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 17 Mar 2020 19:38:59 +0100 Subject: [PATCH 3/8] Change the template driven form to use app-input component --- .../components/auth/login/login.component.ts | 73 +++++++++++-------- .../utility/input/input.component.html | 51 ++++++++----- .../utility/input/input.component.ts | 43 ++++++++--- src/styles/base.scss | 8 +- 4 files changed, 114 insertions(+), 61 deletions(-) diff --git a/src/app/components/auth/login/login.component.ts b/src/app/components/auth/login/login.component.ts index 6291a9bd5..c3fa304fa 100644 --- a/src/app/components/auth/login/login.component.ts +++ b/src/app/components/auth/login/login.component.ts @@ -7,7 +7,7 @@ import { ApiService } from '../../../services/api.service'; import { AuthService } from '../../../services/auth.service'; import { GlobalService } from '../../../services/global.service'; import { EndpointsService } from '../../../services/endpoints.service'; -import { Router, ActivatedRoute} from '@angular/router'; +import { Router, ActivatedRoute } from '@angular/router'; /** * Component Class @@ -19,6 +19,13 @@ import { Router, ActivatedRoute} from '@angular/router'; }) export class LoginComponent implements OnInit, AfterViewInit { + /** + * Contains the fields for the login + */ + loginForm = 'loginform'; + @ViewChildren('loginform') + components: QueryList; + isnameFocused = false; ispasswordFocused = false; @@ -49,13 +56,13 @@ export class LoginComponent implements OnInit, AfterViewInit { * @param endpointsService */ constructor(@Inject(DOCUMENT) private document: Document, - private windowService: WindowService, - private globalService: GlobalService, - private apiService: ApiService, - public authService: AuthService, - private route: ActivatedRoute, - private router: Router, - private endpointsService: EndpointsService) { + private windowService: WindowService, + private globalService: GlobalService, + private apiService: ApiService, + public authService: AuthService, + private route: ActivatedRoute, + private router: Router, + private endpointsService: EndpointsService) { } /** @@ -85,49 +92,57 @@ export class LoginComponent implements OnInit, AfterViewInit { self.router.navigate([redirectTo]); } + // Validate Login Form + formValidate() { + this.globalService.formValidate(this.components, this.userLogin, this); + } // Function to login - userLogin(loginFormValid) { - if (!loginFormValid) { - this.globalService.stopLoader(); - return; - } - - this.globalService.startLoader('Taking you to EvalAI!'); - + userLogin(self) { + // if (!loginFormValid) { + // this.globalService.stopLoader(); + // return; + // } + + self.globalService.startLoader('Taking you to EvalAI!'); + + // const LOGIN_BODY = { + // 'username': this.authService.getUser['name'], + // 'password': this.authService.getUser['password'], + // }; const LOGIN_BODY = { - 'username': this.authService.getUser['name'], - 'password': this.authService.getUser['password'], + username: self.globalService.formValueForLabel(self.components, 'name'), + password: self.globalService.formValueForLabel(self.components, 'password') }; - this.apiService.postUrl(this.endpointsService.loginURL(), LOGIN_BODY).subscribe( + self.apiService.postUrl(self.endpointsService.loginURL(), LOGIN_BODY).subscribe( data => { - this.globalService.storeData(this.globalService.authStorageKey, data['token']); - this.authService.loggedIn(true); - this.globalService.stopLoader(); - this.redirectCheck(this); + self.globalService.storeData(self.globalService.authStorageKey, data['token']); + self.authService.loggedIn(true); + self.globalService.stopLoader(); + self.redirectCheck(self); }, err => { - this.globalService.stopLoader(); + self.globalService.stopLoader(); if (err.status === 400) { - this.authService.isFormError = true; + self.authService.isFormError = true; try { const non_field_errors = typeof (err.error.non_field_errors) !== 'undefined'; if (non_field_errors) { - this.authService.FormError = err.error.non_field_errors[0]; + self.authService.FormError = err.error.non_field_errors[0]; } } catch (error) { setTimeout(() => { - this.globalService.showToast('Error', 'Unable to Login.Please Try Again!', 5); + self.globalService.showToast('Error', 'Unable to Login.Please Try Again!', 5); }, 1000); } } else { - this.globalService.handleApiError(err); + self.globalService.handleApiError(err); } }, - () => {} + () => { } ); } diff --git a/src/app/components/utility/input/input.component.html b/src/app/components/utility/input/input.component.html index f7f714c9f..0bbe34bf3 100644 --- a/src/app/components/utility/input/input.component.html +++ b/src/app/components/utility/input/input.component.html @@ -1,19 +1,34 @@
-
- +
+ - -
{{message}}
+ +
+

{{message}}

+
+
+ +
+ + + + + + + +
+

{{message}}

+
- + @@ -21,11 +36,9 @@
- + @@ -37,14 +50,12 @@
Upload File - +
{{message}}
-
+
\ No newline at end of file diff --git a/src/app/components/utility/input/input.component.ts b/src/app/components/utility/input/input.component.ts index f1ae3038b..f014a0bac 100644 --- a/src/app/components/utility/input/input.component.ts +++ b/src/app/components/utility/input/input.component.ts @@ -87,6 +87,12 @@ export class InputComponent implements OnInit { */ @Input() editPhaseDetails: boolean; + /** + * Class that style the input + */ + @Input() inputStyle = ''; + + /** * Is email flag */ @@ -127,6 +133,16 @@ export class InputComponent implements OnInit { */ fileSelected = null; + /** + * Show password toggle + */ + showPassword = false; + + /** + * Is the input field focused + */ + isFocus = false; + /** * Input field message for required fields */ @@ -137,7 +153,7 @@ export class InputComponent implements OnInit { * @param document Window document Injection. * @param globalService GlobalService Injection. */ - constructor(@Inject(DOCUMENT) private document: Document, private globalService: GlobalService) { } + constructor(@Inject(DOCUMENT) private document: Document, private globalService: GlobalService) { } /** * Component on intialized @@ -199,24 +215,25 @@ export class InputComponent implements OnInit { if (e === '' && this.isRequired) { this.isValid = false; this.isRequired ? this.message = this.requiredMessage : this.message = ''; + return; // This is to no continue validating because the string is empty } if (this.isValidateCustom) { - this.isValid = this.validate(e).is_valid; - this.isValid ? this.message = '' : this.message = this.validate(e).message; + this.isValid = this.validate(e).is_valid; + this.isValid ? this.message = '' : this.message = this.validate(e).message; } else if (this.isEmail) { - this.isValid = this.globalService.validateEmail(e); - this.isValid ? this.message = '' : this.message = 'Enter a valid email'; + this.isValid = this.globalService.validateEmail(e); + this.isValid ? this.message = '' : this.message = 'Enter a valid email'; } else if (this.type === 'text' || this.type === 'textarea') { - this.isValid = this.globalService.validateText(e); - this.isValid ? this.message = '' : this.message = 'Enter a valid text'; + this.isValid = this.globalService.validateText(e); + this.isValid ? this.message = '' : this.message = 'Enter a valid text'; } else if (this.type === 'number') { this.isValid = this.globalService.validateInteger(e); this.isValid ? this.message = '' : this.message = 'Enter a valid number'; } else if (this.type === 'datetime') { this.isValid = true; } else if (this.type === 'password') { - this.isValid = this.globalService.validatePassword(e); - this.isValid ? this.message = '' : this.message = 'Password minimum 8 characters'; + this.isValid = this.globalService.validatePassword(e); + this.isValid ? this.message = '' : this.message = 'Password minimum 8 characters'; } if (this.name === 'bannedEmailIds' || this.name === 'filterByTeamName') { this.message = ''; @@ -244,11 +261,15 @@ export class InputComponent implements OnInit { this.document.getElementById(id).click(); } - showErrorCondition () { + showErrorCondition() { return (this.isRequired && this.isEmpty) || (!this.isValid && !this.isEmpty); } - toggleErrorMessage () { + toggleErrorMessage() { return !((this.showErrorCondition() || this.message !== '') && this.isDirty); } + + toggleShowPassword() { + return this.showPassword = !this.showPassword; + } } diff --git a/src/styles/base.scss b/src/styles/base.scss index 35d4eaf92..e2d87374f 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -2047,6 +2047,12 @@ input[type="radio"].selectTeam + label { border: 2px solid #252833; } +/* input box margins */ +.input-field input[type=text], +.input-field input[type=password] { + margin-bottom: 0 !important; +} + /* label focus color */ .input-field input[type=email]:focus+label, @@ -2190,7 +2196,7 @@ tr { } .color-black { - color: black; + color: black !important; } .analytics-challenge-single-line { From 5f31d37f7648fe4d6e1aca36f8f4f16bb9253df1 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 18 Mar 2020 20:44:31 +0100 Subject: [PATCH 4/8] Allow cross field validation in input component --- src/app/components/utility/input/input.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/components/utility/input/input.component.ts b/src/app/components/utility/input/input.component.ts index f014a0bac..f55948623 100644 --- a/src/app/components/utility/input/input.component.ts +++ b/src/app/components/utility/input/input.component.ts @@ -92,6 +92,11 @@ export class InputComponent implements OnInit { */ @Input() inputStyle = ''; + /** + * Another input component needed to + * crossfield validation + */ + @Input() fieldToCompare: string; /** * Is email flag @@ -218,7 +223,7 @@ export class InputComponent implements OnInit { return; // This is to no continue validating because the string is empty } if (this.isValidateCustom) { - this.isValid = this.validate(e).is_valid; + this.isValid = this.validate(e, this.fieldToCompare).is_valid; this.isValid ? this.message = '' : this.message = this.validate(e).message; } else if (this.isEmail) { this.isValid = this.globalService.validateEmail(e); From ce42aa6da8bb2cc1a6b8fab41104868ed178e6cf Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 18 Mar 2020 21:09:51 +0100 Subject: [PATCH 5/8] Make the validate the two passwords reusable --- .../auth/signup/signup.component.ts | 224 +++++++++--------- src/app/services/global.service.ts | 42 ++-- 2 files changed, 143 insertions(+), 123 deletions(-) diff --git a/src/app/components/auth/signup/signup.component.ts b/src/app/components/auth/signup/signup.component.ts index 3120c4639..c5b46f91a 100644 --- a/src/app/components/auth/signup/signup.component.ts +++ b/src/app/components/auth/signup/signup.component.ts @@ -1,45 +1,49 @@ -import { Component, OnInit, Inject } from '@angular/core'; +import { Component, OnInit, Inject, ViewChildren, QueryList } from '@angular/core'; import { AfterViewInit } from '@angular/core'; import { DOCUMENT } from '@angular/common'; -import {WindowService} from '../../../services/window.service'; -import {ApiService} from '../../../services/api.service'; -import {EndpointsService} from '../../../services/endpoints.service'; -import {GlobalService} from '../../../services/global.service'; -import {Router, ActivatedRoute} from '@angular/router'; -import {AuthService} from '../../../services/auth.service'; +import { WindowService } from '../../../services/window.service'; +import { ApiService } from '../../../services/api.service'; +import { EndpointsService } from '../../../services/endpoints.service'; +import { GlobalService } from '../../../services/global.service'; +import { Router, ActivatedRoute } from '@angular/router'; +import { AuthService } from '../../../services/auth.service'; +import { InputComponent } from '../../utility/input/input.component'; /** * Component Class */ @Component({ - selector: 'app-signup', - templateUrl: './signup.component.html', - styleUrls: ['./signup.component.scss'] + selector: 'app-signup', + templateUrl: './signup.component.html', + styleUrls: ['./signup.component.scss'] }) - - export class SignupComponent implements OnInit, AfterViewInit { + color = ''; + message = ''; + isnameFocused = false; + ispasswordFocused = false; + iscnfrmpasswordFocused = false; + isemailFocused = false; - color = ''; - message = ''; + arePasswordsMistmatch = true; - isnameFocused = false; - ispasswordFocused = false; - iscnfrmpasswordFocused = false; - isemailFocused = false; + /** + * Build the sign up form + */ + @ViewChildren('signupForm') signupForm: QueryList; - /** + /** * Login route path */ - loginRoute = '/auth/login'; + loginRoute = '/auth/login'; - /** + /** * Signup route path */ - signupRoute = '/auth/signup'; + signupRoute = '/auth/signup'; - /** + /** * Constructor. * @param document window document Injection. * @param windowService ActivatedRoute Injection. @@ -50,99 +54,101 @@ export class SignupComponent implements OnInit, AfterViewInit { * @param route ActivatedRoute Injection. * @param endpointsService */ - constructor(@Inject(DOCUMENT) private document: Document, - private windowService: WindowService, - private globalService: GlobalService, - private apiService: ApiService, - public authService: AuthService, - private route: ActivatedRoute, - private endpointsService: EndpointsService, - private router: Router) { - } - - /** + constructor( + @Inject(DOCUMENT) private document: Document, + private windowService: WindowService, + private globalService: GlobalService, + private apiService: ApiService, + public authService: AuthService, + private route: ActivatedRoute, + private endpointsService: EndpointsService, + private router: Router + ) { } + + /** * Component init function. */ - ngOnInit() { - } + ngOnInit() { } - /** + /** * Component after view initialized. */ - ngAfterViewInit() { - } - - // Function to signup - userSignUp(signupFormValid) { - if (signupFormValid) { - this.globalService.startLoader('Setting up your details!'); - const SIGNUP_BODY = JSON.stringify({ - username: this.authService.regUser['name'], - email: this.authService.regUser['email'], - password1: this.authService.regUser['password'], - password2: this.authService.regUser['confirm_password'] - }); - - this.apiService.postUrl(this.endpointsService.signupURL(), SIGNUP_BODY).subscribe( - data => { - - if (data.status === 201) { - this.authService.isFormError = false; - this.authService.regMsg = 'Registered successfully, Login to continue!'; - } + ngAfterViewInit() { } - // Success Message in data.message - setTimeout(() => { - this.globalService.showToast('success', 'Registered successfully. Please verify your email address!', 5); - }, 1000); - - this.router.navigate([this.loginRoute]); - this.globalService.stopLoader(); - }, - - err => { - this.globalService.stopLoader(); - if (err.status === 400) { - this.authService.isFormError = true; - let non_field_errors, isUsername_valid, isEmail_valid, isPassword1_valid, isPassword2_valid; - try { - non_field_errors = typeof (err.error.non_field_errors) !== 'undefined'; - isUsername_valid = typeof (err.error.username) !== 'undefined'; - isEmail_valid = typeof (err.error.email) !== 'undefined'; - isPassword1_valid = typeof (err.error.password1) !== 'undefined'; - isPassword2_valid = typeof (err.error.password2) !== 'undefined'; - if (non_field_errors) { - this.authService.FormError = err.error.non_field_errors[0]; - } else if (isUsername_valid) { - this.authService.FormError = err.error.username[0]; - } else if (isEmail_valid) { - this.authService.FormError = err.error.email[0]; - } else if (isPassword1_valid) { - this.authService.FormError = err.error.password1[0]; - } else if (isPassword2_valid) { - this.authService.FormError = err.error.password2[0]; - } - - } catch (error) { - setTimeout(() => { - this.globalService.showToast('Error', 'Registration UnSuccessful.Please Try Again!', 5); - }, 1000); - } - } else { - this.globalService.handleApiError(err); - } - }, - - () => {} - ); + formValidate() { + this.globalService.formValidate(this.signupForm, this.userSignUp, this); } - } + // Function to signup + userSignUp(self) { + self.globalService.startLoader('Setting up your details!'); + const password1 = self.globalService.formValueForLabel(self.signupForm, 'password'); + const password2 = self.globalService.formValueForLabel(self.signupForm, 'confirm_password'); + + const SIGNUP_BODY = JSON.stringify({ + username: self.globalService.formValueForLabel(self.signupForm, 'name'), + email: self.globalService.formValueForLabel(self.signupForm, 'email'), + password1, + password2 + }); + self.apiService.postUrl(self.endpointsService.signupURL(), SIGNUP_BODY).subscribe( + (data) => { + if (data.status === 201) { + self.authService.isFormError = false; + self.authService.regMsg = 'Registered successfully, Login to continue!'; + } + + // Success Message in data.message + setTimeout(() => { + self.globalService.showToast( + 'success', + 'Registered successfully. Please verify your email address!', + 5 + ); + }, 1000); + + self.router.navigate([self.loginRoute]); + self.globalService.stopLoader(); + }, + (err) => { + self.globalService.stopLoader(); + if (err.status === 400) { + self.authService.isFormError = true; + let non_field_errors, isUsername_valid, isEmail_valid, isPassword1_valid, isPassword2_valid; + try { + non_field_errors = typeof err.error.non_field_errors !== 'undefined'; + isUsername_valid = typeof err.error.username !== 'undefined'; + isEmail_valid = typeof err.error.email !== 'undefined'; + isPassword1_valid = typeof err.error.password1 !== 'undefined'; + isPassword2_valid = typeof err.error.password2 !== 'undefined'; + if (non_field_errors) { + self.authService.FormError = err.error.non_field_errors[0]; + } else if (isUsername_valid) { + self.authService.FormError = err.error.username[0]; + } else if (isEmail_valid) { + self.authService.FormError = err.error.email[0]; + } else if (isPassword1_valid) { + self.authService.FormError = err.error.password1[0]; + } else if (isPassword2_valid) { + self.authService.FormError = err.error.password2[0]; + } + } catch (error) { + setTimeout(() => { + self.globalService.showToast('Error', 'Registration UnSuccessful.Please Try Again!', 5); + }, 1000); + } + } else { + self.globalService.handleApiError(err); + } + }, + () => { } + ); + } -// function to check password strength - checkStrength(password) { - const passwordStrength = this.authService.passwordStrength(password); - this.message = passwordStrength[0]; - this.color = passwordStrength[1]; - } + // function to check password strength + checkStrength(password) { + const passwordStrength = this.authService.passwordStrength(password); + this.message = passwordStrength[0]; + this.color = passwordStrength[1]; + } } diff --git a/src/app/services/global.service.ts b/src/app/services/global.service.ts index 135e5b634..b5201b4cc 100644 --- a/src/app/services/global.service.ts +++ b/src/app/services/global.service.ts @@ -171,7 +171,7 @@ export class GlobalService { showConfirm(params) { if (!this.isConfirming) { this.isConfirming = true; - const TEMP = { isConfirming: true}; + const TEMP = { isConfirming: true }; this.confirmSource.next(Object.assign({}, params, TEMP)); } } @@ -182,7 +182,7 @@ export class GlobalService { hideConfirm() { if (this.isConfirming) { this.isConfirming = false; - const TEMP = { isConfirming: false}; + const TEMP = { isConfirming: false }; this.confirmSource.next(Object.assign({}, this.modalDefault, TEMP)); } } @@ -194,7 +194,7 @@ export class GlobalService { showModal(params) { if (!this.isModalVisible) { this.isModalVisible = true; - const TEMP = { isModalVisible: true}; + const TEMP = { isModalVisible: true }; this.modalSource.next(Object.assign({}, params, TEMP)); } } @@ -206,7 +206,7 @@ export class GlobalService { showEditPhaseModal(params) { if (!this.isEditPhaseModalVisible) { this.isEditPhaseModalVisible = true; - const TEMP = { isEditPhaseModalVisible: true}; + const TEMP = { isEditPhaseModalVisible: true }; this.editPhasemodalSource.next(Object.assign({}, params, TEMP)); } } @@ -218,7 +218,7 @@ export class GlobalService { showTermsAndConditionsModal(params) { if (!this.isTermsAndConditionsModalVisible) { this.isTermsAndConditionsModalVisible = true; - const TEMP = { isTermsAndConditionsModalVisible: true}; + const TEMP = { isTermsAndConditionsModalVisible: true }; this.termsAndConditionsSource.next(Object.assign({}, params, TEMP)); } } @@ -229,7 +229,7 @@ export class GlobalService { hideModal() { if (this.isModalVisible) { this.isModalVisible = false; - const TEMP = { isModalVisible: false}; + const TEMP = { isModalVisible: false }; this.modalSource.next(Object.assign({}, this.modalDefault, TEMP)); } } @@ -240,7 +240,7 @@ export class GlobalService { hideEditPhaseModal() { if (this.isEditPhaseModalVisible) { this.isEditPhaseModalVisible = false; - const TEMP = { isEditPhaseModalVisible: false}; + const TEMP = { isEditPhaseModalVisible: false }; this.editPhasemodalSource.next(Object.assign({}, this.editPhaseModalDefault, TEMP)); } } @@ -251,7 +251,7 @@ export class GlobalService { hideTermsAndConditionsModal() { if (this.isTermsAndConditionsModalVisible) { this.isTermsAndConditionsModalVisible = false; - const TEMP = { isTermsAndConditionsModalVisible: false}; + const TEMP = { isTermsAndConditionsModalVisible: false }; this.termsAndConditionsSource.next(Object.assign({}, this.termsAndConditionsModalDefault, TEMP)); } } @@ -286,7 +286,7 @@ export class GlobalService { } }); if (!requiredFieldMissing) { - callback(self); + callback(self); } } @@ -392,7 +392,7 @@ export class GlobalService { checkTokenValidity(err, toast = true) { if (err.error !== null && typeof err.error === 'object' && err.error['detail']) { if (err.error['detail'].indexOf('Invalid token') !== -1 || - err.error['detail'].indexOf('Token has expired') !== -1) { + err.error['detail'].indexOf('Token has expired') !== -1) { this.triggerLogout(); this.showToast('error', 'Token Invalid! Please Login again.', 5); } @@ -521,10 +521,10 @@ export class GlobalService { * @returns boolean indicating valid/invalid email */ validateEmail(email) { - const RE = new RegExp (['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)', - '|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.', - '[0-9]{1,3}\])|(([a-zA-Z\\-0-9]+\\.)+', - '[a-zA-Z]{2,}))$'].join('')); + const RE = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)', + '|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.', + '[0-9]{1,3}\])|(([a-zA-Z\\-0-9]+\\.)+', + '[a-zA-Z]{2,}))$'].join('')); return RE.test(email); } @@ -561,6 +561,20 @@ export class GlobalService { return false; } + /** + * Custom validator to check equality of the password fields + * @param password1 The confirm password field + * @param password2 The password field + * @return returns an object that contain a message and a boolean + */ + validateTwoPassword(password1: string, password2: string) { + const is_valid = password1 === password2; + return { + is_valid, + message: !is_valid ? 'Passwords do not match' : '' + }; + } + /** * Start loader message * @param msg string From ce19b3a2ecfe358e08e97ce171ec9e592c6d7758 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 18 Mar 2020 22:22:02 +0100 Subject: [PATCH 6/8] Fix test including Input Component in declarations --- .../reset-password.component.spec.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/app/components/auth/reset-password/reset-password.component.spec.ts b/src/app/components/auth/reset-password/reset-password.component.spec.ts index 118af0a00..5f5452b1f 100644 --- a/src/app/components/auth/reset-password/reset-password.component.spec.ts +++ b/src/app/components/auth/reset-password/reset-password.component.spec.ts @@ -1,13 +1,15 @@ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import {ResetPasswordComponent} from './reset-password.component'; -import {FormsModule} from '@angular/forms'; -import {AuthService} from '../../../services/auth.service'; -import {GlobalService} from '../../../services/global.service'; -import {EndpointsService} from '../../../services/endpoints.service'; -import {ApiService} from '../../../services/api.service'; -import {HttpClientModule} from '@angular/common/http'; -import {RouterTestingModule} from '@angular/router/testing'; +import { ResetPasswordComponent } from './reset-password.component'; +import { FormsModule } from '@angular/forms'; +import { AuthService } from '../../../services/auth.service'; +import { GlobalService } from '../../../services/global.service'; +import { EndpointsService } from '../../../services/endpoints.service'; +import { ApiService } from '../../../services/api.service'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterTestingModule } from '@angular/router/testing'; +import { InputComponent } from '../../utility/input/input.component'; +import { OwlDateTimeComponent, OwlDateTimeModule } from 'ng-pick-datetime'; describe('ResetPasswordComponent', () => { let component: ResetPasswordComponent; @@ -15,9 +17,9 @@ describe('ResetPasswordComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ResetPasswordComponent], + declarations: [ResetPasswordComponent, InputComponent], providers: [AuthService, GlobalService, EndpointsService, ApiService], - imports: [HttpClientModule, RouterTestingModule, FormsModule] + imports: [HttpClientModule, RouterTestingModule, FormsModule, OwlDateTimeModule] }) .compileComponents(); })); From d3beca0944a2d17c06458817018c46d86fcf02ca Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 18 Mar 2020 22:25:45 +0100 Subject: [PATCH 7/8] Change the template driven form to use app-input --- .../components/auth/login/login.component.ts | 9 -- .../reset-password.component.html | 69 ++++----- .../reset-password.component.ts | 70 ++++----- .../auth/signup/signup.component.html | 135 ++++++------------ 4 files changed, 107 insertions(+), 176 deletions(-) diff --git a/src/app/components/auth/login/login.component.ts b/src/app/components/auth/login/login.component.ts index c3fa304fa..efd61e4d9 100644 --- a/src/app/components/auth/login/login.component.ts +++ b/src/app/components/auth/login/login.component.ts @@ -99,17 +99,8 @@ export class LoginComponent implements OnInit, AfterViewInit { // Function to login userLogin(self) { - // if (!loginFormValid) { - // this.globalService.stopLoader(); - // return; - // } self.globalService.startLoader('Taking you to EvalAI!'); - - // const LOGIN_BODY = { - // 'username': this.authService.getUser['name'], - // 'password': this.authService.getUser['password'], - // }; const LOGIN_BODY = { username: self.globalService.formValueForLabel(self.components, 'name'), password: self.globalService.formValueForLabel(self.components, 'password') diff --git a/src/app/components/auth/reset-password/reset-password.component.html b/src/app/components/auth/reset-password/reset-password.component.html index 5fd452a9f..4889ddcef 100644 --- a/src/app/components/auth/reset-password/reset-password.component.html +++ b/src/app/components/auth/reset-password/reset-password.component.html @@ -3,12 +3,13 @@

  • - Password reset link has been sent to your registered email address. Please check your email inbox. + Password reset link has been sent to your registered email address. Please check + your email inbox.

  • Back to Log In + (click)="authService.resetForm()">Back to Log In
@@ -17,48 +18,32 @@
-
-
- -
- - - -
-

Email address is required.

-
-
-

Please enter valid email address.

-
+
+ +
+ +
+
+
+
+
-
-
-
- -
-
- Back to Log In -
-
-
{{authService.FormError}}
-
-

- Start with a new account Sign Up -

+
+ Back to Log In
- +
+
{{authService.FormError}}
+
+

+ Start with a new account Sign Up +

+
-
+
\ No newline at end of file diff --git a/src/app/components/auth/reset-password/reset-password.component.ts b/src/app/components/auth/reset-password/reset-password.component.ts index 748cc5fea..19a7308c3 100644 --- a/src/app/components/auth/reset-password/reset-password.component.ts +++ b/src/app/components/auth/reset-password/reset-password.component.ts @@ -1,8 +1,9 @@ -import {Component, OnInit} from '@angular/core'; -import {AuthService} from '../../../services/auth.service'; -import {ApiService} from '../../../services/api.service'; -import {EndpointsService} from '../../../services/endpoints.service'; -import {GlobalService} from '../../../services/global.service'; +import { Component, OnInit, ViewChildren, QueryList } from '@angular/core'; +import { AuthService } from '../../../services/auth.service'; +import { ApiService } from '../../../services/api.service'; +import { EndpointsService } from '../../../services/endpoints.service'; +import { GlobalService } from '../../../services/global.service'; +import { InputComponent } from '../../utility/input/input.component'; @Component({ selector: 'app-reset-password', @@ -28,6 +29,12 @@ export class ResetPasswordComponent implements OnInit { */ resetPasswordRoute = '/auth/reset-password'; + /** + * Form for the reset of the password + */ + @ViewChildren('resetForm') + resetForm: QueryList; + /** * * @param authService @@ -36,44 +43,43 @@ export class ResetPasswordComponent implements OnInit { * @param endpointService */ constructor(public authService: AuthService, private globalService: GlobalService, private apiService: ApiService, - private endpointService: EndpointsService) { + private endpointService: EndpointsService) { } ngOnInit() { this.authService.resetForm(); } + formValidate() { + this.globalService.formValidate(this.resetForm, this.resetPassword, this); + } // function to reset password - resetPassword(resetPassFormValid) { - if (resetPassFormValid) { - this.globalService.startLoader('Sending Mail'); + resetPassword(self) { + self.globalService.startLoader('Sending Mail'); - const RESET_BODY = JSON.stringify({ - email: this.authService.getUser['email'] - }); + const RESET_BODY = JSON.stringify({ + email: self.globalService.formValueForLabel(self.resetForm, 'email') + }); - const API_PATH = this.endpointService.resetPasswordURL(); + const API_PATH = self.endpointService.resetPasswordURL(); - this.apiService.postUrl(API_PATH, RESET_BODY).subscribe( - response => { - this.authService.isMail = false; - this.authService.getUser['error'] = false; - this.authService.isFormError = false; - this.authService.deliveredMsg = response.detail; - this.authService.getUser['email'] = ''; - this.globalService.stopLoader(); - }, + self.apiService.postUrl(API_PATH, RESET_BODY).subscribe( + response => { + self.authService.isMail = false; + self.authService.getUser['error'] = false; + self.authService.isFormError = false; + self.authService.deliveredMsg = response.detail; + self.authService.getUser['email'] = ''; + self.globalService.stopLoader(); + }, - err => { - this.authService.isFormError = true; - this.authService.FormError = 'Something went wrong. Please try again'; - this.globalService.stopLoader(); - }, + err => { + self.authService.isFormError = true; + self.authService.FormError = 'Something went wrong. Please try again'; + self.globalService.stopLoader(); + }, - () => {} - ); - } else { - this.globalService.stopLoader(); - } + () => { } + ); } } diff --git a/src/app/components/auth/signup/signup.component.html b/src/app/components/auth/signup/signup.component.html index 092302c89..049513851 100644 --- a/src/app/components/auth/signup/signup.component.html +++ b/src/app/components/auth/signup/signup.component.html @@ -1,101 +1,50 @@
  • Log In
    • + (click)="authService.resetForm()">Log In
  • Sign Up
    • + (click)="authService.resetForm()">Sign Up
-
+
-
- -
- - - -
-

Username is too short.

-

Username is required.

-
-
- -
- - - -
-

Please enter a valid email address.

-

Email address is required.

-
-
- -
- - - - - - -
-

Password is less than 8 characters.

-

Password is required.

-
-
- -
- - - - - - -
-

Password is less than 8 characters.

-

Password confirmation is required.

-
-
-

Passwords do not match

-
-
- -
- -
-
{{authService.FormError}}
-
+

+
+
\ No newline at end of file From 82bb0c47645a252fbe3848af2e72b42799b56d10 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 22 Mar 2020 23:43:18 +0100 Subject: [PATCH 8/8] Declare validateTwoPassword in signup component --- .../components/auth/signup/signup.component.html | 2 +- src/app/components/auth/signup/signup.component.ts | 14 ++++++++++++++ src/app/services/global.service.ts | 14 -------------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/app/components/auth/signup/signup.component.html b/src/app/components/auth/signup/signup.component.html index 049513851..675a77f40 100644 --- a/src/app/components/auth/signup/signup.component.html +++ b/src/app/components/auth/signup/signup.component.html @@ -29,7 +29,7 @@
diff --git a/src/app/components/auth/signup/signup.component.ts b/src/app/components/auth/signup/signup.component.ts index c5b46f91a..241f6104d 100644 --- a/src/app/components/auth/signup/signup.component.ts +++ b/src/app/components/auth/signup/signup.component.ts @@ -75,6 +75,20 @@ export class SignupComponent implements OnInit, AfterViewInit { */ ngAfterViewInit() { } + /** + * Custom validator to check equality of the password fields + * @param password1 The confirm password field + * @param password2 The password field + * @return returns an object that contain a message and a boolean + */ + validateTwoPassword(password1: string, password2: string) { + const is_valid = password1 === password2; + return { + is_valid, + message: !is_valid ? 'Passwords do not match' : '' + }; + } + formValidate() { this.globalService.formValidate(this.signupForm, this.userSignUp, this); } diff --git a/src/app/services/global.service.ts b/src/app/services/global.service.ts index b5201b4cc..cdf38490d 100644 --- a/src/app/services/global.service.ts +++ b/src/app/services/global.service.ts @@ -561,20 +561,6 @@ export class GlobalService { return false; } - /** - * Custom validator to check equality of the password fields - * @param password1 The confirm password field - * @param password2 The password field - * @return returns an object that contain a message and a boolean - */ - validateTwoPassword(password1: string, password2: string) { - const is_valid = password1 === password2; - return { - is_valid, - message: !is_valid ? 'Passwords do not match' : '' - }; - } - /** * Start loader message * @param msg string