Permalink
Browse files

auth service and LoginPage

  • Loading branch information...
adash333 committed Oct 2, 2018
1 parent 4b27585 commit 7349fba63e6750a7a4fce286192899ecd0c98368
@@ -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)
],
@@ -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>
@@ -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;
}
}
@@ -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();
}
}
}
@@ -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();
}
}

0 comments on commit 7349fba

Please sign in to comment.