feat: update account

src/renderer/src/pages/settings/layout.tsx

@@ -50,7 +50,7 @@ export function Component() {
             </Link>
           ))}
         </div>
-        <div className="p-2">
+        <div className="p-8">
           <Outlet />
         </div>
       </div>

src/renderer/src/pages/settings/profile.tsx

@@ -1,3 +1,106 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Button } from "@renderer/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@renderer/components/ui/form"
+import { Input } from "@renderer/components/ui/input"
+import { useSession } from "@hono/auth-js/react"
+import { useMutation } from "@tanstack/react-query"
+import { apiFetch } from "@renderer/lib/queries/api-fetch"
+import { useToast } from "@renderer/components/ui/use-toast"
+
+const formSchema = z.object({
+  handle: z.string().max(50),
+  name: z.string().min(3).max(50),
+  avatar: z.string().url(),
+})
+
 export function Component() {
-  return <>profile</>
+  const { data: session } = useSession()
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      handle: session?.user?.handle || "",
+      name: session?.user?.name || "",
+      avatar: session?.user?.image || "",
+    },
+  })
+
+  const { toast } = useToast()
+
+  const updateMutation = useMutation({
+    mutationFn: async (values: z.infer<typeof formSchema>) =>
+      apiFetch("/auth-app/update-account", {
+        method: "PATCH",
+        body: values,
+      }),
+    onSuccess: () => {
+      toast({
+        duration: 3000,
+        description: "Profile updated.",
+      })
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    updateMutation.mutate(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="handle"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Handle</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormDescription>Your unique identifier.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Display Name</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormDescription>Your public display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="avatar"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Avatar</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
 }

tsconfig.web.json

@@ -6,6 +6,7 @@
     "src/renderer/src/**/*.tsx",
     "src/preload/*.d.ts",
     "src/main/*.ts",
+    "types/**/*.d.ts",
   ],
   "compilerOptions": {
     "composite": true,

types/authjs.d.ts

@@ -0,0 +1,7 @@
+import { User } from "@auth/core/types"
+
+declare module "@auth/core/types" {
+  interface User {
+    handle?: string | null
+  }
+}