Skip to content

Commit 562cd1a

Browse files
ReDBrotherReDBrother
committed
refactor registration page
1 parent 8e0ff78 commit 562cd1a

File tree

3 files changed

+102
-89
lines changed

3 files changed

+102
-89
lines changed

‎services/app/apps/codebattle/assets/js/widgets/formik/index.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as Yup from 'yup';
2+
3+
const braillePatternBlank = '\u2800';
4+
const space = ' ';
5+
const invalidSymbols = [braillePatternBlank, space];
6+
7+
const emailSchema = Yup.string()
8+
.email('Invalid email')
9+
.test(
10+
'exclude-braille-pattern-blank',
11+
'Invalid email',
12+
value => (
13+
value
14+
? !value.includes(braillePatternBlank)
15+
: true
16+
),
17+
)
18+
.matches(/^[a-zA-Z0-9]{1}[^;]*@[^;]*$/i, 'Should begin and end with a Latin letter or number')
19+
.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')
20+
.required('Email required');
21+
22+
const schemas = {
23+
userSettings: settings => ({
24+
name: Yup.string()
25+
.strict()
26+
.required("Field can't be empty")
27+
.min(3, 'Should be at least 3 characters')
28+
// .max(5, 'Should be 16 character(s) or less')
29+
.test(
30+
'max',
31+
'Should be 16 character(s) or less',
32+
(name = '') => (
33+
settings.name === name || name.length <= 16
34+
),
35+
)
36+
.trim(),
37+
clan: Yup.string()
38+
.strict(),
39+
}),
40+
resetPassword: {
41+
email: emailSchema,
42+
},
43+
signIn: {
44+
email: emailSchema,
45+
password: Yup.string().required('Password required'),
46+
},
47+
signUp: {
48+
name: Yup
49+
.string()
50+
.test(
51+
'start-or-end-with-empty-symbols',
52+
'Can\'t start or end with empty symbols',
53+
value => {
54+
if (!value) {
55+
return true;
56+
}
57+
const invalidSymbolIndex = invalidSymbols.findIndex(invalidSymbol => (
58+
value.startsWith(invalidSymbol) || value.endsWith(invalidSymbol)
59+
));
60+
61+
return invalidSymbolIndex === -1;
62+
},
63+
)
64+
.min(3, 'Should be from 3 to 16 characters')
65+
.max(16, 'Should be from 3 to 16 characters')
66+
.matches(
67+
/^[a-zA-Z]+[a-zA-Z0-9_-\s{1}][a-zA-Z0-9_]+$/i,
68+
'Should contain Latin letters, numbers and underscores. Only begin with latin letter',
69+
)
70+
.required('Nickname required'),
71+
email: emailSchema,
72+
password: Yup
73+
.string()
74+
.matches(/^\S*$/, 'Can\'t contain empty symbols')
75+
.min(6, 'Should be from 6 to 16 characters')
76+
.max(16, 'Should be from 6 to 16 characters')
77+
.required('Password required'),
78+
passwordConfirmation: Yup
79+
.string()
80+
.required('Confirmation required')
81+
.oneOf([Yup.ref('password')], 'Passwords must match'),
82+
},
83+
};
84+
85+
export default schemas;

‎services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx‎

Lines changed: 4 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import axios from 'axios';
44
import cn from 'classnames';
55
import { useFormik } from 'formik';
66
import * as Yup from 'yup';
7+
import schemas from '@/formik';
78

89
const getCsrfToken = () => document
910
.querySelector("meta[name='csrf-token']")
@@ -134,10 +135,7 @@ function SignIn() {
134135
email: '',
135136
password: '',
136137
},
137-
validationSchema: Yup.object().shape({
138-
email: Yup.string().email('Invalid email').required('Email required'),
139-
password: Yup.string().required('Password required'),
140-
}),
138+
validationSchema: Yup.object().shape(schemas.signIn),
141139
onSubmit: ({ email, password }) => {
142140
const data = { email, password };
143141

@@ -192,10 +190,6 @@ function SignIn() {
192190
);
193191
}
194192

