init

resources/views/login.edge

@@ -0,0 +1,77 @@
+@layouts.main({ title: 'Sign In — Imago Vault' })
+  @slot('main')
+    <div class="min-h-screen flex items-center justify-center px-4">
+      <div class="w-full max-w-md">
+
+        {{-- Logo / heading --}}
+        <div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-600 rounded-2xl mb-4 shadow-lg">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+            </svg>
+          </div>
+          <h1 class="text-2xl font-bold text-white">Imago Vault</h1>
+          <p class="text-gray-400 text-sm mt-1">Sign in to manage your media files</p>
+        </div>
+
+        {{-- Credential error message --}}
+        @if(flashMessages.has('errors'))
+          <div class="bg-red-900/40 border border-red-700 text-red-300 px-4 py-3 rounded-lg mb-6 text-sm">
+            {{ flashMessages.get('errors').form ?? 'An error occurred.' }}
+          </div>
+        @end
+
+        {{-- Login form --}}
+        <form method="POST" action="/login"
+              class="bg-gray-900 rounded-2xl p-8 shadow-2xl border border-gray-800">
+          {{ csrfField() }}
+
+          <div class="mb-5">
+            <label for="username" class="block text-sm font-medium text-gray-300 mb-2">
+              Username
+            </label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value="{{ flashMessages.get('username') ?? '' }}"
+              required
+              autocomplete="username"
+              class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white
+                     placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500
+                     focus:border-transparent transition"
+              placeholder="admin"
+            />
+          </div>
+
+          <div class="mb-6">
+            <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
+              Password
+            </label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              required
+              autocomplete="current-password"
+              class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white
+                     placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500
+                     focus:border-transparent transition"
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button
+            type="submit"
+            class="w-full py-3 px-6 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold
+                   rounded-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-400"
+          >
+            Sign in
+          </button>
+        </form>
+
+      </div>
+    </div>
+  @endslot
+@end