Authentication

"use client";

import { ArrowRight, Mail, Quote } from "lucide-react";
import * as React from "react";

import { Avatar, Button, Checkbox, FormField, Input, PasswordInput, WaveinnoLogo, toast } from "@waveinno/ui";

function Google() {
  return (
    <svg viewBox="0 0 24 24" className="size-4" aria-hidden>
      <path fill="#4285F4" d="M22.6 12.2c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.6c2.1-1.9 3.3-4.8 3.3-8Z" />
      <path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.8c-1 .7-2.2 1.1-3.7 1.1-2.9 0-5.3-1.9-6.2-4.5H2.1v2.8A11 11 0 0 0 12 23Z" />
      <path fill="#FBBC05" d="M5.8 14.1a6.6 6.6 0 0 1 0-4.2V7.1H2.1a11 11 0 0 0 0 9.8l3.7-2.8Z" />
      <path fill="#EA4335" d="M12 5.4c1.6 0 3.1.6 4.2 1.7l3.2-3.2A11 11 0 0 0 2.1 7.1l3.7 2.8C6.7 7.3 9.1 5.4 12 5.4Z" />
    </svg>
  );
}

export default function SigninSplit() {
  const [busy, setBusy] = React.useState(false);
  return (
    <div className="grid min-h-[680px] bg-canvas lg:grid-cols-2">
      <aside className="relative isolate hidden flex-col justify-between overflow-hidden bg-[linear-gradient(150deg,var(--brand-1),color-mix(in_srgb,var(--brand-1)_70%,#000)_45%,var(--brand-2))] p-10 text-white lg:flex">
        <div aria-hidden className="absolute -right-32 -top-32 -z-10 size-[420px] rounded-full border border-white/15" />
        <div aria-hidden className="absolute -bottom-40 -left-24 -z-10 size-[520px] rounded-full border border-white/10" />
        <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(rgba(255,255,255,.14)_1px,transparent_1px)] [background-size:20px_20px] [mask-image:linear-gradient(180deg,transparent,#000)]" />
        <WaveinnoLogo className="h-5 brightness-0 invert" />
        <figure className="max-w-md">
          <Quote className="size-8 text-white/40" />
          <blockquote className="disp mt-3 text-[24px] text-white font-semibold leading-[1.4]">The day closes itself, to the taka, before I leave the office.</blockquote>
          <figcaption className="mt-6 flex items-center gap-3">
            <Avatar name="Karim Ahmed" size="lg" />
            <span>
              <span className="block text-[14px] font-semibold">Karim Ahmed</span>
              <span className="block text-[13px] text-white/70">Owner, Gulshan Parking</span>
            </span>
          </figcaption>
        </figure>
      </aside>

      <main className="flex items-center justify-center px-6 py-12">
        <div className="w-full max-w-[380px]">
          <WaveinnoLogo className="mb-10 h-5 lg:hidden" />
          <h1 className="disp text-[28px] font-bold tracking-[-0.025em] text-text leading-[1.15]">Welcome back</h1>
          <p className="mt-1.5 text-[14px] text-muted">Sign in to see your sites.</p>

          <Button variant="secondary" size="lg" className="mt-8 w-full">
            <Google /> Continue with Google
          </Button>
          <div className="my-6 flex items-center gap-3 text-[12px] text-muted">
            <span className="h-px flex-1 bg-border" /> or with email <span className="h-px flex-1 bg-border" />
          </div>
          <form
            className="space-y-4"
            onSubmit={async (e) => {
              e.preventDefault();
              setBusy(true);
              await new Promise((r) => setTimeout(r, 900));
              setBusy(false);
              toast.success("Signed in");
            }}
          >
            <FormField label="Email" htmlFor="s-email">
              <Input id="s-email" type="email" required autoComplete="email" placeholder="you@company.com" leading={<Mail />} />
            </FormField>
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <label htmlFor="s-pass" className="text-[13px] font-medium text-text">
                  Password
                </label>
                <a href="#" className="text-[12.5px] font-medium text-primary hover:underline">
                  Forgot it?
                </a>
              </div>
              <PasswordInput id="s-pass" required placeholder="Your password" />
            </div>
            <label className="flex items-center gap-2 text-[13px] text-body">
              <Checkbox defaultChecked /> Keep me signed in on this device
            </label>
            <Button type="submit" variant="gradient" size="lg" loading={busy} className="w-full">
              Sign in <ArrowRight />
            </Button>
          </form>
          <p className="mt-8 text-center text-[13.5px] text-muted">
            New here?{" "}
            <a href="#" className="font-semibold text-primary hover:underline">
              Create an account
            </a>
          </p>
        </div>
      </main>
    </div>
  );
}

"use client";

import { ArrowLeft, KeyRound, Mail, MailCheck } from "lucide-react";
import * as React from "react";

import { Button, FormField, Input } from "@waveinno/ui";

export default function ForgotPassword() {
  const [sent, setSent] = React.useState<string | null>(null);
  const [busy, setBusy] = React.useState(false);
  return (
    <section className="grid min-h-[560px] place-items-center bg-surface px-4 py-16">
      <div className="w-full max-w-sm rounded-[24px] border border-border bg-raised p-7 text-center shadow-[var(--lit),0_24px_50px_-30px_rgba(5,8,22,.35)]">
        <span className="mx-auto grid size-12 place-items-center rounded-[14px] bg-primary-subtle text-primary">{sent ? <MailCheck className="size-6" /> : <KeyRound className="size-6" />}</span>
        {sent ? (
          <>
            <h1 className="disp mt-5 text-[22px] font-bold leading-7 text-text">Check your inbox</h1>
            <p className="mt-2 text-[14px] leading-[1.6] text-muted">
              We sent a link to <b className="font-semibold text-text">{sent}</b>. It works for 30 minutes.
            </p>
            <Button asChild variant="primary" size="lg" className="mt-6 w-full">
              <a href="mailto:">Open email app</a>
            </Button>
            <p className="mt-4 text-[13px] text-muted">
              Nothing yet?{" "}
              <button type="button" onClick={() => setSent(null)} className="cursor-pointer font-semibold text-primary hover:underline">
                Send it again
              </button>
            </p>
          </>
        ) : (
          <>
            <h1 className="disp mt-5 text-[22px] font-bold leading-7 text-text">Forgot your password?</h1>
            <p className="mt-2 text-[14px] leading-[1.6] text-muted">Enter your email and we will send you a link to set a new one.</p>
            <form
              className="mt-6 text-left"
              onSubmit={(e) => {
                e.preventDefault();
                const email = new FormData(e.currentTarget).get("email") as string;
                setBusy(true);
                window.setTimeout(() => (setBusy(false), setSent(email)), 800);
              }}
            >
              <FormField label="Email" htmlFor="fp-email">
                <Input id="fp-email" name="email" type="email" required autoComplete="email" placeholder="you@company.com" leading={<Mail />} />
              </FormField>
              <Button type="submit" variant="primary" size="lg" loading={busy} className="mt-5 w-full">
                Send reset link
              </Button>
            </form>
          </>
        )}
        <a href="#" className="mt-6 inline-flex items-center gap-1.5 text-[13px] font-medium text-muted hover:text-text">
          <ArrowLeft className="size-4" /> Back to sign in
        </a>
      </div>
    </section>
  );
}