Fixing Pinia referencing changes

 Fixing Pinia referencing changes and standardising naming conventions

Author: turukawa

{{cookiecutter.project_slug}}/frontend/components/authentication/Navigation.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- Profile dropdown -->
     <Menu as="div" class="relative ml-3">
-    <div v-if="!auth.loggedIn">
+    <div v-if="!authStore.loggedIn">
         <NuxtLink 
             to="/login"
             class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2"
@@ -47,14 +47,14 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
 import { ArrowLeftOnRectangleIcon } from "@heroicons/vue/24/outline"
 import { useAuthStore } from "@/stores"
 
-const auth = useAuthStore()
+const authStore = useAuthStore()
 const navigation = [
   { name: "Settings", to: "/settings" },
 ]
 const redirectRoute = "/"
 
 async function logout() {
-    auth.logOut()
+    authStore.logOut()
     await navigateTo(redirectRoute)
 }
 </script>

{{cookiecutter.project_slug}}/frontend/components/settings/Profile.vue

@@ -57,13 +57,13 @@
 import { useAuthStore } from "@/stores"
 import { IUserProfileUpdate } from "@/interfaces"
 
-const auth = useAuthStore()
+const authStore = useAuthStore()
 let profile = {} as IUserProfileUpdate
 const title = "Personal settings"
 const description = "Changing your email address will change your login. Any changes will require you to enter your original password."
 
 const schema = {
-    original: { required: auth.profile.password, min: 8, max: 64 },
+    original: { required: authStore.profile.password, min: 8, max: 64 },
     full_name: { required: false },
     email: { email: true, required: true },
 }
