Add onboarding wizard (fixes #76)

gramps-project · Jul 10, 2022 · 6316768 · 6316768
1 parent b99ad5a
commit 6316768
Show file tree

Hide file tree

Showing 6 changed files with 506 additions and 10 deletions.
diff --git a/src/GrampsJs.js b/src/GrampsJs.js
@@ -23,6 +23,7 @@ import './dayjs_locales.js'
 
 import './components/GrampsjsAppBar.js'
 import './components/GrampsJsListItem.js'
+import './components/GrampsjsFirstRun.js'
 import './components/GrampsjsLogin.js'
 import './components/GrampsjsUpdateAvailable.js'
 import './views/GrampsjsViewPeople.js'
@@ -67,7 +68,9 @@ import {sharedStyles} from './SharedStyles.js'
 const LOADING_STATE_INITIAL = 0
 const LOADING_STATE_UNAUTHORIZED = 1
 const LOADING_STATE_UNAUTHORIZED_NOCONNECTION = 2
-const LOADING_STATE_MISSING_SETTINGS = 4
+const LOADING_STATE_NO_OWNER = 3
+const LOADING_STATE_NO_TREE = 4
+const LOADING_STATE_MISSING_SETTINGS = 5
 const LOADING_STATE_READY = 10
 
 const BASE_DIR = ''
@@ -89,7 +92,8 @@ export class GrampsJs extends LitElement {
       _page: {type: String},
       _pageId: {type: String},
       _showShortcuts: {type: Boolean},
-      _shortcutPressed: {type: String}
+      _shortcutPressed: {type: String},
+      _firstRunToken: {type: String}
     }
   }
 
@@ -110,6 +114,7 @@ export class GrampsJs extends LitElement {
     this._pageId = ''
     this._showShortcuts = false
     this._shortcutPressed = ''
+    this._firstRunToken = ''
   }
 
   static get styles () {
@@ -376,6 +381,16 @@ export class GrampsJs extends LitElement {
     `
   }
 
+  _renderFirstRun () {
+    return html`
+    <grampsjs-first-run
+      .strings="${this._strings}"
+      token="${this._firstRunToken}"
+      @firstrun:done="${this._firstRunDone}"
+    ></grampsjs-first-run>
+    `
+  }
+
   _renderOnboarding () {
     return html`
     <div class="center-xy" id="onboarding">
@@ -400,6 +415,10 @@ export class GrampsJs extends LitElement {
       window.history.pushState({}, '', 'login')
       return this._renderLogin()
     }
+    if (this.loadingState === LOADING_STATE_NO_OWNER) {
+      window.history.pushState({}, '', 'firstrun')
+      return this._renderFirstRun()
+    }
     if (!getSettings().lang || !getSettings().homePerson) {
       this.loadingState = LOADING_STATE_MISSING_SETTINGS
     }
@@ -548,10 +567,14 @@ export class GrampsJs extends LitElement {
     this._loadDbInfo()
   }
 
+  _firstRunDone () {
+    document.location.href = '/'
+  }
+
   connectedCallback () {
     super.connectedCallback()
     this._loadDbInfo()
-    window.addEventListener('db:changed', () => this._loadDbInfo())
+    window.addEventListener('db:changed', () => this._loadDbInfo(false))
     this.addEventListener('drawer:toggle', this._toggleDrawer)
     window.addEventListener('keydown', (event) => this._handleKey(event))
   }
@@ -568,14 +591,14 @@ export class GrampsJs extends LitElement {
     window.addEventListener('settings:changed', this._handleSettings.bind(this))
   }
 
-  _loadDbInfo () {
+  _loadDbInfo (setReady = true) {
     apiGet('/api/metadata/')
       .then(data => {
         if ('error' in data) {
           if (data.error === 'Network error') {
             this.loadingState = LOADING_STATE_UNAUTHORIZED_NOCONNECTION
           } else {
-            this.loadingState = LOADING_STATE_UNAUTHORIZED
+            this._fetchOnboardingToken()
           }
           return
         }
@@ -584,10 +607,24 @@ export class GrampsJs extends LitElement {
           if (this.language === '' && this._dbInfo?.locale?.language !== undefined) {
             this.language = this._dbInfo.locale.language
           }
-          this._setReady()
+          if (setReady) {
+            this._setReady()
+          }
+          this._loadHomePersonInfo()
+        }
+      })
+  }
+
+  _fetchOnboardingToken () {
+    apiGet('/api/token/create_owner/')
+      .then(data => {
+        if (!('error' in data) && (data?.data?.access_token)) {
+          this.loadingState = LOADING_STATE_NO_OWNER
+          this._firstRunToken = data?.data?.access_token
+        } else {
+          this.loadingState = LOADING_STATE_UNAUTHORIZED
         }
       })
-    this._loadHomePersonInfo()
   }
 
   _loadHomePersonInfo () {

diff --git a/src/SharedStyles.js b/src/SharedStyles.js
@@ -32,6 +32,12 @@ export const sharedStyles = css`
     font-family: Roboto Slab;
   }
 
+  h1 {
+    font-weight: 400;
+    font-family: Roboto Slab;
+    font-size: 34px;
+  }
+
   h2 {
     font-size: 32px;
     margin-top: 10px;
@@ -178,6 +184,10 @@ export const sharedStyles = css`
       font-size: 16px;
     }
 
+    h1 {
+      font-size: 24px;
+    }
+
     h2 {
       font-size: 24px;
     }

diff --git a/src/api.js b/src/api.js
@@ -1,6 +1,6 @@
 import jwt_decode from 'jwt-decode'
 
-const __APIHOST__ = 'http://localhost:5555'
+export const __APIHOST__ = 'http://localhost:5555'
 
 export function doLogout () {
   localStorage.removeItem('access_token')