| 1 | <template> |
| 2 | <div class="w-full max-w-md space-y-8"> |
| 3 | <!-- Logo and Title --> |
| 4 | <div class="text-center"> |
| 5 | <div v-if="logo" class="mb-6"> |
| 6 | <img class="mx-auto h-12 w-auto" :src="logo" :alt="`${title} Logo`" /> |
| 7 | </div> |
| 8 | <h2 class="mb-2 text-4xl font-bold text-gray-900">{{ title || "CoPilot" }}</h2> |
| 9 | <p class="text-lg text-gray-600">Access your security dashboard and reports</p> |
| 10 | </div> |
| 11 | <!-- Login Form --> |
| 12 | <div class="mt-8 rounded-lg bg-white px-6 py-8 shadow-lg"> |
| 13 | <form class="space-y-6"> |
| 14 | <!-- v-if --> |
| 15 | <div> |
| 16 | <label for="username" class="mb-2 block text-sm font-medium text-gray-700">Username</label> |
| 17 | <input |
| 18 | id="username" |
| 19 | type="text" |
| 20 | disabled |
| 21 | autocomplete="username" |
| 22 | class="block w-full rounded-md border border-gray-300 px-3 py-3 text-base placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none" |
| 23 | placeholder="Enter your username" |
| 24 | /> |
| 25 | </div> |
| 26 | <div> |
| 27 | <label for="password" class="mb-2 block text-sm font-medium text-gray-700">Password</label> |
| 28 | <input |
| 29 | id="password" |
| 30 | type="password" |
| 31 | disabled |
| 32 | autocomplete="current-password" |
| 33 | class="block w-full rounded-md border border-gray-300 px-3 py-3 text-base placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none" |
| 34 | placeholder="Enter your password" |
| 35 | /> |
| 36 | </div> |
| 37 | <div> |
| 38 | <button |
| 39 | type="submit" |
| 40 | disabled |
| 41 | class="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-3 text-base font-medium text-white transition-colors duration-200 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50" |
| 42 | > |
| 43 | <span>Sign in</span> |
| 44 | </button> |
| 45 | </div> |
| 46 | </form> |
| 47 | </div> |
| 48 | </div> |
| 49 | </template> |
| 50 | |
| 51 | <script setup lang="ts"> |
| 52 | const { title, logo } = defineProps<{ title?: string | null; logo?: string | null }>() |
| 53 | </script> |