105 register page render issues

src/pages/login/login.html

@@ -19,63 +19,52 @@
     <h1 id="title">INTRANSITION</h1>
   </div>
 
-  <form [formGroup]="loginCreds" (ngSubmit)="login()">
-    <ion-grid>
 
-      <ion-row>
-        <ion-col col-1></ion-col>
-        <ion-col>
+  <ion-grid>
+    <form [formGroup]="loginCreds" (ngSubmit)="login()">
+
+      <ion-row justify-content-center>
+        <ion-col col-7 col-xl-6>
           <h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
           <br>
           <h2 id="lifechange" text-center>It's a life change.</h2>
         </ion-col>
-        <ion-col col-1></ion-col>
       </ion-row>
 
-      <ion-row>
-        <ion-col col-1></ion-col>
-        <ion-col>
+      <ion-row justify-content-center>
+        <ion-col col-7>
           <ion-label class="labels"  style="font-size: 25px" stacked>EMAIL ADDRESS</ion-label>
           <ion-input formControlName="email" class="inputs" id="email" type="email"></ion-input>
         </ion-col>
-        <ion-col col-1></ion-col>
       </ion-row>
 
-      <ion-row>
-        <ion-col col-1></ion-col>
-        <ion-col>
+      <ion-row justify-content-center>
+        <ion-col col-7>
           <ion-item no-lines *ngIf="!loginCreds.controls.email.valid  && (loginCreds.controls.email.dirty || submitAttempt)">
             <p class="invalid-text">Please enter a valid email</p>
           </ion-item><br>
         </ion-col>
-        <ion-col col-1></ion-col>
       </ion-row>
 
-      <ion-row>
-        <ion-col col-1></ion-col>
-        <ion-col>
+      <ion-row justify-content-center>
+        <ion-col col-7>
           <ion-label class="labels" style="font-size: 25px" stacked>PASSWORD</ion-label>
           <ion-input formControlName="password" class="inputs" id="password" type="password"></ion-input>
         </ion-col>
-        <ion-col col-1></ion-col>
       </ion-row>
 
-      <ion-row>
-        <ion-col col-1></ion-col>
-        <ion-col>
+      <ion-row justify-content-center>
+        <ion-col col-7>
           <ion-item no-lines *ngIf="!loginCreds.controls.password.valid  && (loginCreds.controls.password.dirty || submitAttempt)">
             <p class="invalid-text">Please enter a password</p>
           </ion-item><br>
         </ion-col>
-        <ion-col col-1></ion-col>
       </ion-row>
 
-      <ion-row>
-        <ion-col col-2></ion-col>
-        <ion-col>
+      <ion-row justify-content-center>
+        <ion-col class="button-col" col-5>
           <button id="loginbutton" type="submit" ion-button block [disabled]="!loginCreds.valid">LOGIN</button>
         </ion-col>
-        <ion-col col-2></ion-col>
       </ion-row>
 
       <ion-row>
@@ -86,15 +75,14 @@ <h3 text-center>If you don't have an account yet, you can register now.</h3>
         <ion-col col-1></ion-col>
       </ion-row>
 
-      <ion-row>
-        <ion-col col-2></ion-col>
-        <ion-col>
+    </form>
+
+      <ion-row justify-content-center>
+        <ion-col class="button-col" col-5>
           <button (click)="toRegisterPage()" id="signupbutton" ion-button block>SIGN UP</button>
         </ion-col>
-        <ion-col col-2></ion-col>
       </ion-row>
 
-    </ion-grid>
-  </form>
+  </ion-grid>
 
 </ion-content>

src/pages/login/login.scss

@@ -64,12 +64,14 @@ page-login {
 
     #loginbutton {
         background-color: rgb(130,180,64); 
-        font-size: 25px
+        font-size: 25px;
+        height: 2.1em;
     }
 
     #signupbutton {
         background-color: rgb(42,61,79); 