@@ -74,20 +74,20 @@ onMounted( () => {
 
 function resetProfile() {
   profile = {
-    full_name: auth.profile.full_name,
-    email: auth.profile.email,
+    full_name: authStore.profile.full_name,
+    email: authStore.profile.email,
   }
 }
 
 async function submit(values: any) {
   profile = {}
-  if ((!auth.profile.password && !values.original) || 
-      (auth.profile.password && values.original)) {
+  if ((!authStore.profile.password && !values.original) || 
+      (authStore.profile.password && values.original)) {
     if (values.original) profile.original = values.original
     if (values.email) {
       profile.email = values.email
       if (values.full_name) profile.full_name = values.full_name
-      await auth.updateUserProfile(profile)
+      await authStore.updateUserProfile(profile)
       resetProfile()
     }
   }

{{cookiecutter.project_slug}}/frontend/components/settings/Security.vue

@@ -4,7 +4,7 @@
       <div class="space-y-6 bg-white py-6 px-4 sm:p-6">
         <div>
           <h3 class="text-lg font-medium leading-6 text-gray-900">{{  title }}</h3>
-          <p v-if="!auth.profile.password" class="mt-1 text-sm text-gray-500">
+          <p v-if="!authStore.profile.password" class="mt-1 text-sm text-gray-500">
             Secure your account by adding a password, or enabling two-factor security. Or both. Any changes will 
             require you to enter your original password.
           </p>
@@ -144,12 +144,13 @@
 import { Switch, Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue"
 import { QrCodeIcon } from "@heroicons/vue/24/outline"
 import QrcodeVue from "qrcode.vue"
-import { useAuthStore } from "@/stores"
+import { useAuthStore, useTokenStore } from "@/stores"
 import { apiAuth } from "@/api"
 import { IUserProfileUpdate, INewTOTP, IEnableTOTP } from "@/interfaces"
 
 
-const auth = useAuthStore()
+const authStore = useAuthStore()
+const tokenStore = useTokenStore()
 let profile = {} as IUserProfileUpdate
 const title = "Security"
 const redirectTOTP = "/settings"
@@ -160,7 +161,7 @@ const totpClaim = ref({} as IEnableTOTP)
 const qrSize = 200
 
 const schema = {
-  original: { required: auth.profile.password, min: 8, max: 64 },
+  original: { required: authStore.profile.password, min: 8, max: 64 },
   password: { required: false, min: 8, max: 64 },
   confirmation: { required: false, confirmed: "password" }
 }
@@ -171,7 +172,7 @@ const totpSchema = {
 
 onMounted( () => {
   resetProfile()
-  totpEnabled.value = auth.profile.totp
+  totpEnabled.value = authStore.profile.totp
 })
 
 function resetProfile() {
@@ -183,24 +184,24 @@ function resetProfile() {
 // @ts-ignore
 async function enableTOTP(values: any, { resetForm }) {
   totpClaim.value.claim = values.claim
-  await auth.enableTOTPAuthentication(totpClaim.value)
+  await authStore.enableTOTPAuthentication(totpClaim.value)
   resetForm()
   totpModal.value = false 
 }
 
 // @ts-ignore
 async function submit(values: any, { resetForm }) {
   profile = {}
-  if ((!auth.profile.password && !values.original) || 
-      (auth.profile.password && values.original)) {
+  if ((!authStore.profile.password && !values.original) || 
+      (authStore.profile.password && values.original)) {
     if (values.original) profile.original = values.original
     if (values.password && values.password !== values.original) {
       profile.password = values.password
-      await auth.updateUserProfile(profile)
+      await authStore.updateUserProfile(profile)
     }
-    if (totpEnabled.value !== auth.profile.totp && totpEnabled.value) {
-      await auth.authTokens.refreshTokens()
-      const { data: response } = await apiAuth.requestNewTOTP(auth.authTokens.token)
+    if (totpEnabled.value !== authStore.profile.totp && totpEnabled.value) {
+      await tokenStore.refreshTokens()
+      const { data: response } = await apiAuth.requestNewTOTP(tokenStore.token)
       if (response.value) {
         totpNew.value.key = response.value.key
         totpNew.value.uri = response.value.uri
@@ -209,8 +210,8 @@ async function submit(values: any, { resetForm }) {
         totpModal.value = true
       }
     }
-    if (totpEnabled.value !== auth.profile.totp && !totpEnabled.value) {
-      await auth.disableTOTPAuthentication(profile)
+    if (totpEnabled.value !== authStore.profile.totp && !totpEnabled.value) {
+      await authStore.disableTOTPAuthentication(profile)
     }
     resetForm()
   }

{{cookiecutter.project_slug}}/frontend/components/settings/ValidateEmailButton.vue

@@ -17,9 +17,9 @@
 import { AtSymbolIcon } from "@heroicons/vue/24/outline"
 import { useAuthStore } from "@/stores"
 
-const auth = useAuthStore()
+const authStore = useAuthStore()
 
 async function submit() {
-  await auth.sendEmailValidation()
+  await authStore.sendEmailValidation()
 }
 </script>

{{cookiecutter.project_slug}}/frontend/middleware/anonymous.ts

@@ -2,8 +2,8 @@ import { useAuthStore } from "@/stores"
 
 export default defineNuxtRouteMiddleware((to, from) => {
   const routes = ["/login", "/join", "/recover-password", "/reset-password"]
-  const auth = useAuthStore()
-  if (auth.loggedIn) {
+  const authStore = useAuthStore()
+  if (authStore.loggedIn) {
     if (routes.includes(from.path)) return navigateTo("/")
     else return abortNavigation()
   }

{{cookiecutter.project_slug}}/frontend/middleware/authenticated.ts

@@ -1,9 +1,9 @@
 import { useAuthStore } from "@/stores"
 
 export default defineNuxtRouteMiddleware((to, from) => {
-  const auth = useAuthStore()
+  const authStore = useAuthStore()
   const routes = ["/login", "/join", "/recover-password", "/reset-password"]
-  if (!auth.loggedIn) {
+  if (!authStore.loggedIn) {
     if (routes.includes(from.path)) return navigateTo("/")
     else return abortNavigation()
   }

{{cookiecutter.project_slug}}/frontend/middleware/moderator.ts

@@ -1,8 +1,8 @@
 import { useAuthStore } from "@/stores"
 
 export default defineNuxtRouteMiddleware((to, from) => {
-  const auth = useAuthStore()
-  if (!auth.isAdmin) {
+  const authStore = useAuthStore()
+  if (!authStore.isAdmin) {
     return abortNavigation()
   }  
 })

{{cookiecutter.project_slug}}/frontend/middleware/refresh.ts

@@ -1,8 +1,8 @@
 import { useAuthStore } from "@/stores"
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
-  const auth = useAuthStore()
-  if (!auth.loggedIn) {
-    await auth.getUserProfile()
+  const authStore = useAuthStore()
+  if (!authStore.loggedIn) {
+    await authStore.getUserProfile()
   }
 })

{{cookiecutter.project_slug}}/frontend/pages/index.vue

@@ -78,14 +78,15 @@
 <script setup lang="ts">
 import { ChevronRightIcon } from "@heroicons/vue/20/solid"
 import { tokenIsTOTP } from "@/utilities"
-import { useAuthStore } from "@/stores"
+import { useAuthStore, useTokenStore } from "@/stores"
 
 definePageMeta({
   layout: "home",
 });
 
+const authStore = useAuthStore()
+const tokenStore = useTokenStore()
 const route = useRoute()
-const auth = useAuthStore()
 const redirectTOTP = "/totp"
 const redirectAfterLogin = "/"
 const github = {
@@ -112,8 +113,8 @@ onMounted(async () => {
         resolve(true)
       }, 100)
     })
-    if (!auth.loggedIn) await auth.magicLogin(route.query.magic as string)
-    if (tokenIsTOTP(auth.authTokens.token)) await navigateTo(redirectTOTP)
+    if (!authStore.loggedIn) await authStore.magicLogin(route.query.magic as string)
+    if (tokenIsTOTP(tokenStore.token)) await navigateTo(redirectTOTP)
     else await navigateTo(redirectAfterLogin) 
   }
 })

{{cookiecutter.project_slug}}/frontend/pages/login.vue

@@ -64,16 +64,17 @@
 
 <script setup lang="ts">
 import { Switch } from '@headlessui/vue'
-import { useAuthStore } from "@/stores"
+import { useAuthStore, useTokenStore } from "@/stores"
 import { tokenParser, tokenIsTOTP } from "@/utilities"
 
 definePageMeta({
   layout: "authentication",
   middleware: ["anonymous"],
 });
 
+const authStore = useAuthStore()
+const tokenStore = useTokenStore()
 const route = useRoute()
-const auth = useAuthStore()
 const redirectAfterLogin = "/"
 const redirectAfterMagic = "/magic"
 const redirectTOTP = "/totp"
@@ -85,12 +86,12 @@ const schema = {
 }
 
 async function submit(values: any) {
-  await auth.logIn({ username: values.email, password: values.password })
-  if (auth.loggedIn) return await navigateTo(redirectAfterLogin)
-  if (auth.authTokens.token && tokenIsTOTP(auth.authTokens.token)) 
+  await authStore.logIn({ username: values.email, password: values.password })
+  if (authStore.loggedIn) return await navigateTo(redirectAfterLogin)
+  if (tokenStore.token && tokenIsTOTP(tokenStore.token)) 
     return await navigateTo(redirectTOTP)
-  if (auth.authTokens.token && 
-      tokenParser(auth.authTokens.token).hasOwnProperty("fingerprint"))
+  if (tokenStore.token && 
+      tokenParser(tokenStore.token).hasOwnProperty("fingerprint"))
     return await navigateTo(redirectAfterMagic)
 }