Optimized alerts, contactform sending, phone signin update and updated dependencies

Author: jeroenouw

README.md

@@ -84,7 +84,6 @@ Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app
 * MD Icon
 * MD Progress spinner
 * MD Progress bar
-* MD Dialog
 * MD Tooltip
 * MD Snackbar
 
@@ -94,16 +93,11 @@ Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app
 ## To Finish List (known issues)
 ### Auth
 * Cellphone authentication (optimizing)
-* Optimizing alerts
 * Google, Facebook, Twitter & Github signin/signup
 * Error messages: Email already exists, login failed, registration failed
 
-### Sending
-* Contact form send
-
 ### Profile
-* Dialog component
-* File uploading
+* Profile image uploading
 * Change settings
 * Messaging layout and functionality
 

package-lock.json

@@ -3,7 +3,15 @@
   "version": "0.0.1",
   "author": "Jeroen Ouwehand",
   "description": "Full stack starter app with Angular 4, Material Design and Firebase.",
-  "keywords": ["angular", "firebase", "material", "nosql", "oauth", "starter-template"],
+  "keywords": [
+    "angular",
+    "firebase",
+    "material",
+    "nosql",
+    "oauth",
+    "starter-template",
+    "ngx"
+  ],
   "homepage": "https://github.com/jeroenouw/Angular4MaterialDesign",
   "license": "MIT",
   "angular-cli": {},
@@ -20,44 +28,44 @@
     "i18n": "ng-xi18n"
   },
   "dependencies": {
-    "@angular/animations": "^4.3.1",
+    "@angular/animations": "^4.3.2",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.3.1",
-    "@angular/compiler": "^4.3.1",
-    "@angular/core": "^4.3.1",
-    "@angular/forms": "^4.3.1",
-    "@angular/http": "^4.3.1",
+    "@angular/common": "^4.3.2",
+    "@angular/compiler": "^4.3.2",
+    "@angular/core": "^4.3.2",
+    "@angular/forms": "^4.3.2",
+    "@angular/http": "^4.3.2",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.3.1",
-    "@angular/platform-browser-dynamic": "^4.3.1",
-    "@angular/platform-server": "^4.3.1",
-    "@angular/router": "^4.3.1",
+    "@angular/platform-browser": "^4.3.2",
+    "@angular/platform-browser-dynamic": "^4.3.2",
+    "@angular/platform-server": "^4.3.2",
+    "@angular/router": "^4.3.2",
     "core-js": "^2.4.1",
-    "firebase": "^4.1.3",
+    "firebase": "^4.2.0",
     "hammerjs": "^2.0.8",
-    "primeng": "^4.0.3",
+    "primeng": "^4.1.2",
     "rxjs": "^5.4.2",
     "ts-helpers": "*",
-    "zone.js": "^0.8.12"
+    "zone.js": "^0.8.16"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.1",
-    "@angular/compiler-cli": "^4.3.1",
-    "@types/jasmine": "^2.5.52",
-    "@types/node": "^7.0.31",
-    "codelyzer": "^3.0.1",
-    "jasmine-core": "^2.6.3",
-    "jasmine-spec-reporter": "^4.1.0",
+    "@angular/cli": "^1.2.6",
+    "@angular/compiler-cli": "^4.3.2",
+    "@types/jasmine": "^2.5.53",
+    "@types/node": "^8.0.17",
+    "codelyzer": "^3.1.2",
+    "jasmine-core": "^2.6.4",
+    "jasmine-spec-reporter": "^4.1.1",
     "karma": "^1.7.0",
-    "karma-chrome-launcher": "^2.1.1",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^1.0.1",
     "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "^5.1.2",
-    "ts-node": "^3.0.6",
+    "ts-node": "^3.3.0",
     "tslint": "^5.5.0",
     "typescript": "^2.4.2",
-    "webpack": "^3.3.0"
+    "webpack": "^3.4.1"
   }
 }

package.json

@@ -1,6 +1,6 @@
 <md-card>
   <div [hidden]="currentUser">
-    <h3>Phone Number login</h3>
+    <h3>Phone Number login</h3><h5>Currently only saving phonenumber to database, login in progress. (temporary place)</h5>
 
     <br/>+
     <md-input-container>
@@ -18,12 +18,14 @@ <h3>Phone Number login</h3>
 
     <div id="recaptcha-container"></div><br/>
 
