fix: change "add instance" to "log in" when not logged in (#1614)

src/routes/_components/NotLoggedInHome.html

@@ -22,7 +22,7 @@
           </p>
 
           <p style="text-align: right;">
-            <a class="button primary" rel="prefetch" href="/settings/instances/add">Add instance</a>
+            <a class="button primary" rel="prefetch" href="/settings/instances/add">Log in</a>
           </p>
         </div>
       `}

src/routes/_components/settings/SettingsNav.html

@@ -39,21 +39,22 @@
 </style>
 <script>
   import SettingsNavItem from './SettingsNavItem.html'
-
-  const NAV_ITEMS = {
-    settings: 'Settings',
-    'settings/about': 'About Pinafore',
-    'settings/general': 'General',
-    'settings/instances': 'Instances',
-    'settings/instances/add': 'Add instance'
-  }
+  import { store } from '../../_store/store'
 
   export default {
     components: {
       SettingsNavItem
     },
+    store: () => store,
     computed: {
-      navItems: ({ page }) => {
+      navItemLabels: ({ $isUserLoggedIn }) => ({
+        settings: 'Settings',
+        'settings/about': 'About Pinafore',
+        'settings/general': 'General',
+        'settings/instances': 'Instances',
+        'settings/instances/add': $isUserLoggedIn ? 'Add instance' : 'Log in'
+      }),
+      navItems: ({ page, navItemLabels }) => {
         const res = []
         const breadcrumbs = page.split('/')
         let path = ''
@@ -61,7 +62,7 @@
           const currentPage = breadcrumbs[i]
           path += currentPage
           res.push({
-            label: NAV_ITEMS[path],
+            label: navItemLabels[path],
             href: `/${path}`,
             name: path
           })
@@ -71,4 +72,4 @@
       }
     }
   }
-</script>
+</script>

src/routes/_pages/settings/instances/add.html

@@ -1,5 +1,5 @@
-<SettingsLayout page='settings/instances/add' label="Add instance">
-  <h1 id="add-an-instance-h1">Add instance</h1>
+<SettingsLayout page='settings/instances/add' label={pageLabel}>
+  <h1 id="add-an-instance-h1">{pageLabel}</h1>
 
   <div class="add-new-instance">
     <form on:submit='onSubmitInstance(event)' aria-labelledby="add-an-instance-h1">
@@ -109,6 +109,9 @@
       hasIndexedDB: true,
       hasLocalStorage: true
     }),
+    computed: {
+      pageLabel: ({ $isUserLoggedIn }) => $isUserLoggedIn ? 'Add instance' : 'Log in'
+    },
     methods: {
       onSubmitInstance (event) {
         event.preventDefault()

src/routes/settings/instances/add.html

@@ -1,4 +1,4 @@
-<Title name="Add instance" settingsPage={true} />
+<Title name={$isUserLoggedIn ? 'Add instance' : 'Log in'} settingsPage={true} />
 
   <LazyPage {pageComponent} {params} />