From c46597b8b0ad88c8844f35bd0f1f9bdcd9c02a9c Mon Sep 17 00:00:00 2001 From: Jesse Ssempijja Date: Wed, 27 May 2020 19:12:53 +0000 Subject: [PATCH 1/2] revised sign up component --- .../user/sign-up/sign-up.component.html | 317 ++++++------------ .../user/sign-up/sign-up.component.scss | 40 +-- .../user/sign-up/sign-up.component.ts | 33 +- src/app/components/user/user.model.ts | 9 +- .../profile/complete-profile.component.html | 4 +- .../profile/complete-profile.component.scss | 44 +++ .../profile/complete-profile.component.ts | 14 + src/app/shared/components/profile/index.ts | 2 +- 8 files changed, 170 insertions(+), 293 deletions(-) diff --git a/src/app/components/user/sign-up/sign-up.component.html b/src/app/components/user/sign-up/sign-up.component.html index 15eb94d..bdf5e74 100644 --- a/src/app/components/user/sign-up/sign-up.component.html +++ b/src/app/components/user/sign-up/sign-up.component.html @@ -1,252 +1,137 @@
-
-
-
-
- -

- About Business Owner - - - -

- -
-
- -

- About Business - - - - -

- -
-
- -

- Credentials - - - - -

- -
-
-
+
-

Create Your Account

+

Create Your Account

-
+
-

Personal Information

+

General Information

Please enter your infomation and proceed to the next step so we can build your account

-
- - * - Required - -
-
-
- - * - Required - -
-
- - * - Required - +
+
+
+
+ + * + Required + +
+
+ + * + Required + +
+
+
+
+ + * + Required + +
+
+ + * + Required + -
-
- - * - Required - - -
-
+
+ +
+
+
+ + * + Required + Enter + Valid + Email Address + +
+
+ + * + Required + + +
-
- - * - Required - Enter Valid - Email Address - -
-
-
- -
-
-
-

Business Information

-

Please enter your infomation and proceed to the next step so we can build your - account.

-
+
-
-
- - * - Required - -
-
- - * - Required - - -
-
-
-
- - * - Required - -
-
- - * - Required - -
-
- - * - Required - -
-
-
-
- - * - Required - -
-
- - * - Required - Enter - Valid - Email Address - -
-
- - * - Required - +
- +

Credentials

Almost there! Please set your Account Password

