refactor registration page

hexlet-codebattle · Sep 9, 2024 · 562cd1a · 562cd1a
1 parent 8e0ff78
commit 562cd1a
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 89 deletions.
diff --git a/services/app/apps/codebattle/assets/js/widgets/formik/index.js b/services/app/apps/codebattle/assets/js/widgets/formik/index.js
@@ -0,0 +1,85 @@
+import * as Yup from 'yup';
+
+const braillePatternBlank = '\u2800';
+const space = ' ';
+const invalidSymbols = [braillePatternBlank, space];
+
+const emailSchema = Yup.string()
+  .email('Invalid email')
+  .test(
+    'exclude-braille-pattern-blank',
+    'Invalid email',
+    value => (
+      value
+        ? !value.includes(braillePatternBlank)
+        : true
+    ),
+  )
+  .matches(/^[a-zA-Z0-9]{1}[^;]*@[^;]*$/i, 'Should begin and end with a Latin letter or number')
+  .matches(/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,})$/i, 'Can\'t contain special symbols')
+  .required('Email required');
+
+const schemas = {
+  userSettings: settings => ({
+    name: Yup.string()
+      .strict()
+      .required("Field can't be empty")
+      .min(3, 'Should be at least 3 characters')
+      // .max(5, 'Should be 16 character(s) or less')
+      .test(
+        'max',
+        'Should be 16 character(s) or less',
+        (name = '') => (
+          settings.name === name || name.length <= 16
+        ),
+      )
+      .trim(),
+    clan: Yup.string()
+      .strict(),
+  }),
+  resetPassword: {
+    email: emailSchema,
+  },
+  signIn: {
+    email: emailSchema,
+    password: Yup.string().required('Password required'),
+  },
+  signUp: {
+      name: Yup
+        .string()
+        .test(
+          'start-or-end-with-empty-symbols',
+          'Can\'t start or end with empty symbols',
+          value => {
+            if (!value) {
+              return true;
+            }
+            const invalidSymbolIndex = invalidSymbols.findIndex(invalidSymbol => (
+              value.startsWith(invalidSymbol) || value.endsWith(invalidSymbol)
+            ));
+
+            return invalidSymbolIndex === -1;
+          },
+        )
+        .min(3, 'Should be from 3 to 16 characters')
+        .max(16, 'Should be from 3 to 16 characters')
+        .matches(
+          /^[a-zA-Z]+[a-zA-Z0-9_-\s{1}][a-zA-Z0-9_]+$/i,
+          'Should contain Latin letters, numbers and underscores. Only begin with latin letter',
+        )
+        .required('Nickname required'),
+      email: emailSchema,
+      password: Yup
+        .string()
+        .matches(/^\S*$/, 'Can\'t contain empty symbols')
+        .min(6, 'Should be from 6 to 16 characters')
+        .max(16, 'Should be from 6 to 16 characters')
+        .required('Password required'),
+      passwordConfirmation: Yup
+        .string()
+        .required('Confirmation required')
+        .oneOf([Yup.ref('password')], 'Passwords must match'),
+  },
+};
+
+export default schemas;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx
@@ -4,6 +4,7 @@ import axios from 'axios';
 import cn from 'classnames';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
+import schemas from '@/formik';
 
 const getCsrfToken = () => document
   .querySelector("meta[name='csrf-token']")
@@ -134,10 +135,7 @@ function SignIn() {
       email: '',
       password: '',
     },
-    validationSchema: Yup.object().shape({
-      email: Yup.string().email('Invalid email').required('Email required'),
-      password: Yup.string().required('Password required'),
-    }),
+    validationSchema: Yup.object().shape(schemas.signIn),
     onSubmit: ({ email, password }) => {
       const data = { email, password };
 
@@ -192,10 +190,6 @@ function SignIn() {
   );
 }
 
