Develop

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;
 }

src/app/components/user/sign-up/sign-up.component.ts

@@ -15,80 +15,49 @@ export class SignUpComponent implements OnInit {
     signUpForm: FormGroup;
     mouseOver: boolean;
     fullName: FormControl;
-    physicalAddress: FormControl;
-    country: FormControl;
+    userName: FormControl;
     phone: FormControl;
     email: FormControl;
     businessName: FormControl;
-    businessNumber: FormControl;
-    dateOfReg: FormControl;
-    regAddress: FormControl;
-    businessEmail: FormControl;
-    businessTel: FormControl;
-    website: FormControl;
-    businessNature: FormControl;
+    username: FormControl;
     newPassword: FormControl;
     confirmPassword: FormControl;
 
     constructor(private signUp: SignUpService, private router: Router) { }
 
     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.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.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,
-            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,
+                username: data.username
             };
 
-            console.log(`form data captured: ${signUpData}`);
             if (this.signUp.saveUserInfo(signUpData)) {
                 this.router.navigate(['user/profile']);
             }

src/app/components/user/user.model.ts

@@ -1,19 +1,13 @@
 export interface ISignUp {
     fullName: string;
-    physicalAddress: string;
-    country: string;
+    physicalAddress?: string;
+    country?: string;
     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;
+    username: string
 }
 
 export interface IUser {

src/app/shared/components/profile/complete-profile.component.html

@@ -23,7 +23,7 @@ <h2>
                                     <span>
                                         <fa-icon [icon]="['fas', 'check-circle']"></fa-icon>
                                     </span>
-
+                    
                                 </h2>
                             </a>
                         </div>
@@ -35,7 +35,7 @@ <h2>
                                     <span>
                                         <fa-icon [icon]="['fas', 'check-circle']"></fa-icon>
                                     </span>
-
+                    
                                 </h2>
                             </a>
                         </div>

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;

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,14 @@ 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]);

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';
+export * from './complete-profile.component';

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<IUser>('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<IUser>('saveUserInfo')));
 
   }