mirror of
https://github.com/docmost/docmost.git
synced 2026-05-21 17:22:54 +08:00
Migrate to Mantine UI framework
This commit is contained in:
Philipinho
@@ -1,12 +0,0 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LegalTerms(){
|
||||
return (
|
||||
<p className="px-8 text-center text-sm text-muted-foreground">
|
||||
By clicking continue, you agree to our{" "}
|
||||
<Link href="#" className="underline underline-offset-4 hover:text-primary">
|
||||
Terms of Service</Link>{" "} and{" "}
|
||||
<Link href="#" className="underline underline-offset-4 hover:text-primary">Privacy Policy</Link>.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
@@ -1,92 +1,80 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import * as React from "react";
|
||||
import * as z from "zod";
|
||||
import * as React from 'react';
|
||||
import * as z from 'zod';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { Icons } from "@/components/icons";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import useAuth from "@/features/auth/hooks/use-auth";
|
||||
import { ILogin } from "@/features/auth/types/auth.types";
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
import useAuth from '@/features/auth/hooks/use-auth';
|
||||
import { ILogin } from '@/features/auth/types/auth.types';
|
||||
import {
|
||||
Container,
|
||||
Title,
|
||||
Anchor,
|
||||
Paper,
|
||||
TextInput,
|
||||
Button,
|
||||
Text,
|
||||
PasswordInput,
|
||||
} from '@mantine/core';
|
||||
import Link from 'next/link';
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string({ required_error: "email is required" }).email({ message: "Invalid email address" }),
|
||||
password: z.string({ required_error: "password is required" }),
|
||||
email: z
|
||||
.string({ required_error: 'email is required' })
|
||||
.email({ message: 'Invalid email address' }),
|
||||
password: z.string({ required_error: 'password is required' }),
|
||||
});
|
||||
|
||||
interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
}
|
||||
|
||||
export function LoginForm({ className, ...props }: UserAuthFormProps) {
|
||||
const { register, handleSubmit, formState: { errors } }
|
||||
= useForm<ILogin>({ resolver: zodResolver(formSchema) });
|
||||
|
||||
export function LoginForm() {
|
||||
const { signIn, isLoading } = useAuth();
|
||||
|
||||
const form = useForm<ILogin>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(data: ILogin) {
|
||||
await signIn(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cn("grid gap-6 space-y-5", className)} {...props}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-2">
|
||||
<Container size={420} my={40}>
|
||||
<Title ta="center" fw={800}>
|
||||
Login
|
||||
</Title>
|
||||
<Text c="dimmed" size="sm" ta="center" mt={5}>
|
||||
Do not have an account yet?{' '}
|
||||
<Anchor size="sm" component={Link} href="/signup">
|
||||
Create account
|
||||
</Anchor>
|
||||
</Text>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="" htmlFor="email">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
autoCapitalize="none"
|
||||
autoComplete="email"
|
||||
autoCorrect="off"
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...register("email")} />
|
||||
{errors?.email && (
|
||||
<p className="px-1 text-xs text-red-600">
|
||||
{errors.email.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
||||
<form onSubmit={form.onSubmit(onSubmit)}>
|
||||
<TextInput
|
||||
id="email"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
{...form.getInputProps('email')}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">
|
||||
Password
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...register("password")} />
|
||||
{errors?.password && (
|
||||
<p className="px-1 text-xs text-red-600">
|
||||
{errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button className={cn(buttonVariants(), "mt-2")} disabled={isLoading}>
|
||||
{isLoading && (
|
||||
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
|
||||
)}
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Your password"
|
||||
required
|
||||
mt="md"
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
|
||||
Sign In
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,91 +1,80 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import * as React from "react";
|
||||
import * as z from "zod";
|
||||
import * as React from 'react';
|
||||
import * as z from 'zod';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { Icons } from "@/components/icons";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import useAuth from "@/features/auth/hooks/use-auth";
|
||||
import { IRegister } from "@/features/auth/types/auth.types";
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
import useAuth from '@/features/auth/hooks/use-auth';
|
||||
import { IRegister } from '@/features/auth/types/auth.types';
|
||||
import {
|
||||
Container,
|
||||
Title,
|
||||
Anchor,
|
||||
Paper,
|
||||
TextInput,
|
||||
Button,
|
||||
Text,
|
||||
PasswordInput,
|
||||
} from '@mantine/core';
|
||||
import Link from 'next/link';
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string({ required_error: "email is required" }).email({ message: "Invalid email address" }),
|
||||
password: z.string({ required_error: "password is required" }).min(8),
|
||||
email: z
|
||||
.string({ required_error: 'email is required' })
|
||||
.email({ message: 'Invalid email address' }),
|
||||
password: z.string({ required_error: 'password is required' }),
|
||||
});
|
||||
|
||||
interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||
|
||||
export function SignUpForm({ className, ...props }: UserAuthFormProps) {
|
||||
const { register, handleSubmit, formState: { errors } }
|
||||
= useForm<IRegister>({ resolver: zodResolver(formSchema) });
|
||||
|
||||
export function SignUpForm() {
|
||||
const { signUp, isLoading } = useAuth();
|
||||
|
||||
const form = useForm<IRegister>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(data: IRegister) {
|
||||
await signUp(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cn("grid gap-6 space-y-5", className)} {...props}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-2">
|
||||
<Container size={420} my={40}>
|
||||
<Title ta="center" fw={800}>
|
||||
Create an account
|
||||
</Title>
|
||||
<Text c="dimmed" size="sm" ta="center" mt={5}>
|
||||
Already have an account?{' '}
|
||||
<Anchor size="sm" component={Link} href="/login">
|
||||
Login
|
||||
</Anchor>
|
||||
</Text>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="" htmlFor="email">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
autoCapitalize="none"
|
||||
autoComplete="email"
|
||||
autoCorrect="off"
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...register("email")} />
|
||||
{errors?.email && (
|
||||
<p className="px-1 text-xs text-red-600">
|
||||
{errors.email.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
||||
<form onSubmit={form.onSubmit(onSubmit)}>
|
||||
<TextInput
|
||||
id="email"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
{...form.getInputProps('email')}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">
|
||||
Password
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...register("password")} />
|
||||
{errors?.password && (
|
||||
<p className="px-1 text-xs text-red-600">
|
||||
{errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button className={cn(buttonVariants(), "mt-2")} disabled={isLoading}>
|
||||
{isLoading && (
|
||||
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
|
||||
)}
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Your password"
|
||||
required
|
||||
mt="md"
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
|
||||
Sign Up
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,6 @@ import '@/features/editor/css/editor.css';
|
||||
|
||||
interface EditorProps{
|
||||
pageId: string,
|
||||
token: string,
|
||||
}
|
||||
|
||||
const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D']
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
'use client';
|
||||
|
||||
import React from "react";
|
||||
import AccountNameForm from '@/features/settings/account/settings/components/account-name-form';
|
||||
import ChangeEmail from '@/features/settings/account/settings/components/change-email';
|
||||
import ChangePassword from '@/features/settings/account/settings/components/change-password';
|
||||
import { Divider } from '@mantine/core';
|
||||
|
||||
export default function AccountSettings() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<AccountNameForm />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<ChangeEmail />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<ChangePassword />
|
||||
</>);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
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';
|
||||
import { updateUser } from '@/features/user/services/user-service';
|
||||
import { IUser } from '@/features/user/types/user.types';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { TextInput, Button } from '@mantine/core';
|
||||
|
||||
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);
|
||||
toast.success('Updated successfully');
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
toast.error('Failed to update data.');
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<TextInput
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
variant="filled"
|
||||
{...form.getInputProps('name')}
|
||||
rightSection={
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Save
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
'use client';
|
||||
|
||||
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';
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client';
|
||||
|
||||
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 password"
|
||||
variant="filled"
|
||||
mb="md"
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="New password"
|
||||
placeholder="Enter your password"
|
||||
variant="filled"
|
||||
mb="md"
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Change password
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { atom } from "jotai";
|
||||
|
||||
export const settingsModalAtom = atom<boolean>(false);
|
||||
@@ -0,0 +1,75 @@
|
||||
.sidebar {
|
||||
max-height: rem(700px);
|
||||
width: rem(180px);
|
||||
padding: var(--mantine-spacing-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: rem(1px) solid
|
||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
}
|
||||
|
||||
.sidebarFlex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebarMain {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebarRightSection {
|
||||
flex: 1;
|
||||
padding: rem(16px) rem(40px);
|
||||
}
|
||||
|
||||
.sidebarItemHeader {
|
||||
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebarItem {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
||||
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
font-weight: 500;
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-0),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
|
||||
.sidebarItemIcon {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
}
|
||||
}
|
||||
|
||||
& [data-active] {
|
||||
&,
|
||||
& :hover {
|
||||
background-color: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-light-color);
|
||||
|
||||
.sidebarItemIcon {
|
||||
color: var(--mantine-color-blue-light-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarItemIcon {
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
margin-right: var(--mantine-spacing-sm);
|
||||
width: rem(20px);
|
||||
height: rem(20px);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { Modal, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import SettingsSidebar from '@/features/settings/modal/settings-sidebar';
|
||||
import { useAtom } from 'jotai';
|
||||
import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
|
||||
|
||||
export default function SettingsModal() {
|
||||
const [isModalOpen, setModalOpen] = useAtom(settingsModalAtom);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Root size={1000} opened={isModalOpen} onClose={() => setModalOpen(false)}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>
|
||||
<Text size="xl" fw={500}>Settings</Text>
|
||||
</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
|
||||
<SettingsSidebar />
|
||||
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import classes from '@/features/settings/modal/modal.module.css';
|
||||
import { IconBell, IconFingerprint, IconReceipt, IconSettingsCog, IconUser, IconUsers } from '@tabler/icons-react';
|
||||
import { Loader, ScrollArea, Text } from '@mantine/core';
|
||||
|
||||
const AccountSettings = React.lazy(() => import('@/features/settings/account/settings/account-settings'));
|
||||
const WorkspaceSettings = React.lazy(() => import('@/features/settings/workspace/settings/workspace-settings'));
|
||||
const WorkspaceMembers = React.lazy(() => import('@/features/settings/workspace/members/workspace-members'));
|
||||
|
||||
interface DataItem {
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
}
|
||||
|
||||
interface DataGroup {
|
||||
heading: string;
|
||||
items: DataItem[];
|
||||
}
|
||||
|
||||
const groupedData: DataGroup[] = [
|
||||
{
|
||||
heading: 'Account',
|
||||
items: [
|
||||
{ label: 'Account', icon: IconUser },
|
||||
{ label: 'Notifications', icon: IconBell },
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Workspace',
|
||||
items: [
|
||||
{ label: 'General', icon: IconSettingsCog },
|
||||
{ label: 'Members', icon: IconUsers },
|
||||
{ label: 'Security', icon: IconFingerprint },
|
||||
{ label: 'Billing', icon: IconReceipt },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function SettingsSidebar() {
|
||||
const [active, setActive] = useState('Account');
|
||||
|
||||
const menu = groupedData.map((group) => (
|
||||
<div key={group.heading}>
|
||||
<Text c="dimmed" className={classes.sidebarItemHeader}>{group.heading}</Text>
|
||||
{group.items.map((item) => (
|
||||
<div
|
||||
className={classes.sidebarItem}
|
||||
data-active={item.label === active || undefined}
|
||||
key={item.label}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
setActive(item.label);
|
||||
}}
|
||||
>
|
||||
<item.icon className={classes.sidebarItemIcon} stroke={1.5} />
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
));
|
||||
|
||||
let ActiveComponent;
|
||||
|
||||
switch (active) {
|
||||
case 'Account':
|
||||
ActiveComponent = AccountSettings;
|
||||
break;
|
||||
case 'General':
|
||||
ActiveComponent = WorkspaceSettings;
|
||||
break;
|
||||
case 'Members':
|
||||
ActiveComponent = WorkspaceMembers;
|
||||
break;
|
||||
default:
|
||||
ActiveComponent = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.sidebarFlex}>
|
||||
<nav className={classes.sidebar}>
|
||||
<div className={classes.sidebarMain}>
|
||||
{menu}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<ScrollArea h="650" w="100%" scrollbarSize={4}>
|
||||
|
||||
<div className={classes.sidebarRightSection}>
|
||||
|
||||
<React.Suspense fallback={<Loader size="sm" color="gray" />}>
|
||||
{ActiveComponent && <ActiveComponent />}
|
||||
</React.Suspense>
|
||||
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { IconUserCircle, IconUser, IconUsers,
|
||||
IconBuilding, IconSettingsCog } from '@tabler/icons-react';
|
||||
|
||||
export interface SettingsNavMenuSection {
|
||||
heading: string;
|
||||
icon: ReactNode;
|
||||
items: SettingsNavMenuItem[];
|
||||
}
|
||||
|
||||
export interface SettingsNavMenuItem {
|
||||
label: string;
|
||||
icon: ReactNode;
|
||||
target?: string;
|
||||
}
|
||||
|
||||
export type SettingsNavItem = SettingsNavMenuSection[];
|
||||
|
||||
export const settingsNavItems: SettingsNavItem = [
|
||||
{
|
||||
heading: 'Account',
|
||||
icon: <IconUserCircle size={20}/>,
|
||||
items: [
|
||||
{
|
||||
label: 'My account',
|
||||
icon: <IconUser size={16}/>,
|
||||
target: '/settings/account',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Workspace',
|
||||
icon: <IconBuilding size={20}/>,
|
||||
items: [
|
||||
{
|
||||
label: 'General',
|
||||
icon: <IconSettingsCog size={16}/>,
|
||||
target: '/settings/workspace',
|
||||
},
|
||||
{
|
||||
label: 'Members',
|
||||
icon: <IconUsers size={16}/>,
|
||||
target: '/settings/workspace/members',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
];
|
||||
@@ -1,67 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
SettingsNavItem,
|
||||
SettingsNavMenuItem, SettingsNavMenuSection,
|
||||
settingsNavItems
|
||||
} from "@/features/settings/nav/settings-nav-items";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { ChevronLeftIcon } from "@radix-ui/react-icons";
|
||||
|
||||
interface SettingsNavProps {
|
||||
menu: SettingsNavItem;
|
||||
}
|
||||
|
||||
function RenderNavItem({ label, icon, target }: SettingsNavMenuItem): React.ReactNode {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === target;
|
||||
|
||||
return (
|
||||
<div className="ml-2">
|
||||
<Link href={target} className={` ${isActive ? "bg-foreground/10 rounded-md" : ""}
|
||||
w-full flex flex-1 justify-start items-center text-sm font-medium px-3 py-2`}>
|
||||
<span className="mr-1">{icon}</span>
|
||||
<span className="text-ellipsis overflow-hidden">
|
||||
{label}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsNavItems({ menu }: SettingsNavProps): React.ReactNode {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Link
|
||||
href="/home"
|
||||
className={cn(
|
||||
buttonVariants({ variant: "ghost" }),
|
||||
"relative")} style={{marginLeft: '-5px', top:'-5px'}}>
|
||||
<ChevronLeftIcon className="mr-2 h-4 w-4" /> Back
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-5 pt-0">
|
||||
{menu.map((section: SettingsNavMenuSection, index: number) => (
|
||||
<div key={index}>
|
||||
<h3 className="flex items-center py-2 text-sm font-semibold text-muted-foreground">
|
||||
<span className="mr-1">{section.icon}</span> {section.heading}
|
||||
</h3>
|
||||
{section.items.map((item: SettingsNavMenuItem, itemIndex: number) => (
|
||||
<RenderNavItem key={itemIndex} {...item} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsNav() {
|
||||
return <SettingsNavItems menu={settingsNavItems} />
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Group,
|
||||
Box,
|
||||
Text,
|
||||
Button,
|
||||
TagsInput,
|
||||
Space, Select,
|
||||
} from '@mantine/core';
|
||||
import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
|
||||
import React from 'react';
|
||||
|
||||
enum UserRole {
|
||||
GUEST = 'Guest',
|
||||
MEMBER = 'Member',
|
||||
OWNER = 'Owner',
|
||||
}
|
||||
|
||||
|
||||
export function WorkspaceInviteForm() {
|
||||
|
||||
function handleSubmit(data) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box maw="500" mx="auto">
|
||||
|
||||
<WorkspaceInviteSection />
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<TagsInput
|
||||
description="Enter valid email addresses separated by comma or space"
|
||||
label="Invite from email"
|
||||
placeholder="enter valid emails addresses"
|
||||
variant="filled"
|
||||
splitChars={[',', ' ']}
|
||||
maxDropdownHeight={200}
|
||||
maxTags={50}
|
||||
/>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<Select
|
||||
description="Select role to assign to all invited members"
|
||||
label="Select role"
|
||||
placeholder="Pick a role"
|
||||
variant="filled"
|
||||
data={Object.values(UserRole)}
|
||||
defaultValue={UserRole.MEMBER}
|
||||
allowDeselect={false}
|
||||
checkIconPosition="right"
|
||||
/>
|
||||
|
||||
<Group justify="center" mt="md">
|
||||
<Button>Send invitation
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import { IconUserPlus } from '@tabler/icons-react';
|
||||
import { WorkspaceInviteForm } from '@/features/settings/workspace/members/components/workspace-invite-form';
|
||||
import { Button, Divider, Modal, ScrollArea, Text } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
|
||||
export default function WorkspaceInviteModal() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={open} leftSection={<IconUserPlus size={18} />}>
|
||||
Invite Members
|
||||
</Button>
|
||||
|
||||
<Modal size="600" opened={opened} onClose={close} title="Invite new members" centered>
|
||||
|
||||
<Divider size="xs" mb="xs"/>
|
||||
|
||||
<ScrollArea h="80%">
|
||||
|
||||
<WorkspaceInviteForm />
|
||||
|
||||
</ScrollArea>
|
||||
</Modal>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
|
||||
import { useAtom } from 'jotai';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, CopyButton, Text, TextInput } from '@mantine/core';
|
||||
|
||||
export default function WorkspaceInviteSection() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [inviteLink, setInviteLink] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
setInviteLink(`${window.location.origin}/invite/${currentUser.workspace.inviteCode}`);
|
||||
}, [currentUser.workspace.inviteCode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Text fw={500} mb="sm">Invite link</Text>
|
||||
<Text c="dimmed" mb="sm">
|
||||
Anyone with this link can join this workspace.
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<TextInput
|
||||
variant="filled"
|
||||
value={inviteLink}
|
||||
readOnly
|
||||
rightSection={
|
||||
<CopyButton value={inviteLink}>
|
||||
{({ copied, copy }) => (
|
||||
<Button color={copied ? 'teal' : ''} onClick={copy}>
|
||||
{copied ? 'Copied' : 'Copy'}
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { useAtom } from 'jotai';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service';
|
||||
import { Table } from '@mantine/core';
|
||||
|
||||
export default function WorkspaceMembersTable() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
|
||||
const workspaceUsers = useQuery({
|
||||
queryKey: ['workspaceUsers', currentUser.workspace.id],
|
||||
queryFn: async () => {
|
||||
return await getWorkspaceUsers();
|
||||
},
|
||||
});
|
||||
|
||||
const { data, isLoading, isSuccess } = workspaceUsers;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isSuccess &&
|
||||
|
||||
<Table>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Name</Table.Th>
|
||||
<Table.Th>Email</Table.Th>
|
||||
<Table.Th>Role</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
|
||||
<Table.Tbody>
|
||||
|
||||
{
|
||||
data['users']?.map((user, index) => (
|
||||
<Table.Tr key={index}>
|
||||
<Table.Td>{user.name}</Table.Td>
|
||||
<Table.Td>{user.email}</Table.Td>
|
||||
<Table.Td>{user.workspaceRole}</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
}
|
||||
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
|
||||
import React from 'react';
|
||||
import WorkspaceInviteModal from '@/features/settings/workspace/members/components/workspace-invite-modal';
|
||||
import { Divider, Group, Space, Text } from '@mantine/core';
|
||||
|
||||
const WorkspaceMembersTable = React.lazy(() => import('@/features/settings/workspace/members/components/workspace-members-table'));
|
||||
|
||||
export default function WorkspaceMembers() {
|
||||
return (
|
||||
<>
|
||||
<WorkspaceInviteSection />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<Group justify="space-between">
|
||||
<Text fw={500}>Members</Text>
|
||||
|
||||
<WorkspaceInviteModal />
|
||||
|
||||
</Group>
|
||||
|
||||
<Space h="lg" />
|
||||
|
||||
<WorkspaceMembersTable />
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useAtom } from 'jotai';
|
||||
import * as z from 'zod';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useState } from 'react';
|
||||
import { focusAtom } from 'jotai-optics';
|
||||
import { updateWorkspace } from '@/features/workspace/services/workspace-service';
|
||||
import { IWorkspace } from '@/features/workspace/types/workspace.types';
|
||||
import { TextInput, Button } from '@mantine/core';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().nonempty('Workspace name cannot be blank'),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
const workspaceAtom = focusAtom(currentUserAtom, (optic) => optic.prop('workspace'));
|
||||
|
||||
export default function WorkspaceNameForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [, setWorkspace] = useAtom(workspaceAtom);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
name: currentUser?.workspace?.name,
|
||||
},
|
||||
});
|
||||
|
||||
async function handleSubmit(data: Partial<IWorkspace>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedWorkspace = await updateWorkspace(data);
|
||||
setWorkspace(updatedWorkspace);
|
||||
toast.success('Updated successfully');
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
toast.error('Failed to update data.');
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<TextInput
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="e.g ACME"
|
||||
variant="filled"
|
||||
{...form.getInputProps('name')}
|
||||
rightSection={
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Save
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import WorkspaceNameForm from '@/features/settings/workspace/settings/components/workspace-name-form';
|
||||
|
||||
export default function WorkspaceSettings() {
|
||||
|
||||
return (<WorkspaceNameForm />);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useAtom } from 'jotai';
|
||||
import { focusAtom } from 'jotai-optics';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import * as z from 'zod';
|
||||
import { currentUserAtom } from '../atoms/current-user-atom';
|
||||
import { updateUser } from '../services/user-service';
|
||||
import { IUser } from '../types/user.types';
|
||||
import { useState } from 'react';
|
||||
import { Icons } from '@/components/icons';
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
const profileFormSchema = z.object({
|
||||
name: z.string().min(2).max(40),
|
||||
});
|
||||
|
||||
type ProfileFormValues = z.infer<typeof profileFormSchema>;
|
||||
|
||||
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 defaultValues: Partial<ProfileFormValues> = {
|
||||
name: currentUser?.user?.name,
|
||||
};
|
||||
|
||||
const form = useForm<ProfileFormValues>({
|
||||
resolver: zodResolver(profileFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
async function onSubmit(data: Partial<IUser>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedUser = await updateUser(data);
|
||||
setUser(updatedUser);
|
||||
toast.success('Updated successfully');
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
toast.error('Failed to update data.')
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Your name" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This is the name that will be displayed on your account and in
|
||||
emails.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Save
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Dialog, DialogTrigger } from "@radix-ui/react-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import * as z from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Icons } from "@/components/icons";
|
||||
import { useState } from "react";
|
||||
import { useAtom } from "jotai";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
|
||||
|
||||
export default function ChangeEmail() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between space-x-4 mt-5">
|
||||
<div>
|
||||
<h4 className="text-xl font-medium">Email</h4>
|
||||
<p className="text-sm text-muted-foreground">{currentUser.user.email}</p>
|
||||
</div>
|
||||
<ChangeEmailDialog />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChangeEmailDialog() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Change email</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-[350px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Change email
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
To change your email, you have to enter your password and new email.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ChangePasswordForm />
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
const changeEmailSchema = z.object({
|
||||
password: z.string({ required_error: "your current password is required" }).min(8),
|
||||
email: z.string({ required_error: "New email is required" }).email()
|
||||
});
|
||||
|
||||
type ChangeEmailFormValues = z.infer<typeof changeEmailSchema>
|
||||
|
||||
function ChangePasswordForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const form = useForm<ChangeEmailFormValues>({
|
||||
resolver: zodResolver(changeEmailSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(data: ChangeEmailFormValues) {
|
||||
setIsLoading(true);
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="font-semibold">Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" autoComplete="password" placeholder="Enter your password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="font-semibold">New email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" autoComplete="email" placeholder="Enter your new email" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Enter your new preferred email</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Change email
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Dialog, DialogTrigger } from "@radix-ui/react-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import * as z from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Icons } from "@/components/icons";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ChangePassword() {
|
||||
return (
|
||||
<div className="flex items-center justify-between space-x-4 mt-5">
|
||||
<div>
|
||||
<h4 className="text-xl font-medium">Password</h4>
|
||||
<p className="text-sm text-muted-foreground">You can change your password here.</p>
|
||||
</div>
|
||||
<ChangePasswordDialog />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChangePasswordDialog() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Change password</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-[350px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Change password
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Your password must be at least a minimum of 8 characters.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ChangePasswordForm />
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
const changePasswordSchema = 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 ChangePasswordFormValues = z.infer<typeof changePasswordSchema>
|
||||
|
||||
function ChangePasswordForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const form = useForm<ChangePasswordFormValues>({
|
||||
resolver: zodResolver(changePasswordSchema),
|
||||
defaultValues: {
|
||||
current: "",
|
||||
password: "",
|
||||
confirm_password: "",
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(data: ChangePasswordFormValues) {
|
||||
setIsLoading(true);
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="current"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="font-semibold">Current password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" autoComplete="current-password" placeholder="Your current password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="font-semibold">New password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" autoComplete="password" placeholder="Your new password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirm_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="font-semibold">Repeat new password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" autoComplete="password" placeholder="Confirm your new password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Change password
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import ButtonWithIcon from "@/components/ui/button-with-icon";
|
||||
import { IconUserPlus } from "@tabler/icons-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { WorkspaceInviteForm } from "@/features/workspace/components/workspace-invite-form";
|
||||
|
||||
export default function WorkspaceInviteDialog() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<ButtonWithIcon
|
||||
icon={<IconUserPlus size="20" />}
|
||||
className="font-medium">
|
||||
Invite Members
|
||||
</ButtonWithIcon>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Invite new members
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Here you can invite new members.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className=" max-h-[60vh]">
|
||||
<WorkspaceInviteForm />
|
||||
</ScrollArea>
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as z from "zod";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { IconTrashX } from "@tabler/icons-react";
|
||||
import ButtonWithIcon from "@/components/ui/button-with-icon";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
enum UserRole {
|
||||
GUEST = "guest",
|
||||
MEMBER = "member",
|
||||
OWNER = "owner",
|
||||
}
|
||||
|
||||
const inviteFormSchema = z.object({
|
||||
members: z
|
||||
.array(
|
||||
z.object({
|
||||
email: z.string({
|
||||
required_error: "Email is required",
|
||||
}).email({ message: "Please enter a valid email" }),
|
||||
role: z
|
||||
.string({
|
||||
required_error: "Please select a role",
|
||||
}),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
type InviteFormValues = z.infer<typeof inviteFormSchema>
|
||||
|
||||
const defaultValues: Partial<InviteFormValues> = {
|
||||
members: [
|
||||
{ email: "user@example.com", role: "member" },
|
||||
],
|
||||
};
|
||||
|
||||
export function WorkspaceInviteForm() {
|
||||
|
||||
const form = useForm<InviteFormValues>({
|
||||
resolver: zodResolver(inviteFormSchema),
|
||||
defaultValues,
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
name: "members",
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
function onSubmit(data: InviteFormValues) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<div>
|
||||
{
|
||||
fields.map((field, index) => {
|
||||
const key = index.toString();
|
||||
return (
|
||||
<div key={key} className="flex justify-between items-center py-2 gap-2">
|
||||
|
||||
<div className="flex-grow">
|
||||
{index === 0 && <FormLabel>Email</FormLabel>}
|
||||
<FormField
|
||||
control={form.control}
|
||||
key={field.id}
|
||||
name={`members.${index}.email`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow">
|
||||
{index === 0 && <FormLabel>Role</FormLabel>}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
key={field.id}
|
||||
name={`members.${index}.role`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role for this member" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{
|
||||
Object.keys(UserRole).map((key) => {
|
||||
const value = UserRole[key as keyof typeof UserRole];
|
||||
return (
|
||||
<SelectItem key={key} value={value}>
|
||||
{key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
{index != 0 &&
|
||||
<ButtonWithIcon
|
||||
icon={<IconTrashX size={16} />}
|
||||
variant="secondary"
|
||||
onClick={() => remove(index)}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
onClick={() => append({ email: "", role: UserRole.MEMBER })}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Send Invitation</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAtom } from "jotai/index";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
|
||||
export default function WorkspaceInviteSection() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [inviteLink, setInviteLink] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
setInviteLink(`${window.location.origin}/invite/${currentUser.workspace.inviteCode}`);
|
||||
}, [currentUser.workspace.inviteCode]);
|
||||
|
||||
function handleCopy(): void {
|
||||
try {
|
||||
navigator.clipboard?.writeText(inviteLink);
|
||||
toast.success("Link copied successfully");
|
||||
} catch (err) {
|
||||
toast.error("Failed to copy to clipboard");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h2 className="font-semibold py-5">Invite members</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Anyone with the link can join this workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Input value={inviteLink} readOnly />
|
||||
<Button variant="secondary" className="shrink-0" onClick={handleCopy}>
|
||||
Copy link
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAtom } from "jotai/index";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getWorkspaceUsers } from "@/features/workspace/services/workspace-service";
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function WorkspaceMembersTable() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
|
||||
const workspaceUsers = useQuery({
|
||||
queryKey: ["workspaceUsers", currentUser.workspace.id],
|
||||
queryFn: async () => {
|
||||
return await getWorkspaceUsers();
|
||||
},
|
||||
});
|
||||
|
||||
const { data, isLoading, isSuccess } = workspaceUsers;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isSuccess &&
|
||||
|
||||
<Table>
|
||||
<TableCaption>Your workspace members will appear here.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
|
||||
{
|
||||
data['users']?.map((user, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell> <Badge variant="secondary">{user.workspaceRole}</Badge></TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useAtom } from "jotai";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
import toast from "react-hot-toast";
|
||||
import { updateUser } from "@/features/user/services/user-service";
|
||||
import { useState } from "react";
|
||||
import { focusAtom } from "jotai-optics";
|
||||
import { updateWorkspace } from "@/features/workspace/services/workspace-service";
|
||||
import { IWorkspace } from "@/features/workspace/types/workspace.types";
|
||||
|
||||
const profileFormSchema = z.object({
|
||||
name: z.string(),
|
||||
});
|
||||
|
||||
type ProfileFormValues = z.infer<typeof profileFormSchema>;
|
||||
|
||||
const workspaceAtom = focusAtom(currentUserAtom, (optic) => optic.prop("workspace"));
|
||||
|
||||
export default function WorkspaceNameForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [, setWorkspace] = useAtom(workspaceAtom);
|
||||
|
||||
const defaultValues: Partial<ProfileFormValues> = {
|
||||
name: currentUser?.workspace?.name,
|
||||
};
|
||||
|
||||
const form = useForm<ProfileFormValues>({
|
||||
resolver: zodResolver(profileFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
async function onSubmit(data: Partial<IWorkspace>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedWorkspace = await updateWorkspace(data);
|
||||
setWorkspace(updatedWorkspace);
|
||||
toast.success("Updated successfully");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
toast.error("Failed to update data.");
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input className="max-w-md" placeholder="e.g ACME" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Your workspace name.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit">Save</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user