start

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

@@ -0,0 +1,58 @@
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Field, Form, Formik } from 'formik';
+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 { mobile, required } from '../shared/forms/validations';
+
+function MobileForm(props) {
+  async function submit({ mobile }, { setErrors }) {
+    try {
+      await props.onSubmit(mobile);
+    } catch (error) {
+      setErrors({ _error: error.data.detail || error.data });
+    }
+  }
+
+  return (
+    <Segment>
+      <Divider horizontal content='فرم فراموشی رمز عبور' />
+      <Formik initialValues={{ mobile: '' }} onSubmit={submit}>
+        {({ errors, dirty, isSubmitting }) => (
+          <Fragment>
+            {dirty && errors._error && <Alert content={errors._error} className='mt-3 mb-5' />}
+            <Form>
+              <Field
+                required
+                name='mobile'
+                label='شماره تلفن همراه'
+                type='tel'
+                placeholder='09121234567'
+                component={FormInput}
+                validate={[required, mobile]}
+              />
+              <div className='text-medium my-4'>
+                شماره تلفن همراه وارد شده هنگام ثبت نام را وارد کنید.
+              </div>
+              <Button
+                type='submit'
+                disabled={!dirty || isSubmitting}
+                content='ادامه'
+                className='my-2 mr-auto'
+              />
+            </Form>
+          </Fragment>
+        )}
+      </Formik>
+    </Segment>
+  );
+}
+
+MobileForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired
+};
+
+export default MobileForm;