From 42a2a473d9b6bfce3d024d706379acbc114cdeb7 Mon Sep 17 00:00:00 2001
From: Remi <73385395+itsrubberduck@users.noreply.github.com>
Date: Sat, 20 Sep 2025 23:05:11 +0200
Subject: [PATCH] Enhance login/register mode toggle styling

---
 app/pages/login.vue | 404 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 329 insertions(+), 75 deletions(-)

diff --git a/app/pages/login.vue b/app/pages/login.vue
index 322d395..c9fa34f 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -1,129 +1,178 @@
 <template>
-  <div class="min-h-screen bg-[#0b1020] text-white">
-    <div class="mx-auto max-w-5xl px-6 py-12 lg:py-16">
-      <div class="grid gap-10 lg:grid-cols-[1.1fr_1fr] items-start">
-        <div class="space-y-6">
-          <NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-white/70 hover:text-cyan-300">
-            <v-icon icon="mdi-arrow-left" size="18" /> Back to landing page
-          </NuxtLink>
-          <div class="space-y-4">
-            <p class="text-xs uppercase tracking-[0.3em] text-cyan-300/80">OpenSquawk Alpha Access</p>
-            <h1 class="text-3xl md:text-4xl font-semibold">Sign in or claim your invite</h1>
-            <p class="text-white/70">
-              Registration requires an invitation code. Codes are issued after joining the waitlist or shared by active members after two weeks of use.
+  <div class="relative flex min-h-screen max-h-screen flex-col overflow-hidden bg-gradient-to-br from-[#050713] via-[#080d1f] to-[#010208] text-white">
+    <div class="pointer-events-none absolute inset-0 -z-10 opacity-70">
+      <div class="orb orb-one" />
+      <div class="orb orb-two" />
+      <div class="orb orb-three" />
+    </div>
+
+    <div class="mx-auto flex h-full w-full max-w-6xl flex-1 flex-col overflow-hidden px-5 py-8 sm:px-8 lg:flex-row lg:items-stretch lg:py-12 lg:pl-0 min-h-0">
+      <div class="relative hidden h-full min-h-0 overflow-hidden rounded-3xl border border-white/10 bg-white/5 shadow-2xl lg:flex lg:w-[48%]">
+        <img src="/img/landing/runway.jpeg" alt="Guiding lights on a runway" class="absolute inset-0 h-full w-full object-cover" />
+        <div class="absolute inset-0 bg-gradient-to-t from-[#050816]/95 via-[#050816]/40 to-transparent" />
+        <div class="relative z-10 flex h-full flex-col justify-between p-10">
+          <div>
+            <span class="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-xs font-medium uppercase tracking-[0.3em] text-white/70">Alpha Access</span>
+            <h1 class="mt-6 text-3xl font-semibold sm:text-4xl">Welcome back to the cockpit</h1>
+            <p class="mt-4 max-w-md text-white/70">
+              OpenSquawk delivers lightning-fast market audio with curated alerts and transcripts. Sign in to rejoin the flow, or use your invitation code to start listening live.
             </p>
           </div>
-          <div class="rounded-2xl border border-white/10 bg-white/5 p-5 space-y-4">
-            <h2 class="text-lg font-semibold">How to get access</h2>
-            <ol class="space-y-3 text-white/70 text-sm">
-              <li class="flex gap-3"><span class="chip">1</span><span>Join the <NuxtLink to="/#cta" class="text-cyan-300 underline">waitlist</NuxtLink>.</span></li>
-              <li class="flex gap-3"><span class="chip">2</span><span>Receive your invite by email or get a code from an active member.</span></li>
-              <li class="flex gap-3"><span class="chip">3</span><span>Register here, accept the terms & privacy policy and start flying.</span></li>
-            </ol>
-          </div>
-          <div class="rounded-2xl border border-cyan-400/20 bg-cyan-400/10 p-5">
-            <p class="text-sm text-cyan-100">
-              Tip: After 14 days of active use you can generate up to two invitation codes yourself and share them with friends.
-            </p>
+          <div class="space-y-4 text-sm text-white/70">
+            <div class="flex items-start gap-4">
+              <span class="feature-marker">✦</span>
+              <p class="leading-relaxed">Real-time squawks streamed directly to your dashboard.</p>
+            </div>
+            <div class="flex items-start gap-4">
+              <span class="feature-marker">✦</span>
+              <p class="leading-relaxed">Invite-only community curated by active market participants.</p>
+            </div>
+            <div class="flex items-start gap-4">
+              <span class="feature-marker">✦</span>
+              <p class="leading-relaxed">Grow into a contributor and unlock new sharing capabilities.</p>
+            </div>
           </div>
         </div>
