04b510d88b
Also made visual changes for the new Settings Page. ## SyncToggle: It will no longer be under a dedicated Card, so the "Sync" title is not there to give context for the case of "no verified email". Changed it such that the checkbox is always visible (it's label is self-explanatory) but disable when email is not set. The "Add Email" button will then appear below, so everything now makes sense in context.
89 lines
2.8 KiB
JavaScript
89 lines
2.8 KiB
JavaScript
// @flow
|
|
import React, { useState } from 'react';
|
|
import { FormField, Form } from 'component/common/form';
|
|
import Button from 'component/button';
|
|
import ErrorText from 'component/common/error-text';
|
|
import * as PAGES from 'constants/pages';
|
|
|
|
type Props = {
|
|
user: ?User,
|
|
doToast: ({ message: string }) => void,
|
|
doUserPasswordSet: (string, ?string) => void,
|
|
doClearPasswordEntry: () => void,
|
|
passwordSetSuccess: boolean,
|
|
passwordSetError: ?string,
|
|
};
|
|
|
|
export default function SettingAccountPassword(props: Props) {
|
|
const { user, doToast, doUserPasswordSet, passwordSetSuccess, passwordSetError, doClearPasswordEntry } = props;
|
|
const [oldPassword, setOldPassword] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [isAddingPassword, setIsAddingPassword] = useState(false);
|
|
const hasPassword = user && user.password_set;
|
|
|
|
function handleSubmit() {
|
|
doUserPasswordSet(newPassword, oldPassword);
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (passwordSetSuccess) {
|
|
setIsAddingPassword(false);
|
|
doToast({
|
|
message: __('Password updated successfully.'),
|
|
});
|
|
doClearPasswordEntry();
|
|
setOldPassword('');
|
|
setNewPassword('');
|
|
}
|
|
}, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntry, doToast]);
|
|
|
|
return isAddingPassword ? (
|
|
<div>
|
|
<Form onSubmit={handleSubmit} className="section">
|
|
{hasPassword && (
|
|
<FormField
|
|
type="password"
|
|
name="setting_set_old_password"
|
|
label={__('Old Password')}
|
|
value={oldPassword}
|
|
onChange={(e) => setOldPassword(e.target.value)}
|
|
/>
|
|
)}
|
|
<FormField
|
|
type="password"
|
|
name="setting_set_new_password"
|
|
label={__('New Password')}
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
/>
|
|
|
|
<div className="section__actions">
|
|
<Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
|
|
{hasPassword ? (
|
|
<Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
|
|
) : (
|
|
<Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
|
|
)}
|
|
</div>
|
|
</Form>
|
|
{passwordSetError && (
|
|
<div className="section">
|
|
<ErrorText>{passwordSetError}</ErrorText>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="section__actions--between">
|
|
<div>
|
|
<p>{__('Password')}</p>
|
|
{!hasPassword && <p className="help">{__('You do not currently have a password set.')}</p>}
|
|
</div>
|
|
<Button
|
|
button="primary"
|
|
label={hasPassword ? __('Update Your Password') : __('Add A Password')}
|
|
onClick={() => setIsAddingPassword(true)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|