-
-
- - * - Required - -
-
- - * - Required - Password - mismatch - +
+
+
+
+ + * + Required + +
+
+ + * + Required + Password + mismatch + +
+
- - - - diff --git a/src/app/components/user/sign-up/sign-up.component.scss b/src/app/components/user/sign-up/sign-up.component.scss index 4f1e596..8f8a145 100644 --- a/src/app/components/user/sign-up/sign-up.component.scss +++ b/src/app/components/user/sign-up/sign-up.component.scss @@ -1,4 +1,5 @@ $placeholder_color: #999; + em { padding-left: 10px; float: right; @@ -29,6 +30,10 @@ em { color: $placeholder_color; } +#sign-up-heading{ + text-align: center; +} + .form-container { display: flex; border-radius: 10px; @@ -40,37 +45,6 @@ em { box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); } -.col-md-4 .reg-nav { - display: flex; - flex-direction: column; -} - -.reg-nav .card { - padding: 5px 0 0px; -} - -.col-md-4 .reg-nav div { - border: none; - border-bottom: outset; - width: 100%; -} - -.col-md-4 .reg-nav div h2 { - display: flex; - justify-content: space-between; - padding: 10px; - font-size: large; -} - -.col-md-4 .reg-nav div a { - text-decoration: none; - color: black; -} - -.col-md-4 .reg-nav div a:hover, -.col-md-4 .reg-nav div a:active { - color: grey; -} .wizard-header { text-align: center; @@ -90,10 +64,6 @@ em { font-weight: 200; } -#btn-group .nav-btn-group #next { - margin-bottom: 10px; -} - #btn-group .submit-btn-group { margin-bottom: 10px; } diff --git a/src/app/components/user/sign-up/sign-up.component.ts b/src/app/components/user/sign-up/sign-up.component.ts index 07f2573..ed6f9c4 100644 --- a/src/app/components/user/sign-up/sign-up.component.ts +++ b/src/app/components/user/sign-up/sign-up.component.ts @@ -20,13 +20,6 @@ export class SignUpComponent implements OnInit { phone: FormControl; email: FormControl; businessName: FormControl; - businessNumber: FormControl; - dateOfReg: FormControl; - regAddress: FormControl; - businessEmail: FormControl; - businessTel: FormControl; - website: FormControl; - businessNature: FormControl; newPassword: FormControl; confirmPassword: FormControl; @@ -39,13 +32,6 @@ export class SignUpComponent implements OnInit { this.phone = new FormControl('', [Validators.required]); this.email = new FormControl('', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]); this.businessName = new FormControl('', [Validators.required]); - this.businessNature = new FormControl('', [Validators.required]); - this.businessNumber = new FormControl('', [Validators.required]); - this.dateOfReg = new FormControl('', [Validators.required]); - this.regAddress = new FormControl('', [Validators.required]); - this.businessEmail = new FormControl('', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]); - this.businessTel = new FormControl('', [Validators.required]); - this.website = new FormControl('', [Validators.required]); this.newPassword = new FormControl('', [Validators.required]); this.confirmPassword = new FormControl('', [Validators.required]); @@ -56,39 +42,24 @@ export class SignUpComponent implements OnInit { phone: this.phone, email: this.email, businessName: this.businessName, - businessNumber: this.businessNumber, - dateOfReg: this.dateOfReg, - regAddress: this.regAddress, - businessEmail: this.businessEmail, - businessTel: this.businessTel, - website: this.website, - businessNature: this.businessNature, newPassword: this.newPassword, confirmPassword: this.confirmPassword }, { validators: passwordMatchValidator }); } saveUserInfo(data: ISignUp) { + console.log('form data captured ', this.signUpForm.value); if (this.signUpForm.valid) { const signUpData: ISignUp = { fullName: data.fullName, - businessEmail: data.businessEmail, businessName: data.businessName, - businessNature: data.businessNature, - businessNumber: data.businessNumber, - businessTel: data.businessTel, country: data.country, - dateOfReg: data.dateOfReg, email: data.email, phone: data.phone, physicalAddress: data.physicalAddress, - regAddress: data.regAddress, - website: data.website, - newPassword: data.newPassword, - confirmPassword: data.confirmPassword + password: data.confirmPassword }; - console.log(`form data captured: ${signUpData}`); if (this.signUp.saveUserInfo(signUpData)) { this.router.navigate(['user/profile']); } diff --git a/src/app/components/user/user.model.ts b/src/app/components/user/user.model.ts index c23dfcc..2c3ad83 100644 --- a/src/app/components/user/user.model.ts +++ b/src/app/components/user/user.model.ts @@ -5,14 +5,7 @@ export interface ISignUp { phone: string; email: string; businessName: string; - businessNumber: string; - dateOfReg: Date; - regAddress: string; - businessEmail: string; - businessTel: string; - website: string; - businessNature: string; - newPassword?: string; + password: string; confirmPassword?: string; } diff --git a/src/app/shared/components/profile/complete-profile.component.html b/src/app/shared/components/profile/complete-profile.component.html index 1111ee1..c47d5e2 100644 --- a/src/app/shared/components/profile/complete-profile.component.html +++ b/src/app/shared/components/profile/complete-profile.component.html @@ -23,7 +23,7 @@

- +

@@ -35,7 +35,7 @@

- +

