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 { 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({ data, onSave }) {
const { id } = data;
export default function UserPasswordForm({ onSave, userId }) {
const {
user: { id },
} = useUser();
const isCurrentUser = !userId || id === userId;
const url = isCurrentUser ? `/users/${id}/password` : `/users/${id}`;
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 handleSubmit = async data => {
mutate(
{ password: data.new_password },
{
onSuccess: async () => {
onSave();
},
const payload = isCurrentUser
? data
: {
password: data.new_password,
};
mutate(payload, {
onSuccess: async () => {
onSave();
ref.current.reset();
},
);
});
};
const samePassword = value => {
@ -30,33 +40,42 @@ export default function UserPasswordForm({ data, onSave }) {
};
return (
<>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
{isCurrentUser && (
<FormInput
name="new_password"
label="New password"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
name="current_password"
label="Current password"
rules={{ required: 'Required' }}
>
<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>
</>
)}
<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" 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 PageHeader from 'components/layout/PageHeader';
import ProfileSettings from 'components/settings/ProfileSettings';
import ProfileDetails from 'components/settings/ProfileDetails';
import { useState } from 'react';
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 { toast, showToast } = useToast();
@ -25,8 +25,8 @@ export default function ProfileDetails() {
<Item key="general">General</Item>
<Item key="password">Password</Item>
</Tabs>
{tab === 'general' && <ProfileSettings />}
{tab === 'password' && <ProfilePasswordForm onSave={handleSave} />}
{tab === 'general' && <ProfileDetails />}
{tab === 'password' && <UserPasswordForm onSave={handleSave} />}
</Page>
);
}

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

@ -53,7 +53,7 @@ export default function UserDetails({ userId }) {
<Item>
<Link href="/users">Users</Link>
</Item>
<Item>{values?.name}</Item>
<Item>{values?.username}</Item>
</Breadcrumbs>
</PageHeader>
<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 ThemeSetting from './ThemeSetting';
export default function ProfileSettings() {
export default function ProfileDetails() {
const { user } = useUser();
if (!user) {

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

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

4
pages/profile/index.js
View File

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

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

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