Merge pull request #28 from daritelska-platforma/integrate-form-library

Integrate form library
podkrepi-bg · Feb 6, 2021 · 0555af7 · 0555af7
2 parents d73b321 + 92fc687
commit 0555af7
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -16,18 +16,21 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
+    "formik": "^2.2.6",
     "i18next": "^19.8.4",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
     "next": "^10.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.8.5",
-    "sass": "^1.32.4"
+    "sass": "^1.32.4",
+    "yup": "^0.32.8"
   },
   "devDependencies": {
     "@types/node": "^14.14.21",
     "@types/react": "^17.0.0",
+    "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^4.13.0",
     "@typescript-eslint/parser": "^4.13.0",
     "eslint": "^7.18.0",

diff --git a/public/locales/bg/auth.json b/public/locales/bg/auth.json
@@ -19,5 +19,11 @@
     "forgotten-password": {
       "instructions": "За да смените паролата си, моля въведете вашия email и ще ви изпратим потвърждение с инареукции."
     }
+  },
+  "validation":{
+    "email": "Невалиден email",
+    "required": "Задължително поле",
+    "password-min": "Паролата трябва да бъде поне {{count}} символа",
+    "password-match": "Паролата не съвпада"
   }
 }
diff --git a/public/locales/en/auth.json b/public/locales/en/auth.json
@@ -19,5 +19,11 @@
     "forgotten-password": {
       "instructions": "To reset your password, please type your email address below. We will then send you an email with instructions to follow."
     }
+  },
+  "validation":{
+    "email": "Invalid email",
+    "required": "Required field",
+    "password-min": "Password should be at least {{count}} characters",
+    "password-match": "Password doesn't match"
   }
 }
