ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up password forms.

pull/1713/head
Brian Cao 2022-12-26 12:34:23 -08:00
parent 6cf6a97b4d
commit 4451fc5982
10 changed files with 69 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/forms/PasswordEditForm.js
View File

@ -1,68 +0,0 @@
import { useRef } from 'react';
import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
import { useApi } from 'next-basics';
import { useMutation } from '@tanstack/react-query';
import { getAuthToken } from 'lib/client';
import styles from './Form.module.css';
export default function PasswordEditForm({ onSave, onClose }) {
const { post } = useApi(getAuthToken());
const { mutate, error, isLoading } = useMutation(data => post('/account/change-password', data));
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave();
},
});
};
const samePassword = value => {
if (value !== ref?.current?.getValues('new_password')) {
return "Passwords don't match";
}
return true;
};
return (
<>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<FormInput
name="current_password"
label="Current password"
rules={{ required: 'Required' }}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormInput
name="new_password"
label="New password"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormInput
name="confirm_password"
label="Confirm password"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
validate: samePassword,
}}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormButtons flex>
<Button type="submit" variant="primary" disabled={isLoading}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</FormButtons>
</Form>
</>
);
}

52
components/forms/PasswordResetForm.js
View File

@ -1,52 +0,0 @@
import { useRef } from 'react';
import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
import { useApi } from 'next-basics';
import { useMutation } from '@tanstack/react-query';
import { getAuthToken } from 'lib/client';
import styles from './Form.module.css';
export default function PasswordResetForm({ token, onSave }) {
const { post } = useApi(getAuthToken());
const { mutate, error, isLoading } = useMutation(data =>
post('/account/reset-password', { ...data, token }),
);
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave();
},
});
};
const samePassword = value => {
if (value !== ref?.current?.getValues('new_password')) {
return "Passwords don't match";
}
return true;
};
return (
<>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<h2>Reset your password</h2>
<FormInput name="new_password" label="New password" rules={{ required: 'Required' }}>
<PasswordField autoComplete="off" />
</FormInput>
<FormInput
name="confirm_password"
label="Confirm password"
rules={{ required: 'Required', validate: samePassword }}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormButtons align="center" className={styles.buttons}>
<Button type="submit" variant="primary" disabled={isLoading}>
Update password
</Button>
</FormButtons>
</Form>
</>
);
}

69
components/forms/ProfilePasswordForm.js
View File

@ -1,69 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { getAuthToken } from 'lib/client';
import { useApi } from 'next-basics';
import { useRef } from 'react';
import { SubmitButton, Form, FormButtons, FormInput, PasswordField } from 'react-basics';
import styles from './UserForm.module.css';
import useUser from 'hooks/useUser';
export default function UserPasswordForm({ onSave }) {
const {
user: { id },
} = useUser();
const { post } = useApi(getAuthToken());
const { mutate, error } = useMutation(data => post(`/users/${id}/password`, data));
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave();
},
});
};
const samePassword = value => {
if (value !== ref?.current?.getValues('new_password')) {
return "Passwords don't match";
}
return true;
};
return (
<>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<FormInput
name="current_password"
label="Current password"
rules={{ required: 'Required' }}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormInput
name="new_password"
label="New password"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormInput
name="confirm_password"
label="Confirm password"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
validate: samePassword,
}}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormButtons>
<SubmitButton>Save</SubmitButton>
</FormButtons>
</Form>
</>
);
}

93
components/forms/UserPasswordForm.js
View File

