spazio-solazzo/lib/spazio_solazzo_web/live/auth/auth_callback_live.html.heex

<Layouts.app flash={@flash} current_user={@current_user}>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-sky-50 to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 flex items-center justify-center px-4">
    <div class="w-full max-w-md">
      <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="p-8">
          <%= if @existing_user? do %>
            <%!-- Existing User Sign In --%>
            <div class="text-center mb-6">
              <div class="inline-flex items-center justify-center size-12 bg-sky-100 dark:bg-sky-900/30 rounded-full mb-4">
                <.icon name="hero-check-circle" class="size-6 text-sky-600 dark:text-sky-400" />
              </div>
              <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
                Welcome Back!
              </h2>
              <p class="text-slate-600 dark:text-slate-400 text-sm">
                We found your account. Click below to continue.
              </p>
            </div>

            <form id="sign-in-form" phx-submit="sign_in" class="space-y-5">
              <div class="flex items-center gap-3 p-4 bg-gradient-to-r from-slate-50 to-sky-50/50 dark:from-slate-900 dark:to-slate-800 rounded-xl border border-slate-200 dark:border-slate-700">
                <div class="flex-shrink-0">
                  <.icon name="hero-envelope" class="size-5 text-sky-600 dark:text-sky-400" />
                </div>
                <span class="text-sm font-medium text-slate-700 dark:text-slate-300 truncate">
                  {@email}
                </span>
              </div>

              <label class="flex items-start gap-3 cursor-pointer group p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors">
                <input
                  type="checkbox"
                  name="remember_me"
                  id="remember_me"
                  class="mt-0.5 size-5 rounded border-slate-300 dark:border-slate-600 text-sky-600 focus:ring-2 focus:ring-sky-500 focus:ring-offset-0 dark:bg-slate-700 cursor-pointer"
                />
                <span class="text-sm text-slate-700 dark:text-slate-300 leading-tight">
                  Remember me on this device for 30 days
                </span>
              </label>

              <button
                type="submit"
                id="sign-in-button"
                class="w-full px-6 py-3.5 bg-gradient-to-r from-sky-500 to-sky-600 hover:from-sky-600 hover:to-sky-700 text-white font-semibold rounded-xl transition-all shadow-lg shadow-sky-500/30 hover:shadow-xl hover:shadow-sky-500/40 hover:-translate-y-0.5 active:translate-y-0"
              >
                Sign In to Your Account
              </button>
            </form>
          <% else %>
            <%!-- New User Registration --%>
            <div class="text-center mb-6">
              <div class="inline-flex items-center justify-center size-12 bg-sky-100 dark:bg-sky-900/30 rounded-full mb-4">
                <.icon name="hero-user-plus" class="size-6 text-sky-600 dark:text-sky-400" />
              </div>
              <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
                Complete Your Profile
              </h2>
              <p class="text-slate-600 dark:text-slate-400 text-sm">
                Just a few details to get you started
              </p>
            </div>

            <form id="registration-form" phx-submit="register" class="space-y-5">
              <div class="flex items-center gap-3 p-4 bg-gradient-to-r from-slate-50 to-sky-50/50 dark:from-slate-900 dark:to-slate-800 rounded-xl border border-slate-200 dark:border-slate-700">
                <div class="flex-shrink-0">
                  <.icon name="hero-envelope" class="size-5 text-sky-600 dark:text-sky-400" />
                </div>
                <span class="text-sm font-medium text-slate-700 dark:text-slate-300 truncate">
                  {@email}
                </span>
              </div>

              <div>
                <label
                  for="name"
                  class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2"
                >
                  Full Name <span class="text-rose-500">*</span>
                </label>
                <div class="relative">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    required
                    class="w-full pl-11 pr-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-shadow"
                    placeholder="John Doe"
                  />
                  <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
                    <.icon name="hero-user" class="size-5 text-slate-400 dark:text-slate-500" />
                  </div>
                </div>
              </div>

              <div>
                <label
                  for="phone_number"
                  class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2"
                >
                  Phone Number <span class="text-rose-500">*</span>
                </label>
                <div class="relative">
                  <input
                    type="tel"
                    name="phone_number"
                    id="phone_number"
                    required
                    class="w-full pl-11 pr-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-shadow"
                    placeholder="+39 123 456 7890"
                  />
                  <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
                    <.icon name="hero-phone" class="size-5 text-slate-400 dark:text-slate-500" />
                  </div>
                </div>
              </div>

              <label class="flex items-start gap-3 cursor-pointer group p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors">
                <input
                  type="checkbox"
                  name="remember_me"
                  id="remember_me"
                  class="mt-0.5 size-5 rounded border-slate-300 dark:border-slate-600 text-sky-600 focus:ring-2 focus:ring-sky-500 focus:ring-offset-0 dark:bg-slate-700 cursor-pointer"
                />
                <span class="text-sm text-slate-700 dark:text-slate-300 leading-tight">
                  Remember me on this device for 30 days
                </span>
              </label>

              <button
                type="submit"
                id="register-button"
                class="w-full px-6 py-3.5 bg-gradient-to-r from-sky-500 to-sky-600 hover:from-sky-600 hover:to-sky-700 text-white font-semibold rounded-xl transition-all shadow-lg shadow-sky-500/30 hover:shadow-xl hover:shadow-sky-500/40 hover:-translate-y-0.5 active:translate-y-0"
              >
                Create Account
              </button>
            </form>
          <% end %>
        </div>

        <div class="px-8 py-4 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700">
          <p class="text-xs text-center text-slate-500 dark:text-slate-400">
            By continuing, you agree to our Terms of Service and Privacy Policy
          </p>
        </div>
      </div>

      <div class="mt-6 text-center">
        <.link
          navigate="/"
          class="inline-flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
        >
          <.icon name="hero-arrow-left" class="size-4" />
          <span>Back to home</span>
        </.link>
      </div>
    </div>
  </div>
</Layouts.app>