Initialer Laravel Commit für BetiX

2026-04-04 18:01:50 +02:00
commit 0280278978
374 changed files with 65210 additions and 0 deletions
--- a/resources/js/pages/auth/ConfirmPassword.vue
+++ b/resources/js/pages/auth/ConfirmPassword.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Form, Head } from '@inertiajs/vue3';
+import { onMounted, nextTick } from 'vue';
+import InputError from '@/components/InputError.vue';
+import AuthLayout from '@/layouts/AuthLayout.vue';
+import { store } from '@/routes/password/confirm';
+
+onMounted(() => {
+  nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
+});
+</script>
+
+<template>
+  <AuthLayout>
+    <Head title="Passwort bestätigen" />
+
+    <div class="wrap">
+      <div class="main-panel">
+        <header class="page-head">
+          <div class="head-flex">
+            <div class="title-group">
+              <div class="title">Bestätigung erforderlich</div>
+              <p class="subtitle">Bitte bestätige dein Passwort, um fortzufahren</p>
+            </div>
+            <div class="security-badge">
+              <i data-lucide="lock"></i>
+              <span>Secure</span>
+            </div>
+          </div>
+        </header>
+
+        <Form v-bind="store.form()" reset-on-success v-slot="{ errors, processing }">
+          <div class="form-body">
+            <label class="field" for="password">
+              <span class="lbl">Passwort</span>
+              <div class="input-wrapper">
+                <i data-lucide="key-round"></i>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  class="inp"
+                  required
+                  autocomplete="current-password"
+                  autofocus
+                  placeholder="••••••••"
+                />
+              </div>
+              <InputError :message="errors.password" />
+            </label>
+
+            <div class="actions">
+              <button class="btn" type="submit" :disabled="processing" data-test="confirm-password-button">
+                <span v-if="processing" class="spinner" />
+                <span>{{ processing ? 'Wird bestätigt…' : 'Passwort bestätigen' }}</span>
+                <i v-if="!processing" data-lucide="arrow-right" style="width:14px"></i>
+              </button>
+            </div>
+
+            <div class="muted hint">
+              <i data-lucide="shield-check"></i>
+              <span>Sicherer Bereich. Deine Eingabe ist verschlüsselt.</span>
+            </div>
+          </div>
+        </Form>
+      </div>
+    </div>
+  </AuthLayout>
+</template>
+
+<style scoped>
+:global(:root) { --bg-card:#0a0a0a; --border:#151515; --cyan:#00f2ff; --magenta:#ff007a; --green:#00ff9d; }
+.wrap { width: 100%; }
+.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); animation: fade-in 0.6s cubic-bezier(0.2,0,0,1); }
+
+.page-head { padding: 22px 26px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
+.head-flex { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.title { font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 2px; text-transform: uppercase; }
+.subtitle { color: #555; font-size: 11px; margin-top: 4px; font-weight: 600; }
+.security-badge { display:flex; align-items:center; gap:6px; color: var(--green); background: rgba(0,255,157,0.05); padding:5px 12px; border-radius:50px; border:1px solid rgba(0,255,157,0.1); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:1px; }
+.security-badge i { width: 12px; height: 12px; }
+
+.form-body { padding: 24px 26px; display: grid; gap: 20px; }
+.field { display: grid; gap: 8px; }
+.lbl { display:block; font-size:10px; font-weight:900; color:#555; text-transform:uppercase; letter-spacing:1px; }
+.input-wrapper { position: relative; display:flex; align-items:center; }
+.input-wrapper i { position: absolute; left: 14px; width: 16px; color: #444; pointer-events: none; transition: .3s; }
+.inp { width: 100%; background:#000; border:1px solid var(--border); color:#fff; padding:14px 14px 14px 44px; border-radius:12px; font-size:13px; transition:.3s cubic-bezier(0.2,0,0,1); }
+.inp:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 15px rgba(0,242,255,0.1); background:#050505; }
+.inp:focus + i { color: var(--cyan); }
+
+.actions { display:flex; gap:10px; margin-top: 5px; }
+.btn { width: 100%; background: var(--cyan); color:#000; border:none; border-radius:12px; padding:14px 16px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:.3s; box-shadow: 0 0 20px rgba(0,242,255,0.2); display:flex; align-items:center; justify-content:center; gap:10px; }
+.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,242,255,0.35); }
+.btn:disabled { opacity: .6; cursor: not-allowed; }
+.spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color:#000; border-radius: 50%; animation: spin .8s linear infinite; }
+
+.muted { color:#9aa0a6; font-size:11px; display:flex; align-items:center; gap:8px; justify-content: center; opacity: 0.7; }
+.hint i { width: 14px; color:#444; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+@media (max-width: 560px) {
+  .page-head { padding: 18px 20px; }
+  .form-body { padding: 18px 20px; }
+}
+</style>