watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 20:15:41 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Clean up password forms.

Browse source
This commit is contained in:
Brian Cao 2022-12-26 12:34:23 -08:00
parent 6cf6a97b4d
commit 4451fc5982
10 changed files with 69 additions and 238 deletions
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>
);
}