Step 7.11: Add login component

Author: dotansimha

src/pages/login/login.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { Alert, AlertController, NavController } from 'ionic-angular';
+import { PhoneService } from '../../services/phone';
+
+@Component({
+  selector: 'login',
+  templateUrl: 'login.html'
+})
+export class LoginPage {
+  private phone = '';
+
+  constructor(
+    private alertCtrl: AlertController,
+    private phoneService: PhoneService,
+    private navCtrl: NavController
+  ) {}
+
+  onInputKeypress({keyCode}: KeyboardEvent): void {
+    if (keyCode === 13) {
+      this.login();
+    }
+  }
+
+  login(phone: string = this.phone): void {
+    const alert = this.alertCtrl.create({
+      title: 'Confirm',
+      message: `Would you like to proceed with the phone number ${phone}?`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel'
+        },
+        {
+          text: 'Yes',
+          handler: () => {
+            this.handleLogin(alert);
+            return false;
+          }
+        }
+      ]
+    });
+
+    alert.present();
+  }
+
+  handleLogin(alert: Alert): void {
+    alert.dismiss().then(() => {
+      return this.phoneService.verify(this.phone);
+    })
+    .catch((e) => {
+      this.handleError(e);
+    });
+  }
+
+  handleError(e: Error): void {
+    console.error(e);
+
+    const alert = this.alertCtrl.create({
+      title: 'Oops!',
+      message: e.message,
+      buttons: ['OK']
+    });
+
+    alert.present();
+  }
+}