-const braillePatternBlank = '\u2800';
-const space = ' ';
-const invalidSymbols = [braillePatternBlank, space];
-
 function SignUp() {
   const formik = useFormik({
     initialValues: {
@@ -204,56 +198,7 @@ function SignUp() {
       password: '',
       passwordConfirmation: '',
     },
-    validationSchema: Yup.object().shape({
-      name: Yup
-        .string()
-        .test(
-          'start-or-end-with-empty-symbols',
-          'Can\'t start or end with empty symbols',
-          value => {
-            if (!value) {
-              return true;
-            }
-            const invalidSymbolIndex = invalidSymbols.findIndex(invalidSymbol => (
-              value.startsWith(invalidSymbol) || value.endsWith(invalidSymbol)
-            ));
-
-            return invalidSymbolIndex === -1;
-          },
-        )
-        .min(3, 'Should be from 3 to 16 characters')
-        .max(16, 'Should be from 3 to 16 characters')
-        .matches(
-          /^[a-zA-Z]+[a-zA-Z0-9_-\s{1}][a-zA-Z0-9_]+$/i,
-          'Should contain Latin letters, numbers and underscores. Only begin with latin letter',
-        )
-        .required('Nickname required'),
-      email: Yup
-        .string()
-        .email('Invalid email')
-        .test(
-          'exclude-braille-pattern-blank',
-          'Invalid email',
-          value => (
-            value
-              ? !value.includes(braillePatternBlank)
-              : true
-          ),
-        )
-        .matches(/^[a-zA-Z0-9]{1}[^;]*@[^;]*$/i, 'Should begin and end with a Latin letter or number')
-        .matches(/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,})$/i, 'Can\'t contain special symbols')
-        .required('Email required'),
-      password: Yup
-        .string()
-        .matches(/^\S*$/, 'Can\'t contain empty symbols')
-        .min(6, 'Should be from 6 to 16 characters')
-        .max(16, 'Should be from 6 to 16 characters')
-        .required('Password required'),
-      passwordConfirmation: Yup
-        .string()
-        .required('Confirmation required')
-        .oneOf([Yup.ref('password')], 'Passwords must match'),
-    }),
+    validationSchema: Yup.object().shape(schemas.signUp),
     onSubmit: formData => {
       axios
         .post('/api/v1/users', formData, {
@@ -314,9 +259,7 @@ function ResetPassword() {
     initialValues: {
       email: '',
     },
-    validationSchema: Yup.object().shape({
-      email: Yup.string().email('Invalid email').required('Email required'),
-    }),
+    validationSchema: Yup.object().shape(schemas.resetPassword),
     onSubmit: ({ email }) => {
       axios
         .post('/api/v1/reset_password', { email }, {

diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import Slider from 'calcite-react/Slider';
 import cn from 'classnames';
@@ -10,6 +10,7 @@ import * as Icon from 'react-feather';
 import * as Yup from 'yup';
 
 import languages from '../../config/languages';
+import schemas from '../../formik';
 import { createPlayer } from '../../lib/sound';
 
 const playingLanguages = Object.entries(languages);
@@ -49,41 +50,25 @@ const TextInput = ({
   );
 };
 
+const player = createPlayer();
+
+const playSound = (type, volume) => {
+  player.stop();
+  player[type].play('win', volume);
+};
+
 const UserSettingsForm = ({ onSubmit, settings }) => {
-  const initialValues = {
+  const initialValues = useMemo(() => ({
     name: settings.name,
     soundSettings: {
       type: settings.soundSettings.type,
       level: settings.soundSettings.level,
     },
     clan: settings.clan || '',
     lang: settings.lang || '',
-  };
-
-  const player = createPlayer();
-
-  const playSound = (type, volume) => {
-    player.stop();
-    player[type].play('win', volume);
-  };
-
-  const validationSchema = Yup.object({
-    name: Yup.string()
-      .strict()
-      .required("Field can't be empty")
-      .min(3, 'Should be at least 3 characters')
-      // .max(5, 'Should be 16 character(s) or less')
-      .test(
-        'max',
-        'Should be 16 character(s) or less',
-        (name = '') => (
-          settings.name === name || name.length <= 16
-        ),
-      )
-      .trim(),
-    clan: Yup.string()
-      .strict(),
-  });
+  }), [settings]);
+
+  const validationSchema = useMemo(() => Yup.object(schemas.userSettings(settings)), [settings]);
 
   return (
     <Formik