client: updates

* work on groups ui
* move settings to its own page
* other fixes and refactoring

apps/client/src/features/user/atoms/current-user-atom.ts

@@ -1,5 +1,5 @@
 import { atomWithStorage } from "jotai/utils";
 
-import { ICurrentUserResponse } from "@/features/user/types/user.types";
+import { ICurrentUser } from "@/features/user/types/user.types";
 
-export const currentUserAtom = atomWithStorage<ICurrentUserResponse | null>("currentUser", null);
+export const currentUserAtom = atomWithStorage<ICurrentUser | null>("currentUser", null);

apps/client/src/features/user/components/account-avatar.tsx

@@ -0,0 +1,60 @@
+import { focusAtom } from "jotai-optics";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useState } from "react";
+import { useAtom } from "jotai";
+import { UserAvatar } from "@/components/ui/user-avatar.tsx";
+import { FileButton, Button, Text, Popover, Tooltip } from "@mantine/core";
+import { uploadAvatar } from "@/features/user/services/user-service.ts";
+
+const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop("user"));
+
+export default function AccountAvatar() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser] = useAtom(currentUserAtom);
+  const [, setUser] = useAtom(userAtom);
+  const [file, setFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const handleFileChange = async (selectedFile: File) => {
+    if (!selectedFile) {
+      return;
+    }
+
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    setFile(selectedFile);
+    setPreviewUrl(URL.createObjectURL(selectedFile));
+
+    try {
+      setIsLoading(true);
+      const upload = await uploadAvatar(selectedFile);
+      console.log(upload);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <FileButton onChange={handleFileChange} accept="image/png,image/jpeg">
+        {(props) => (
+          <Tooltip label="Change photo" position="bottom">
+            <UserAvatar
+              {...props}
+              component="button"
+              radius="xl"
+              size="60px"
+              avatarUrl={previewUrl || currentUser.user.avatarUrl}
+              name={currentUser.user.name}
+              style={{ cursor: "pointer" }}
+            />
+          </Tooltip>
+        )}
+      </FileButton>
+    </>
+  );
+}

apps/client/src/features/user/components/account-name-form.tsx

@@ -0,0 +1,76 @@
+import { useAtom } from "jotai";
+import { focusAtom } from "jotai-optics";
+import * as z from "zod";
+import { useForm, zodResolver } from "@mantine/form";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { updateUser } from "@/features/user/services/user-service.ts";
+import { IUser } from "@/features/user/types/user.types.ts";
+import { useState } from "react";
+import { TextInput, Button } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+
+const formSchema = z.object({
+  name: z.string().min(2).max(40).nonempty("Your name cannot be blank"),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop("user"));
+
+export default function AccountNameForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser] = useAtom(currentUserAtom);
+  const [, setUser] = useAtom(userAtom);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      name: currentUser?.user.name,
+    },
+  });
+
+  async function handleSubmit(data: Partial<IUser>) {
+    setIsLoading(true);
+
+    try {
+      const updatedUser = await updateUser(data);
+      setUser(updatedUser);
+      notifications.show({
+        message: "Updated successfully",
+      });
+    } catch (err) {
+      console.log(err);
+      notifications.show({
+        message: "Failed to update data",
+        color: "red",
+      });
+    }
+
+    setIsLoading(false);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        id="name"
+        label="Name"
+        placeholder="Your name"
+        variant="filled"
+        {...form.getInputProps("name")}
+      />
+      <Button type="submit" mt="sm" disabled={isLoading} loading={isLoading}>
+        Save
+      </Button>
+    </form>
+  );
+}
+
+/*
+<div className={classes.controls}>
+          <TextInput
+            placeholder="Your email"
+            classNames={{ input: classes.input, root: classes.inputWrapper }}
+          />
+          <Button className={classes.control}>Subscribe</Button>
+        </div>
+*/

apps/client/src/features/user/components/change-email.tsx

@@ -0,0 +1,94 @@
+import {
+  Modal,
+  TextInput,
+  Button,
+  Text,
+  Group,
+  PasswordInput,
+} from "@mantine/core";
+import * as z from "zod";
+import { useState } from "react";
+import { useAtom } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useDisclosure } from "@mantine/hooks";
+import * as React from "react";
+import { useForm, zodResolver } from "@mantine/form";
+
+export default function ChangeEmail() {
+  const [currentUser] = useAtom(currentUserAtom);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Email</Text>
+        <Text size="sm" c="dimmed">
+          {currentUser?.user.email}
+        </Text>
+      </div>
+
+      <Button onClick={open} variant="default">
+        Change email
+      </Button>
+
+      <Modal opened={opened} onClose={close} title="Change email" centered>
+        <Text mb="md">
+          To change your email, you have to enter your password and new email.
+        </Text>
+        <ChangePasswordForm />
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = z.object({
+  email: z.string({ required_error: "New email is required" }).email(),
+  password: z
+    .string({ required_error: "your current password is required" })
+    .min(8),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      password: "",
+      email: "",
+    },
+  });
+
+  function handleSubmit(data: FormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <PasswordInput
+        label="Password"
+        placeholder="Enter your password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps("password")}
+      />
+
+      <TextInput
+        id="email"
+        label="Email"
+        description="Enter your new preferred email"
+        placeholder="New email"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps("email")}
+      />
+
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        Change email
+      </Button>
+    </form>
+  );
+}