+      </div>
 
-        <div class="rounded-2xl border border-white/10 bg-white/5 p-6 space-y-6">
-          <div class="flex items-center gap-2">
-            <button
-                class="flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition"
-                :class="mode === 'login' ? 'border-cyan-400 bg-cyan-400/20 text-white' : 'border-white/10 text-white/70 hover:text-white'"
-                @click="mode = 'login'"
-            >
-              Login
-            </button>
-            <button
-                class="flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition"
-                :class="mode === 'register' ? 'border-cyan-400 bg-cyan-400/20 text-white' : 'border-white/10 text-white/70 hover:text-white'"
-                @click="mode = 'register'"
-            >
-              Register
-            </button>
+      <div class="flex w-full flex-1 flex-col min-h-0 lg:pl-8">
+        <div class="flex flex-1 flex-col overflow-y-auto rounded-[28px] border border-white/10 bg-[#0b1020]/85 p-6 shadow-2xl backdrop-blur md:p-8 lg:pr-4 min-h-0">
+          <div class="floating-card relative mb-8 overflow-hidden rounded-3xl border border-white/10 bg-white/5 shadow-2xl lg:hidden">
+            <img src="/img/landing/runway.jpeg" alt="Guiding lights on a runway" class="h-56 w-full object-cover" />
+            <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#050816] via-transparent to-transparent p-6">
+              <p class="text-xs uppercase tracking-[0.3em] text-white/50">Alpha Access</p>
+              <p class="mt-2 text-lg font-semibold">Experience the cockpit from anywhere</p>
+            </div>
           </div>
 
-          <form v-if="mode === 'login'" class="space-y-4" @submit.prevent="submitLogin">
-            <div class="space-y-3">
+          <div class="flex items-center justify-between gap-3 text-sm text-white/60">
+            <NuxtLink to="/" class="inline-flex items-center gap-2 rounded-full bg-white/5 px-4 py-2 font-medium text-white/70 transition hover:bg-white/10 hover:text-white">
+              <v-icon icon="mdi-arrow-left" size="18" /> Back to landing page
+            </NuxtLink>
+            <span class="hidden text-xs uppercase tracking-[0.3em] text-white/30 sm:block">Restricted Area</span>
+          </div>
+
+          <div class="mt-6 space-y-3">
+            <p class="text-[11px] uppercase tracking-[0.4em] text-cyan-300/80">OpenSquawk Members</p>
+            <h2 class="text-3xl font-semibold sm:text-4xl">Access your account</h2>
+            <p class="max-w-xl text-white/60">
+              Use your credentials to sign in or redeem an invitation code. After onboarding, you can invite colleagues once you have been active for two weeks.
+            </p>
+          </div>
+
+          <div class="mt-6">
+            <div class="mode-toggle" :data-mode="mode" role="group" aria-label="Switch between login and register">
+              <span class="mode-toggle__glow" aria-hidden="true" />
+              <button
+                  type="button"
+                  class="mode-toggle__btn"
+                  :data-active="mode === 'login'"
+                  :aria-pressed="mode === 'login'"
+                  @click="mode = 'login'"
+              >
+                <span class="mode-toggle__btn-inner">
+                  <v-icon icon="mdi-login" size="18" class="text-current" />
+                  <span>Login</span>
+                </span>
+              </button>
+              <button
+                  type="button"
+                  class="mode-toggle__btn"
+                  :data-active="mode === 'register'"
+                  :aria-pressed="mode === 'register'"
+                  @click="mode = 'register'"
+              >
+                <span class="mode-toggle__btn-inner">
+                  <v-icon icon="mdi-account-plus-outline" size="18" class="text-current" />
+                  <span>Register</span>
+                </span>
+              </button>
+            </div>
+          </div>
+
+          <form v-if="mode === 'login'" class="mt-8 space-y-6" @submit.prevent="submitLogin">
+            <div class="space-y-5">
               <div>
-                <label class="text-xs uppercase tracking-[0.3em] text-white/40">Email</label>
+                <label class="field-label">Email</label>
                 <input
                     v-model.trim="loginForm.email"
                     type="email"
                     required
                     autocomplete="email"
-                    class="mt-1 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-cyan-400"
+                    class="field-input"
                 />
               </div>
               <div>
