edit register form layout

src/app/actions/definitions.ts

@@ -24,6 +24,10 @@ export const SignupFormSchema = z
 			.string()
 			.min(2, { error: 'register-error-name' })
 			.regex(/^[^0-9]*$/, { message: 'register-error-no-digits' })
+			.refine(
+				(value) => !/\p{Emoji}/u.test(value),
+				{ message: 'no-emoji-allowed' }
+			)
 			.trim(),
 		email: z
 			.string()
@@ -44,6 +48,10 @@ export const SignupFormSchema = z
 			.min(8, { error: 'register-error-password-symbols' })
 			.regex(/[a-zA-Zа-яёА-ЯЁ]/, { error: 'register-error-password-one-letter' })
 			.regex(/[0-9]/, { error: 'register-error-password-one-digit' })
+			.refine(
+				(value) => !/\p{Emoji}/u.test(value),
+				{ message: 'no-emoji-allowed' }
+			)
 			.trim(),
 		confirm_password: z
 			.string(),

src/app/styles/global-styles.scss

@@ -97,8 +97,9 @@
 .show-password-button {
 	cursor: pointer;
 	position: absolute;
-	top: 0px;
+	top: 50%;
-	right: 6px;
+	right: 10px;
+	transform: translateY(-50%);
 
 	svg {
 		width: 16px;
@@ -108,7 +109,7 @@
 
 	&.show {
 		svg {
-			color: black;
+			color: #8b5cf6;
 		}
 	}
 }

src/app/styles/login.module.scss

@@ -75,6 +75,10 @@
 	&[type="password"]::-ms-reveal {
 		display: none;
 	}
+
+	&.password {
+		padding-right: 32px;
+	}
 }
 
 .form-options {

src/app/ui/forms/login-form.tsx

@@ -42,6 +42,9 @@ export default function LoginForm() {
 					className={`${styles['form-input']}`}
 					placeholder={t('enter-email')}
 					defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
+					onChange={(e) => {
+						e.target.value = e.target.value.toLocaleLowerCase();
+					}}
 				/>
 				{state?.error?.email && (
 					<p className={`${styles['form-error']}`}>
@@ -58,7 +61,7 @@ export default function LoginForm() {
 						type={showPassword ? "text" : "password"}
 						id="password"
 						name="password"
-						className={`${styles['form-input']}`}
+						className={`${styles['form-input']} ${styles['password']}`}
 						placeholder={t('enter-password')}
 					/>
 					<button

src/app/ui/forms/register-form.tsx

@@ -26,28 +26,11 @@ export default function RegisterForm() {
 		setFormState(state);
 	}, [state])
 
-	function handleMouseDown(target: 'password' | 'confirm-password') {
+	function showPassowrd(target: 'password' | 'confirm-password') {
 		if (target === 'password') {
-			setShowPassword(true);
+			setShowPassword(!showPassword);
 		} else {
-			setShowConfirmPassword(true);
+			setShowConfirmPassword(!showConfirmPassword);
-		}
-	}
-
-	function handleMouseUp(target: 'password' | 'confirm-password') {
-		if (target === 'password') {
-			setShowPassword(false);
-		} else {
-			setShowConfirmPassword(false);
-		}
-
-	}
-
-	function handleMouseOut(target: 'password' | 'confirm-password') {
-		if (target === 'password') {
-			setShowPassword(false);
-		} else {
-			setShowConfirmPassword(false);
 		}
 	}
 
@@ -145,7 +128,7 @@ export default function RegisterForm() {
 					</p>
 				)}
 			</div>
-			<div className={`${styles['form-row']}`}>
+
 			<div className={`${styles['form-group']}`}>
 				<label className={`${styles['form-label']} ${styles['required']}`}>
 					{t('email-adress')}
@@ -157,7 +140,10 @@ export default function RegisterForm() {
 					className={`${styles['form-input']}`}
 					placeholder="ivan@example.com"
 					defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
-						onChange={onChangeHandler}
+					onChange={(e) => {
+						e.target.value = e.target.value.toLocaleLowerCase();
+						onChangeHandler(e)
+					}}
 				/>
 				{formState?.error?.email && (
 					<p className="text-sm text-red-500">
@@ -180,7 +166,7 @@ export default function RegisterForm() {
 					</p>
 				)}
 			</div>
-			</div>
+
 			<div className={`${styles['form-group']}`}>
 				<label
 					className={`${styles['form-label']}`}
@@ -196,7 +182,7 @@ export default function RegisterForm() {
 					defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
 				/>
 			</div>
-			<div className={`${styles['form-row']}`}>
+
 			<div className={`${styles['form-group']}`}>
 				<label className={`${styles['form-label']} ${styles['required']}`}>
 					{t('password')}
@@ -207,21 +193,16 @@ export default function RegisterForm() {
 					<input
 						ref={passwordRef}
 						type={showPassword ? "text" : "password"}
-							id="password" name="password"
+						id="password"
-							className={`${styles['form-input']}`}
+						name="password"
+						className={`${styles['form-input']} ${styles['password']}`}
 						placeholder={t('password-placeholder')}
 						defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
 						onChange={onChangeHandler}
 					/>
 					<button
-							onMouseDown={() => {
+						onClick={() => {
-								handleMouseDown('password');
+							showPassowrd('password')
-							}}
-							onMouseUp={() => {
-								handleMouseUp('password');
-							}}
-							onMouseOut={() => {
-								handleMouseOut('password')
 						}}
 						type="button"
 						className={`show-password-button ${showPassword ? 'show' : ''}`}
@@ -248,23 +229,17 @@ export default function RegisterForm() {
 						type={showConfirmPassword ? "text" : "password"}
 						id="confirm_password"
 						name="confirm_password"
-							className={`${styles['form-input']}`}
+						className={`${styles['form-input']} ${styles['password']}`}
 						placeholder={t('repeat-password')}
 						defaultValue={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
 						onChange={onChangeHandler}
 					/>
 					<button
-							onMouseDown={() => {
+						onClick={() => {
-								handleMouseDown('confirm-password');
+							showPassowrd('confirm-password');
-							}}
-							onMouseUp={() => {
-								handleMouseUp('confirm-password');
-							}}
-							onMouseOut={() => {
-								handleMouseOut('confirm-password');
 						}}
 						type="button"
-							className={`show-password-button ${showPassword ? 'show' : ''}`}
+						className={`show-password-button ${showConfirmPassword ? 'show' : ''}`}
 					>
 						<IconEye />
 					</button>
@@ -275,7 +250,7 @@ export default function RegisterForm() {
 					</p>
 				)}
 			</div>
-			</div>
+
 			<div className={`${styles['form-checkbox']}`}>
 				<input
 					type="checkbox"

src/i18n/messages/en.json

@@ -170,6 +170,7 @@
 		"email-invalid": "Invalid email address",
 		"email-too-long": "Email is too long",
 		"password-too-long": "Password must be less than 50 characters",
-		"email-no-uppercase": "Email must not contain capital letters"
+		"email-no-uppercase": "Email must not contain capital letters.",
+		"no-emoji-allowed": "The use of emoji is prohibited."
 	}
 }

src/i18n/messages/ru.json

@@ -170,6 +170,7 @@
 		"email-invalid": "Неверный адрес электронной почты",
 		"email-too-long": "Email слишком длинный.",
 		"password-too-long": "Пароль должен содержать менее 50 символов.",
-		"email-no-uppercase": "Email не должен содержать заглавных букв"
+		"email-no-uppercase": "Email не должен содержать заглавных букв.",
+		"no-emoji-allowed": "Использование эмодзи запрещено."
 	}
 }