From 1efdb06d3be2b412d25fd2ef6047308d6baf31ce Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Mon, 9 Mar 2026 14:16:26 +0700
Subject: [PATCH] add input mask for phone in user settings page

---
 .../ui/settings/personal-data-settings.tsx    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/settings/personal-data-settings.tsx b/src/app/ui/settings/personal-data-settings.tsx
index a81dbfd..686450d 100644
--- a/src/app/ui/settings/personal-data-settings.tsx
+++ b/src/app/ui/settings/personal-data-settings.tsx
@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useActionState, useState, useEffect } from 'react';
 import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
+import { InputMask, format } from '@react-input/mask';
+import styles from '@/app/styles/module/login.module.scss';
 
 export default function PersonalDataSettings() {
 	const [errorMessage, formAction, isPending] = useActionState(
@@ -70,12 +72,23 @@ export default function PersonalDataSettings() {
 						<label className="form-label">
 							{t('phone')}:
 						</label>
-						<input
+						<InputMask
 							type="phone"
+							id="phone"
 							name="phone"
-							className="form-input"
-							defaultValue={userData?.phone}
+							className={`${styles['form-input']}`}
+							mask="+7 (___) ___-__-__"
+							replacement={{ _: /\d/ }}
+							value={(format(userData?.phone ? userData?.phone : '', {
+								mask: "+7 (___) ___-__-__",
+								replacement: { _: /\d/ }
+							}))}
+							disabled={true}
+							onChange={(e) => {
+							}}
+							placeholder="+7 (999) 123-45-67"
 						/>
+
 					</div>
 					<button type="submit" className="btn btn-primary">
 						{t('save-changes')}