Skip to content

Commit

Permalink
login page
Browse files Browse the repository at this point in the history
  • Loading branch information
patrick-carmo committed Apr 11, 2024
1 parent 0a84c1c commit d5ab14c
Show file tree
Hide file tree
Showing 18 changed files with 391 additions and 60 deletions.
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@capacitor/clipboard": "^5.0.7",
"@capacitor/haptics": "5.0.7",
"@capacitor/keyboard": "5.0.8",
"@capacitor/preferences": "^5.0.7",
"@capacitor/share": "^5.0.7",
"@capacitor/status-bar": "5.0.7",
"@ionic/angular": "^7.0.0",
Expand Down
3 changes: 3 additions & 0 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './services/auth-guard.service';

const routes: Routes = [
{
path: 'home',
canActivate: [AuthGuard],
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
Expand All @@ -13,6 +15,7 @@ const routes: Routes = [
},
{
path: 'perfil',
canActivate: [AuthGuard],
loadChildren: () => import('./perfil/perfil.module').then( m => m.PerfilPageModule)
},
{
Expand Down
1 change: 1 addition & 0 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>Sair</ion-label>
<ion-button (click)="verifyToken()"></ion-button>
<ion-icon name="exit-sharp" slot="start"></ion-icon>
</ion-item>
</ion-menu-toggle>
Expand Down
15 changes: 14 additions & 1 deletion src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
import { Component } from '@angular/core';
import { AuthService } from './services/auth.service';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {}
constructor(private auth: AuthService) {}

async signOut() {
await this.auth.signOut();
}

async getUser() {
console.log(await this.auth.getUser())
}

async verifyToken(){
await this.auth.verifyToken()
}
}
28 changes: 24 additions & 4 deletions src/app/login/login.page.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,31 @@
<ion-content [fullscreen]="true">
<div id="container">
<div id="login-container">
<form #loginForm="ngForm" id="login-container" (keyup.enter)="emailAuth(this.email, this.password)">

<img src="../../assets/img/ibge-logo-6.png" id="logo">
<h1>Login</h1>
<ion-input fill="outline" shape="round" label="Email:" labelPlacement="floating"></ion-input>

<ion-input fill="outline" shape="round" label="E-mail:" labelPlacement="floating" name="email" ngModel type="email" required [(ngModel)]="email"></ion-input>

<ion-input fill="outline" shape="round" label="Senha:" labelPlacement="floating" name="password" ngModel type="password" required [(ngModel)]="password"></ion-input>

<div>
<ion-input type="email" fill="outline" shape="round" label="Email" labelPlacement="floating" helperText="Enter a valid email" errorText="Invalid email" ngModel email></ion-input>
<ion-button fill="clear" shape="round">Esqueceu a senha?</ion-button>
<ion-button fill="clear" shape="round" (click)="googleAuth()">
<ion-icon name="logo-google"></ion-icon>
</ion-button>
</div>
</div>

<div class="flex">
<ion-button shape="round" (click)="emailAuth(this.email, this.password)">Enviar</ion-button>
<ion-button (click)="loginForm.reset()" color="medium" shape="round">Limpar</ion-button>
</div>

<div *ngIf="error">
<p style="color: red;">
{{error}}
</p>
</div>
</form>
</div>
</ion-content>
44 changes: 35 additions & 9 deletions src/app/login/login.page.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
ion-content{
--background: url('../../assets/img/fundo.jpg');
}

#container {
text-align: center;
display: flex;
Expand All @@ -10,14 +14,6 @@
transform: translateY(-50%);
}

#login-container{
display: flex;
flex-direction: column;
padding: 20px;
gap: 10px;
max-width: 500px;
}

#container strong {
font-size: 20px;
line-height: 26px;
Expand All @@ -34,4 +30,34 @@

#container a {
text-decoration: none;
}
}


#login-container {
display: flex;
flex-direction: column;
padding: 20px;
gap: 10px;
max-width: 300px;

background-color: var(--login);

border-radius: 20px;
}

h1{
font-size: 3rem;
line-height: 30px;
margin: 20px;
}

#logo{
max-width: 200px;
margin: 0 auto;
}

// .flex{
// display: flex;
// justify-content: center;
// gap: 10px;
// }
53 changes: 48 additions & 5 deletions src/app/login/login.page.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,61 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { LoadingController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage {
email = '';
password = '';
email: string = '';
password: string = '';
error: any;
private loading: any;
private messageTimeout: any;

constructor(public auth: AuthService) {}
constructor(
private auth: AuthService,
private loadingControler: LoadingController,
private router: Router
) {}

async login() {
await this.auth.emailSignIn(this.email, this.password);
private errorMessage(message: string) {
this.error = message;
if (this.messageTimeout) clearTimeout(this.messageTimeout);
this.messageTimeout = setTimeout(() => {
this.error = null;
}, 5000);
}

async emailAuth(email: string, password: string) {
this.showLoading();
const error = await this.auth.emailSignIn(email, password);
this.dimisLoading();

error ? this.errorMessage(error) : this.router.navigate(['/']);
}

async googleAuth() {
this.showLoading();
const error = await this.auth.googleSignIn();
this.dimisLoading();

error ? this.errorMessage(error) : this.router.navigate(['/']);
}

async showLoading() {
this.loading = await this.loadingControler.create({
message: 'Enviando...',
});

this.loading.present();
}

async dimisLoading() {
if (this.loading) {
await this.loading.dismiss();
}
}
}
16 changes: 16 additions & 0 deletions src/app/services/auth-guard.service.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { AuthGuardService } from './auth-guard.service';

describe('AuthGuardService', () => {
let service: AuthGuardService;

beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(AuthGuardService);
});

it('should be created', () => {
expect(service).toBeTruthy();
});
});
21 changes: 21 additions & 0 deletions src/app/services/auth-guard.service.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}

async canActivate() {
const user = await this.auth.getUser();

if (!user) {
this.router.navigate(['/login']);
return false;
}

return true;
}
}
Loading

0 comments on commit d5ab14c

Please sign in to comment.