Add new vue-based frontend

packages/sshecret-frontend/src/views/LoginPage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+    <div v-if="error" class="w-screen absolute top-0 left-0 z-50">
+      <sl-alert variant="danger" open v-if="error">
+        <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+        <strong>Login failed.</strong><br />
+        Please check your username and password, and try again.
+      </sl-alert>
+    </div>
+
+    <div class="max-w-md w-full bg-white rounded-xl shadow-lg p-8">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Sign In</h2>
+
+      <form @submit.prevent="submitLogin" class="space-y-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-1">Username</label>
+          <input
+            v-model="username"
+            type="text"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
+            placeholder="Username"
+            autocomplete="username"
+            required=""
+          />
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+
+          <input
+            v-model="password"
+            type="password"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
+            placeholder="••••••••"
+            autocomplete="current-password"
+          />
+        </div>
+        <button
+          type="submit"
+          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 rounded-lg transition-colors"
+        >
+          Login
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAuthTokenStore } from '@/store/auth'
+import { useRouter } from 'vue-router'
+import '@shoelace-style/shoelace/dist/components/alert/alert.js'
+
+const username = ref('')
+const password = ref('')
+const error = ref(false)
+
+const auth = useAuthTokenStore()
+const router = useRouter()
+
+async function submitLogin() {
+  error.value = false
+  const success = await auth.login(username.value, password.value)
+  if (success) {
+    router.push('/')
+  } else {
+    error.value = true
+  }
+}
+</script>