195-
const braillePatternBlank = '\u2800';
196-
const space = ' ';
197-
const invalidSymbols = [braillePatternBlank, space];
198-
199193
function SignUp() {
200194
const formik = useFormik({
201195
initialValues: {
@@ -204,56 +198,7 @@ function SignUp() {
204198
password: '',
205199
passwordConfirmation: '',
206200
},
207-
validationSchema: Yup.object().shape({
208-
name: Yup
209-
.string()
210-
.test(
211-
'start-or-end-with-empty-symbols',
212-
'Can\'t start or end with empty symbols',
213-
value => {
214-
if (!value) {
215-
return true;
216-
}
217-
const invalidSymbolIndex = invalidSymbols.findIndex(invalidSymbol => (
218-
value.startsWith(invalidSymbol) || value.endsWith(invalidSymbol)
219-
));
220-
221-
return invalidSymbolIndex === -1;
222-
},
223-
)
224-
.min(3, 'Should be from 3 to 16 characters')
225-
.max(16, 'Should be from 3 to 16 characters')
226-
.matches(
227-
/^[a-zA-Z]+[a-zA-Z0-9_-\s{1}][a-zA-Z0-9_]+$/i,
228-
'Should contain Latin letters, numbers and underscores. Only begin with latin letter',
229-
)
230-
.required('Nickname required'),
231-
email: Yup
232-
.string()
233-
.email('Invalid email')
234-
.test(
235-
'exclude-braille-pattern-blank',
236-
'Invalid email',
237-
value => (
238-
value
239-
? !value.includes(braillePatternBlank)
240-
: true
241-
),
242-
)
243-
.matches(/^[a-zA-Z0-9]{1}[^;]*@[^;]*$/i, 'Should begin and end with a Latin letter or number')
244-
.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')
245-
.required('Email required'),
246-
password: Yup
247-
.string()
248-
.matches(/^\S*$/, 'Can\'t contain empty symbols')
249-
.min(6, 'Should be from 6 to 16 characters')
250-
.max(16, 'Should be from 6 to 16 characters')
251-
.required('Password required'),
252-
passwordConfirmation: Yup
253-
.string()
254-
.required('Confirmation required')
255-
.oneOf([Yup.ref('password')], 'Passwords must match'),
256-
}),
201+
validationSchema: Yup.object().shape(schemas.signUp),
257202
onSubmit: formData => {
258203
axios
259204
.post('/api/v1/users', formData, {
@@ -314,9 +259,7 @@ function ResetPassword() {
314259
initialValues: {
315260
email: '',
316261
},
317-
validationSchema: Yup.object().shape({
318-
email: Yup.string().email('Invalid email').required('Email required'),
319-
}),
262+
validationSchema: Yup.object().shape(schemas.resetPassword),
320263
onSubmit: ({ email }) => {
321264
axios
322265
.post('/api/v1/reset_password', { email }, {

‎services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22

33
import Slider from 'calcite-react/Slider';
44
import cn from 'classnames';
@@ -10,6 +10,7 @@ import * as Icon from 'react-feather';
1010
import * as Yup from 'yup';
1111

1212
import languages from '../../config/languages';
13+
import schemas from '../../formik';
1314
import { createPlayer } from '../../lib/sound';
1415

1516
const playingLanguages = Object.entries(languages);
@@ -49,41 +50,25 @@ const TextInput = ({
4950
);
5051
};
5152

53+
const player = createPlayer();
54+
55+
const playSound = (type, volume) => {
56+
player.stop();
57+
player[type].play('win', volume);
58+
};
59+
5260
const UserSettingsForm = ({ onSubmit, settings }) => {
53-
const initialValues = {
61+
const initialValues = useMemo(() => ({
5462
name: settings.name,
5563
soundSettings: {
5664
type: settings.soundSettings.type,
5765
level: settings.soundSettings.level,
5866
},
5967
clan: settings.clan || '',
6068
lang: settings.lang || '',
61-
};
62-
63-
const player = createPlayer();
64-
65-
const playSound = (type, volume) => {
66-
player.stop();
67-
player[type].play('win', volume);
68-
};
69-
70-
const validationSchema = Yup.object({
71-
name: Yup.string()
72-
.strict()
73-
.required("Field can't be empty")
74-
.min(3, 'Should be at least 3 characters')
75-
// .max(5, 'Should be 16 character(s) or less')
76-
.test(
77-
'max',
78-
'Should be 16 character(s) or less',
79-
(name = '') => (
80-
settings.name === name || name.length <= 16
81-
),
82-
)
83-
.trim(),
84-
clan: Yup.string()
85-
.strict(),
86-
});
69+
}), [settings]);
70+
71+
const validationSchema = useMemo(() => Yup.object(schemas.userSettings(settings)), [settings]);
8772

8873
return (
8974
<Formik

0 commit comments

Comments
 (0)