@ -1,25 +1,35 @@
import { useRef } from 'react';
import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
import { useApi } from 'next-basics';
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { getAuthToken } from 'lib/client'; import { getAuthToken } from 'lib/client';
import { useApi } from 'next-basics';
import { useRef } from 'react';
import { SubmitButton, Form, FormButtons, FormInput, PasswordField } from 'react-basics';
import styles from './UserForm.module.css'; import styles from './UserForm.module.css';
import useUser from 'hooks/useUser';
export default function UserPasswordForm({ data, onSave }) { export default function UserPasswordForm({ onSave, userId }) {
const { id } = data; const {
user: { id },
} = useUser();
const isCurrentUser = !userId || id === userId;
const url = isCurrentUser ? `/users/${id}/password` : `/users/${id}`;
const { post } = useApi(getAuthToken()); const { post } = useApi(getAuthToken());
const { mutate, error } = useMutation(({ password }) => post(`/users/${id}`, { password })); const { mutate, error, isLoading } = useMutation(data => post(url, data));
const ref = useRef(null); const ref = useRef(null);
const handleSubmit = async data => { const handleSubmit = async data => {
mutate( const payload = isCurrentUser
{ password: data.new_password }, ? data
{ : {
onSuccess: async () => { password: data.new_password,
onSave(); };
},
mutate(payload, {
onSuccess: async () => {
onSave();
ref.current.reset();
}, },
); });
}; };
const samePassword = value => { const samePassword = value => {
@ -30,33 +40,42 @@ export default function UserPasswordForm({ data, onSave }) {
}; };
return ( return (
<> <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}> {isCurrentUser && (
<FormInput <FormInput
name="new_password" name="current_password"
label="New password" label="Current password"
rules={{ rules={{ required: 'Required' }}
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
> >
<PasswordField autoComplete="off" /> <PasswordField autoComplete="off" />
</FormInput> </FormInput>
<FormInput )}
name="confirm_password" <FormInput
label="Confirm password" name="new_password"
rules={{ label="New password"
required: 'Required', rules={{
minLength: { value: 8, message: 'Minimum length 8 characters' }, required: 'Required',
validate: samePassword, minLength: { value: 8, message: 'Minimum length 8 characters' },
}} }}
> >
<PasswordField autoComplete="off" /> <PasswordField autoComplete="off" />
</FormInput> </FormInput>
<FormButtons> <FormInput
<SubmitButton>Save</SubmitButton> name="confirm_password"
</FormButtons> label="Confirm password"
</Form> rules={{
</> required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
validate: samePassword,
}}
>
<PasswordField autoComplete="off" />
</FormInput>
<FormButtons flex>
<Button type="submit" disabled={isLoading}>
Save
</Button>
</FormButtons>
</Form>
); );
} }

10
components/pages/ProfileDetails.js → components/pages/ProfileSettings.js
View File

@ -1,11 +1,11 @@
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
import ProfileSettings from 'components/settings/ProfileSettings'; import ProfileDetails from 'components/settings/ProfileDetails';
import { useState } from 'react'; import { useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics'; import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
import ProfilePasswordForm from 'components/forms/ProfilePasswordForm'; import UserPasswordForm from 'components/forms/UserPasswordForm';
export default function ProfileDetails() { export default function ProfileSettings() {
const [tab, setTab] = useState('general'); const [tab, setTab] = useState('general');
const { toast, showToast } = useToast(); const { toast, showToast } = useToast();
@ -25,8 +25,8 @@ export default function ProfileDetails() {
<Item key="general">General</Item> <Item key="general">General</Item>
<Item key="password">Password</Item> <Item key="password">Password</Item>
</Tabs> </Tabs>
{tab === 'general' && <ProfileSettings />} {tab === 'general' && <ProfileDetails />}
{tab === 'password' && <ProfilePasswordForm onSave={handleSave} />} {tab === 'password' && <UserPasswordForm onSave={handleSave} />}
</Page> </Page>
); );
} }

2
components/pages/UserDetails.js → components/pages/UserSettings.js
View File

@ -53,7 +53,7 @@ export default function UserDetails({ userId }) {
<Item> <Item>
<Link href="/users">Users</Link> <Link href="/users">Users</Link>
</Item> </Item>
<Item>{values?.name}</Item> <Item>{values?.username}</Item>
</Breadcrumbs> </Breadcrumbs>
</PageHeader> </PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}> <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>

2
components/settings/ProfileSettings.js → components/settings/ProfileDetails.js
View File

@ -7,7 +7,7 @@ import LanguageSetting from './LanguageSetting';
import styles from './ProfileSettings.module.css'; import styles from './ProfileSettings.module.css';
import ThemeSetting from './ThemeSetting'; import ThemeSetting from './ThemeSetting';
export default function ProfileSettings() { export default function ProfileDetails() {
const { user } = useUser(); const { user } = useUser();
if (!user) { if (!user) {

3
pages/api/users/[id]/index.ts
View File

@ -46,7 +46,8 @@ export default async (
const data: any = {}; const data: any = {};
if (password) { // Only admin can change these fields
if (password && isAdmin) {
data.password = hashPassword(password); data.password = hashPassword(password);
} }

4
pages/profile/index.js
View File

@ -1,5 +1,5 @@
import Settings from 'components/pages/Settings'; import Settings from 'components/pages/Settings';
import ProfileDetails from 'components/pages/ProfileDetails'; import ProfileSettings from 'components/pages/ProfileSettings';
import useRequireLogin from 'hooks/useRequireLogin'; import useRequireLogin from 'hooks/useRequireLogin';
import React from 'react'; import React from 'react';
@ -12,7 +12,7 @@ export default function TeamsPage() {
return ( return (
<Settings> <Settings>
<ProfileDetails /> <ProfileSettings />
</Settings> </Settings>
); );
} }

4
pages/users/[...id].js
View File

@ -1,5 +1,5 @@
import Settings from 'components/pages/Settings'; import Settings from 'components/pages/Settings';
import UserDetails from 'components/pages/UserDetails'; import UserSettings from 'components/pages/UserSettings';
import useRequireLogin from 'hooks/useRequireLogin'; import useRequireLogin from 'hooks/useRequireLogin';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
@ -15,7 +15,7 @@ export default function TeamDetailPage() {
return ( return (
<Settings> <Settings>
<UserDetails userId={id} /> <UserSettings userId={id} />
</Settings> </Settings>
); );
} }