Update interactive block view login

src/models/page.ts

@@ -6,6 +6,7 @@ export interface InteractiveBlock {
   openAfterDestroy?: InteractiveBlockIds[];
   closeBeforeMount?: InteractiveBlockIds[];
   callbackBeforeClose?: Array<() => boolean>;
+  mayOpen?: () => boolean;
 }
 
 export interface PageTimestamp {

src/store/app.ts

@@ -31,8 +31,6 @@ export interface AppState extends AppSettings {
   users: LightdmUsers[];
 }
 
-let inputErrorTimer: null | any
-
 @Module({ dynamic: true, store, name: 'app' })
 class App extends VuexModule implements AppState {
   version = '2.0.0'

src/store/page.ts

@@ -6,25 +6,18 @@ import {
   Action
 } from 'vuex-module-decorators'
 import store from '@/store/index'
-import { InteractiveBlock, InteractiveBlockIds, AppMenu, LoginPosition, AppMenuMain } from '@/models/page'
+import { InteractiveBlock, InteractiveBlockIds, AppMenu, LoginPosition, AppMenuMain, DialogInterface } from '@/models/page'
 import { AppModule } from './app'
 
-export interface PageState {
-  menu: AppMenuMain | AppMenu;
-  language: string;
-  languages: string[];
-  loginPosition: LoginPosition;
-  activeBlocks: InteractiveBlock[];
-  interactiveBlocks: InteractiveBlock[];
-}
-
 @Module({ dynamic: true, store, name: 'page' })
-class Page extends VuexModule implements PageState {
+class Page extends VuexModule {
   menu: AppMenuMain | AppMenu = {
     view: false,
     items: []
   }
 
+  dialog: DialogInterface | null = null
+
   mainTabIndex = 0
   language = ''
   loginPosition: LoginPosition = 'center'
@@ -33,7 +26,8 @@ class Page extends VuexModule implements PageState {
   interactiveBlocks: InteractiveBlock[] = [
     {
       id: 'login',
-      closeBeforeMount: ['settings']
+      closeBeforeMount: ['settings'],
+      mayOpen: () => !AppModule.viewThemeOnly
     },
     {
       id: 'settings',
@@ -79,9 +73,12 @@ class Page extends VuexModule implements PageState {
   @Mutation
   OPEN_ACTIVE_BLOCK(id: InteractiveBlockIds) {
     const activeBlock = this.interactiveBlocks.find((block) => block.id === id)
-    if (activeBlock) {
-      this.activeBlocks.push(activeBlock)
-    }
+    if (!activeBlock) { return }
+
+    const canOpen = activeBlock?.mayOpen ? activeBlock?.mayOpen() : true
+    if (!canOpen) { return }
+
+    this.activeBlocks.push(activeBlock)
   }
 
   @Mutation
@@ -127,6 +124,19 @@ class Page extends VuexModule implements PageState {
     this.SET_STATE_PAGE({ key: 'mainTabIndex', value: updatedTabIndex })
   }
 
+  @Action
+  openFirstBlock() {
+    for (let i = 0; i < this.interactiveBlocks.length; i++) {
+      const block = this.interactiveBlocks[i]
+      const open = block.mayOpen ? block.mayOpen() : true
+
+      if (open) {
+        this.OPEN_ACTIVE_BLOCK(block.id)
+        break
+      }
+    }
+  }
+
   @Action
   async openBlock(settings: { id: InteractiveBlockIds }) {
     settings = settings || {}
@@ -158,6 +168,7 @@ class Page extends VuexModule implements PageState {
     if (!block) { return }
 
     const openBlocks = block.openAfterDestroy
+
     if (openBlocks) {
       openBlocks.forEach((id) => this.OPEN_ACTIVE_BLOCK(id))
     }
@@ -171,6 +182,16 @@ class Page extends VuexModule implements PageState {
       this.CLOSE_ACTIVE_BLOCK(id)
     }
   }
+
+  @Action
+  openDialog(dialog: DialogInterface) {
+    this.SET_STATE_PAGE({ key: 'dialog', value: dialog })
+  }
+
+  @Action
+  closeDialog() {
+    this.SET_STATE_PAGE({ key: 'dialog', value: null })
+  }
 }
 
 export const PageModule = getModule(Page)

src/views/Home.tsx

@@ -5,6 +5,7 @@ import { AppModule } from '@/store/app'
 import { PageModule } from '@/store/page'
 
 import AppMenu from '@/components/app/AppMenu'
+import AppDialog from '@/components/app/AppDialog'
 import SettingsComponent from '@/components/base/SettingsComponent'
 import LoginComponent from '@/components/base/LoginComponent'
 import FrameRateBlock from '@/components/base/FrameRateBlock'
@@ -40,6 +41,10 @@ export default class HomePage extends Vue {
     return PageModule.isOpenBlock('login')
   }
 
+  get isOpenBlock() {
+    return !!PageModule.activeBlock
+  }
+
   get isOpenSettings() {
     return PageModule.isOpenBlock('settings')
   }
@@ -48,6 +53,14 @@ export default class HomePage extends Vue {
     return AppModule.viewThemeOnly
   }
 
+  get isGithubMode() {
+    return AppModule.isGithubMode
+  }
+
+  get showGithubButton() {
+    return this.isGithubMode && this.isOpenBlock
+  }
+
   get showLogin() {
     return !this.isViewThemeOnly && this.isOpenLogin
   }
@@ -71,7 +84,7 @@ export default class HomePage extends Vue {
 
   handleClick(event: MouseEvent) {
     if (!this.activeBlock) {
-      return PageModule.openBlock({ id: 'login' })
+      return PageModule.openFirstBlock()
     }
 
     const target = event.target as Node
@@ -98,7 +111,7 @@ export default class HomePage extends Vue {
       </transition-group>
 
       { !this.isViewThemeOnly && <ShutdownButton /> }
-      { !this.isViewThemeOnly && <GithubButton /> }
+      { this.showGithubButton && <GithubButton /> }
       <AppMenu />
     </div>
   }