Ionic Build Process - Part 4: src/pages/login

login-routing.module.ts

basic routing for children of the login component

``` import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginPage } from './login.page'; const routes: Routes = [ { path: '', component: LoginPage } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class LoginPageRoutingModule {} ``` login.module.ts

Basic necessary modules for the login component

``` import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HTTP } from "@ionic-native/http/ngx"; import { IonicModule } from '@ionic/angular'; import { HttpClientModule } from '@angular/common/http'; import { LoginPageRoutingModule } from './login-routing.module'; import { LoginPage } from './login.page'; @NgModule({ imports: [ CommonModule, FormsModule, IonicModule, LoginPageRoutingModule, ReactiveFormsModule, HttpClientModule ], providers:[HTTP], declarations: [LoginPage] }) export class LoginPageModule {} ``` login.page.html

Below is a very basic login module

``` Login GO ``` login.page.ts

Takes login data and sets important values to local storage then navigate to the home page

TO ADD: Google/Facebook/Apple login

``` import { Component, OnInit } from '@angular/core'; import { Validators, FormBuilder, FormGroup } from "@angular/forms"; import { HTTP } from "@ionic-native/http/ngx"; import { environment } from "../../environments/environment"; import { Router } from "@angular/router"; @Component({ selector: 'app-login', templateUrl: './login.page.html', styleUrls: ['./login.page.scss'], }) export class LoginPage implements OnInit { private login: FormGroup; httpHeaders: object = { "Content-Type": "application/json", From: "omg", Authorization: environment.API_KEY, }; error: boolean = false; email: string = ""; password: string = ""; passwordType: string = "password"; passwordIcon: string = "eye"; constructor( private formBuilder: FormBuilder, private http: HTTP, private router: Router, ) { this.login = this.formBuilder.group({ username: ["", Validators.required], password: ["", Validators.required], }); } ngOnInit() { } logForm() { this.http.setDataSerializer("json"); console.log("name",this.login.value); console.log(environment.PROD_API_URL + "/user/authenticate"); this.http .post( environment.PROD_API_URL + "/user/authenticate", this.login.value, this.httpHeaders ) .then((res) => { let json_res = JSON.parse(res.data); console.log(json_res); this.resetForm(); if (json_res.status == 200) { localStorage.setItem("is_user_logged_in", "true"); localStorage.setItem("unique_id", json_res.data.unique_id); localStorage.setItem("join_date", json_res.data.join_date); this.router.navigate(["/home"]); } else { this.error = true; } }) .catch((err) => { console.log("login error",err) console.log("login err", JSON.stringify(err)); this.resetForm(); this.error = true; }); } hideShowPassword() { if (this.passwordType == "password") { this.passwordType = "text"; this.passwordIcon = "eye-off"; } else { this.passwordType = "password"; this.passwordIcon = "eye"; } } resetForm() { this.login.reset(); } } ```