Add mock configured/non-configured state to the client

components/indieHeader.vue

@@ -5,7 +5,7 @@
       <div class='profile-information'>
         <h1 class='profile-name'>{{name}}</h1>
         <p class='profile-bio'>{{bio}}</p>
-        <button v-if='!signedIn' id='follow-button' @click='followButtonPress' class='button'>Follow</button>
+        <button v-if='!signedIn && configured' id='follow-button' @click='followButtonPress' class='button'>Follow</button>
       </div>
     </header>
 </template>
@@ -15,7 +15,9 @@ export default {
   computed: {
     name () { return this.$store.state.name },
     bio () { return this.$store.state.bio },
-    signedIn () { return this.$store.state.signedIn }
+    signedIn () { return this.$store.state.signedIn },
+    configured () { return this.$store.state.configured }
+
   },
   methods: {
     followButtonPress () {

pages/index.vue

@@ -4,16 +4,16 @@
     <indie-header @followButtonPress='followModalActive = true' />
 
     <!-- Main tabs with currently hard-coded content. -->
-    <b-tabs position="is-centered" class="block">
-      <b-tab-item label="Me">
+    <b-tabs v-model='activeTab' position='is-centered' class='block'>
+      <b-tab-item label='Me' :disabled='!configured'>
         <content-type-filter />
         <textComposer @composerChange='composerChange' v-if='signedIn'/>
         <pre style='word-break: break-word;' v-if='signedIn'>{{ composerContent }}</pre>
       </b-tab-item>
-      <b-tab-item label="Everyone"><!-- Nothing yet. --></b-tab-item>
-      <b-tab-item label='Search'><search /></b-tab-item>
-      <b-tab-item label="Settings" v-if='signedIn'><settings /></b-tab-item>
-      <b-tab-item label="…" v-if='signedIn'><!-- “More” tab: other features will go here. --></b-tab-item>
+      <b-tab-item label="Everyone" :disabled='!configured'><!-- Nothing yet. --></b-tab-item>
+      <b-tab-item label='Search' :disabled='!configured'><search /></b-tab-item>
+      <b-tab-item label="Settings" v-if='signedIn || !configured'><settings /></b-tab-item>
+      <b-tab-item label="…" v-if='signedIn || !configured' :disabled='!configured'><!-- “More” tab: other features will go here. --></b-tab-item>
     </b-tabs>
 
     <!-- Follow modal -->
@@ -32,6 +32,14 @@ import settings from '~/components/settings'
 import search from '~/components/search'
 import textComposer from '~/components/textComposer'
 
+const Tabs = Object.freeze({
+    Me: 0,
+    Everyone: 1,
+    Search: 2,
+    Settings: 3,
+    More: 4
+  })
+
 export default {
   components: {
     indieHeader,
@@ -45,13 +53,15 @@ export default {
   computed: {
     name () { return this.$store.state.name },
     bio () { return this.$store.state.bio },
-    signedIn () { return this.$store.state.signedIn }
+    signedIn () { return this.$store.state.signedIn },
+    configured () { return this.$store.state.configured }
   },
 
   data () {
     return {
       followModalActive: false,
-      composerContent: ''
+      composerContent: '',
+      activeTab: 0
     }
   },
 
@@ -63,6 +73,11 @@ export default {
 
   mounted () {
     console.log(`Index component mounted.`)
+
+    // Decide which tab to show based on whether the site has been
+    // configured yet or not.
+    this.activeTab = this.configured ? Tabs.Me : Tabs.Settings;
+    console.log(`Active tab: ${this.activeTab}`)
   }
 }
 </script>

store/index.js

@@ -3,7 +3,8 @@
 const siteConfiguration = require('../assets/data.json')
 
 // Mock: sign-in state
-siteConfiguration.signedIn = false
+siteConfiguration.signedIn = true
+siteConfiguration.configured = true
 
 export const state = () => (siteConfiguration)