diff --git a/src/app/shared/components/profile/complete-profile.component.scss b/src/app/shared/components/profile/complete-profile.component.scss index 29b14ca..eb256b5 100644 --- a/src/app/shared/components/profile/complete-profile.component.scss +++ b/src/app/shared/components/profile/complete-profile.component.scss @@ -1,5 +1,49 @@ @import '../../../components/user/sign-up/sign-up.component.scss'; +.col-md-4 .reg-nav { + display: flex; + flex-direction: column; +} + + +.col-md-4 .reg-nav { + display: flex; + flex-direction: column; +} + +.reg-nav .card { + padding: 5px 0 0px; +} + + +.col-md-4 .reg-nav div { + border: none; + border-bottom: outset; + width: 100%; +} + +.col-md-4 .reg-nav div h2 { + display: flex; + justify-content: space-between; + padding: 10px; + font-size: large; +} + +.col-md-4 .reg-nav div a { + text-decoration: none; + color: black; +} + +.col-md-4 .reg-nav div a:hover, +.col-md-4 .reg-nav div a:active { + color: grey; +} + +#btn-group .nav-btn-group #next { + margin-bottom: 10px; +} + + #btn-group{ display: flex; justify-content: space-between; diff --git a/src/app/shared/components/profile/complete-profile.component.ts b/src/app/shared/components/profile/complete-profile.component.ts index 531d91a..3d4f052 100644 --- a/src/app/shared/components/profile/complete-profile.component.ts +++ b/src/app/shared/components/profile/complete-profile.component.ts @@ -38,6 +38,13 @@ export class CompleteProfileComponent implements OnInit { gEmail: FormControl; gPhone: FormControl; gPhysicalAddress: FormControl; + businessNumber: FormControl; + dateOfReg: FormControl; + regAddress: FormControl; + businessEmail: FormControl; + businessTel: FormControl; + website: FormControl; + businessNature: FormControl; dateOfOps: FormControl; employees: FormControl; description: FormControl; @@ -58,6 +65,13 @@ export class CompleteProfileComponent implements OnInit { constructor(private signUp: SignUpService, private router: Router) { } ngOnInit() { + this.businessNature = new FormControl('', [Validators.required]); + this.businessNumber = new FormControl('', [Validators.required]); + this.dateOfReg = new FormControl('', [Validators.required]); + this.regAddress = new FormControl('', [Validators.required]); + this.businessEmail = new FormControl('', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]); + this.businessTel = new FormControl('', [Validators.required]); + this.website = new FormControl('', [Validators.required]); this.dateOfOps = new FormControl('', [Validators.required]); this.employees = new FormControl('', [Validators.required]); this.loanAmount = new FormControl('', [Validators.required]); diff --git a/src/app/shared/components/profile/index.ts b/src/app/shared/components/profile/index.ts index e57c0c2..9d10a36 100644 --- a/src/app/shared/components/profile/index.ts +++ b/src/app/shared/components/profile/index.ts @@ -1,3 +1,3 @@ export * from './edit-profile.component'; export * from './profile.component'; -export * from './complete-profile.component'; \ No newline at end of file +export * from './complete-profile.component'; From 91d5a5541aed5cc85ed822488b0ab5fe40718e9a Mon Sep 17 00:00:00 2001 From: "Jesse.Ssempijja" Date: Mon, 8 Jun 2020 15:10:28 +0300 Subject: [PATCH 2/2] Connected sign-up component to sign-up api endpoint --- .../user/sign-up/sign-up.component.html | 108 ++++++------------ .../user/sign-up/sign-up.component.ts | 20 ++-- src/app/components/user/user.model.ts | 5 +- .../profile/complete-profile.component.ts | 1 + src/app/shared/services/sign-up.service.ts | 13 +-- 5 files changed, 53 insertions(+), 94 deletions(-) diff --git a/src/app/components/user/sign-up/sign-up.component.html b/src/app/components/user/sign-up/sign-up.component.html index bdf5e74..66911da 100644 --- a/src/app/components/user/sign-up/sign-up.component.html +++ b/src/app/components/user/sign-up/sign-up.component.html @@ -5,91 +5,59 @@

Create Your Account

- +

General Information

-

Please enter your infomation and proceed to the next step so we can build your - account

+

Please enter your infomation and proceed to the next step so we can build your account +

-
+
* Required - +
-
- - * - Required - -
-
-
-
- +
+ * - Required - + Required +
-
- +
+ * - Required - - + Required +
-
* - Required + Required Enter - Valid - Email Address - + Valid + Email Address +
-
+
* Required - +
- +
@@ -104,26 +72,19 @@

Credentials

-
+
* Required - +
-
+
* - Required + Required Password - mismatch - + mismatch +
@@ -131,17 +92,16 @@

