merge: updated signin flow

Author: peterpeterparker

docs/src/app/pages/app-home/app-home.tsx

@@ -42,7 +42,7 @@ export class AppHome {
             </ul>
           </section>
 
-          <section class="cta" text-center padding>
+          <section class="cta ion-text-center ion-padding">
             <div class="cta__primary">
               <h2>Get started now 🔥</h2>
               <deckgo-highlight-code padding>

remote/src/app/modals/app-remote-connect/app-remote-connect.tsx

@@ -60,7 +60,7 @@ export class AppRemoteConnect {
                             <ion-icon name="close"></ion-icon>
                         </ion-button>
                     </ion-buttons>
-                    <ion-title text-uppercase>DeckDeckGo</ion-title>
+                    <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,
 

remote/src/app/modals/app-remote-settings/app-remote-settings.tsx

@@ -103,7 +103,7 @@ export class AppRemoteSettings {
                             <ion-icon name="close"></ion-icon>
                         </ion-button>
                     </ion-buttons>
-                    <ion-title text-uppercase>DeckDeckGo</ion-title>
+                    <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,
 

remote/src/app/modals/app-remote-slide-picker/app-remote-slide-picker.tsx

@@ -39,7 +39,7 @@ export class AppRemoteSettings {
                             <ion-icon name="close"></ion-icon>
                         </ion-button>
                     </ion-buttons>
-                    <ion-title text-uppercase>DeckDeckGo</ion-title>
+                    <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,
             <ion-content padding>

remote/src/app/pages/app-about/app-about.tsx

@@ -10,7 +10,7 @@ export class AppAbout {
         return [
             <ion-header>
                 <ion-toolbar color="primary">
-                    <ion-title text-uppercase>DeckDeckGo</ion-title>
+                    <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,
 
@@ -29,7 +29,7 @@ export class AppAbout {
 
                 <p>DeckDeckGo is <strong>open source</strong> and its source code could be found on <a href="https://github.com/deckgo/deckdeckgo">Github <ion-icon name="logo-github"></ion-icon></a></p>
 
-                <div padding margin text-center class="social-links">
+                <div class="social-links ion-padding ion-margin ion-text-center">
                     <a href="https://deckdeckgo.com">
                         <ion-icon name="globe"></ion-icon>
                     </a>

remote/src/app/pages/app-remote/app-remote.tsx

@@ -406,7 +406,7 @@ export class AppRemote {
         return [
             <ion-header>
                 <ion-toolbar color="primary">
-                    <ion-title text-uppercase>DeckDeckGo</ion-title>
+                    <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
 
                     <ion-buttons slot="end">
                         <ion-button onClick={() => this.openSettingsModal()}>

remote/src/app/pages/app-timer/app-timer.tsx

@@ -122,7 +122,7 @@ export class AppTimer {
         return [
             <ion-header>
                 <ion-toolbar color="primary">
-                    <ion-title text-uppercase>DeckDeckGo</ion-title>
+                    <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,
 

studio/src/app/app-root.tsx

@@ -1,30 +1,34 @@
-import {Component, Prop} from '@stencil/core';
+import {Component, Element, Prop} from '@stencil/core';
 
 import {Subscription} from 'rxjs';
 
 import {ErrorService} from './services/error/error.service';
-
-import {AuthService, LoginModalComponentProps} from './services/auth/auth.service';
+import {AuthService} from './services/auth/auth.service';
+import {NavDirection, NavParams, NavService} from './services/nav/nav.service';
 
 @Component({
     tag: 'app-root',
     styleUrl: 'app-root.scss'
 })
 export class AppRoot {
 
-    @Prop({connect: 'ion-modal-controller'}) modalController: HTMLIonModalControllerElement;
+    @Element() el: HTMLElement;
+
     @Prop({connect: 'ion-menu-controller'}) lazyMenuController!: HTMLIonMenuControllerElement;
     @Prop({connect: 'ion-toast-controller'}) toastController: HTMLIonToastControllerElement;
 
     private errorSubscription: Subscription;
     private errorService: ErrorService;
 
-    private authSubscription: Subscription;
     private authService: AuthService;
 
+    private navSubscription: Subscription;
+    private navService: NavService;
+
     constructor() {
         this.errorService = ErrorService.getInstance();
         this.authService = AuthService.getInstance();
+        this.navService = NavService.getInstance();
     }
 
     async componentWillLoad() {
@@ -36,12 +40,8 @@ export class AppRoot {
             await this.toastError(error);
         });
 
-        this.authSubscription = this.authService.watchModal().subscribe(async (componentProps: LoginModalComponentProps) => {
-            if (!componentProps) {
-                return;
-            }
-
-            await this.signIn(componentProps);
+        this.navSubscription = this.navService.watch().subscribe(async (params: NavParams) => {
+            await this.navigate(params);
         });
     }
 
@@ -50,8 +50,8 @@ export class AppRoot {
             this.errorSubscription.unsubscribe();
         }
 
-        if (this.authSubscription) {
-            this.authSubscription.unsubscribe();
+        if (this.navSubscription) {
+            this.navSubscription.unsubscribe();
         }
     }
 
@@ -68,19 +68,21 @@ export class AppRoot {
         await popover.present();
     }
 
-    private async signIn(componentProps: LoginModalComponentProps) {
-        const modal: HTMLIonModalElement = await this.modalController.create({
-            component: 'app-login',
-            componentProps: {
-                type: componentProps.type,
-                context: componentProps.context
-            }
-        });
+    private async navigate(params: NavParams) {
+        if (!params) {
+            return;
+        }
+
+        const router: HTMLIonRouterElement = this.el.querySelector('ion-router');
 
-        await modal.present();
+        if (!router) {
+            return;
+        }
 
-        if (componentProps.onPresent) {
-            componentProps.onPresent();
+        if (params.direction === NavDirection.ROOT) {
+            window.location.assign(params.url);
+        } else {
+            await router.push(params.url);
         }
     }
 
@@ -89,8 +91,12 @@ export class AppRoot {
             <ion-app>
                 <ion-router useHash={false}>
                     <ion-route url="/" component="app-home"/>
+
                     <ion-route url="/editor" component="app-editor"/>
 
+                    <ion-route url="/signin" component="app-signin"/>
+                    <ion-route url="/signin/:redirect" component="app-signin"/>
+
                     <ion-route url="/about" component="app-about"/>
                     <ion-route url="/opensource" component="app-opensource"/>
                     <ion-route url="/privacy" component="app-privacy"/>

studio/src/app/components/core/app-menu-user/app-menu-user.scss

@@ -11,6 +11,10 @@ ion-split-pane {
               }
             }
           }
+
+          ion-button.new {
+            --color: var(--ion-color-primary);
+          }
         }
       }
     }

studio/src/app/components/core/app-menu-user/app-menu-user.tsx

@@ -1,8 +1,13 @@
 import {Component, State} from '@stencil/core';
-import {AuthService, LoginModalType} from '../../../services/auth/auth.service';
+
 import {Subscription} from 'rxjs';
+
 import {User} from '../../../models/user';
 
+import {Utils} from '../../../utils/utils';
+
+import {AuthService} from '../../../services/auth/auth.service';
+import {NavDirection, NavService} from '../../../services/nav/nav.service';
 
 @Component({
     tag: 'app-menu-user',
@@ -14,11 +19,14 @@ export class AppMenuUser {
     private authService: AuthService;
     private subscription: Subscription;
 
+    private navService: NavService;
+
     @State()
     private user: User;
 
     constructor() {
         this.authService = AuthService.getInstance();
+        this.navService = NavService.getInstance();
     }
 
     componentWillLoad() {
@@ -34,13 +42,19 @@ export class AppMenuUser {
     }
 
     private async signIn() {
-        this.authService.openSignInModal({
-            type: LoginModalType.SIGNIN
+        this.navService.navigate({
+            url: '/signin',
+            direction: NavDirection.FORWARD
         });
     }
 
     private async signOut() {
-        await this.authService.logout();
+        await this.authService.signOut();
+
+        this.navService.navigate({
+            url: '/',
+            direction: NavDirection.ROOT
+        });
     }
 
     render() {
@@ -50,7 +64,7 @@ export class AppMenuUser {
             <ion-item-divider>
                 <ion-label>Presentations</ion-label>
                 <ion-button size="small" slot="end" shape="round" margin-end href="/editor"
-                            routerDirection="forward">
+                            routerDirection="forward" class="new">
                     <ion-icon name="book" slot="start"></ion-icon>
                     <ion-label>New</ion-label>
                 </ion-button>
@@ -64,7 +78,7 @@ export class AppMenuUser {
     }
 
     private renderUser() {
-        if (this.user) {
+        if (Utils.isLoggedIn(this.user)) {
             return <ion-item class="user">
                 <app-avatar slot="start" src={this.user.photo_url}></app-avatar>
                 <ion-label>{this.user.name}</ion-label>
@@ -75,7 +89,7 @@ export class AppMenuUser {
     }
 
     private renderPresentations() {
-        if (this.user) {
+        if (Utils.isLoggedIn(this.user)) {
             return [
                 <ion-item href="/editor" routerDirection="forward">
                     <ion-icon name="book" slot="start"></ion-icon>
@@ -95,7 +109,7 @@ export class AppMenuUser {
     }
 
     private renderSignOut() {
-        if (this.user) {
+        if (Utils.isLoggedIn(this.user)) {
             return <ion-item button class="signout" onClick={() => this.signOut()}>
                 <ion-icon name="log-out" slot="start"></ion-icon>
                 <ion-label>Sign out</ion-label>