apps/client/src/features/user/components/change-password.tsx

@@ -0,0 +1,84 @@
+import { Button, Group, Text, Modal, PasswordInput } from '@mantine/core';
+import * as z from 'zod';
+import { useState } from 'react';
+import { useDisclosure } from '@mantine/hooks';
+import * as React from 'react';
+import { useForm, zodResolver } from '@mantine/form';
+
+export default function ChangePassword() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Password</Text>
+        <Text size="sm" c="dimmed">
+          You can change your password here.
+        </Text>
+      </div>
+
+      <Button onClick={open} variant="default">Change password</Button>
+
+      <Modal opened={opened} onClose={close} title="Change password" centered>
+        <Text mb="md">Your password must be a minimum of 8 characters.</Text>
+        <ChangePasswordForm />
+
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = z.object({
+  current: z.string({ required_error: 'your current password is required' }).min(1),
+  password: z.string({ required_error: 'New password is required' }).min(8),
+  confirm_password: z.string({ required_error: 'Password confirmation is required' }).min(8),
+}).refine(data => data.password === data.confirm_password, {
+  message: 'Your new password and confirmation does not match.',
+  path: ['confirm_password'],
+});
+
+type FormValues = z.infer<typeof formSchema>
+
+function ChangePasswordForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      current: '',
+      password: '',
+      confirm_password: '',
+    },
+  });
+
+  function handleSubmit(data: FormValues) {
+    setIsLoading(true);
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+
+      <PasswordInput
+        label="Current password"
+        name="current"
+        placeholder="Enter your current password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('current')}
+      />
+
+      <PasswordInput
+        label="New password"
+        placeholder="Enter your new password"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('password')}
+      />
+
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        Change password
+      </Button>
+    </form>
+  );
+}

apps/client/src/features/user/hooks/use-current-user.ts

@@ -1,8 +1,8 @@
 import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import { getUserInfo } from "@/features/user/services/user-service";
-import { ICurrentUserResponse } from "@/features/user/types/user.types";
+import { ICurrentUser } from "@/features/user/types/user.types";
 
-export default function useCurrentUser(): UseQueryResult<ICurrentUserResponse> {
+export default function useCurrentUser(): UseQueryResult<ICurrentUser> {
   return useQuery({
     queryKey: ["currentUser"],
     queryFn: async () => {

apps/client/src/features/user/services/user-service.ts

@@ -1,19 +1,18 @@
 import api from '@/lib/api-client';
-import { ICurrentUserResponse, IUser } from '@/features/user/types/user.types';
+import { ICurrentUser, IUser } from '@/features/user/types/user.types';
 
 export async function getMe(): Promise<IUser> {
-  const req = await api.get<IUser>('/user/me');
+  const req = await api.post<IUser>('/users/me');
   return req.data as IUser;
 }
 
-export async function getUserInfo(): Promise<ICurrentUserResponse> {
-  const req = await api.get<ICurrentUserResponse>('/user/info');
-  return req.data as ICurrentUserResponse;
+export async function getUserInfo(): Promise<ICurrentUser> {
+  const req = await api.post<ICurrentUser>('/users/info');
+  return req.data as ICurrentUser;
 }
 
 export async function updateUser(data: Partial<IUser>): Promise<IUser> {
-  const req = await api.post<IUser>('/user/update', data);
-
+  const req = await api.post<IUser>('/users/update', data);
   return req.data as IUser;
 }
 

apps/client/src/features/user/types/user.types.ts

@@ -9,13 +9,13 @@ export interface IUser {
   timezone: string;
   settings: any;
   lastLoginAt: string;
-  lastLoginIp: string;
   createdAt: Date;
   updatedAt: Date;
-  workspaceRole?: string;
+  role: string;
+  workspaceId: string;
 }
 
-export interface ICurrentUserResponse {
+export interface ICurrentUser {
   user: IUser,
   workspace: IWorkspace
 }