Merge pull request #1043 from deckgo/signin

fix: signin if already signedin from website

Author: peterpeterparker

studio/src/app/app-root.tsx

@@ -176,19 +176,19 @@ export class AppRoot {
     return [
       <ion-app class={this.loading ? 'loading' : undefined}>
         <ion-router useHash={false}>
-          <ion-route url="/" component="app-dashboard" />
+          <ion-route url="/" component="app-dashboard-page" />
 
           <ion-route url="/editor" component="app-editor" />
           <ion-route url="/editor/:deckId" component="app-editor" />
 
           <ion-route url="/profile" component="app-profile" />
           <ion-route url="/customization" component="app-customization" />
 
-          <ion-route url="/dashboard" component="app-dashboard" />
+          <ion-route url="/dashboard" component="app-dashboard-page" />
 
-          <ion-route url="/signin" component="app-signin" />
-          <ion-route url="/signin/:redirect" component="app-signin" />
-          <ion-route url="/signin/:redirect/:redirectId" component="app-signin" />
+          <ion-route url="/signin" component="app-signin-page" />
+          <ion-route url="/signin/:redirect" component="app-signin-page" />
+          <ion-route url="/signin/:redirect/:redirectId" component="app-signin-page" />
 
           <ion-route url="/poll" component="app-poll" />
           <ion-route url="/poll/:pollKey" component="app-poll" />

studio/src/app/pages/core/app-signin/app-signin.scss renamed to studio/src/app/components/core/app-signin/app-signin.scss

@@ -217,7 +217,7 @@ export class AppSignIn {
 
     let token: string | null = null;
     if (authStore.state.authUser) {
-      token = await firebase.auth().currentUser.getIdToken();
+      token = await firebase.auth().currentUser?.getIdToken();
     }
 
     localStorage.setItem(
@@ -280,22 +280,19 @@ export class AppSignIn {
 
   render() {
     return [
-      <app-navigation></app-navigation>,
-      <ion-content class="ion-padding fullscreen-padding">
-        <main class="ion-padding fit">
-          {this.renderBackButton()}
+      <main class="ion-padding fit">
+        {this.renderBackButton()}
 
-          {this.renderMsg()}
+        {this.renderMsg()}
 
-          {this.renderGitHub()}
+        {this.renderGitHub()}
 
-          <div id="firebaseui-auth-container"></div>
+        <div id="firebaseui-auth-container"></div>
 
-          <p class="ion-text-center ion-padding-start ion-padding-end">
-            <small>DeckDeckGo is free and open source 😃.</small>
-          </p>
-        </main>
-      </ion-content>,
+        <p class="ion-text-center ion-padding-start ion-padding-end">
+          <small>DeckDeckGo is free and open source 😃.</small>
+        </p>
+      </main>,
     ];
   }
 

studio/src/app/pages/core/app-signin/app-signin.tsx renamed to studio/src/app/components/core/app-signin/app-signin.tsx

@@ -142,7 +142,7 @@ export class AppDashboard {
       const promises: Promise<void>[] = [];
 
       this.decks.forEach((deck: DeckAndFirstSlide) => {
-        if (deck.deck?.data?.clone !== undefined) {
+        if (deck?.deck?.data?.clone !== undefined) {
           promises.push(this.deckDashboardService.snapshot(deck.deck, this.watchClonedDeck));
         }
       });
@@ -425,15 +425,6 @@ export class AppDashboard {
   };
 
   render() {
-    return (
-      <Fragment>
-        <app-navigation presentation={true}></app-navigation>
-        <ion-content class="ion-padding">{this.renderContent()}</ion-content>
-      </Fragment>
-    );
-  }
-
-  private renderContent() {
     if (this.loading) {
       return this.renderLoading();
     }

studio/src/app/pages/core/app-dashboard/app-dashboard.scss renamed to studio/src/app/components/dashboard/app-dashboard/app-dashboard.scss

@@ -13,13 +13,16 @@ app-slot-type {
 
   ion-list {
     ion-item {
-      h1,
+      h1 {
+        font-size: 28px;
+      }
+
       h2 {
-        font-weight: 400;
+        font-size: 20px;
       }
 
       h3 {
-        font-weight: 400;
+        font-size: 17px;
       }
 
       h1,

studio/src/app/pages/core/app-dashboard/app-dashboard.tsx renamed to studio/src/app/components/dashboard/app-dashboard/app-dashboard.tsx

@@ -0,0 +1,17 @@
+import {Component, h, Fragment} from '@stencil/core';
+
+@Component({
+  tag: 'app-dashboard-page',
+})
+export class AppDashboardPage {
+  render() {
+    return [
+      <Fragment>
+        <app-navigation presentation={true}></app-navigation>
+        <ion-content class="ion-padding">
+          <app-dashboard></app-dashboard>
+        </ion-content>
+      </Fragment>,
+    ];
+  }
+}

studio/src/app/components/editor/app-slot-type/app-slot-type.scss

@@ -0,0 +1,63 @@
+import {Component, Fragment, h, Prop, State} from '@stencil/core';
+
+import {AuthUser} from '../../../models/auth/auth.user';
+
+import authStore from '../../../stores/auth.store';
+
+@Component({
+  tag: 'app-signin-page',
+})
+export class AppSigninPage {
+  @Prop()
+  redirect: string;
+
+  @Prop()
+  redirectId: string;
+
+  @State()
+  private signin: boolean;
+
+  private destroyListener;
+
+  async componentWillLoad() {
+    this.destroyListener = authStore.onChange('authUser', async (authUser: AuthUser | null) => {
+      if (!authUser) {
+        this.signin = true;
+      }
+    });
+
+    await this.initSignedIn();
+  }
+
+  private async initSignedIn() {
+    this.signin = authStore.state.authUser === undefined || authStore.state.anonymous;
+  }
+
+  disconnectedCallback() {
+    if (this.destroyListener) {
+      this.destroyListener();
+    }
+  }
+
+  render() {
+    if (this.signin) {
+      return (
+        <Fragment>
+          <app-navigation></app-navigation>
+          <ion-content class="ion-padding fullscreen-padding">
+            <app-signin redirect={this.redirect} redirectId={this.redirectId}></app-signin>
+          </ion-content>
+        </Fragment>
+      );
+    }
+
+    return (
+      <Fragment>
+        <app-navigation presentation={true}></app-navigation>
+        <ion-content class="ion-padding">
+          <app-dashboard></app-dashboard>
+        </ion-content>
+      </Fragment>
+    );
+  }
+}

studio/src/app/pages/core/app-dashboard/app-dashboard-page.tsx

@@ -134,6 +134,8 @@ export namespace Components {
     interface AppDashboardDeckActions {
         "deck": Deck;
     }
+    interface AppDashboardPage {
+    }
     interface AppDeckDelete {
         "deckName": string;
         "published": string;
@@ -341,6 +343,10 @@ export namespace Components {
         "redirect": string;
         "redirectId": string;
     }
+    interface AppSigninPage {
+        "redirect": string;
+        "redirectId": string;
+    }
     interface AppSlideNavigate {
     }
     interface AppSlidePreview {
@@ -550,6 +556,12 @@ declare global {
         prototype: HTMLAppDashboardDeckActionsElement;
         new (): HTMLAppDashboardDeckActionsElement;
     };
+    interface HTMLAppDashboardPageElement extends Components.AppDashboardPage, HTMLStencilElement {
+    }
+    var HTMLAppDashboardPageElement: {
+        prototype: HTMLAppDashboardPageElement;
+        new (): HTMLAppDashboardPageElement;
+    };
     interface HTMLAppDeckDeleteElement extends Components.AppDeckDelete, HTMLStencilElement {
     }
     var HTMLAppDeckDeleteElement: {
@@ -904,6 +916,12 @@ declare global {
         prototype: HTMLAppSigninElement;
         new (): HTMLAppSigninElement;
     };
+    interface HTMLAppSigninPageElement extends Components.AppSigninPage, HTMLStencilElement {
+    }
+    var HTMLAppSigninPageElement: {
+        prototype: HTMLAppSigninPageElement;
+        new (): HTMLAppSigninPageElement;
+    };
     interface HTMLAppSlideNavigateElement extends Components.AppSlideNavigate, HTMLStencilElement {
     }
     var HTMLAppSlideNavigateElement: {
@@ -1006,6 +1024,7 @@ declare global {
         "app-customization": HTMLAppCustomizationElement;
         "app-dashboard": HTMLAppDashboardElement;
         "app-dashboard-deck-actions": HTMLAppDashboardDeckActionsElement;
+        "app-dashboard-page": HTMLAppDashboardPageElement;
         "app-deck-delete": HTMLAppDeckDeleteElement;
         "app-deck-fonts": HTMLAppDeckFontsElement;
         "app-deck-header-footer": HTMLAppDeckHeaderFooterElement;
@@ -1065,6 +1084,7 @@ declare global {
         "app-share-deck": HTMLAppShareDeckElement;
         "app-share-options": HTMLAppShareOptionsElement;
         "app-signin": HTMLAppSigninElement;
+        "app-signin-page": HTMLAppSigninPageElement;
         "app-slide-navigate": HTMLAppSlideNavigateElement;
         "app-slide-preview": HTMLAppSlidePreviewElement;
         "app-slide-warning": HTMLAppSlideWarningElement;
@@ -1228,6 +1248,8 @@ declare namespace LocalJSX {
         "onDeckCloned"?: (event: CustomEvent<DeckDashboardCloneResult>) => void;
         "onDeckDeleted"?: (event: CustomEvent<string>) => void;
     }
+    interface AppDashboardPage {
+    }
     interface AppDeckDelete {
         "deckName"?: string;
         "published"?: string;
@@ -1461,6 +1483,10 @@ declare namespace LocalJSX {
         "redirect"?: string;
         "redirectId"?: string;
     }
+    interface AppSigninPage {
+        "redirect"?: string;
+        "redirectId"?: string;
+    }
     interface AppSlideNavigate {
         "onReorder"?: (event: CustomEvent<ItemReorderEventDetail>) => void;
     }
@@ -1527,6 +1553,7 @@ declare namespace LocalJSX {
         "app-customization": AppCustomization;
         "app-dashboard": AppDashboard;
         "app-dashboard-deck-actions": AppDashboardDeckActions;
+        "app-dashboard-page": AppDashboardPage;
         "app-deck-delete": AppDeckDelete;
         "app-deck-fonts": AppDeckFonts;
         "app-deck-header-footer": AppDeckHeaderFooter;
@@ -1586,6 +1613,7 @@ declare namespace LocalJSX {
         "app-share-deck": AppShareDeck;
         "app-share-options": AppShareOptions;
         "app-signin": AppSignin;
+        "app-signin-page": AppSigninPage;
         "app-slide-navigate": AppSlideNavigate;
         "app-slide-preview": AppSlidePreview;
         "app-slide-warning": AppSlideWarning;
@@ -1633,6 +1661,7 @@ declare module "@stencil/core" {
             "app-customization": LocalJSX.AppCustomization & JSXBase.HTMLAttributes<HTMLAppCustomizationElement>;
             "app-dashboard": LocalJSX.AppDashboard & JSXBase.HTMLAttributes<HTMLAppDashboardElement>;
             "app-dashboard-deck-actions": LocalJSX.AppDashboardDeckActions & JSXBase.HTMLAttributes<HTMLAppDashboardDeckActionsElement>;
+            "app-dashboard-page": LocalJSX.AppDashboardPage & JSXBase.HTMLAttributes<HTMLAppDashboardPageElement>;
             "app-deck-delete": LocalJSX.AppDeckDelete & JSXBase.HTMLAttributes<HTMLAppDeckDeleteElement>;
             "app-deck-fonts": LocalJSX.AppDeckFonts & JSXBase.HTMLAttributes<HTMLAppDeckFontsElement>;
             "app-deck-header-footer": LocalJSX.AppDeckHeaderFooter & JSXBase.HTMLAttributes<HTMLAppDeckHeaderFooterElement>;
@@ -1692,6 +1721,7 @@ declare module "@stencil/core" {
             "app-share-deck": LocalJSX.AppShareDeck & JSXBase.HTMLAttributes<HTMLAppShareDeckElement>;
             "app-share-options": LocalJSX.AppShareOptions & JSXBase.HTMLAttributes<HTMLAppShareOptionsElement>;
             "app-signin": LocalJSX.AppSignin & JSXBase.HTMLAttributes<HTMLAppSigninElement>;
+            "app-signin-page": LocalJSX.AppSigninPage & JSXBase.HTMLAttributes<HTMLAppSigninPageElement>;
             "app-slide-navigate": LocalJSX.AppSlideNavigate & JSXBase.HTMLAttributes<HTMLAppSlideNavigateElement>;
             "app-slide-preview": LocalJSX.AppSlidePreview & JSXBase.HTMLAttributes<HTMLAppSlidePreviewElement>;
             "app-slide-warning": LocalJSX.AppSlideWarning & JSXBase.HTMLAttributes<HTMLAppSlideWarningElement>;