vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,72 +0,0 @@
-"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

@@ -1,81 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,42 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-"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

@@ -1,86 +0,0 @@
-"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

@@ -1,89 +0,0 @@
-"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

@@ -1,64 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,49 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-"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

@@ -1,100 +0,0 @@
-"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>
-  );
-}
-