feat: Store API token in local storage for easy access

Author: jackdomleo7

src/App.vue

@@ -9,18 +9,30 @@
       </p>
     </InfoBanner>
     <UtilitySection title="API Configuration" title-heading-level="h2">
-      <TextInput
-        id="butter-api-token"
-        type="password"
-        placeholder="Enter your Butter CMS API Token"
-        :required="true"
-        v-model="store.token"
-      >
-        <template v-slot:label>Butter CMS API Token</template>
-        <template v-slot:error v-if="!store.token"
-          >Please provide your Butter CMS API Token</template
+      <div class="app__token-input-container">
+        <TextInput
+          root-class="app__token-input"
+          id="butter-api-token"
+          type="password"
+          placeholder="Enter your Butter CMS API Token"
+          :required="true"
+          :readonly="lockToken"
+          v-model="store.token"
         >
-      </TextInput>
+          <template v-slot:label>Butter CMS API Token</template>
+          <template v-slot:error v-if="!store.token"
+            >Please provide your Butter CMS API Token</template
+          >
+        </TextInput>
+        <button
+          v-if="store.token"
+          @click="toggleTokenLock"
+          class="app__lock-button"
+          :title="lockToken ? 'Unlock token' : 'Lock token'"
+        >
+          {{ lockToken ? '🔒' : '🔓' }}
+        </button>
+      </div>
     </UtilitySection>
 
     <h2 style="font-weight: 500">Available Utilities</h2>
@@ -30,6 +42,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import { useStore } from './stores/index'
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
@@ -39,9 +52,21 @@ import TextInput from './components/TextInput.vue'
 import SearchPages from './components/Utilities/SearchPages.vue'
 
 const store = useStore()
+const lockToken = ref(localStorage.getItem('butter_cms_lock_token') === 'true')
+
+watch(
+  () => lockToken.value,
+  (newValue) => {
+    localStorage.setItem('butter_cms_lock_token', String(newValue))
+  },
+)
+
+function toggleTokenLock(): void {
+  lockToken.value = !lockToken.value
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #app {
   min-height: 100vh;
   display: flex;
@@ -55,4 +80,46 @@ main {
   margin: 0 auto;
   padding: 2rem 1.5rem;
 }
+
+.app {
+  &__token-input-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  &__token-input {
+    flex: 1;
+  }
+
+  &__lock-button {
+    margin-top: 1.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    background-color: #eee;
+    border: 1px solid #b3bac2;
+    border-radius: 6px;
+    font-size: 1.25rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    font-family: monospace;
+
+    &:hover {
+      background-color: #ddd;
+    }
+
+    &:active {
+      background-color: #a8aeb8;
+    }
+
+    &:focus {
+      outline: 2px solid #7c8db0;
+      outline-offset: 2px;
+    }
+  }
+}
 </style>

src/components/Footer.vue

@@ -25,13 +25,28 @@
           <p><strong>Last updated: January 2026</strong></p>
 
           <h3>Data Collection</h3>
-          <p>We do not collect, store, or transmit any data whatsoever. This includes:</p>
+          <p>
+            We do not collect, store on servers, or transmit any data to third parties. This
+            includes:
+          </p>
           <ul>
-            <li>No API tokens or credentials</li>
-            <li>No personal information</li>
+            <li>No personal information transmitted to our servers</li>
             <li>No usage analytics or tracking</li>
-            <li>No cookies or local storage</li>
             <li>No server-side logging</li>
+            <li>No data shared with third-party services</li>
+          </ul>
+
+          <h3>Local Storage</h3>
+          <p>
+            To improve your experience, we store your Butter CMS API token locally in your browser's
+            localStorage. This is completely safe because:
+          </p>
+          <ul>
+            <li>Data is stored only on your device, never on our servers</li>
+            <li>Only your browser can access localStorage from this domain</li>
+            <li>Other websites cannot access your stored token</li>
+            <li>Clearing your browser data will remove the stored token</li>
+            <li>You have full control and can delete it anytime</li>
           </ul>
 
           <h3>How It Works</h3>

src/components/TextInput.vue

@@ -115,7 +115,7 @@ $inputHeight: 2.5rem;
 
     &:disabled,
     &:read-only {
-      background-color: var(--j-global-grey-100);
+      background-color: #eee;
     }
 
     &[aria-invalid='true'] {

src/stores/index.ts

@@ -1,8 +1,21 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useStore = defineStore('store', () => {
-  const token = ref('')
+  // Initialize token from localStorage or empty string
+  const token = ref(localStorage.getItem('butter_cms_token') || '')
+
+  // Watch for changes and save to localStorage
+  watch(
+    () => token.value,
+    (newValue) => {
+      if (newValue) {
+        localStorage.setItem('butter_cms_token', newValue)
+      } else {
+        localStorage.removeItem('butter_cms_token')
+      }
+    },
+  )
 
   return { token }
 })