-    <button md-raised-button (click)="sendLoginCode()">SMS Text Login Code</button>
+    <button md-raised-button (click)="sendLoginCode()">SMS me the text login code</button>
 
     <div *ngIf="windowRef.confirmationResult">
       <hr>
-      <label for="code">Enter your Verification Code Here</label><br>
-      <input type="text" name="code" [(ngModel)]="verificationCode">
+      <h4>Enter your verification code here</h4><br>
+      <md-input-container>
+        <input mdInput type="text" name="code" [(ngModel)]="verificationCode">
+      </md-input-container>
 
       <button md-raised-button (click)="verifyLoginCode()">Verify</button>
     </div>

src/app/components/auth/phone-signin/phone-signin.component.html

@@ -2,24 +2,28 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import * as firebase from 'firebase';
 
-import { WindowService, PhoneNumber } from '../../shared';
+import { WindowService, PhoneNumber, AuthService, AlertService } from '../../shared';
 
 @Component({
   selector: 'app-phone-signin',
   templateUrl: './phone-signin.component.html',
   styleUrls: ['./phone-signin.component.scss']
 })
 export class PhoneSigninComponent implements OnInit {
-
   phoneNumber = new PhoneNumber()
+  isAuthenticated = false;
 
   token: string;
   windowRef: any;
   verificationCode: string;
   currentUser: any;
 
   constructor(private win: WindowService,
-  private router: Router) { }
+              private router: Router,
+              private authService: AuthService,
+              private alertService: AlertService) { 
+      this.isAuthenticated = this.authService.isAuthenticated()
+  }
 
   ngOnInit() {
     this.windowRef = this.win.windowRef
@@ -34,23 +38,25 @@ export class PhoneSigninComponent implements OnInit {
     firebase.auth().signInWithPhoneNumber(num, appVerifier)
       .then(result => {
           this.windowRef.confirmationResult = result;
+          this.alertService.showToaster('Login code is send');
       })
       .catch( error => console.log(error) );
   }
 
   verifyLoginCode() {
     this.windowRef.confirmationResult
       .confirm(this.verificationCode)
-      .then( result => {
-        this.currentUser = result.user;
-      }) 
-      .then(response => {
-        this.router.navigate(['/']);
-        firebase.auth().currentUser.getIdToken()
-        .then(
-            (token: string) => this.token = token
-        );
-      }) 
+        .then((result) => {
+          const currentUser = result.user;
+        }) 
+        .then(response => {
+          this.router.navigate(['/']);
+          firebase.auth().currentUser.getIdToken()
+          .then(
+              (token: string) => this.token = token
+          );
+          this.alertService.showToaster('Login code is entered');
+        }) 
     .catch( error => console.log(error, "Incorrect code entered?"));
   }
 }

src/app/components/auth/phone-signin/phone-signin.component.ts

@@ -3,9 +3,6 @@
 <!-- Progress bar -->
 <md-progress-bar *ngIf="loading" mode="indeterminate"></md-progress-bar>
 
-<!-- TEMPORARY -->
-<app-phone-signin></app-phone-signin>
-
 <md-card>  
   <h3>Social login</h3>
   <form (ngSubmit)="onSignInGoogle(g)" #g="ngForm">
@@ -46,7 +43,7 @@ <h3>Login</h3>
       <button md-raised-button class="primary" type="submit" [disabled]="!f.valid">Login</button>
     </md-card-actions>
   </form>
-  <!-- TEMPORARY
+  <!-- TEMPORARY DISABLED DUE PROFILE PROBLEMS
   <hr />
 
   <h3>Anonymous login</h3>
@@ -56,3 +53,6 @@ <h3>Anonymous login</h3>
   </md-card-actions>  
   -->
 </md-card>
+
+<!-- TEMPORARY PLACE -->
+<app-phone-signin></app-phone-signin>

src/app/components/auth/signin.component.html

