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 @@ ...@@ -684,6 +684,14 @@
"@types/cordova": "^0.0.34" "@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": { "@ionic-native/http": {
"version": "5.8.0", "version": "5.8.0",
"resolved": "https://registry.npmjs.org/@ionic-native/http/-/http-5.8.0.tgz", "resolved": "https://registry.npmjs.org/@ionic-native/http/-/http-5.8.0.tgz",
...@@ -2830,6 +2838,11 @@ ...@@ -2830,6 +2838,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.1.tgz", "resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.1.tgz",
"integrity": "sha1-SWBrjBWlaI1HKPkuSnMloGHeB/U=" "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": { "cordova-plugin-ionic-keyboard": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.1.3.tgz", "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.1.3.tgz",
...@@ -2847,6 +2860,11 @@ ...@@ -2847,6 +2860,11 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-local-notification/-/cordova-plugin-local-notification-0.9.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/cordova-plugin-local-notification/-/cordova-plugin-local-notification-0.9.0-beta.2.tgz",
"integrity": "sha512-63n77K1pt8dnbWnNR8QWETi9Glezi1bvNHvHWmGNIOv0xCb0phZnm+Ku49BQ+omwe8Z5voMvrA4I03SYPpv38w==" "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": { "cordova-plugin-request-location-accuracy": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/cordova-plugin-request-location-accuracy/-/cordova-plugin-request-location-accuracy-2.3.0.tgz", "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 @@ ...@@ -25,6 +25,7 @@
"@ionic-native/background-mode": "^5.11.0", "@ionic-native/background-mode": "^5.11.0",
"@ionic-native/core": "^5.0.0", "@ionic-native/core": "^5.0.0",
"@ionic-native/diagnostic": "^5.8.0", "@ionic-native/diagnostic": "^5.8.0",
"@ionic-native/google-plus": "^5.0.0",
"@ionic-native/http": "^5.8.0", "@ionic-native/http": "^5.8.0",
"@ionic-native/local-notifications": "^5.11.0", "@ionic-native/local-notifications": "^5.11.0",
"@ionic-native/location-accuracy": "^5.8.0", "@ionic-native/location-accuracy": "^5.8.0",
...@@ -39,7 +40,9 @@ ...@@ -39,7 +40,9 @@
"cordova-plugin-background-mode": "git+https://github.com/sercatven/cordova-plugin-background-mode.git", "cordova-plugin-background-mode": "git+https://github.com/sercatven/cordova-plugin-background-mode.git",
"cordova-plugin-badge": "^0.8.8", "cordova-plugin-badge": "^0.8.8",
"cordova-plugin-file": "^6.0.1", "cordova-plugin-file": "^6.0.1",
"cordova-plugin-googleplus": "^8.0.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2", "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-plugin-request-location-accuracy": "^2.3.0",
"cordova-sqlite-storage": "^3.2.0", "cordova-sqlite-storage": "^3.2.0",
"cordova.plugins.diagnostic": "^5.0.0", "cordova.plugins.diagnostic": "^5.0.0",
...@@ -128,7 +131,10 @@ ...@@ -128,7 +131,10 @@
"CONTENT_AUTHORITY": "$PACKAGE_NAME" "CONTENT_AUTHORITY": "$PACKAGE_NAME"
}, },
"cordova-plugin-app-version": {}, "cordova-plugin-app-version": {},
"cordova-plugin-file": {} "cordova-plugin-file": {},
"cordova-plugin-googleplus": {
"PLAY_SERVICES_VERSION": "11.8.0"
}
}, },
"platforms": [ "platforms": [
"android" "android"
......
src/app/app-routing.module.ts
...@@ -4,6 +4,7 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; ...@@ -4,6 +4,7 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [ const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' }, { path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', loadChildren: './pages/start/start.module#StartPageModule' }, { 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: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
{ path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' }, { path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' },
{ path: 'offre-details', loadChildren: './pages/offre-details/offre-details.module#OffreDetailsPageModule' }, { 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'; ...@@ -11,91 +11,97 @@ import { TripService } from './services/trip-service';
// import { LocationService } from './services/location-service'; // import { LocationService } from './services/location-service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: 'app.component.html' templateUrl: 'app.component.html'
}) })
export class AppComponent { export class AppComponent {
constructor( constructor(
public LN: LocalNotifications, public LN: LocalNotifications,
private platform: Platform, private platform: Platform,
private splashScreen: SplashScreen, private splashScreen: SplashScreen,
private statusBar: StatusBar, private statusBar: StatusBar,
private router: Router, private router: Router,
private _STOR: Storage private _STOR: Storage
// private _LOCAT: LocationService // private _LOCAT: LocationService
) { ) {
this.initializeApp(); this.initializeApp();
} }
initializeApp() { initializeApp() {
this.platform.ready().then(() => { this.platform.ready().then(() => {
this.statusBar.styleDefault(); this.statusBar.styleDefault();
this.splashScreen.hide(); this.splashScreen.hide();
// Set params // Set params
this.setDefaultParams(); this.setDefaultParams();
// Set locator // Set locator
// this.setLocator(); // this.setLocator();
this._STOR.get('PARAM_mainslider').then((prmMainslider) => { this._STOR.get('PARAM_mainslider').then((prmMainslider) => {
if (prmMainslider) { if (prmMainslider) {
this.router.navigateByUrl('/app/dashboard', { replaceUrl: true }); this._STOR.get('isLoggedIn').then((isLoggedIn) => {
} else { if (isLoggedIn) {
this.router.navigateByUrl('/mainslider', { replaceUrl: true }); this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
this._STOR.set('PARAM_mainslider', true); } else {
} this.router.navigateByUrl('/login', { replaceUrl: true });
}); }
}); });
} } else {
this.router.navigateByUrl('/mainslider', { replaceUrl: true });
this._STOR.set('PARAM_mainslider', true);
}
});
});
}
setDefaultParams() { setDefaultParams() {
this._STOR.get('PARAM_geolocate').then((val) => { this._STOR.get('PARAM_geolocate').then((val) => {
if (val === null) { if (val === null) {
this._STOR.set('PARAM_geolocate', true); this._STOR.set('PARAM_geolocate', true);
} }
}); });
this._STOR.get('PARAM_geoarea').then((val) => { this._STOR.get('PARAM_geoarea').then((val) => {
if (val === null) { if (val === null) {
this._STOR.set('PARAM_geoarea', 1000); this._STOR.set('PARAM_geoarea', 1000);
} }
}); });
this._STOR.get('PARAM_notiftime').then((val) => { this._STOR.get('PARAM_notiftime').then((val) => {
if (val === null) { if (val === null) {
this._STOR.set('PARAM_notiftime', 2880); this._STOR.set('PARAM_notiftime', 2880);
} }
}); });
this._STOR.get('PARAM_trackdelay').then((val) => { this._STOR.get('PARAM_trackdelay').then((val) => {
if (val === null) { if (val === null) {
this._STOR.set('PARAM_trackdelay', 60000); this._STOR.set('PARAM_trackdelay', 60000);
} }
}); });
this._STOR.get('PARAM_notifnbr').then((val) => { this._STOR.get('PARAM_notifnbr').then((val) => {
if (val === null) { if (val === null) {
this._STOR.set('PARAM_notifnbr', 'all'); this._STOR.set('PARAM_notifnbr', 'all');
} }
}); });
this._STOR.get('NOTIF_shownpartners').then((val) => { this._STOR.get('NOTIF_shownpartners').then((val) => {
if (val === null) { if (val === null) {
this._STOR.set('NOTIF_shownpartners', []); this._STOR.set('NOTIF_shownpartners', []);
} }
}); });
} }
setLocator() { setLocator() {
// Start locator if ON // Start locator if ON
// this._STOR.get('PARAM_geolocate').then((val) => { // this._STOR.get('PARAM_geolocate').then((val) => {
// if (val !== null) { // if (val !== null) {
// this._LOCAT.restartTracking(); // this._LOCAT.restartTracking();
// } // }
// }); // });
this.LN.on('offres').subscribe(res => { this.LN.on('offres').subscribe(res => {
console.log('offres notif', res); console.log('offres notif', res);
}); });
// this.LN.on('trigger').subscribe(res => { // this.LN.on('trigger').subscribe(res => {
// console.log('trigger notif', res); // console.log('trigger notif', res);
// }); // });
} }
} }
src/app/app.module.ts
...@@ -18,6 +18,7 @@ import { LocalNotifications } from '@ionic-native/local-notifications/ngx'; ...@@ -18,6 +18,7 @@ import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { BackgroundMode } from '@ionic-native/background-mode/ngx'; import { BackgroundMode } from '@ionic-native/background-mode/ngx';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx'; import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { AppVersion } from '@ionic-native/app-version/ngx'; import { AppVersion } from '@ionic-native/app-version/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
...@@ -42,7 +43,8 @@ import { AppVersion } from '@ionic-native/app-version/ngx'; ...@@ -42,7 +43,8 @@ import { AppVersion } from '@ionic-native/app-version/ngx';
LocalNotifications, LocalNotifications,
BackgroundMode, BackgroundMode,
BackgroundGeolocation, BackgroundGeolocation,
AppVersion AppVersion,
GooglePlus
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
......
src/app/pages/login/login.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
...@@ -19,6 +19,7 @@ const routes: Routes = [ ...@@ -19,6 +19,7 @@ const routes: Routes = [
CommonModule, CommonModule,
FormsModule, FormsModule,
IonicModule, IonicModule,
ReactiveFormsModule,
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
declarations: [LoginPage] declarations: [LoginPage]
......
src/app/pages/login/login.page.html
<ion-header> <ion-header>
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-buttons slot="start"> <ion-title>Connexion</ion-title>
<ion-menu-button>
<!-- <ion-icon name="menu" size="large"></ion-icon> -->
</ion-menu-button>
</ion-buttons>
<ion-title>Login</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content text-center color="primary" padding> <ion-content text-center color="primary" padding>
...@@ -35,17 +30,33 @@ ...@@ -35,17 +30,33 @@
</ion-grid> </ion-grid>
</form> </form>
</ion-card> --> </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 color="light" no-padding no-margin>
<ion-card-content no-padding> <ion-card-content no-padding>
<ion-item> <ion-item>
<!-- <ion-label position="floating">Email :</ion-label> --> <!-- <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>
<ion-item lines="none"> <ion-item lines="none">
<!-- <ion-label position="floating">Mot de passe :</ion-label> --> <!-- <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> </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-content>
</ion-card> </ion-card>
<a href="javascript:;"> <a href="javascript:;">
...@@ -54,8 +65,7 @@ ...@@ -54,8 +65,7 @@
</ion-text> </ion-text>
</a> </a>
<ion-item-divider color="primary"> </ion-item-divider> <ion-item-divider color="primary"> </ion-item-divider>
<ion-button color="dark" expand="block" type="submit" [disabled]="form.invalid" no-margin>Connexion <ion-button color="dark" expand="block" type="submit" [disabled]="validationsForm.invalid" no-margin>Connexion</ion-button>
</ion-button>
</form> </form>
<ion-item-divider color="primary" lines="none"> </ion-item-divider> <ion-item-divider color="primary" lines="none"> </ion-item-divider>
<ion-item-divider color="primary" justify-content-center> <ion-item-divider color="primary" justify-content-center>
...@@ -63,13 +73,13 @@ ...@@ -63,13 +73,13 @@
</ion-item-divider> </ion-item-divider>
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col> <!-- <ion-col>
<ion-button expand="block" class="btn-fb" no-margin> <ion-button expand="block" class="btn-fb" no-margin>
<ion-icon name="logo-facebook"></ion-icon> <ion-icon name="logo-facebook"></ion-icon>
</ion-button> </ion-button>
</ion-col> </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-icon name="logo-google"></ion-icon>
</ion-button> </ion-button>
</ion-col> </ion-col>
......
src/app/pages/login/login.page.scss
...@@ -16,3 +16,7 @@ ion-icon.key-logo { ...@@ -16,3 +16,7 @@ ion-icon.key-logo {
color: var(--ion-color-g, #cc3333); 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 { 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({ @Component({
selector: 'app-login', selector: 'app-login',
templateUrl: './login.page.html', templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'], styleUrls: ['./login.page.scss'],
}) })
export class LoginPage implements OnInit { export class LoginPage implements OnInit {
login: any; login: any;
constructor() { } 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 { ...@@ -69,8 +69,9 @@ export class LocationService {
console.log("[TRACK] start"); console.log("[TRACK] start");
this.tracking_enabled = true; this.tracking_enabled = true;
this.trck_id = setInterval(() => { this.trck_id = setInterval(() => {
console.log('Cycle fetch location');
this.bgLocation.getCurrentLocation().then((location) => { this.bgLocation.getCurrentLocation().then((location) => {
console.log('Cycle fetch location', location); console.log('Location > ', location);
// Save current location // Save current location
// this.saveLocation(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