Step 22.11: Implement a phone number verification

client/imports/app/auth/login.component.mobile.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, NgZone} from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Accounts } from 'meteor/accounts-base';
 
 import template from './login.component.mobile.html';
 
@@ -10,8 +11,29 @@ import template from './login.component.mobile.html';
 })
 export class MobileLoginComponent implements OnInit {
   error: string = '';
+  phoneForm: FormGroup;
+  phone: string;
 
-  constructor(private router: Router, private formBuilder: FormBuilder) {}
+  constructor(private router: Router, private zone: NgZone, private formBuilder: FormBuilder) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.phoneForm = this.formBuilder.group({
+      phone: ['', Validators.required]
+    });
+  }
+
+  send() {
+    if (this.phoneForm.valid) {
+      Accounts.requestPhoneVerification(this.phoneForm.value.phone, (err) => {
+        this.zone.run(() => {
+          if (err) {
+            this.error = err.reason || err;
+          } else {
+            this.phone = this.phoneForm.value.phone;
+            this.error = '';
+          }
+        });
+      });
+    }
+  }
 }