vibefast-cli 0.2.4 → 0.3.1

package/2/apps/web/components/auth/SignInFormEmailCode.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { CodeInput } from "@/components/auth/CodeInput";
+import { SignInMethodDivider } from "@/components/auth/SignInMethodDivider";
+import { SignInWithEmailCode } from "@/components/auth/SignInWithEmailCode";
+import { SignInWithOAuth } from "@/components/auth/SignInWithOAuth";
+import { Button } from "@/components/ui/button";
+import { Toaster } from "@/components/ui/toaster";
+import { useToast } from "@/components/ui/use-toast";
+import { useAuthActions } from "@convex-dev/auth/react";
+import { useState } from "react";
+
+export function SignInFormEmailCode() {
+  const { signIn } = useAuthActions();
+  const [step, setStep] = useState<"signIn" | { email: string }>("signIn");
+  const { toast } = useToast();
+  const [submitting, setSubmitting] = useState(false);
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      {step === "signIn" ? (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Sign in or create an account
+          </h2>
+          <SignInWithOAuth />
+          <SignInMethodDivider />
+          <SignInWithEmailCode handleCodeSent={(email) => setStep({ email })} />
+        </>
+      ) : (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Check your email
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Enter the 8-digit code we sent to your email address.
+          </p>
+          <form
+            className="flex flex-col"
+            onSubmit={(event) => {
+              event.preventDefault();
+              setSubmitting(true);
+              const formData = new FormData(event.currentTarget);
+              signIn("resend-otp", formData).catch(() => {
+                toast({
+                  title: "Code could not be verified, try again",
+                  variant: "destructive",
+                });
+                setSubmitting(false);
+              });
+            }}
+          >
+            <label htmlFor="code">Code</label>
+            <CodeInput />
+            <input name="email" value={step.email} type="hidden" />
+            <Button type="submit" disabled={submitting}>
+              Continue
+            </Button>
+            <Button
+              type="button"
+              variant="link"
+              onClick={() => setStep("signIn")}
+            >
+              Cancel
+            </Button>
+          </form>
+        </>
+      )}
+      <Toaster />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormEmailLink.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import { useAuthActions } from "@convex-dev/auth/react";
+import { SignInMethodDivider } from "@/components/auth/SignInMethodDivider";
+import { SignInWithOAuth } from "@/components/auth/SignInWithOAuth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Toaster } from "@/components/ui/toaster";
+import { useToast } from "@/components/ui/use-toast";
+import { useState } from "react";
+
+export function SignInFormEmailLink() {
+  const [step, setStep] = useState<"signIn" | "linkSent">("signIn");
+
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      {step === "signIn" ? (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Sign in or create an account
+          </h2>
+          <SignInWithOAuth />
+          <SignInMethodDivider />
+          <SignInWithMagicLink handleLinkSent={() => setStep("linkSent")} />
+        </>
+      ) : (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Check your email
+          </h2>
+          <p>A sign-in link has been sent to your email address.</p>
+          <Button
+            className="p-0 self-start"
+            variant="link"
+            onClick={() => setStep("signIn")}
+          >
+            Cancel
+          </Button>
+        </>
+      )}
+      <Toaster />
+    </div>
+  );
+}
+
+function SignInWithMagicLink({
+  handleLinkSent,
+}: {
+  handleLinkSent: () => void;
+}) {
+  const { signIn } = useAuthActions();
+  const { toast } = useToast();
+  const [submitting, setSubmitting] = useState(false);
+  return (
+    <form
+      className="flex flex-col"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSubmitting(true);
+        const formData = new FormData(event.currentTarget);
+        signIn("resend", formData)
+          .then(handleLinkSent)
+          .catch((error) => {
+            console.error(error);
+            toast({
+              title: "Could not send sign-in link",
+              variant: "destructive",
+            });
+            setSubmitting(false);
+          });
+      }}
+    >
+      <label htmlFor="email">Email</label>
+      <Input name="email" id="email" className="mb-4" autoComplete="email" />
+      <Button type="submit" disabled={submitting}>
+        Send sign-in link
+      </Button>
+    </form>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormPassword.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { SignInWithPassword } from "@/components/auth/SignInWithPassword";
+import { Toaster } from "@/components/ui/toaster";
+
+export function SignInFormPassword() {
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      <h2 className="font-semibold text-2xl tracking-tight">
+        Sign in or create an account
+      </h2>
+      <SignInWithPassword />
+      <Toaster />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormPasswordAndCustomField.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { SignInWithPassword } from "@/components/auth/SignInWithPassword";
+import { Toaster } from "@/components/ui/toaster";
+import { useState } from "react";
+import { HexColorPicker } from "react-colorful";
+
+export function SignInFormPasswordAndCustomField() {
+  const [color, setColor] = useState<string | null>(null);
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      <h2 className="font-semibold text-2xl tracking-tight">
+        Sign in or create an account
+      </h2>
+      <SignInWithPassword
+        provider="password-custom"
+        passwordRequirements="6 or more characters with uppercase, lowercase and digits"
+        customSignUp={
+          <>
+            {color !== null && (
+              <input name="favoriteColor" value={color} type="hidden" />
+            )}
+            <span className="mt-4">Favorite Color</span>
+            <div
+              style={{ backgroundColor: color ?? "transparent" }}
+              className="h-9 w-full mb-2 rounded-md border border-gray-800"
+            >
+              &nbsp;
+            </div>
+            <HexColorPicker
+              color={color ?? "#aabbcc"}
+              onChange={setColor}
+              className="mb-4 w-max"
+            />
+          </>
+        }
+      />
+      <Toaster />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormPasswordAndResetViaCode.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { ResetPasswordWithEmailCode } from "@/components/auth/ResetPasswordWithEmailCode";
+import { SignInWithPassword } from "@/components/auth/SignInWithPassword";
+import { Toaster } from "@/components/ui/toaster";
+import { useState } from "react";
+
+export function SignInFormPasswordAndResetViaCode() {
+  const [step, setStep] = useState<"signIn" | "forgot">("signIn");
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      {step === "signIn" ? (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Sign in or create an account
+          </h2>
+          <SignInWithPassword
+            provider="password-with-reset"
+            handlePasswordReset={() => setStep("forgot")}
+          />
+        </>
+      ) : (
+        <ResetPasswordWithEmailCode
+          provider="password-with-reset"
+          handleCancel={() => setStep("signIn")}
+        />
+      )}
+      <Toaster />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormPasswordAndVerifyViaCode.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useAuthActions } from "@convex-dev/auth/react";
+import { CodeInput } from "@/components/auth/CodeInput";
+import { ResetPasswordWithEmailCode } from "@/components/auth/ResetPasswordWithEmailCode";
+import { SignInMethodDivider } from "@/components/auth/SignInMethodDivider";
+import { SignInWithOAuth } from "@/components/auth/SignInWithOAuth";
+import { SignInWithPassword } from "@/components/auth/SignInWithPassword";
+import { Button } from "@/components/ui/button";
+import { Toaster } from "@/components/ui/toaster";
+import { useToast } from "@/components/ui/use-toast";
+import { useState } from "react";
+
+export function SignInFormPasswordAndVerifyViaCode() {
+  const { signIn } = useAuthActions();
+  const { toast } = useToast();
+  const [step, setStep] = useState<"signIn" | { email: string } | "forgot">(
+    "signIn",
+  );
+  const [submitting, setSubmitting] = useState(false);
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      {step === "signIn" ? (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Sign in or create an account
+          </h2>
+          <SignInWithOAuth />
+          <SignInMethodDivider />
+          <SignInWithPassword
+            handleSent={(email) => setStep({ email })}
+            handlePasswordReset={() => setStep("forgot")}
+            provider="password-code"
+          />
+        </>
+      ) : step === "forgot" ? (
+        <ResetPasswordWithEmailCode
+          provider="password-code"
+          handleCancel={() => setStep("signIn")}
+        />
+      ) : (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Check your email
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Enter the 8-digit code we sent to your email address.
+          </p>
+          <form
+            className="flex flex-col"
+            onSubmit={(event) => {
+              event.preventDefault();
+              setSubmitting(true);
+              const formData = new FormData(event.currentTarget);
+              signIn("password-code", formData).catch((error) => {
+                console.error(error);
+                toast({
+                  title: "Code could not be verified, try again",
+                  variant: "destructive",
+                });
+                setSubmitting(false);
+              });
+            }}
+          >
+            <label htmlFor="email">Code</label>
+            <CodeInput />
+            <input name="email" value={step.email} type="hidden" />
+            <input name="flow" value="email-verification" type="hidden" />
+            <Button type="submit" disabled={submitting}>
+              Continue
+            </Button>
+            <Button
+              type="button"
+              variant="link"
+              onClick={() => setStep("signIn")}
+            >
+              Cancel
+            </Button>
+          </form>
+        </>
+      )}
+      <Toaster />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormPhoneCode.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { CodeInput } from "@/components/auth/CodeInput";
+import { Button } from "@/components/ui/button";
+import { useAuthActions } from "@convex-dev/auth/react";
+
+import { Input } from "@/components/ui/input";
+import { Toaster } from "@/components/ui/toaster";
+import { useToast } from "@/components/ui/use-toast";
+import { useState } from "react";
+
+export function SignInFormPhoneCode() {
+  const { signIn } = useAuthActions();
+  const [step, setStep] = useState<"signIn" | { phone: string }>("signIn");
+  const { toast } = useToast();
+
+  return (
+    <div className="max-w-[384px] mx-auto flex flex-col gap-4">
+      {step === "signIn" ? (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Sign in or create an account
+          </h2>
+          <form
+            className="flex flex-col"
+            onSubmit={(event) => {
+              event.preventDefault();
+              const formData = new FormData(event.currentTarget);
+              signIn("twilio", formData)
+                .then(() => setStep({ phone: formData.get("phone") as string }))
+                .catch((error) => {
+                  console.error(error);
+                  toast({
+                    title: "Could not send code",
+                    variant: "destructive",
+                  });
+                });
+            }}
+          >
+            <label htmlFor="phone">Phone</label>
+            <Input
+              name="phone"
+              id="phone"
+              className="mb-4"
+              autoComplete="tel"
+            />
+            <Button type="submit">Send code</Button>
+          </form>
+        </>
+      ) : (
+        <>
+          <h2 className="font-semibold text-2xl tracking-tight">
+            Check your phone
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Enter the 6-digit code we sent to your phone number.
+          </p>
+          <form
+            className="flex flex-col"
+            onSubmit={(event) => {
+              event.preventDefault();
+              const formData = new FormData(event.currentTarget);
+              signIn("twilio", formData).catch(() => {
+                toast({
+                  title: "Code could not be verified, try again",
+                  variant: "destructive",
+                });
+              });
+            }}
+          >
+            <label htmlFor="code">Code</label>
+            <CodeInput length={6} />
+            <input name="phone" value={step.phone} type="hidden" />
+            <Button type="submit">Continue</Button>
+            <Button
+              type="button"
+              variant="link"
+              onClick={() => setStep("signIn")}
+            >
+              Cancel
+            </Button>
+          </form>
+        </>
+      )}
+      <Toaster />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInFormsShowcase.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { SignInFormEmailCode } from "@/components/auth/SignInFormEmailCode";
+import { SignInFormEmailLink } from "@/components/auth/SignInFormEmailLink";
+import { SignInFormPassword } from "@/components/auth/SignInFormPassword";
+import { SignInFormPasswordAndResetViaCode } from "@/components/auth/SignInFormPasswordAndResetViaCode";
+import { SignInFormPasswordAndVerifyViaCode } from "@/components/auth/SignInFormPasswordAndVerifyViaCode";
+import { SignInFormPasswordAndCustomField } from "@/components/auth/SignInFormPasswordAndCustomField";
+import { SignInFormPhoneCode } from "@/components/auth/SignInFormPhoneCode";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export function SignInFormsShowcase() {
+  return (
+    <Tabs defaultValue="otp" className="container flex flex-col mt-10">
+      <TabsList className="ml-auto mr-10 mb-1 opacity-60 overflow-x-scroll max-w-full justify-start">
+        <TabsTrigger value="otp">OTP</TabsTrigger>
+        <TabsTrigger value="link">Magic Link</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="otp">
+        <Tabs defaultValue="email" className="flex flex-col">
+          <TabsList className="ml-auto mr-10 mb-7 opacity-60">
+            <TabsTrigger value="email">OAuth + Email</TabsTrigger>
+            <TabsTrigger value="phone">SMS</TabsTrigger>
+          </TabsList>
+          <TabsContent value="email">
+            <SignInFormEmailCode />
+          </TabsContent>
+          <TabsContent value="phone">
+            <SignInFormPhoneCode />
+          </TabsContent>
+        </Tabs>
+      </TabsContent>
+      <TabsContent className="mt-20" value="link">
+        <SignInFormEmailLink />
+      </TabsContent>
+      <TabsContent value="password">
+        <Tabs defaultValue="basic" className="flex flex-col">
+          <TabsList className="ml-auto mr-10 mb-7 opacity-60 overflow-x-scroll max-w-full justify-start">
+            <TabsTrigger value="basic">Basic</TabsTrigger>
+            <TabsTrigger value="custom">Custom Sign Up</TabsTrigger>
+            <TabsTrigger value="password reset">Password Reset</TabsTrigger>
+            <TabsTrigger value="email verification">
+              OAuth + Email Verification
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="basic">
+            <SignInFormPassword />
+          </TabsContent>
+          <TabsContent value="custom">
+            <SignInFormPasswordAndCustomField />
+          </TabsContent>
+          <TabsContent value="password reset">
+            <SignInFormPasswordAndResetViaCode />
+          </TabsContent>
+          <TabsContent value="email verification">
+            <SignInFormPasswordAndVerifyViaCode />
+          </TabsContent>
+        </Tabs>
+      </TabsContent>
+    </Tabs>
+  );
+}
+

package/2/apps/web/components/auth/SignInMethodDivider.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+export function SignInMethodDivider() {
+  return (
+    <div className="relative">
+      <div className="absolute inset-0 flex items-center">
+        <span className="w-full border-t" />
+      </div>
+      <div className="relative flex justify-center text-xs uppercase">
+        <span className="bg-background px-2 text-muted-foreground">
+          Or continue with
+        </span>
+      </div>
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInWithEmailCode.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { useAuthActions } from "@convex-dev/auth/react";
+import { useState } from "react";
+
+export function SignInWithEmailCode({
+  handleCodeSent,
+  provider,
+  children,
+}: {
+  handleCodeSent: (email: string) => void;
+  provider?: string;
+  children?: React.ReactNode;
+}) {
+  const { signIn } = useAuthActions();
+  const { toast } = useToast();
+  const [submitting, setSubmitting] = useState(false);
+  return (
+    <form
+      className="flex flex-col"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSubmitting(true);
+        const formData = new FormData(event.currentTarget);
+        signIn(provider ?? "resend-otp", formData)
+          .then(() => handleCodeSent(formData.get("email") as string))
+          .catch((error) => {
+            console.error(error);
+            toast({
+              title: "Could not send code",
+              variant: "destructive",
+            });
+            setSubmitting(false);
+          });
+      }}
+    >
+      <label htmlFor="email">Email</label>
+      <Input name="email" id="email" className="mb-4" autoComplete="email" />
+      {children}
+      <Button type="submit" disabled={submitting}>
+        Send code
+      </Button>
+    </form>
+  );
+}
+

package/2/apps/web/components/auth/SignInWithOAuth.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { SignInWithApple } from "@/components/auth/oauth/SignInWithApple";
+import { SignInWithGitHub } from "@/components/auth/oauth/SignInWithGitHub";
+import { SignInWithGoogle } from "@/components/auth/oauth/SignInWithGoogle";
+
+export function SignInWithOAuth() {
+  return (
+    <div className="flex flex-col min-[460px]:flex-row w-full gap-2 items-stretch">
+      <SignInWithGitHub />
+      <SignInWithGoogle />
+      <SignInWithApple />
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/SignInWithPassword.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { useAuthActions } from "@convex-dev/auth/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { useState } from "react";
+import { ConvexError } from "convex/values";
+
+export function SignInWithPassword({
+  provider,
+  handleSent,
+  handlePasswordReset,
+  customSignUp: customSignUp,
+  passwordRequirements,
+}: {
+  provider?: string;
+  handleSent?: (email: string) => void;
+  handlePasswordReset?: () => void;
+  customSignUp?: React.ReactNode;
+  passwordRequirements?: string;
+}) {
+  const { signIn } = useAuthActions();
+  const [flow, setFlow] = useState<"signIn" | "signUp">("signIn");
+  const { toast } = useToast();
+  const [submitting, setSubmitting] = useState(false);
+  return (
+    <form
+      className="flex flex-col"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSubmitting(true);
+        const formData = new FormData(event.currentTarget);
+        signIn(provider ?? "password", formData)
+          .then(() => {
+            handleSent?.(formData.get("email") as string);
+          })
+          .catch((error) => {
+            console.error(error);
+            let toastTitle: string;
+            if (error instanceof ConvexError) {
+              toastTitle =
+                "Invalid password - check the requirements and try again.";
+            } else {
+              toastTitle =
+                flow === "signIn"
+                  ? "Could not sign in, did you mean to sign up?"
+                  : "Could not sign up, did you mean to sign in?";
+            }
+            toast({ title: toastTitle, variant: "destructive" });
+            setSubmitting(false);
+          });
+      }}
+    >
+      <label htmlFor="email">Email</label>
+      <Input name="email" id="email" className="mb-4" autoComplete="email" />
+      <div className="flex items-center justify-between">
+        <label htmlFor="password">Password</label>
+        {handlePasswordReset && flow === "signIn" ? (
+          <Button
+            className="p-0 h-auto"
+            type="button"
+            variant="link"
+            onClick={handlePasswordReset}
+          >
+            Forgot your password?
+          </Button>
+        ) : null}
+      </div>
+      <Input
+        type="password"
+        name="password"
+        id="password"
+        autoComplete={flow === "signIn" ? "current-password" : "new-password"}
+      />
+      {flow === "signUp" && passwordRequirements !== null && (
+        <span className="text-gray-500 font-thin text-sm">
+          {passwordRequirements}
+        </span>
+      )}
+      {flow === "signUp" && customSignUp}
+      <input name="flow" value={flow} type="hidden" />
+      <Button type="submit" disabled={submitting} className="mt-4">
+        {flow === "signIn" ? "Sign in" : "Sign up"}
+      </Button>
+      <Button
+        variant="link"
+        type="button"
+        onClick={() => {
+          setFlow(flow === "signIn" ? "signUp" : "signIn");
+        }}
+      >
+        {flow === "signIn"
+          ? "Don't have an account? Sign up"
+          : "Already have an account? Sign in"}
+      </Button>
+    </form>
+  );
+}
+