-                <label class="text-xs uppercase tracking-[0.3em] text-white/40">Password</label>
+                <label class="field-label">Password</label>
                 <input
                     v-model="loginForm.password"
                     type="password"
                     required
                     autocomplete="current-password"
-                    class="mt-1 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-cyan-400"
+                    class="field-input"
                 />
               </div>
-              <div class="text-right">
-                <NuxtLink to="/forgot-password" class="text-xs text-cyan-300 underline hover:text-cyan-200">
+              <div class="text-right text-sm">
+                <NuxtLink to="/forgot-password" class="text-cyan-300 underline decoration-dotted underline-offset-4 transition hover:text-cyan-100">
                   Forgot your password?
                 </NuxtLink>
               </div>
             </div>
 
-            <button type="submit" class="btn btn-primary w-full" :disabled="loginLoading">
-              <span v-if="loginLoading" class="flex items-center justify-center gap-2">
+            <button type="submit" class="btn btn-primary btn-fancy w-full" :disabled="loginLoading">
+              <span v-if="loginLoading" class="relative z-10 flex items-center justify-center gap-2">
                 <v-progress-circular indeterminate size="16" width="2" color="white" />
                 Signing you in…
               </span>
-              <span v-else>Login</span>
+              <span v-else class="relative z-10">Login</span>
             </button>
 
             <p v-if="loginError" class="text-sm text-red-300">{{ loginError }}</p>
           </form>
 
-          <form v-else class="space-y-4" @submit.prevent="submitRegister">
-            <div class="space-y-3">
+          <form v-else class="mt-8 space-y-6" @submit.prevent="submitRegister">
+            <div class="space-y-5">
               <div>
-                <label class="text-xs uppercase tracking-[0.3em] text-white/40">Name</label>
+                <label class="field-label">Name</label>
                 <input
                     v-model.trim="registerForm.name"
                     type="text"
                     autocomplete="name"
                     placeholder="First Last"
-                    class="mt-1 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-cyan-400"
+                    class="field-input"
                 />
               </div>
               <div>
-                <label class="text-xs uppercase tracking-[0.3em] text-white/40">Email</label>
+                <label class="field-label">Email</label>
                 <input
                     v-model.trim="registerForm.email"
                     type="email"
                     required
                     autocomplete="email"
-                    class="mt-1 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-cyan-400"
+                    class="field-input"
                 />
               </div>
               <div>
-                <label class="text-xs uppercase tracking-[0.3em] text-white/40">Password</label>
+                <label class="field-label">Password</label>
                 <input
                     v-model="registerForm.password"
                     type="password"
                     required
                     minlength="8"
                     autocomplete="new-password"
-                    class="mt-1 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-cyan-400"
+                    class="field-input"
                 />
-                <p class="mt-1 text-xs text-white/50">At least 8 characters, ideally include a number and special character.</p>
+                <p class="mt-2 text-xs text-white/50">At least 8 characters, ideally include a number and special character.</p>
               </div>
               <div>
                 <div class="flex items-center justify-between">
-                  <label class="text-xs uppercase tracking-[0.3em] text-white/40">Invitation code</label>
-                  <button type="button" class="text-[11px] text-cyan-300 underline" @click="checkInvitationCode" :disabled="!registerForm.invitationCode">
+                  <label class="field-label">Invitation code</label>
+                  <button
+                      type="button"
+                      class="text-[11px] font-semibold uppercase tracking-[0.3em] text-cyan-300/80 transition hover:text-cyan-100 disabled:cursor-not-allowed disabled:text-white/30"
+                      @click="checkInvitationCode"
+                      :disabled="!registerForm.invitationCode"
+                  >
                     Check code
                   </button>
                 </div>
@@ -131,36 +180,72 @@
                     v-model.trim="registerForm.invitationCode"
                     type="text"
                     required
-                    class="mt-1 w-full uppercase tracking-widest rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-cyan-400"
+                    class="field-input tracking-[0.6em] uppercase"
                     placeholder="e.g. ABCD1234"
                 />
