passwordForm.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import styled from '@emotion/styled';
  2. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  3. import Button from 'sentry/components/button';
  4. import Form from 'sentry/components/forms/form';
  5. import JsonForm from 'sentry/components/forms/jsonForm';
  6. import {PanelAlert, PanelItem} from 'sentry/components/panels';
  7. import accountPasswordFields from 'sentry/data/forms/accountPassword';
  8. import {t} from 'sentry/locale';
  9. import ConfigStore from 'sentry/stores/configStore';
  10. type OnSubmitSuccess = Parameters<NonNullable<Form['props']['onSubmitSuccess']>>;
  11. function PasswordForm() {
  12. function handleSubmitSuccess(_change: OnSubmitSuccess[0], model: OnSubmitSuccess[1]) {
  13. // Reset form on success
  14. model.resetForm();
  15. addSuccessMessage('Password has been changed');
  16. }
  17. function handleSubmitError() {
  18. addErrorMessage('Error changing password');
  19. }
  20. const user = ConfigStore.get('user');
  21. return (
  22. <Form
  23. apiMethod="PUT"
  24. apiEndpoint="/users/me/password/"
  25. initialData={{}}
  26. onSubmitSuccess={handleSubmitSuccess}
  27. onSubmitError={handleSubmitError}
  28. hideFooter
  29. >
  30. <JsonForm
  31. forms={accountPasswordFields}
  32. additionalFieldProps={{user}}
  33. renderFooter={() => (
  34. <Actions>
  35. <Button type="submit" priority="primary">
  36. {t('Change password')}
  37. </Button>
  38. </Actions>
  39. )}
  40. renderHeader={() => (
  41. <PanelAlert type="info">
  42. {t('Changing your password will invalidate all logged in sessions.')}
  43. </PanelAlert>
  44. )}
  45. />
  46. </Form>
  47. );
  48. }
  49. const Actions = styled(PanelItem)`
  50. justify-content: flex-end;
  51. `;
  52. export default PasswordForm;