start

src/components/forget-password/password-form.js

@@ -0,0 +1,79 @@
+import { Component, Fragment } from 'react';
+import { Field, Form, Formik } from 'formik';
+import PropTypes from 'prop-types';
+import Segment from '../shared/segment';
+import Divider from '../shared/divider';
+import Alert from '../shared/alert';
+import Button from '../shared/buttons/button';
+import FormInput from '../shared/forms/input';
+import { password, required } from '../shared/forms/validations';
+
+class PasswordForm extends Component {
+  submit = async ({ password }, { setErrors }) => {
+    try {
+      await this.props.onSubmit(password);
+    } catch (error) {
+      const errorMessage = error.message || 'تغییر رمز عبور انجام نشد.';
+      setErrors({ _error: errorMessage });
+    }
+  };
+
+  validate = values => {
+    const errors = {};
+    if (values.password !== values.password2) errors.password2 = 'رمزهای عبور غیر یکسان هستند.';
+    return errors;
+  };
+
+  render() {
+    return (
+      <Segment>
+        <Divider horizontal content='فرم تغییر رمز عبور' className='mb-5' />
+
+        <Formik
+          initialValues={{ password: '', password2: '' }}
+          onSubmit={this.submit}
+          validate={this.validate}
+        >
+          {({ errors, dirty, isSubmitting }) => (
+            <Fragment>
+              {dirty && errors._error && <Alert content={errors._error} className='mt-3 mb-5' />}
+
+              <Form>
+                <Field
+                  required
+                  name='password'
+                  type='password'
+                  label='رمز عبور جدید'
+                  component={FormInput}
+                  validate={[required, password]}
+                  className='my-4'
+                />
+                <Field
+                  required
+                  name='password2'
+                  type='password'
+                  label='تکرار رمز عبور جدید'
+                  placeholder='رمز عبور جدید خود را مجدد وارد نمایید'
+                  component={FormInput}
+                  validate={[required, password]}
+                />
+                <Button
+                  type='submit'
+                  disabled={!dirty || isSubmitting}
+                  content='تغییر رمز عبور'
+                  className='my-2 mr-auto'
+                />
+              </Form>
+            </Fragment>
+          )}
+        </Formik>
+      </Segment>
+    );
+  }
+}
+
+PasswordForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired
+};
+
+export default PasswordForm;