-                <p v-if="invitationStatus === 'valid'" class="mt-1 text-xs text-green-300">Code is valid.</p>
-                <p v-else-if="invitationStatus === 'invalid'" class="mt-1 text-xs text-red-300">This invitation code is invalid or already used.</p>
-                <p v-else-if="invitationStatus === 'checking'" class="mt-1 text-xs text-white/60">Checking invitation code…</p>
+                <p v-if="invitationStatus === 'valid'" class="mt-2 text-xs font-medium text-green-300">Code is valid.</p>
+                <p v-else-if="invitationStatus === 'invalid'" class="mt-2 text-xs font-medium text-red-300">This invitation code is invalid or already used.</p>
+                <p v-else-if="invitationStatus === 'checking'" class="mt-2 text-xs font-medium text-white/60">Checking invitation code…</p>
               </div>
             </div>
 
-            <div class="space-y-2 text-xs text-white/60">
+            <div class="space-y-3 text-xs text-white/60">
               <label class="flex items-start gap-3">
                 <input type="checkbox" v-model="registerForm.acceptTerms" class="mt-1" required />
-                <span>I accept the <NuxtLink to="/agb" class="text-cyan-300 underline">Terms of Service</NuxtLink>.</span>
+                <span>I accept the <NuxtLink to="/agb" class="text-cyan-300 underline decoration-dotted underline-offset-4">Terms of Service</NuxtLink>.</span>
               </label>
               <label class="flex items-start gap-3">
                 <input type="checkbox" v-model="registerForm.acceptPrivacy" class="mt-1" required />
-                <span>I have read the <NuxtLink to="/datenschutz" class="text-cyan-300 underline">privacy policy</NuxtLink> and consent to data processing.</span>
+                <span>I have read the <NuxtLink to="/datenschutz" class="text-cyan-300 underline decoration-dotted underline-offset-4">privacy policy</NuxtLink> and consent to data processing.</span>
               </label>
             </div>
 
-            <button type="submit" class="btn btn-primary w-full" :disabled="registerLoading || !canRegister">
-              <span v-if="registerLoading" class="flex items-center justify-center gap-2">
+            <button type="submit" class="btn btn-primary btn-fancy w-full" :disabled="registerLoading || !canRegister">
+              <span v-if="registerLoading" class="relative z-10 flex items-center justify-center gap-2">
                 <v-progress-circular indeterminate size="16" width="2" color="white" />
                 Registering…
               </span>
-              <span v-else>Create account</span>
+              <span v-else class="relative z-10">Create account</span>
             </button>
 
             <p v-if="registerError" class="text-sm text-red-300">{{ registerError }}</p>
           </form>
+
+          <div class="mt-10 space-y-4">
+            <button
+                type="button"
+                class="flex w-full items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-5 py-4 text-left text-sm font-medium text-white/80 transition hover:border-cyan-400/40 hover:bg-white/10"
+                :aria-expanded="showAccessDetails"
+                aria-controls="access-instructions"
+                @click="showAccessDetails = !showAccessDetails"
+            >
+              <span>How to get access</span>
+              <v-icon :icon="showAccessDetails ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="20" />
+            </button>
+            <Transition name="collapse">
+              <div v-show="showAccessDetails" id="access-instructions" class="space-y-4 overflow-hidden">
+                <div class="rounded-2xl border border-white/10 bg-white/5 p-6">
+                  <ol class="space-y-4 text-sm text-white/70">
+                    <li class="flex gap-4">
+                      <span class="step-badge">1</span>
+                      <span>Join the <NuxtLink to="/#cta" class="text-cyan-300 underline decoration-dotted underline-offset-4">waitlist</NuxtLink>.</span>
+                    </li>
+                    <li class="flex gap-4">
+                      <span class="step-badge">2</span>
+                      <span>Receive your invite by email or get a code from an active member.</span>
+                    </li>
+                    <li class="flex gap-4">
+                      <span class="step-badge">3</span>
+                      <span>Register here, accept the terms &amp; privacy policy and start flying.</span>
+                    </li>
+                  </ol>
+                </div>
+                <div class="rounded-2xl border border-cyan-400/30 bg-cyan-400/10 p-5 text-sm text-cyan-100">
+                  Tip: After 14 days of active use you can generate up to two invitation codes yourself and share them with friends.
+                </div>
+              </div>
+            </Transition>
+          </div>
         </div>
       </div>
     </div>
@@ -182,6 +267,7 @@ const auth = useAuthStore()
 const api = useApi()
 
 const mode = ref<Mode>('login')
