Start using Pinia for global logged in state. Only display log in opt…

…ions on homepage when user is not logged in

rainfall-frontend/src/App.vue

@@ -7,7 +7,7 @@ import { RouterLink, RouterView } from 'vue-router';
     <div class="wrapper">
       <nav>
         <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/welcome">Welcome</RouterLink>
       </nav>
     </div>
   </header>

rainfall-frontend/src/components/SignIn.vue

@@ -1,29 +1,39 @@
 <script lang="ts">
+import { mapStores } from 'pinia';
+import { useUserStore } from '../stores/user';
+
 export default {
   data() {
     return {
-      name: 'Beta',
       clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
       redirectUri: import.meta.env.VITE_GOOGLE_REDIRECT_URI,
     };
   },
-  mounted() {
-    let googleScript = document.createElement('script');
-    googleScript.setAttribute('src', 'https://accounts.google.com/gsi/client');
-    document.head.appendChild(googleScript);
+  computed: {
+    ...mapStores(useUserStore),
+  },
+  async mounted() {
+    await this.userStore.loadUser();
+    if (!this.userStore.isLoggedIn) {
+      let googleScript = document.createElement('script');
+      googleScript.setAttribute('src', 'https://accounts.google.com/gsi/client');
+      document.head.appendChild(googleScript);
+    }
   },
 };
 </script>
 
 <template>
-  <h1>Sign in:</h1>
-  <div
-    id="g_id_onload"
-    :data-client_id="clientId"
-    data-ux_mode="redirect"
-    :data-login_uri="redirectUri"
-  ></div>
-  <div class="g_id_signin" data-type="standard"></div>
+  <div v-if="!userStore.isLoggedIn">
+    <h1>Sign in:</h1>
+    <div
+      id="g_id_onload"
+      :data-client_id="clientId"
+      data-ux_mode="redirect"
+      :data-login_uri="redirectUri"
+    ></div>
+    <div class="g_id_signin" data-type="standard"></div>
+  </div>
 </template>
 
 <style scoped>

rainfall-frontend/src/router/index.ts

@@ -17,6 +17,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/WelcomeView.vue'),
     },
+    {
+      path: '/new',
+      name: 'new',
+      component: () => import('../views/NewView.vue'),
+    },
   ],
 });
 

rainfall-frontend/src/stores/user.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia';
+
+export const useUserStore = defineStore('user', {
+  state() {
+    return {
+      user: null,
+    };
+  },
+  getters: {
+    isLoggedIn(state) {
+      return !!state.user;
+    },
+  },
+  actions: {
+    async loadUser(force = false) {
+      if (this.user && !force) {
+        return;
+      }
+      const resp = await fetch('/api/v1/user');
+      if (resp.ok) {
+        this.user = await resp.json();
+      }
+    },
+  },
+});

rainfall-frontend/src/views/HomeView.vue

@@ -1,5 +1,16 @@
-<script setup lang="ts">
+<script lang="ts">
 import SignIn from '../components/SignIn.vue';
+import { mapStores } from 'pinia';
+import { useUserStore } from '../stores/user';
+
+export default {
+  async mounted() {
+    await this.userStore.loadUser();
+  },
+  computed: {
+    ...mapStores(useUserStore),
+  },
+};
 </script>
 
 <template>

rainfall-frontend/src/views/NewView.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <h1 class="text-3xl">New site</h1>
+  </div>
+</template>
+
+<style></style>

rainfall-frontend/src/views/WelcomeView.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h1 class="text-3xl">This is the welcome page</h1>
+    <RouterLink to="/new">New site</RouterLink>
   </div>
 </template>