auth service and LoginPage

src/app/pages/login/login.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
@@ -18,6 +18,7 @@ const routes: Routes = [
   imports: [
     CommonModule,
     FormsModule,
+    ReactiveFormsModule,
     IonicModule,
     RouterModule.forChild(routes)
   ],

src/app/pages/login/login.page.html

@@ -1,9 +1,44 @@
 <ion-header>
-  <ion-toolbar>
-    <ion-title>login</ion-title>
+  <ion-toolbar color="primary">
+    <ion-title>Login</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content padding>
+  <form [formGroup]="loginForm">
+    <ion-item>
+      <ion-label position="floating">Email</ion-label>
+      <ion-input formControlName="email" type="email" 
+        [class.invalid]="!loginForm.controls['email'].valid &&
+      loginForm.controls['email'].touched">
+      </ion-input>
+    </ion-item>
+    <ion-item class="error-message" *ngIf="!loginForm.controls['email'].valid &&
+       loginForm.controls['email'].touched">
+      <ion-label>有効なメールアドレスを入力してください。</ion-label>
+    </ion-item>
 
+    <ion-item>
+      <ion-label position="floating">Password</ion-label>
+      <ion-input formControlName="password" type="password" 
+        [class.invalid]="!loginForm.controls['password'].valid&& loginForm.controls['password'].touched">
+      </ion-input>
+    </ion-item>
+    <ion-item class="error-message" *ngIf="!loginForm.controls['password'].valid
+      && loginForm.controls['password'].touched">
+      <ion-label>パスワードは6文字以上入力してください。</ion-label>
+    </ion-item>
+
+    <ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
+      ログイン
+    </ion-button>
+  </form>
+
+  <ion-button expand="block" fill="clear" routerLink="/signup">
+    アカウント新規作成
+  </ion-button>
+
+  <ion-button expand="block" fill="clear" routerLink="/reset-password">
+    パスワードを忘れた場合
+  </ion-button>
 </ion-content>

src/app/pages/login/login.page.scss

@@ -0,0 +1,35 @@
+form {
+  margin-bottom: 32px;
+  button {
+    margin-top: 20px !important;
+  }
+}
+
+p {
+  font-size: 0.8em;
+  color: #d2d2d2;
+}
+
+ion-label {
+  margin-left: 5px;
+}
+
+ion-input {
+  padding: 5px;
+}
+
+.invalid {
+  border-bottom: 1px solid #ff6153;
+}
+
+.error-message {
+  min-height: 2.2rem;
+  ion-label {
+    margin: 2px 0;
+    font-size: 60%;
+    color: #ff6153;
+  }
+  .item-inner {
+    border-bottom: 0 !important;
+  }
+}

src/app/pages/login/login.page.ts

@@ -1,15 +1,58 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
+import { LoadingController, AlertController } from '@ionic/angular';
+import { AuthService } from '../../services/user/auth.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
   styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
+  public loginForm: FormGroup;
+  public loading: HTMLIonLoadingElement;
 
-  constructor() { }
-
-  ngOnInit() {
+  constructor(
+    public loadingCtrl: LoadingController,
+    public alertCtrl: AlertController,
+    private authService: AuthService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.loginForm = this.formBuilder.group({
+      email: ['', Validators.compose([Validators.required, Validators.email])],
+      password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
+    });
   }
 
-}
+  ngOnInit() {}
+
+  async loginUser(loginForm: FormGroup): Promise<void> {
+    if (!loginForm.valid) {
+      console.log('Form is not valid yet, current value:', loginForm.value);
+    } else {
+      const email = loginForm.value.email;
+      const password = loginForm.value.password;
+
+      this.authService.loginUser(email, password).then(
+        () => {
+          this.loading.dismiss().then(() => {
+            this.router.navigateByUrl('home');
+          });
+        },
+        error => {
+          this.loading.dismiss().then(async () => {
+            const alert = await this.alertCtrl.create({
+              message: error.message,
+              buttons: [{ text: 'Ok', role: 'cancel' }],
+            });
+            await alert.present();
+          });
+        }
+      );
+      this.loading = await this.loadingCtrl.create();
+      await this.loading.present();
+    }
+  }
+}

src/app/services/user/auth.service.ts

@@ -1,9 +1,40 @@
 import { Injectable } from '@angular/core';
+import * as firebase from 'firebase/app';
+import 'firebase/auth';
+import 'firebase/firestore';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
 
   constructor() { }
+
+  loginUser(email:string, password: string): Promise<any> {
+    return firebase.auth().signInWithEmailAndPassword(email, password);
+  }
+
+  signupUser(email: string, password: string): Promise<any> {
+    return firebase
+      .auth()
+      .createUserWithEmailAndPassword(email, password)
+      .then(newUserCredential => {
+        firebase
+          .firestore()
+          .doc(`/userProfile/${newUserCredential.user.uid}`)
+          .set({ email });
+      })
+      .catch(error => {
+        console.error(error);
+        throw new Error(error);
+      });
+  }
+
+  resetPassword(email: string): Promise<void> {
+    return firebase.auth().sendPasswordResetEmail(email);
+  }
+
+  logoutUser(): Promise<void> {
+    return firebase.auth().signOut();
+  }
 }