create-zhx-monorepo 0.2.2 → 2.0.0

package/templates/monorepo-starter/apps/dashboard/src/components/skeleton/TableSkeleton.tsx

@@ -0,0 +1,77 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@workspace/ui/components/table";
+
+interface TableSkeletonProps {
+  columnCount?: number;
+  rowCount?: number;
+}
+
+const TableSkeleton = ({
+  columnCount = 5,
+  rowCount = 10,
+}: TableSkeletonProps) => {
+  return (
+    <section className="space-y-4 animate-pulse">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-1 items-center gap-2">
+          <Skeleton className="h-10 w-37.5" />
+          <Skeleton className="h-10 w-full max-w-75" />{" "}
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-10 w-25" />
+          <Skeleton className="h-10 w-30" />
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader className="bg-muted">
+            <TableRow>
+              {Array.from({ length: columnCount }).map((_, i) => (
+                <TableHead key={i}>
+                  <Skeleton className="h-4 w-24" />
+                </TableHead>
+              ))}
+              <TableHead className="w-20">
+                <Skeleton className="h-4 w-12" />
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rowCount }).map((_, rowIndex) => (
+              <TableRow key={rowIndex}>
+                {Array.from({ length: columnCount }).map((_, colIndex) => (
+                  <TableCell key={colIndex}>
+                    <Skeleton className="h-4 w-full" />
+                  </TableCell>
+                ))}
+                <TableCell>
+                  <Skeleton className="h-8 w-8 rounded-md" />{" "}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between px-2">
+        <Skeleton className="h-4 w-40" />
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-8 w-8" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TableSkeleton;

package/templates/monorepo-starter/apps/dashboard/src/components/user/UserAccountSection.tsx

@@ -0,0 +1,530 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import z from "zod";
+import { toast } from "sonner";
+import { useEffect, useState } from "react";
+import { useForm } from "@tanstack/react-form";
+import { Mail, Shield, Phone, Smartphone, Loader2 } from "lucide-react";
+
+import {
+  identifierSchema,
+  passwordSchema,
+  MfaMethodEnum,
+} from "@workspace/contracts";
+
+import {
+  requestOtp,
+  resetPassword,
+  requestUpdateIdentifier,
+  updateMfa,
+} from "@workspace/sdk/auth";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import { Form } from "@workspace/ui/components/form";
+
+import { Button } from "@workspace/ui/components/button";
+import { Badge } from "@workspace/ui/components/badge";
+import { InputField } from "@workspace/ui/components/input-field";
+import { SelectField } from "@workspace/ui/components/select-field";
+import OtpModal, { type OtpMeta } from "@workspace/ui/components/otp-modal";
+
+import UserSessions from "./UserSessions";
+import useUser from "@/hooks/user";
+
+type IdentifierType = "email" | "phone";
+
+interface AccountSectionProps {
+  user: UserResponse;
+}
+
+const AccountSection = ({ user }: AccountSectionProps) => {
+  const { refetchUser } = useUser();
+  const [isOpen, setIsOpen] = useState(false);
+  const [otpPurpose, setOtpPurpose] = useState<OtpPurpose>();
+  const [identifierType, setIdentifierType] = useState<IdentifierType>();
+  const [otpMeta, setOtpMeta] = useState<OtpMeta>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const primaryIdentifier = user.email || user.phone;
+  const primaryIdentifierType = user.email ? "email" : "phone";
+
+  const schema = z.object({
+    newIdentifier:
+      otpPurpose === "authUpdateIdentifier"
+        ? identifierSchema
+        : z.string().optional(),
+    newPassword: otpPurpose?.includes("Password")
+      ? passwordSchema
+      : z.string().optional(),
+    confirmPassword: otpPurpose?.includes("Password")
+      ? passwordSchema
+      : z.string().optional(),
+    preferredMfa:
+      otpPurpose === "authUpdateMfa" ? MfaMethodEnum : MfaMethodEnum.optional(),
+  });
+
+  const form = useForm({
+    defaultValues: {
+      newIdentifier: otpPurpose === "authUpdateIdentifier" ? "" : undefined,
+      newPassword: otpPurpose?.includes("Password") ? "" : undefined,
+      confirmPassword: otpPurpose?.includes("Password") ? "" : undefined,
+      preferredMfa: user.preferredMfa ?? "email",
+    },
+    validators: {
+      onSubmit: schema as any,
+    },
+    onSubmit: async ({ value }) => {
+      let message = "";
+      try {
+        setIsLoading(true);
+        if (!otpMeta?.token) throw new Error("OTP token is missing");
+
+        if (otpPurpose === "authUpdateIdentifier") {
+          const res = await requestUpdateIdentifier({
+            identifier: primaryIdentifier!,
+            newIdentifier: value.newIdentifier!,
+            purpose: otpPurpose,
+            secret: otpMeta.token,
+          });
+
+          message = res.message;
+        } else if (otpPurpose === "authResetPassword") {
+          const res = await resetPassword({
+            identifier: primaryIdentifier!,
+            purpose: otpPurpose,
+            newPassword: value.newPassword!,
+            secret: otpMeta.token,
+          });
+
+          message = res.message;
+        } else if (otpPurpose === "authUpdateMfa") {
+          const res = await updateMfa({
+            identifier: primaryIdentifier!,
+            purpose: otpPurpose,
+            preferredMfa: value.preferredMfa,
+            secret: otpMeta.token,
+          });
+          message = res.message;
+        }
+
+        toast.success(message);
+        form.reset();
+        refetchUser();
+      } catch (error: any) {
+        toast.error(error.message || "Operation failed");
+      } finally {
+        setOtpPurpose(undefined);
+        setOtpMeta(undefined);
+        setIdentifierType(undefined);
+        setIsLoading(false);
+      }
+    },
+  });
+
+  const handleOpen = (purpose: OtpPurpose, type?: IdentifierType) => {
+    if (type) setIdentifierType(type);
+    setOtpMeta(undefined);
+    setOtpPurpose(purpose);
+    setIsOpen(true);
+  };
+
+  useEffect(() => {
+    if (!otpPurpose || !primaryIdentifier) return;
+
+    if (otpMeta?.valid) return;
+
+    const otpRequest = async () => {
+      try {
+        const res = await requestOtp({
+          identifier: primaryIdentifier,
+          purpose: otpPurpose,
+        });
+        toast.success(res.message);
+      } catch (err: any) {
+        toast.error("Failed to request OTP", {
+          description: err?.message,
+        });
+      }
+    };
+
+    otpRequest();
+  }, [isOpen, otpPurpose, primaryIdentifier, otpMeta?.valid]);
+
+  useEffect(() => {
+    if (otpMeta?.valid && !otpMeta.token) {
+      refetchUser();
+    }
+  }, [otpMeta?.token, otpMeta?.valid, refetchUser]);
+
+  return (
+    <Form form={form} className="space-y-6">
+      {/* Account Identifiers Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Smartphone className="size-5" />
+            Account Identifiers
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Email Section */}
+          <div className="space-y-4 p-4 rounded-lg border">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Mail className="size-5 text-muted-foreground" />
+                <div>
+                  <p className="font-medium">Email Address</p>
+                  {user.email ? (
+                    <>
+                      <p className="text-muted-foreground text-sm">
+                        {user.email}
+                      </p>
+                      <p className="text-xs mt-1">
+                        Status:{" "}
+                        <span
+                          className={
+                            user.isEmailVerified
+                              ? "text-green-600"
+                              : "text-amber-600"
+                          }
+                        >
+                          {user.isEmailVerified ? "Verified" : "Unverified"}
+                        </span>
+                      </p>
+                    </>
+                  ) : (
+                    <p className="text-muted-foreground text-sm">
+                      No email added
+                    </p>
+                  )}
+                </div>
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => handleOpen("authUpdateIdentifier", "email")}
+                disabled={isLoading}
+              >
+                {user.email ? "Change Email" : "Add Email"}
+              </Button>
+            </div>
+
+            {otpMeta?.valid &&
+              otpPurpose === "authUpdateIdentifier" &&
+              identifierType === "email" && (
+                <div className="space-y-4 p-4 border rounded-lg bg-muted/50">
+                  <InputField
+                    form={form}
+                    name="newIdentifier"
+                    label={user.email ? "New Email" : "Email Address"}
+                    type="email"
+                    placeholder="Enter email address"
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      type="submit"
+                      className="w-full sm:w-auto"
+                      disabled={isLoading}
+                    >
+                      {user.email ? "Change Email" : "Verify Email"}
+                      {isLoading && <Loader2 className="animate-spin" />}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => {
+                        setOtpMeta(undefined);
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+          </div>
+
+          {/* Phone Section */}
+          <div className="space-y-4 p-4 rounded-lg border">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Phone className="size-5 text-muted-foreground" />
+                <div>
+                  <p className="font-medium">Phone Number</p>
+                  {user.phone ? (
+                    <>
+                      <p className="text-muted-foreground text-sm">
+                        {user.phone}
+                      </p>
+                      <p className="text-xs mt-1">
+                        Status:{" "}
+                        <span
+                          className={
+                            user.isPhoneVerified
+                              ? "text-green-600"
+                              : "text-amber-600"
+                          }
+                        >
+                          {user.isPhoneVerified ? "Verified" : "Unverified"}
+                        </span>
+                      </p>
+                    </>
+                  ) : (
+                    <p className="text-muted-foreground text-sm">
+                      No phone number added
+                    </p>
+                  )}
+                </div>
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => handleOpen("authUpdateIdentifier", "phone")}
+                disabled={isLoading}
+              >
+                {user.phone ? "Change Phone" : "Add Phone"}
+              </Button>
+            </div>
+
+            {otpMeta?.valid &&
+              otpPurpose === "authUpdateIdentifier" &&
+              identifierType === "phone" && (
+                <div className="space-y-4 p-4 border rounded-lg bg-muted/50">
+                  <InputField
+                    form={form}
+                    name="newIdentifier"
+                    label={user.phone ? "New Phone Number" : "Phone Number"}
+                    type="tel"
+                    placeholder="Enter phone number"
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      type="submit"
+                      className="w-full sm:w-auto"
+                      disabled={isLoading}
+                    >
+                      {user.phone ? "Change Phone" : "Verify Phone"}
+                      {isLoading && <Loader2 className="animate-spin" />}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => {
+                        setOtpMeta(undefined);
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+          </div>
+
+          {/* Primary Identifier Info */}
+          <div className="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20">
+            <p className="text-sm text-blue-700 dark:text-blue-300">
+              <strong>Current login method:</strong>{" "}
+              {primaryIdentifierType === "email" ? "Email" : "Phone number"}
+              <br />
+              <span className="text-xs">
+                You can add both email and phone for additional security and
+                recovery options.
+              </span>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Security Settings Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Shield className="size-5" />
+            Security Settings
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Multi-Factor Authentication */}
+          <div className="space-y-4">
+            {/* MFA Status */}
+            <div className="flex items-center justify-between p-4 rounded-lg border">
+              <div className="space-y-1">
+                <p className="font-medium">Multi-Factor Authentication</p>
+                <div className="text-sm text-muted-foreground">
+                  {user.preferredMfa ? (
+                    <div className="flex items-center gap-2">
+                      <Badge
+                        variant="secondary"
+                        className="text-green-700 bg-green-700/30"
+                      >
+                        Enabled
+                      </Badge>
+                      <Badge variant="secondary">
+                        {user.preferredMfa === "email" && <Mail />}
+                        {user.preferredMfa === "sms" && <Phone />}
+                        {user.preferredMfa === "whatsapp" && <Phone />}
+                        {user.preferredMfa === "authApp" && <Shield />}
+                        {user.preferredMfa}
+                      </Badge>
+                    </div>
+                  ) : (
+                    <span>Disabled</span>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                {user.preferredMfa ? (
+                  <>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => handleOpen("authUpdateMfa")}
+                    >
+                      Change Method
+                    </Button>
+
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      onClick={() => handleOpen("authDisableMfa")}
+                    >
+                      Disable
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => handleOpen("authUpdateMfa")}
+                    disabled={isLoading}
+                  >
+                    Enable MFA
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {otpMeta?.valid && otpPurpose === "authUpdateMfa" && (
+              <div className="space-y-4 p-4 border rounded-lg">
+                <SelectField
+                  form={form}
+                  name="preferredMfa"
+                  label="Select MFA Method"
+                  options={MfaMethodEnum.options.filter(
+                    (m) => m !== user.preferredMfa,
+                  )}
+                />
+
+                <div className="flex gap-2">
+                  <Button type="submit" disabled={isLoading}>
+                    Save MFA Settings
+                    {isLoading && <Loader2 className="animate-spin" />}
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      setOtpMeta(undefined);
+                      setOtpPurpose(undefined);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Password Section */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between p-4 rounded-lg border bg-card">
+              <div>
+                <p className="font-medium">Password</p>
+                <p className="text-muted-foreground text-sm">
+                  Last changed: {new Date(user.updatedAt).toLocaleDateString()}
+                </p>
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => handleOpen("authResetPassword")}
+                disabled={isLoading}
+              >
+                Change Password
+              </Button>
+            </div>
+
+            {otpMeta?.valid && otpPurpose === "authResetPassword" && (
+              <div className="space-y-4 p-4 border rounded-lg">
+                <InputField
+                  form={form}
+                  name="newPassword"
+                  label="New Password"
+                  type="password"
+                  placeholder="Enter new password"
+                />
+                <InputField
+                  form={form}
+                  name="confirmPassword"
+                  label="Confirm Password"
+                  type="password"
+                  placeholder="Confirm new password"
+                  validators={{
+                    onChangeListenTo: ["newPassword"],
+                    onChange: ({ value, fieldApi }) =>
+                      value !== fieldApi.form.getFieldValue("newPassword")
+                        ? { message: "Passwords do not match" }
+                        : undefined,
+                  }}
+                />
+                <div className="flex gap-2">
+                  <Button
+                    type="submit"
+                    className="w-full sm:w-auto"
+                    disabled={isLoading}
+                  >
+                    Update Password
+                    {isLoading && <Loader2 className="animate-spin" />}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      setOtpMeta(undefined);
+                      setOtpPurpose(undefined);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* User Sessions */}
+      <UserSessions />
+
+      {/* OTP Modal */}
+      {otpPurpose && (
+        <OtpModal
+          open={isOpen}
+          setOpen={setIsOpen}
+          setOtpMeta={setOtpMeta}
+          identifier={primaryIdentifier!}
+          purpose={otpPurpose}
+        />
+      )}
+    </Form>
+  );
+};
+
+export default AccountSection;

package/templates/monorepo-starter/apps/dashboard/src/components/user/UserCard.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@workspace/ui/lib/utils";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@workspace/ui/components/avatar";
+
+interface UserCardProps {
+  currentUser?: UserResponse;
+  isLoading?: boolean;
+  variant?: "default" | "avatar";
+}
+
+const UserCard = ({
+  currentUser,
+  isLoading,
+  variant = "default",
+}: UserCardProps) => {
+  if (isLoading || !currentUser) {
+    return <div className="size-8 rounded-lg bg-muted animate-pulse" />;
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+      <Avatar className="size-8 rounded-lg">
+        <AvatarImage
+          src={currentUser.image?.url}
+          alt={currentUser.displayName}
+        />
+        <AvatarFallback
+          className={cn(
+            "uppercase",
+            variant === "avatar" ? "rounded-full" : "rounded-lg",
+          )}
+        >
+          {currentUser.firstName.charAt(0)}
+          {currentUser.lastName?.charAt(0)}
+        </AvatarFallback>
+      </Avatar>
+      {variant === "default" && (
+        <div className="grid flex-1 text-left text-sm leading-tight">
+          <span className="truncate font-medium">
+            {currentUser?.displayName}
+          </span>
+          <span className="text-muted-foreground truncate text-xs">
+            {currentUser?.email}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserCard;