Improve the integration with web app login

block-core · Oct 8, 2023 · b025173 · b025173
1 parent 13cfd3b
commit b025173
Show file tree

Hide file tree

Showing 10 changed files with 299 additions and 123 deletions.
diff --git a/app/src/app/app-routing.module.ts b/app/src/app/app-routing.module.ts
@@ -42,10 +42,10 @@ const routes: Routes = [
   {
     path: '',
     component: HomeComponent,
-    canActivate: [AuthGuard],
-    resolve: {
-      data: LoadingResolverService,
-    },
+    // canActivate: [AuthGuard],
+    // resolve: {
+    //   data: LoadingResolverService,
+    // },
   },
   {
     path: 'connect',

diff --git a/app/src/app/app.html b/app/src/app/app.html
@@ -2,7 +2,7 @@
 </div> -->
 
 <div
-  *ngIf="!authenticated"
+  *ngIf="!appState.authenticated"
   [ngClass]="{ rightToLeft: appState.documentDirection === 'rtl' }"
   [dir]="appState.documentDirection"
 >
@@ -11,7 +11,7 @@
 
 <div
   class="app-container"
-  *ngIf="authenticated"
+  *ngIf="appState.authenticated"
   [ngClass]="{ rightToLeft: appState.documentDirection === 'rtl' }"
   [dir]="appState.documentDirection"
 >

diff --git a/app/src/app/app.ts b/app/src/app/app.ts
@@ -51,7 +51,6 @@ export class AppComponent {
   @ViewChild('drawer') drawer!: MatSidenav;
   @ViewChild('draweraccount') draweraccount!: MatSidenav;
   @ViewChild('searchInput') searchInput!: ElementRef;
-  authenticated = false;
   bgimagePath = '/assets/profile-bg.png';
   profile: NostrProfileDocument | undefined;
   visibilityHandler: any;
@@ -108,6 +107,12 @@ export class AppComponent {
       const param = Object.fromEntries(new URLSearchParams(queryParam)) as any;
       this.appState.params = param;
 
+      // Payload is a JSON-object that is returned from the login process from the Wallet web app.
+      if (this.appState.params.payload) {
+        const payload = JSON.parse(this.appState.params.payload);
+        this.appState.payload = payload;
+      }
+
       if (this.appState.params.nostr) {
         const protocolRequest = new NostrProtocolRequest();
         const protocolData = protocolRequest.decode(this.appState.params.nostr);
@@ -119,15 +124,15 @@ export class AppComponent {
       }
     }
 
-    this.authService.authInfo$.subscribe(async (auth) => {
-      this.state.pubkey = auth.publicKeyHex;
+    // this.authService.authInfo$.subscribe(async (auth) => {
+    //   this.state.pubkey = auth.publicKeyHex;
 
-      this.authenticated = auth.authenticated();
+    //   this.authenticated = auth.authenticated();
 
-      if (this.authenticated) {
-        await this.initialize();
-      }
-    });
+    //   if (this.authenticated) {
+    //     await this.initialize();
+    //   }
+    // });
 
     this.profileService.profile$.subscribe((profile) => {
       this.profile = profile;
@@ -306,6 +311,7 @@ export class AppComponent {
   loading = true;
 
   async ngOnInit() {
+    debugger;
     this.theme.init();
 
     // Verify if the user is already authenticated.
@@ -320,6 +326,7 @@ export class AppComponent {
         this.appState.admin = authenticated.user.admin;
         this.appState.approved = authenticated.user.approved;
       } else {
+        debugger;
         this.appState.reset();
         this.router.navigateByUrl('/connect');
       }

diff --git a/app/src/app/connect/connect.css b/app/src/app/connect/connect.css
@@ -138,7 +138,7 @@
   border-radius: 10px;
   margin-left: 11em;
   margin-right: 2em;
-  padding: 4em;
+  padding: 2em 3em;
   margin-top: 2em;
   margin-bottom: 2em;
 }

diff --git a/app/src/app/connect/connect.html b/app/src/app/connect/connect.html
@@ -45,7 +45,7 @@
         mat-flat-button
         color="primary"
       >
-        Connect <span class="hide-tiny">using extension</span>
+        Login <span class="hide-tiny">(extension)</span>
       </button>
       <button
         class="start-button"
@@ -64,7 +64,7 @@
         <h1 class="centered">
           Free City Hub is your portal into your Free City
         </h1>
-        <p class="centered" *ngIf="consent">
+        <!-- <p class="centered" *ngIf="consent">
           <button
             class="start-button"
             color="primary"
@@ -81,7 +81,8 @@ <h1 class="centered">
           >
             Log in</button
           ><br /><br />
-        </p>
+        </p> -->
+
         <p class="centered" *ngIf="!consent">
           <button
             class="start-button"
@@ -92,6 +93,69 @@ <h1 class="centered">
             Give consent
           </button>
         </p>
+
+        <div *ngIf="consent">
+          <p>
+            To login to Free City Hub, you need a decentralized identity (DID).
+            You can use the Free City Wallet (<a
+              href="https://chrome.google.com/webstore/detail/smart-city-platform/bmmhjnaohafphhlecmkkiaaglcebcapn"
+              target="_blank"
+              >extension</a
+            >
+            or
+            <a href="https://wallet.freeplatform.city/" target="_blank"
+              >web app</a
+            >) to create a new DID.
+          </p>
+
+          <div *ngIf="deviceType == 'apple'">
+            <p>
+              You're using an Apple product. Unfortunately Apple is working hard
+              to destroy the free web and has crippled the support for web based
+              applications (PWA) on their devices.
+            </p>
+            <p>
+              To login using Apple mobile device, you can only use the web app option.
+            </p>
+            <p class="centered">
+              <br />
+              <button (click)="login()" color="primary" mat-fab extended>
+                <mat-icon>login</mat-icon>
+                Login (web app)
+              </button>
+            </p>
+          </div>
+<!-- 
+          <p *ngIf="deviceType == 'android'">
+          </p> -->
+
+          <div *ngIf="deviceType == 'desktop' || deviceType == 'android'">
+            <!-- <p>
+              You're using a desktop browser and can install the Free City
+              Wallet extension for Brave, Chrome and Edge. This extension allows
+              you to login to the Free City Hub using a decentralized identity
+              (DID).
+            </p> -->
+
+            <p class="centered">
+              <button
+              *ngIf="extensionDiscovered"
+              (click)="connect()"
+              mat-fab
+              extended
+              color="primary"
+            >
+            <mat-icon>login</mat-icon>
+              Login (extension)
+            </button>
+              <br /><br />
+              <button (click)="login()" color="primary" mat-fab extended>
+                <mat-icon>login</mat-icon>
+                Login (web app)
+              </button>
+            </p>
+          </div>
+        </div>
       </mat-card-content>
     </mat-card>