+const showAccessDetails = ref(false)
 
 const redirectTarget = computed(() => {
   const redirectParam = route.query.redirect
@@ -316,8 +402,176 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.chip {
-  @apply inline-flex h-6 w-6 items-center justify-center rounded-full bg-cyan-500/20 text-xs font-medium text-cyan-200;
+.field-label {
+  @apply text-xs font-semibold uppercase tracking-[0.35em] text-white/40;
+}
+
+.field-input {
+  @apply mt-2 w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-[0.95rem] text-white/90 transition placeholder:text-white/30 focus:border-cyan-400 focus:bg-white/[0.08] focus:outline-none;
+}
+
+.feature-marker {
+  @apply flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-base text-cyan-200 shadow-inner;
+}
+
+.step-badge {
+  @apply flex h-8 w-8 items-center justify-center rounded-full bg-cyan-500/10 text-sm font-semibold text-cyan-200;
+}
+
+.mode-toggle {
+  @apply relative grid grid-cols-2 items-center overflow-hidden rounded-full border border-white/10 bg-white/5 p-1 shadow-inner;
+  color: rgba(255, 255, 255, 0.68);
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.mode-toggle__glow {
+  @apply pointer-events-none absolute inset-y-1 left-1 rounded-full shadow-lg shadow-cyan-500/40;
+  width: calc(50% - 0.25rem);
+  background: linear-gradient(120deg, rgba(103, 232, 249, 0.95) 0%, rgba(14, 165, 233, 0.95) 45%, rgba(129, 140, 248, 0.95) 100%);
+  filter: drop-shadow(0 10px 25px rgba(56, 189, 248, 0.35));
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
+}
+
+.mode-toggle[data-mode='register'] .mode-toggle__glow {
+  transform: translateX(100%);
+}
+
+.mode-toggle__btn {
+  @apply relative z-10 flex items-center justify-center rounded-full px-4 py-2 transition;
+  gap: 0.5rem;
+  color: inherit;
+}
+
+.mode-toggle__btn-inner {
+  @apply inline-flex items-center gap-2;
+}
+
+.mode-toggle__btn[data-active='true'] {
+  color: #020617;
+  text-shadow: 0 8px 18px rgba(15, 118, 230, 0.45);
+  transform: translateY(-1px);
+}
+
+.mode-toggle__btn[data-active='true'] .mode-toggle__btn-inner {
+  @apply font-semibold;
+}
+
+.mode-toggle__btn:not([data-active='true']):hover,
+.mode-toggle__btn:not([data-active='true']):focus-visible {
+  color: rgba(255, 255, 255, 0.88);
+  transform: translateY(-1px);
+}
+
+.mode-toggle__btn:focus-visible {
+  @apply outline-none ring-2 ring-cyan-300/70 ring-offset-2 ring-offset-transparent;
+}
+
+.mode-toggle__btn:active {
+  transform: translateY(0);
+}
+
+.btn-fancy {
+  @apply relative inline-flex items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-r from-cyan-400 via-sky-400 to-indigo-400 text-base font-semibold text-slate-950 shadow-lg shadow-cyan-500/30 transition focus:outline-none focus:ring-2 focus:ring-cyan-300/70 focus:ring-offset-2 focus:ring-offset-transparent disabled:cursor-not-allowed disabled:opacity-70;
+}
+
+.btn-fancy::before {
+  content: '';
+  position: absolute;
+  inset: -120% 0 auto 0;
+  height: 200%;
+  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.35) 55%, transparent 100%);
+  transform: translateX(-100%);
+  animation: shimmer 4s infinite;
+  opacity: 0.85;
+}
+
+.btn-fancy:disabled::before {
+  opacity: 0.4;
+}
+
+.orb {
+  @apply absolute rounded-full blur-3xl;
+  animation: orbFloat 16s ease-in-out infinite;
+}
+
+.orb-one {
+  @apply -left-20 top-16 h-72 w-72 bg-cyan-500/25;
+}
+
+.orb-two {
+  @apply bottom-[-6rem] right-[-5rem] h-96 w-96 bg-indigo-500/20;
+  animation-delay: 2s;
+}
+
+.orb-three {
+  @apply -top-20 right-1/3 h-64 w-64 bg-sky-500/10;
+  animation-delay: 4s;
+}
+
+.floating-card {
+  animation: cardFloat 10s ease-in-out infinite;
+}
+
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 500px;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes orbFloat {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(12px, -14px, 0) scale(1.1);
+  }
+}
+
+@keyframes cardFloat {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -12px, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn-fancy::before,
+  .orb,
+  .floating-card,
+  .mode-toggle__glow {
+    animation: none !important;
+  }
+
+  .mode-toggle__glow {
+    transition: none;
+  }
 }
 </style>
-