Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ion-header>
- <ion-toolbar>
- <ion-title>
- Login
- </ion-title>
- </ion-toolbar>
- </ion-header>
- <ion-content>
- <form (ngSubmit)="login()" [formGroup]="loginForm">
- <ion-grid>
- <ion-row>
- <ion-col>
- <ion-item>
- <ion-input type="text" placeholder="Email" formControlName="email" style="width:50%;"></ion-input>
- </ion-item>
- </ion-col>
- </ion-row>
- <ion-row>
- <ion-col col-3>
- <ion-item>
- <ion-input type="password" placeholder="Password" formControlName="password" style="width:50%;"></ion-input>
- </ion-item>
- </ion-col>
- </ion-row>
- </ion-grid>
- <div padding-horizontal>
- <div class="form-error">{{loginError}}</div>
- </div>
- <ion-grid>
- <ion-row>
- <ion-col>
- <ion-button type="submit" [disabled]="!loginForm.valid" color="primary">Log in</ion-button>
-
- <a href="#">Forgot password?</a>
- </ion-col>
- </ion-row>
- <ion-row>
- <ion-col>
- <ion-button icon-left block clear (click)="loginWithGoogle()" color="secondary">
- <ion-icon name="logo-google"></ion-icon>
- Log in with Google
- </ion-button>
- <ion-button icon-left block clear (click)="signup()" color="primary">
- <ion-icon name="person-add"></ion-icon>
- Sign up
- </ion-button>
- </ion-col>
- </ion-row>
- </ion-grid>
- </form>
- </ion-content>
- import { Component, OnInit } from '@angular/core';
- import { AuthService } from '../common/services/auth.service';
- import { FormGroup, FormBuilder, Validators } from '@angular/forms';
- import { Router } from '@angular/router';
- @Component({
- selector: 'app-login',
- templateUrl: './login.page.html',
- styleUrls: ['./login.page.scss'],
- })
- export class LoginPage implements OnInit {
- loginForm: FormGroup;
- loginError: string;
- constructor(private auth:AuthService,
- private router:Router,
- private fb: FormBuilder)
- {
- this.loginForm = this.fb.group({
- email: ['', Validators.compose([Validators.required, Validators.email])],
- password: ['', Validators.compose([Validators.required, Validators.minLength(6)])]
- });
- }
- ngOnInit() {}
- login() {
- alert('login');
- let data = this.loginForm.value;
- if (!data.email) {
- return;
- }
- let credentials = {
- email: data.email,
- password: data.password
- };
- this.auth.signInWithEmail(credentials)
- .then(
- () => this.router.navigate(['/home']),
- error => this.loginError = error.message
- );
- }
- }
- import { NgModule } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { FormsModule,ReactiveFormsModule } from '@angular/forms';
- import { Routes, RouterModule } from '@angular/router';
- import { IonicModule } from '@ionic/angular';
- import { LoginPage } from './login.page';
- const routes: Routes = [
- {
- path: '',
- component: LoginPage
- }
- ];
- @NgModule({
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- IonicModule,
- RouterModule.forChild(routes),
- ],
- entryComponents: [LoginPage],
- declarations: [LoginPage]
- })
- export class LoginPageModule {}
- import { Injectable } from '@angular/core';
- import { AngularFireAuth } from 'angularfire2/auth';
- import * as firebase from 'firebase/app';
- import AuthProvider = firebase.auth.AuthProvider;
- @Injectable({
- providedIn: 'root'
- })
- export class AuthService {
- private user: firebase.User;
- constructor(public afAuth: AngularFireAuth) {
- afAuth.authState.subscribe(user => {
- this.user = user;
- });
- }
- signInWithEmail(credentials) {
- console.log('Sign in with email');
- return this.afAuth.auth.signInWithEmailAndPassword(credentials.email,
- credentials.password);
- }
- }
Add Comment
Please, Sign In to add comment