Skip to content

A
allo-app
Commit d1bd7f2d by Nabil Sadki
Options

Add login form

parent 590ff549
Showing with 215 additions and 102 deletions
package-lock.json
......@@ -684,6 +684,14 @@
"@types/cordova": "^0.0.34"
}
},
"@ionic-native/google-plus": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@ionic-native/google-plus/-/google-plus-5.0.0.tgz",
"integrity": "sha512-oy+EltUoS1oOJBm4no4hSiDYwNMe314QCejfXoXi1EmqKlNiIXZWr5YYUNOHX/R2EyvqkLBa2ZDNFTQHWgh2Eg==",
"requires": {
"@types/cordova": "^0.0.34"
}
},
"@ionic-native/http": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@ionic-native/http/-/http-5.8.0.tgz",
......@@ -2830,6 +2838,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.1.tgz",
"integrity": "sha1-SWBrjBWlaI1HKPkuSnMloGHeB/U="
},
"cordova-plugin-googleplus": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/cordova-plugin-googleplus/-/cordova-plugin-googleplus-8.0.0.tgz",
"integrity": "sha512-fQHQ4abY9NCCJxvlkBrBkpfoqkoFLfY+XN/S9YlbfMVqJcsCD2wsroXt3mRbHvOi4DEAETc61jstdzeD210IHQ=="
},
"cordova-plugin-ionic-keyboard": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.1.3.tgz",
......@@ -2847,6 +2860,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-local-notification/-/cordova-plugin-local-notification-0.9.0-beta.2.tgz",
"integrity": "sha512-63n77K1pt8dnbWnNR8QWETi9Glezi1bvNHvHWmGNIOv0xCb0phZnm+Ku49BQ+omwe8Z5voMvrA4I03SYPpv38w=="
},
"cordova-plugin-play-games-services": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/cordova-plugin-play-games-services/-/cordova-plugin-play-games-services-1.1.2.tgz",
"integrity": "sha512-zVwA+qRzt9+Hlv9t2F8dbLchTyXFx0kS9T1MQ/vBP7IulH6/BL0kUvC120jYZSYcKkBTvusW0FqVvQhMui4gZA=="
},
"cordova-plugin-request-location-accuracy": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/cordova-plugin-request-location-accuracy/-/cordova-plugin-request-location-accuracy-2.3.0.tgz",
......
package.json
......@@ -25,6 +25,7 @@
"@ionic-native/background-mode": "^5.11.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/diagnostic": "^5.8.0",
"@ionic-native/google-plus": "^5.0.0",
"@ionic-native/http": "^5.8.0",
"@ionic-native/local-notifications": "^5.11.0",
"@ionic-native/location-accuracy": "^5.8.0",
......@@ -39,7 +40,9 @@
"cordova-plugin-background-mode": "git+https://github.com/sercatven/cordova-plugin-background-mode.git",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-googleplus": "^8.0.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-play-games-services": "^1.1.2",
"cordova-plugin-request-location-accuracy": "^2.3.0",
"cordova-sqlite-storage": "^3.2.0",
"cordova.plugins.diagnostic": "^5.0.0",
......@@ -128,7 +131,10 @@
"CONTENT_AUTHORITY": "$PACKAGE_NAME"
},
"cordova-plugin-app-version": {},
"cordova-plugin-file": {}
"cordova-plugin-file": {},
"cordova-plugin-googleplus": {
"PLAY_SERVICES_VERSION": "11.8.0"
}
},
"platforms": [
"android"
......
src/app/app-routing.module.ts
......@@ -4,6 +4,7 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
{ path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' },
{ path: 'offre-details', loadChildren: './pages/offre-details/offre-details.module#OffreDetailsPageModule' },
......
src/app/app.component.ts
......@@ -11,91 +11,97 @@ import { TripService } from './services/trip-service';
// import { LocationService } from './services/location-service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(
public LN: LocalNotifications,
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router: Router,
private _STOR: Storage
// private _LOCAT: LocationService
) {
this.initializeApp();
}
constructor(
public LN: LocalNotifications,
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router: Router,
private _STOR: Storage
// private _LOCAT: LocationService
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
// Set params
this.setDefaultParams();
// Set params
this.setDefaultParams();
// Set locator
// this.setLocator();
// Set locator
// this.setLocator();
this._STOR.get('PARAM_mainslider').then((prmMainslider) => {
if (prmMainslider) {
this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
} else {
this.router.navigateByUrl('/mainslider', { replaceUrl: true });
this._STOR.set('PARAM_mainslider', true);
}
});
});
}
this._STOR.get('PARAM_mainslider').then((prmMainslider) => {
if (prmMainslider) {
this._STOR.get('isLoggedIn').then((isLoggedIn) => {
if (isLoggedIn) {
this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
} else {
this.router.navigateByUrl('/login', { replaceUrl: true });
}
});
} else {
this.router.navigateByUrl('/mainslider', { replaceUrl: true });
this._STOR.set('PARAM_mainslider', true);
}
});
});
}
setDefaultParams() {
this._STOR.get('PARAM_geolocate').then((val) => {
if (val === null) {
this._STOR.set('PARAM_geolocate', true);
}
});
this._STOR.get('PARAM_geoarea').then((val) => {
if (val === null) {
this._STOR.set('PARAM_geoarea', 1000);
}
});
this._STOR.get('PARAM_notiftime').then((val) => {
if (val === null) {
this._STOR.set('PARAM_notiftime', 2880);
}
});
this._STOR.get('PARAM_trackdelay').then((val) => {
if (val === null) {
this._STOR.set('PARAM_trackdelay', 60000);
}
});
this._STOR.get('PARAM_notifnbr').then((val) => {
if (val === null) {
this._STOR.set('PARAM_notifnbr', 'all');
}
});
this._STOR.get('NOTIF_shownpartners').then((val) => {
if (val === null) {
this._STOR.set('NOTIF_shownpartners', []);
}
});
}
setDefaultParams() {
this._STOR.get('PARAM_geolocate').then((val) => {
if (val === null) {
this._STOR.set('PARAM_geolocate', true);
}
});
this._STOR.get('PARAM_geoarea').then((val) => {
if (val === null) {
this._STOR.set('PARAM_geoarea', 1000);
}
});
this._STOR.get('PARAM_notiftime').then((val) => {
if (val === null) {
this._STOR.set('PARAM_notiftime', 2880);
}
});
this._STOR.get('PARAM_trackdelay').then((val) => {
if (val === null) {
this._STOR.set('PARAM_trackdelay', 60000);
}
});
this._STOR.get('PARAM_notifnbr').then((val) => {
if (val === null) {
this._STOR.set('PARAM_notifnbr', 'all');
}
});
this._STOR.get('NOTIF_shownpartners').then((val) => {
if (val === null) {
this._STOR.set('NOTIF_shownpartners', []);
}
});
}
setLocator() {
// Start locator if ON
// this._STOR.get('PARAM_geolocate').then((val) => {
// if (val !== null) {
// this._LOCAT.restartTracking();
// }
// });
setLocator() {
// Start locator if ON
// this._STOR.get('PARAM_geolocate').then((val) => {
// if (val !== null) {
// this._LOCAT.restartTracking();
// }
// });
this.LN.on('offres').subscribe(res => {
console.log('offres notif', res);
});
this.LN.on('offres').subscribe(res => {
console.log('offres notif', res);
});
// this.LN.on('trigger').subscribe(res => {
// console.log('trigger notif', res);
// });
}
// this.LN.on('trigger').subscribe(res => {
// console.log('trigger notif', res);
// });
}
}
src/app/app.module.ts
......@@ -18,6 +18,7 @@ import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { BackgroundMode } from '@ionic-native/background-mode/ngx';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
@NgModule({
declarations: [AppComponent],
......@@ -42,7 +43,8 @@ import { AppVersion } from '@ionic-native/app-version/ngx';
LocalNotifications,
BackgroundMode,
BackgroundGeolocation,
AppVersion
AppVersion,
GooglePlus
],
bootstrap: [AppComponent]
})
......
src/app/pages/login/login.module.ts
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';
......@@ -19,6 +19,7 @@ const routes: Routes = [
CommonModule,
FormsModule,
IonicModule,
ReactiveFormsModule,
RouterModule.forChild(routes)
],
declarations: [LoginPage]
......
src/app/pages/login/login.page.html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button>
<!-- <ion-icon name="menu" size="large"></ion-icon> -->
</ion-menu-button>
</ion-buttons>
<ion-title>Login</ion-title>
<ion-title>Connexion</ion-title>
</ion-toolbar>
</ion-header>
<ion-content text-center color="primary" padding>
......@@ -35,17 +30,33 @@
</ion-grid>
</form>
</ion-card> -->
<form #form="ngForm" (ngSubmit)="login(form)">
<form [formGroup]="validationsForm" (ngSubmit)="onSubmit(validationsForm.value)">
<ion-card color="light" no-padding no-margin>
<ion-card-content no-padding>
<ion-item>
<!-- <ion-label position="floating">Email :</ion-label> -->
<ion-input name="email" type="email" placeholder="adresse@email.com" ngModel required></ion-input>
<ion-input name="email" formControlName="email" type="email" placeholder="adresse@email.com" required>
</ion-input>
</ion-item>
<ion-item lines="none">
<!-- <ion-label position="floating">Mot de passe :</ion-label> -->
<ion-input name="password" type="password" placeholder="Mot de passe" ngModel required></ion-input>
<ion-input name="password" formControlName="password" type="password" placeholder="Mot de passe" required>
</ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validationMessages.email">
<div class="error-message"
*ngIf="validationsForm.get('email').hasError(validation.type) && (validationsForm.get('email').dirty || validationsForm.get('email').touched)">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</div>
</ng-container>
<ng-container *ngFor="let validation of validationMessages.password">
<div class="error-message"
*ngIf="validationsForm.get('password').hasError(validation.type) && (validationsForm.get('password').dirty || validationsForm.get('password').touched)">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</div>
</ng-container>
</div>
</ion-card-content>
</ion-card>
<a href="javascript:;">
......@@ -54,8 +65,7 @@
</ion-text>
</a>
<ion-item-divider color="primary"> </ion-item-divider>
<ion-button color="dark" expand="block" type="submit" [disabled]="form.invalid" no-margin>Connexion
</ion-button>
<ion-button color="dark" expand="block" type="submit" [disabled]="validationsForm.invalid" no-margin>Connexion</ion-button>
</form>
<ion-item-divider color="primary" lines="none"> </ion-item-divider>
<ion-item-divider color="primary" justify-content-center>
......@@ -63,13 +73,13 @@
</ion-item-divider>
<ion-grid>
<ion-row>
<ion-col>
<!-- <ion-col>
<ion-button expand="block" class="btn-fb" no-margin>
<ion-icon name="logo-facebook"></ion-icon>
</ion-button>
</ion-col>
</ion-col> -->
<ion-col>
<ion-button color="light" expand="block" class="btn-g" no-margin>
<ion-button color="light" expand="block" class="btn-g" (click)="doGoogleLogin()" no-margin>
<ion-icon name="logo-google"></ion-icon>
</ion-button>
</ion-col>
......
src/app/pages/login/login.page.scss
......@@ -16,3 +16,7 @@ ion-icon.key-logo {
color: var(--ion-color-g, #cc3333);
}
}
.error-message {
color: var(--ion-color-danger);
font-size: 12px;
}
\ No newline at end of file
src/app/pages/login/login.page.ts
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { AlloService } from '../../services/allo-service';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
login: any;
constructor() { }
login: any;
validationsForm: FormGroup;
ngOnInit() {
}
validationMessages = {
email: [
// { type: 'required', message: 'Email is required.' },
{ type: 'pattern', message: 'Adresse email invalide.' }
],
password: [
{ type: 'required', message: 'Le mot de passe est requis.' },
// { type: 'minlength', message: 'Password must be at least 5 characters long.' },
// { type: 'pattern', message: 'Your password must contain at least one uppercase, one lowercase, and one number.' }
]
};
constructor(
public formBuilder: FormBuilder,
public storage: Storage,
public router: Router,
private googlePlus: GooglePlus,
public _ALLO: AlloService
) { }
ngOnInit() {
this.validationsForm = this.formBuilder.group({
email: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])),
password: new FormControl('', Validators.required)
});
}
onSubmit(values) {
console.log(values);
}
async doGoogleLogin() {
this._ALLO.presentLoading();
this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
// this.googlePlus.login({
// 'scopes': 'email', // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
// // 'webClientId': 'webClientId.apps.googleusercontent.com', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
// // 'offline': true // Optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
// })
// .then(user => {
// this._ALLO.dismissLoading();
// this.storage.set('google_user', {
// name: user.displayName,
// email: user.email,
// picture: user.imageUrl
// })
// .then(() => {
// // this.router.navigate(["/user"]);
// }, error => {
// console.log(error);
// });
// this._ALLO.dismissLoading();
// }, err => {
// console.log(err);
// this._ALLO.dismissLoading();
// });
}
}
src/app/services/location-service.ts
......@@ -69,8 +69,9 @@ export class LocationService {
console.log("[TRACK] start");
this.tracking_enabled = true;
this.trck_id = setInterval(() => {
console.log('Cycle fetch location');
this.bgLocation.getCurrentLocation().then((location) => {
console.log('Cycle fetch location', location);
console.log('Location > ', location);
// Save current location
// this.saveLocation(location);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment