WIP - sign in/register form

openchargemap · Nov 29, 2023 · b54bfe5 · b54bfe5
1 parent 71b6b57
commit b54bfe5
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "io.openchargemap.app",
-  "version": "8.5.7",
+  "version": "8.5.8",
   "author": "Webprofusion",
   "homepage": "https://openchargemap.org",
   "scripts": {

diff --git a/src/app/pages/signin/signin.html b/src/app/pages/signin/signin.html
@@ -11,26 +11,63 @@
     <ion-avatar item-left>
         <img src="assets/images/icons/branding/AppIcon_128x128.png"/>
     </ion-avatar>
-    <p class="ion-padding">
+
+    <ion-segment [(ngModel)]="mode">
+        <ion-segment-button value="signin">
+            <ion-label>Sign In</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="register">
+            <ion-label>Create Account</ion-label>
+        </ion-segment-button>
+    </ion-segment>
+
+    <ng-container *ngIf="mode=='signin'">
+        <p class="ion-padding">
         Sign in using your Open Charge Map account.
     </p>
-    <ion-list>
-        <ion-item>
-            <ion-label position="floating">Email</ion-label>
-            <ion-input type="text" [(ngModel)]="email"></ion-input>
-        </ion-item>
+        <ion-list>
+            <ion-item>
+                <ion-label position="floating">Email</ion-label>
+                <ion-input type="text" [(ngModel)]="email"></ion-input>
+            </ion-item>
+            <ion-item>
+                <ion-label position="floating">Name or Nickname</ion-label>
+                <ion-input type="text" [(ngModel)]="username"></ion-input>
+            </ion-item>
+            <ion-item>
+                <ion-label position="floating">Password</ion-label>
+                <ion-input type="password" [(ngModel)]="password"></ion-input>
+            </ion-item>
 
-        <ion-item>
-            <ion-label position="floating">Password</ion-label>
-            <ion-input type="password" [(ngModel)]="password"></ion-input>
-        </ion-item>
+        </ion-list>
 
-    </ion-list>
+        <p>
+            <a (click)="appManager.launchWebPage('https://openchargemap.org/site/loginprovider/passwordreset')">Reset your password</a>
+        </p>
 
-    <p>or <a (click)="appManager.launchWebPage('https://openchargemap.org/site/loginprovider/register')">Register as New User</a>
-    or <a (click)="appManager.launchWebPage('https://openchargemap.org/site/loginprovider/passwordreset')">Reset your password</a>
+    </ng-container>
+    <ng-container *ngIf="mode=='register'">
+        <p class="ion-padding">
+        Create a new Open Charge Map account.
     </p>
+        <ion-list>
+            <ion-item>
+                <ion-label position="floating">Email</ion-label>
+                <ion-input type="text" [(ngModel)]="email"></ion-input>
+            </ion-item>
+
+            <ion-item>
+                <ion-label position="floating">Password</ion-label>
+                <ion-input type="password" [(ngModel)]="password"></ion-input>
+            </ion-item>
+            <ion-item>
+                <ion-label position="floating">Confirm Password</ion-label>
+                <ion-input type="password" [(ngModel)]="password"></ion-input>
+            </ion-item>
+
+        </ion-list>
 
+    </ng-container>
 </ion-content>
 <ion-footer>
     <ion-toolbar>

diff --git a/src/app/pages/signin/signin.ts b/src/app/pages/signin/signin.ts
@@ -13,6 +13,9 @@ import { AlertController, LoadingController, ModalController } from '@ionic/angu
 export class SignInPage {
     email: string;
     password: string;
+    username: string;
+
+    mode: string = 'register';
 
     constructor(
         public appManager: AppManager,
@@ -36,8 +39,53 @@ export class SignInPage {
         this.modalController.dismiss();
     }
 
+    async performRegister() {
+        const loading = await this.loadingController.create({
+            message: 'Signing In..'
+        });
+        await loading.present();
+
+        // sign in with supplied email address and password
+        let signInFailed = false;
+
+        try {
+
+            const registerResult = await this.appManager.api.performRegister(this.username, this.email, this.password);
+
+            loading.dismiss();
+
+            // signed in OK, save response and return to main app
+            localStorage.setItem('authResponse', JSON.stringify(this.appManager.api.authResponse));
+
+            this.appManager.isUserAuthenticated(true);
+
+            // navigation to main app. TODO: navigate to last requested page (route guard)
+            this.modalController.dismiss();
+
+            this.appManager.analytics.appEvent("Profile", "SignedIn");
+
+        } catch (err) {
+            signInFailed = true;
+            // sign in rejected
+            loading.dismiss();
+
+            const a = await this.alertController.create({
+                header: 'Open Charge Map',
+                subHeader: 'Email or Password not recognised',
+                buttons: ['Ok']
+            });
+            await a.present();
+
+            this.logging.log('Error logging in:' + err);
+        }
+
+    }
     async performSignIn() {
 
+        if (this.mode == 'register') {
+            return this.performRegister();
+        }
+
         const loading = await this.loadingController.create({
             message: 'Signing In..'
         });

diff --git a/src/app/services/APIClient.ts b/src/app/services/APIClient.ts
@@ -8,7 +8,7 @@ import { Logging, LogLevel } from './Logging';
 import { ReferenceDataManager } from './ReferenceDataManager';
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs';
+import { Observable, lastValueFrom } from 'rxjs';
 
 import { POISearchParams, SubmissionType, GeoLatLng, PlaceSearchResult } from '../model/AppModels';
 
@@ -21,7 +21,7 @@ import { ReferenceDataFilters } from '../model/ReferenceDataFilters';
 })
 export class APIClient {
   public serviceBase: string = 'https://api.openchargemap.io';
-  public serviceBaseURL: string = this.serviceBase + '/v3';
+  public serviceBaseURL: string = this.serviceBase + '/v4';
   public hasAuthorizationError: boolean = false;
 
   public ATTRIBUTION_METADATAFIELDID = 4;
@@ -150,11 +150,28 @@ export class APIClient {
     return this.http.get<CoreReferenceData>(serviceURL, this.getHttpRequestOptions());
   }
 
-  performSignIn(username: string, password: string): Promise<any> {
+  performSignIn(email: string, password: string): Promise<any> {
 
     const serviceURL = this.serviceBaseURL + '/profile/authenticate/';
 
-    const data = { 'emailaddress': username, 'password': password };
+    const data = { 'emailaddress': email, 'password': password };
+
+    // observable result is wrapper in a Promise for API consumer to handle result/rejection etc
+
+    return this.http.post(serviceURL, JSON.stringify(data), this.getHttpRequestOptions())
+      .toPromise()
+      .then(response => {
+        this.authResponse = response;
+        return this.authResponse;
+      });
+  }
+
+
+  performRegister(username: string, email:string, password: string): Promise<any> {
+
+    const serviceURL = this.serviceBaseURL + '/profile/register/';
+
+    const data = {'username':username, 'emailaddress': email, 'password': password };
 
     // observable result is wrapper in a Promise for API consumer to handle result/rejection etc