add credenza

src/app/[orgId]/settings/users/components/InviteUserForm.tsx

@@ -64,7 +64,7 @@ export default function InviteUserForm() {
         resolver: zodResolver(formSchema),
         defaultValues: {
             email: "",
-            validForHours: "24",
+            validForHours: "168",
             roleId: "4",
         },
     });
@@ -189,15 +189,14 @@ export default function InviteUserForm() {
                                 </FormItem>
                             )}
                         />
-                        <div className="flex justify-center">
-                            <Button
-                                type="submit"
-                                loading={loading}
-                                disabled={inviteLink !== null}
-                            >
-                                Invite User
-                            </Button>
-                        </div>
+                        <Button
+                            type="submit"
+                            className="w-full"
+                            loading={loading}
+                            disabled={inviteLink !== null}
+                        >
+                            Invite User
+                        </Button>
                     </form>
                 </Form>
             )}
@@ -216,7 +215,7 @@ export default function InviteUserForm() {
                         </b>
                         .
                     </p>
-                    {/* <CopyTextBox text={inviteLink} wrapText={false} /> */}
+                    <CopyTextBox text={inviteLink} wrapText={false} />
                 </div>
             )}
         </>

src/app/[orgId]/settings/users/components/UsersTable.tsx

@@ -19,6 +19,7 @@ import {
 } from "@app/components/ui/dialog";
 import { useState } from "react";
 import InviteUserForm from "./InviteUserForm";
+import { Credenza, CredenzaTitle, CredenzaDescription, CredenzaHeader, CredenzaClose, CredenzaFooter, CredenzaContent, CredenzaBody } from "@app/components/Credenza";
 
 export type UserRow = {
     id: string;
@@ -73,17 +74,19 @@ export default function UsersTable({ users }: UsersTableProps) {
 
     return (
         <>
-            <Dialog
-                open={isInviteModalOpen}
-                onOpenChange={setIsInviteModalOpen}
-            >
-                <DialogContent>
-                    <DialogHeader>
-                        <DialogTitle>Invite User</DialogTitle>
-                    </DialogHeader>
+            <Credenza open={isInviteModalOpen} onOpenChange={setIsInviteModalOpen}>
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>Invite User</CredenzaTitle>
+                        <CredenzaDescription>
+                            Give new users access to your organization
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
                     <InviteUserForm />
-                </DialogContent>
-            </Dialog>
+                    </CredenzaBody>
+                </CredenzaContent>
+            </Credenza>
 
             <UsersDataTable
                 columns={columns}

src/app/auth/login/LoginForm.tsx

@@ -42,6 +42,7 @@ export default function LoginForm({ redirect }: LoginFormProps) {
     const router = useRouter();
 
     const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -53,6 +54,9 @@ export default function LoginForm({ redirect }: LoginFormProps) {
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
         const { email, password } = values;
+
+        setLoading(true);
+
         const res = await api
             .post<AxiosResponse<LoginResponse>>("/auth/login", {
                 email,
@@ -86,6 +90,8 @@ export default function LoginForm({ redirect }: LoginFormProps) {
                 router.push("/");
             }
         }
+
+        setLoading(false);
     }
 
     return (
@@ -140,7 +146,7 @@ export default function LoginForm({ redirect }: LoginFormProps) {
                                 <AlertDescription>{error}</AlertDescription>
                             </Alert>
                         )}
-                        <Button type="submit" className="w-full">
+                        <Button type="submit" className="w-full" loading={loading}>
                             Login
                         </Button>
                     </form>

src/app/auth/signup/SignupForm.tsx

@@ -46,6 +46,7 @@ const formSchema = z
 export default function SignupForm({ redirect }: SignupFormProps) {
     const router = useRouter();
 
+    const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
     const form = useForm<z.infer<typeof formSchema>>({
@@ -59,6 +60,8 @@ export default function SignupForm({ redirect }: SignupFormProps) {
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
         const { email, password } = values;
+
+        setLoading(true);
         const res = await api
             .put<AxiosResponse<SignUpResponse>>("/auth/signup", {
                 email,
@@ -92,6 +95,8 @@ export default function SignupForm({ redirect }: SignupFormProps) {
                 router.push("/");
             }
         }
+
+        setLoading(false);
     }
 
     return (