diff --git a/src/components/changePassword/ChangePasswordPage.tsx b/src/components/changePassword/ChangePasswordPage.tsx
@@ -1,22 +1,42 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Container, Grid, TextField, Button } from '@material-ui/core'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
 
 import Layout from 'components/layout/Layout'
 
 export default function ChangePasswordPage() {
   const { t } = useTranslation()
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
 
-  function handleSubmit(event: React.FormEvent) {
-    event.preventDefault()
-  }
+  const ChangePasswordSchema = yup.object().shape({
+    password: yup
+      .string()
+      .min(6, t('auth:validation.password-min', { count: 6 }))
+      .required(t('auth:validation.required')),
+    confirmPassword: yup
+      .string()
+      .required(t('auth:validation.required'))
+      .oneOf([yup.ref('password'), null], t('auth:validation.password-match')),
+  })
+
+  const formik = useFormik({
+    initialValues: {
+      password: '',
+      confirmPassword: '',
+    },
+    validationSchema: ChangePasswordSchema,
+    validateOnChange: false,
+    validateOnBlur: false,
+    onSubmit: (values) => {
+      return
+    },
+  })
 
   return (
     <Layout title={t('nav.changePassword')}>
       <Container maxWidth="xs">
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={formik.handleSubmit}>
           <Grid container spacing={3}>
             <Grid item xs={12}>
               <TextField
@@ -26,8 +46,11 @@ export default function ChangePasswordPage() {
                 name="password"
                 size="small"
                 variant="outlined"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
+                error={!!formik.errors && !!formik.errors.password}
+                helperText={formik.errors && formik.errors.password}
+                value={formik.values.password}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>
@@ -38,8 +61,11 @@ export default function ChangePasswordPage() {
                 name="confirmPassword"
                 size="small"
                 variant="outlined"
-                value={confirmPassword}
-                onChange={(event) => setConfirmPassword(event.target.value)}
+                error={!!formik.errors && !!formik.errors.confirmPassword}
+                helperText={formik.errors && formik.errors.confirmPassword}
+                value={formik.values.confirmPassword}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>

diff --git a/src/components/forgottenPassword/ForgottenPasswordPage.tsx b/src/components/forgottenPassword/ForgottenPasswordPage.tsx
@@ -1,21 +1,34 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Typography, Container, Grid, TextField, Button } from '@material-ui/core'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
 
 import Layout from 'components/layout/Layout'
 
 export default function ForgottenPasswordPage() {
   const { t } = useTranslation()
-  const [email, setEmail] = useState('')
 
-  function handleSubmit(event: React.FormEvent) {
-    event.preventDefault()
-  }
+  const ForgottenPasswordSchema = yup.object().shape({
+    email: yup.string().email(t('auth:validation.email')).required(t('auth:validation.required')),
+  })
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+    },
+    validationSchema: ForgottenPasswordSchema,
+    validateOnChange: false,
+    validateOnBlur: false,
+    onSubmit: (values) => {
+      return
+    },
+  })
 
   return (
     <Layout title={t('nav.forgottenPassword')}>
       <Container maxWidth="xs">
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={formik.handleSubmit}>
           <Typography variant="body1" paragraph>
             {t('auth:pages.forgotten-password.instructions')}
           </Typography>
@@ -28,8 +41,11 @@ export default function ForgottenPasswordPage() {
                 name="email"
                 size="small"
                 variant="outlined"
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
+                error={!!formik.errors && !!formik.errors.email}
+                helperText={formik.errors && formik.errors.email}
+                value={formik.values.email}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>

diff --git a/src/components/login/LoginPage.tsx b/src/components/login/LoginPage.tsx
@@ -1,28 +1,44 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Container, Grid, TextField, Button, Box } from '@material-ui/core'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
 
 import { routes } from 'common/routes'
 import Layout from 'components/layout/Layout'
 import Link from 'components/shared/Link'
 import { AlertStore } from 'stores/AlertStore'
 
 export default function LoginPage() {
-  const { t } = useTranslation()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
+  const test = useTranslation()
+  console.log(test)
+  const t = test.t
+  const LoginSchema = yup.object().shape({
+    email: yup.string().email(t('auth:validation.email')).required(t('auth:validation.required')),
+    password: yup
+      .string()
+      .min(6, t('auth:validation.password-min', { count: 6 }))
+      .required(t('auth:validation.required')),
+  })
 
-  function handleSubmit(event: React.FormEvent) {
-    event.preventDefault()
-  }
-  function showAlert() {
-    AlertStore.show(t('auth:alerts.invalid-login'), 'error')
-  }
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: LoginSchema,
+    validateOnChange: false,
+    validateOnBlur: false,
+    onSubmit: (values) => {
+      console.log(values)
+      AlertStore.show(t('auth:alerts.invalid-login'), 'error')
+    },
+  })
 
   return (
     <Layout title={t('nav.login')}>
       <Container maxWidth="xs">
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={formik.handleSubmit}>
           <Grid container spacing={3}>
             <Grid item xs={12}>
               <TextField
@@ -33,8 +49,11 @@ export default function LoginPage() {
                 size="small"
                 variant="outlined"
                 autoFocus
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
+                error={!!formik.errors && !!formik.errors.email}
+                helperText={formik.errors && formik.errors.email}
+                value={formik.values.email}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>
@@ -45,17 +64,15 @@ export default function LoginPage() {
                 name="password"
                 size="small"
                 variant="outlined"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
+                error={!!formik.errors && !!formik.errors.password}
+                helperText={formik.errors && formik.errors.password}
+                value={formik.values.password}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>
-              <Button
-                fullWidth
-                type="submit"
-                color="primary"
-                variant="contained"
-                onClick={() => showAlert()}>
+              <Button fullWidth type="submit" color="primary" variant="contained">
                 {t('auth:cta.login')}
               </Button>
             </Grid>

diff --git a/src/components/register/RegisterPage.tsx b/src/components/register/RegisterPage.tsx
@@ -1,24 +1,43 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Container, Grid, TextField, Button } from '@material-ui/core'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
 
 import Layout from 'components/layout/Layout'
 
 export default function RegisterPage() {
   const { t } = useTranslation()
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
 
-  function handleSubmit(event: React.FormEvent) {
-    event.preventDefault()
-  }
+  const RegisterSchema = yup.object().shape({
+    firstName: yup.string().required(t('auth:validation.required')),
+    lastName: yup.string().required(t('auth:validation.required')),
+    email: yup.string().email(t('auth:validation.email')).required(t('auth:validation.required')),
+    password: yup
+      .string()
+      .min(6, t('auth:validation.password-min', { count: 6 }))
+      .required(t('auth:validation.required')),
+  })
+
+  const formik = useFormik({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+    },
+    validationSchema: RegisterSchema,
+    validateOnChange: false,
+    validateOnBlur: false,
+    onSubmit: (values) => {
+      return
+    },
+  })
 
   return (
     <Layout title={t('nav.register')}>
       <Container maxWidth="xs">
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={formik.handleSubmit}>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={6}>
               <TextField
@@ -29,8 +48,11 @@ export default function RegisterPage() {
                 size="small"
                 variant="outlined"
                 autoFocus
-                value={firstName}
-                onChange={(event) => setFirstName(event.target.value)}
+                error={!!formik.errors && !!formik.errors.firstName}
+                helperText={formik.errors && formik.errors.firstName}
+                value={formik.values.firstName}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12} sm={6}>
@@ -41,8 +63,11 @@ export default function RegisterPage() {
                 name="lastName"
                 size="small"
                 variant="outlined"
-                value={lastName}
-                onChange={(event) => setLastName(event.target.value)}
+                error={!!formik.errors && !!formik.errors.lastName}
+                helperText={formik.errors && formik.errors.lastName}
+                value={formik.values.lastName}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>
@@ -53,8 +78,11 @@ export default function RegisterPage() {
                 name="email"
                 size="small"
                 variant="outlined"
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
+                error={!!formik.errors && !!formik.errors.email}
+                helperText={formik.errors && formik.errors.email}
+                value={formik.values.email}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>
@@ -65,8 +93,11 @@ export default function RegisterPage() {
                 name="password"
                 size="small"
                 variant="outlined"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
+                error={!!formik.errors && !!formik.errors.password}
+                helperText={formik.errors && formik.errors.password}
+                value={formik.values.password}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
               />
             </Grid>
             <Grid item xs={12}>