Credentials

-
- - - - -
- - +
+ + + +
+ +
+
\ No newline at end of file diff --git a/src/app/components/user/sign-up/sign-up.component.ts b/src/app/components/user/sign-up/sign-up.component.ts index ed6f9c4..45fa171 100644 --- a/src/app/components/user/sign-up/sign-up.component.ts +++ b/src/app/components/user/sign-up/sign-up.component.ts @@ -15,11 +15,11 @@ export class SignUpComponent implements OnInit { signUpForm: FormGroup; mouseOver: boolean; fullName: FormControl; - physicalAddress: FormControl; - country: FormControl; + userName: FormControl; phone: FormControl; email: FormControl; businessName: FormControl; + username: FormControl; newPassword: FormControl; confirmPassword: FormControl; @@ -27,20 +27,19 @@ export class SignUpComponent implements OnInit { ngOnInit() { this.fullName = new FormControl('', [Validators.required]); - this.physicalAddress = new FormControl('', [Validators.required]); - this.country = new FormControl('', [Validators.required]); - this.phone = new FormControl('', [Validators.required]); + this.userName = new FormControl('', Validators.required); + this.phone = new FormControl('', Validators.required); this.email = new FormControl('', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]); this.businessName = new FormControl('', [Validators.required]); + this.userName = new FormControl('', Validators.required); this.newPassword = new FormControl('', [Validators.required]); this.confirmPassword = new FormControl('', [Validators.required]); this.signUpForm = new FormGroup({ fullName: this.fullName, - physicalAddress: this.physicalAddress, - country: this.country, - phone: this.phone, + userName: this.userName, email: this.email, + phone: this.phone, businessName: this.businessName, newPassword: this.newPassword, confirmPassword: this.confirmPassword @@ -53,11 +52,10 @@ export class SignUpComponent implements OnInit { const signUpData: ISignUp = { fullName: data.fullName, businessName: data.businessName, - country: data.country, email: data.email, phone: data.phone, - physicalAddress: data.physicalAddress, - password: data.confirmPassword + password: data.confirmPassword, + username: data.username }; if (this.signUp.saveUserInfo(signUpData)) { diff --git a/src/app/components/user/user.model.ts b/src/app/components/user/user.model.ts index 2c3ad83..607faf9 100644 --- a/src/app/components/user/user.model.ts +++ b/src/app/components/user/user.model.ts @@ -1,12 +1,13 @@ export interface ISignUp { fullName: string; - physicalAddress: string; - country: string; + physicalAddress?: string; + country?: string; phone: string; email: string; businessName: string; password: string; confirmPassword?: string; + username: string } export interface IUser { diff --git a/src/app/shared/components/profile/complete-profile.component.ts b/src/app/shared/components/profile/complete-profile.component.ts index 3d4f052..d3abaa7 100644 --- a/src/app/shared/components/profile/complete-profile.component.ts +++ b/src/app/shared/components/profile/complete-profile.component.ts @@ -65,6 +65,7 @@ export class CompleteProfileComponent implements OnInit { constructor(private signUp: SignUpService, private router: Router) { } ngOnInit() { + this.businessNature = new FormControl('', [Validators.required]); this.businessNumber = new FormControl('', [Validators.required]); this.dateOfReg = new FormControl('', [Validators.required]); diff --git a/src/app/shared/services/sign-up.service.ts b/src/app/shared/services/sign-up.service.ts index 494aed3..455fcf2 100644 --- a/src/app/shared/services/sign-up.service.ts +++ b/src/app/shared/services/sign-up.service.ts @@ -15,13 +15,12 @@ export class SignUpService { saveUserInfo(data: ISignUp) { const options = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; - return true; - // return this.http.post(this._SME_URL, data, options) - // .pipe(tap(res => { - // this.currentUser.username = res['username']; - // this.currentUser.email = res['email']; - // })) - // .pipe(catchError(this.handleErrors('saveUserInfo'))); + return this.http.post(this._SME_URL, data, options) + .pipe(tap(res => { + this.currentUser.username = res['username']; + this.currentUser.email = res['email']; + })) + .pipe(catchError(this.handleErrors('saveUserInfo'))); }