-        font-size: 25px
+        font-size: 25px;
+        height: 2.1em;
     }
 
     @media screen and (orientation:portrait){
@@ -79,7 +81,7 @@ page-login {
     @media screen and (orientation:landscape){
         .button{
             margin:auto;
-            width:60%;
+            width:80%;
             height: 2.1em;
         }
         #loginbutton {
@@ -98,7 +100,7 @@ page-login {
 
         .inputs {
             margin: auto;
-            width: 70%;
+            width: 80%;
         }
 
         .icons {

src/pages/login/login.ts

@@ -7,14 +7,6 @@ import { DashboardPage } from '../dashboard/dashboard';
 
 import { UserProvider } from '../../providers/user/user'
 
-
-/**
- * Generated class for the LoginPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
-
 @Component({
   selector: 'page-login',
   templateUrl: 'login.html',

src/pages/register/register.html

@@ -19,101 +19,99 @@ <h1 id="title">INTRANSITION</h1>
   <ion-grid>
 
     <ion-row justify-content-center>
-      <ion-col col-10>
+      <ion-col col-7 col-xl-6>
         <h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
         <br>
         <h2 id="lifechange" text-center>It's a life change.</h2>
       </ion-col>
     </ion-row>
 
     <form class="form" [formGroup]='validate' (ngSubmit)='submitReg()'>
+
       <ion-row justify-content-center>
-        <ion-col col-10 col-xl-7>
+        <ion-col col-7 col-xl-6>
           <ion-item no-lines>
             <ion-input 
-              [(ngModel)]="registerUser.firstName"
               class="inputs"
               type="text" 
-              #first 
               placeholder="First Name" 
               formControlName='first' 
               [class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
             </ion-input> 
           </ion-item>
-          <ion-item class="inputs" no-lines *ngIf="!validate.controls.first.valid  && (validate.controls.first.dirty || submitAttempt)">
+          <ion-item no-lines *ngIf="!validate.controls.first.valid  && (validate.controls.first.dirty || submitAttempt)">
             <p class="invalid-text">Enter a valid name</p>
           </ion-item><br>
         </ion-col>
       </ion-row>
 
       <ion-row justify-content-center>
-        <ion-col col-10 col-xl-7>
+        <ion-col col-7 col-xl-6>
           <ion-item no-lines>
             <ion-input 
-              [(ngModel)]="registerUser.lastName"
               class="inputs" 
               type="text" 
-              #last 
               placeholder="Last Name" 
               formControlName='last'
               [class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input> 
           </ion-item>
-          <ion-item class="inputs" no-lines *ngIf="!validate.controls.last.valid  && (validate.controls.last.dirty || submitAttempt)">
+          <ion-item no-lines *ngIf="!validate.controls.last.valid  && (validate.controls.last.dirty || submitAttempt)">
             <p class="invalid-text">Enter a valid name</p>
           </ion-item><br>
         </ion-col>
       </ion-row>
 
       <ion-row justify-content-center>
-        <ion-col col-10 col-xl-7>
+        <ion-col col-7 col-xl-6>
           <ion-item no-lines>
             <ion-input 
-              [(ngModel)]="registerUser.email"
               class="inputs" 
               type="email" 
-              #email 
               placeholder="Email Address" 
               formControlName='email'
               [class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input> 
           </ion-item>
-          <ion-item class="inputs" no-lines *ngIf="!validate.controls.email.valid  && (validate.controls.email.dirty || submitAttempt)">
+          <ion-item no-lines *ngIf="!validate.controls.email.valid  && (validate.controls.email.dirty || submitAttempt)">
             <p class="invalid-text">Enter a valid email</p>
           </ion-item><br>
         </ion-col>
       </ion-row>
 
       <div formGroupName="pass">
         <ion-row justify-content-center>
-          <ion-col col-10 col-xl-7>
+          <ion-col col-7 col-xl-6>
             <ion-item no-lines>
               <ion-input  
                 class="inputs"
                 type="password" 
-                #pass 
                 placeholder="Password" 
                 formControlName='password'
                 [class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
               </ion-input> 
             </ion-item>
-            <ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
-              <p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
+            <ion-item no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
+              <p class="invalid-text">Enter a password between 6-30 characters using letters and numbers</p>
             </ion-item><br>
           </ion-col>
         </ion-row>
 
         <ion-row justify-content-center>
-          <ion-col col-10 col-xl-7>
+          <ion-col col-7 col-xl-6>
             <ion-item no-lines>
               <ion-input 
                 class="inputs"
                 type="password" 
-                #repass 
                 placeholder="Password Confirmation" 
                 formControlName='passwordCheck'
                 [class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
               </ion-input>
             </ion-item>
-            <ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.valid  && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
+          </ion-col>
+        </ion-row> 
+
+        <ion-row justify-content-center>
+          <ion-col col-7 col-xl-6>
+            <ion-item no-lines *ngIf="!validate.controls.pass.valid  && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
               <p class="invalid-text">Passwords do not match</p>
             </ion-item><br>
           </ion-col>
@@ -122,10 +120,11 @@ <h2 id="lifechange" text-center>It's a life change.</h2>
 
 
       <ion-row justify-content-center>
-        <ion-col col-8 col-xl-5>
+        <ion-col col-5 col-xl-4>
           <button id="regButton" ion-button block [disabled]="!validate.valid" type="submit">REGISTER</button>
         </ion-col>
       </ion-row>
+
     </form>
 
     <ion-row justify-content-center>
@@ -135,7 +134,7 @@ <h3 text-center>Login if you already have an account.</h3>
     </ion-row>
 
     <ion-row justify-content-center>
-      <ion-col class="button-col" col-8 col-xl-5>
+      <ion-col class="button-col" col-5 col-xl-4>
         <button id="loginButton" ion-button block (click)="goLogin()">LOGIN</button>
       </ion-col>
     </ion-row>

src/pages/register/register.scss

@@ -6,13 +6,15 @@ page-register {
   }
 
   #regButton {
-    font-size: 25px;
     background-color: rgb(130,180,64);
+    font-size: 25px;
+    height: 2.1em;
   }
 
   #loginButton {
     background-color: rgb(42,61,79); 
-    font-size: 25px
+    font-size: 25px;
+    height: 2.1em;
 }
 
   #text {

src/pages/register/register.ts

@@ -1,30 +1,23 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
-import { Validators, FormBuilder, FormGroup, FormControl} from '@angular/forms';
+import { Validators, FormBuilder, FormGroup} from '@angular/forms';
 import { PasswordValidator } from '../../validators/password.validator';
 import { UserProvider } from '../../providers/user/user';
 import { WizardPage } from '../wizard/wizard'
 import { LoginPage } from '../login/login';
 
-
-
 @Component({
   selector: 'page-register',
   templateUrl: 'register.html',
 })
 export class RegisterPage {
 
-  registerUser: any = {
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: ''
-  }
+  registerUser: any = {}
 
   private validate: FormGroup
   submitAttempt: boolean = false;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public _user: UserProvider) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public _userService: UserProvider) {
 
     this.validate = this.formBuilder.group({
       first: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
@@ -43,15 +36,21 @@ export class RegisterPage {
   }
 
   submitReg() {
+    this.registerUser = {
+      firstName: this.validate.value.first,
+      lastName: this.validate.value.last,
+      email: this.validate.value.email,
+      password: this.validate.value.pass.password
+    }
+    console.log('validate object', this.validate.value)
     this.submitAttempt = true
-    console.log('submitReg() runs', this.validate)
-    this._user.sendReg(this.registerUser)
+    console.log('submitReg() runs', this.registerUser)
+    this._userService.sendReg(this.registerUser)
       .subscribe( (data: any) => {
         console.log('data from submitReg()', data)
       },
       err => {
       console.error('err from register:', err)
-      //this.presentToast()
       },
       () => {
       this.navCtrl.setRoot(WizardPage, {registered: this.registerUser})

src/providers/user/user.ts

@@ -19,12 +19,12 @@ export class UserProvider {
   }
 
   sendReg(user) {
-    console.log('sendReg() runs')
-    return this.http.post(this.requestUrl + 'appUsers', user)
+    console.log('sendReg() runs', user)
+    return this.http.post(this.requestUrl + '/appUsers', user)
   }
 
 
   login(creds) {
-    return this.http.post(this.requestUrl + 'appUsers/login', creds);
+    return this.http.post(this.requestUrl + '/appUsers/login', creds);
   }
 }