@@ -23,39 +23,33 @@ export class SigninComponent implements OnInit {
   onSignInGoogle(form: NgForm) {
     this.loading = true;
     this.authService.signInWithGoogle();
-    this.alertService.showToaster('Google login succesful');
   }
 
   onSignInTwitter(form: NgForm) {
     this.loading = true;
     this.authService.signInWithTwitter();
-    this.alertService.showToaster('Twitter login succesful');
   }
 
   onSignInFacebook(form: NgForm) {
     this.loading = true;
     this.authService.signInWithFacebook();
-    this.alertService.showToaster('Facebook login succesful');
   }
 
   onSignInGithub(form: NgForm) {
     this.loading = true;
     this.authService.signInWithGithub();
-    this.alertService.showToaster('Github login succesful');
   }
 
   onSignin(form: NgForm) {
     this.loading = true;
     const email = form.value.email;
     const password = form.value.password;
     this.authService.signinUser(email, password);
-    this.alertService.showToaster('Login succesful');
   }
 
   onSigninAnonymous(form: NgForm) {
     this.loading = true;
     this.authService.signInAnonymous();
-    this.alertService.showToaster('Anonymous login succesful');
   }
 
 }

src/app/components/auth/signin.component.ts

@@ -24,40 +24,26 @@ export class SignupComponent implements OnInit {
     const email = form.value.email;
     const password = form.value.password;
     this.authService.signupUser(email, password);
-    this.alertService.showToaster('Verification email is sent to you.');
-    // this.alertService.signUpToaster;
   }
 
   onSignupGoogle(form: NgForm) {
     this.loading = true;
     this.authService.signUpWithGoogle();
-    this.alertService.showToaster('Your Google registration is completed.');
   }
 
   onSignupTwitter(form: NgForm) {
     this.loading = true;
     this.authService.signUpWithTwitter();
-    this.alertService.showToaster('Your Twitter registration is completed.');
   }
 
   onSignupFacebook(form: NgForm) {
     this.loading = true;
     this.authService.signUpWithFacebook();
-    this.alertService.showToaster('Your Facebook registration is completed.');
   }
 
   onSignupGithub(form: NgForm) {
     this.loading = true;
     this.authService.signUpWithGithub();
-    this.alertService.showToaster('Your Github registration is completed.');
   }
 
-  /* onSignupCellphone(form: NgForm) {
-    const phoneNumber = form.value.phoneNumber;
-    const appVerifier = form.value.appVerifier;
-    const code = form.value.code;
-    this.authService.signUpWithCellPhone(phoneNumber, appVerifier, code);
-    this.alertService.showToaster('Verification SMS is sent to you.');
-  }*/
-
 }

src/app/components/auth/signup.component.ts

@@ -1,32 +1,32 @@
 <div id="content">
   <md-card>
     <h1>Contact us</h1>
-      <form class="form" >
+      <form class="form" (ngSubmit)="onSubmit(c)" #c="ngForm" >
       <md-input-container class="full-width">
-        <input mdInput placeholder="Company" value="Google">
+        <input mdInput placeholder="Company" id="company" name="company" value="Google" ngModel required>
       </md-input-container>
 
       <table class="full-width" cellspacing="0"><tr>
         <td><md-input-container class="full-width">
-          <input mdInput placeholder="First name" required>
+          <input mdInput placeholder="First name" id="firstname" name="firstname" ngModel required>
         </md-input-container></td>
         <td><md-input-container class="full-width">
-          <input mdInput placeholder="Last name" required>
+          <input mdInput placeholder="Last name" id="lastname" name="lastname" ngModel required>
         </md-input-container></td>
       </tr></table>
 
       <p>
         <md-input-container class="full-width">
-          <textarea mdInput placeholder="Address" value="Streetname 12a"></textarea>
+          <textarea mdInput placeholder="Address" value="Streetname 12a" id="address" name="address" ngModel required></textarea>
         </md-input-container>
       </p>
 
       <table class="full-width" cellspacing="0"><tr>
         <td><md-input-container class="full-width">
-          <input mdInput placeholder="City">
+          <input mdInput placeholder="City" id="city" name="city" ngModel required>
         </md-input-container></td>
         <td><md-input-container class="full-width">
-          <input mdInput #postalCode maxlength="6" placeholder="Zip Code" value="2900TY">
+          <input mdInput #postalCode maxlength="6" id="postal" name="postal" placeholder="Zip Code" value="2900TY" ngModel required>
           <md-hint align="end">{{postalCode.value.length}} / 6</md-hint>
         </md-input-container></td>
       </tr></table>      
@@ -36,7 +36,7 @@ <h1>Contact us</h1>
         </md-input-container>
       </p>
       <br />
-      <button md-raised-button action="mailto:[email protected]">Submit</button>
+      <button md-raised-button type="submit" [disabled]="c.invalid">Submit</button>
 
     </form>
   </md-card>