refactor: CreateOAuthModal to use React Hook Form

apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx

@@ -1,6 +1,8 @@
-import { TextInput, Field, FieldLabel, FieldRow, FieldError, Box } from '@rocket.chat/fuselage';
-import type { ReactElement, FormEvent, SyntheticEvent } from 'react';
-import React, { useState } from 'react';
+import { TextInput, Field, FieldLabel, FieldRow, FieldError, Box, FieldHint } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../../../../components/GenericModal';
@@ -10,43 +12,49 @@ type CreateOAuthModalProps = {
 	onClose: () => void;
 };
 
+type CreateOAuthModalFields = {
+	customOAuthName: string;
+};
+
 const CreateOAuthModal = ({ onConfirm, onClose }: CreateOAuthModalProps): ReactElement => {
-	const [text, setText] = useState<string>('');
-	const [error, setError] = useState<string>('');
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<CreateOAuthModalFields>({
+		defaultValues: {
+			customOAuthName: '',
+		},
+	});
+
 	const { t } = useTranslation();
 
-	const handleConfirm = (e: SyntheticEvent): void => {
-		e.preventDefault();
-		if (!text.length) {
-			setError(t('Required_field', { field: t('Name') }));
-			return;
-		}
-		onConfirm(text);
-	};
+	const customOAuthNameId = useUniqueId();
 
 	return (
 		<GenericModal
-			wrapperFunction={(props) => <Box is='form' onSubmit={handleConfirm} {...props} />}
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(({ customOAuthName }) => onConfirm(customOAuthName))} {...props} />}
 			title={t('Add_custom_oauth')}
 			confirmText={t('Add')}
 			onCancel={onClose}
 			onClose={onClose}
-			onConfirm={handleConfirm}
 		>
 			<Field>
-				<FieldLabel>{t('Give_a_unique_name_for_the_custom_oauth')}</FieldLabel>
+				<FieldLabel htmlFor={customOAuthNameId}>{t('Custom_OAuth_name')}</FieldLabel>
 				<FieldRow>
 					<TextInput
-						error={error}
-						placeholder={t('Custom_oauth_unique_name')}
-						value={text}
-						onChange={(e: FormEvent<HTMLInputElement>): void => {
-							setText(e.currentTarget.value);
-							setError('');
-						}}
+						id={customOAuthNameId}
+						{...register('customOAuthName', { required: t('Required_field', { field: t('Custom_OAuth_name') }) })}
+						aria-required='true'
+						aria-describedby={`${customOAuthNameId}-error ${customOAuthNameId}-hint`}
 					/>
 				</FieldRow>
-				{error && <FieldError>{error}</FieldError>}
+				<FieldHint id={`${customOAuthNameId}-hint`}>{t('Custom_OAuth_name_hint')}</FieldHint>
+				{errors.customOAuthName && (
+					<FieldError aria-live='assertive' id={`${customOAuthNameId}-error`}>
+						{errors.customOAuthName.message}
+					</FieldError>
+				)}
 			</Field>
 		</GenericModal>
 	);

packages/i18n/src/locales/af.i18n.json

@@ -784,7 +784,6 @@
   "Custom_Emoji_Updated_Successfully": "Gepasmaakte emoji suksesvol opgedateer",
   "Custom_Fields": "Aangepaste velde",
   "Custom_oauth_helper": "Wanneer u u OAuth-verskaffer opstel, moet u 'n terugbel-URL in kennis stel. Gebruik <pre>%s</pre>.",
-  "Custom_oauth_unique_name": "Custom oauth unieke naam",
   "Custom_Script_Logged_In": "Aangepaste skrif vir aangemelde gebruikers",
   "Custom_Script_Logged_Out": "Aangepaste skrif vir aangemeld gebruikers",
   "Custom_Scripts": "Gepasmaakte skrifte",
@@ -1196,7 +1195,6 @@
   "Gaming": "gaming",
   "General": "algemene",
   "github_no_public_email": "Jy het geen e-pos as publieke e-pos in jou GitHub-rekening nie",
-  "Give_a_unique_name_for_the_custom_oauth": "Gee 'n unieke naam vir die persoonlike oauth",
   "strike": "staking",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Gee die aansoek 'n naam. Dit sal deur u gebruikers gesien word.",
   "Global": "Global",

packages/i18n/src/locales/ar.i18n.json

@@ -1272,7 +1272,6 @@
   "Custom_Field_Not_Found": "الحقول المخصصة غير موجودة",
   "Custom_Integration": "تكامل الحقول المخصصة",
   "Custom_oauth_helper": "عند إعداد موفر OAuth لديك، سيتعين عليك الإبلاغ عن عنوان URL الخاص بإعادة الاتصال. استخدم <pre>‎%s</pre> .",
-  "Custom_oauth_unique_name": "الاسم الفريد المخصص لـ oauth",
   "Custom_Script_Logged_In": "البرنامج النصي المخصص للمستخدمين المسجلين الدخول",
   "Custom_Script_Logged_In_Description": "البرنامج النصي المخصص الذي سيتم تشغيله دائمًا ولأي مستخدم قام بتسجيل الدخول. على سبيل المثال (كلما دخلت الدردشة وكنت مسجلاً الدخول)",
   "Custom_Script_Logged_Out": "البرنامج النصي المخصص للمستخدمين المسجلين الخروج",
@@ -2031,7 +2030,6 @@
   "get-server-info": "الحصول على معلومات الخادم",
   "github_no_public_email": "ليس لديك أي بريد إلكتروني عام في حسابك على Github",
   "github_HEAD": "العنوان",
-  "Give_a_unique_name_for_the_custom_oauth": "امنح اسمًا فريدًا مخصصًا لـ oauth",
   "strike": "شطب",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "امنح التطبيق اسمًا. وسيظهر للمستخدمين لديك.",
   "Global": "عام",

packages/i18n/src/locales/az.i18n.json

@@ -784,7 +784,6 @@
   "Custom_Emoji_Updated_Successfully": "Xüsusi emoji uğurla güncəllənir",
   "Custom_Fields": "Xüsusi sahələr",
   "Custom_oauth_helper": "OAuth Provayderinizi qurarkən, bir Geri Axtarış URL'sini bildirməlisiniz. <pre>%s</pre>istifadə edin.",
-  "Custom_oauth_unique_name": "Xüsusi oauth unikal adı",
   "Custom_Script_Logged_In": "Daxil olanlar üçün xüsusi skript",
   "Custom_Script_Logged_Out": "Daxil olanlar üçün xüsusi skript",
   "Custom_Scripts": "Xüsusi skriptlər",
@@ -1196,7 +1195,6 @@
   "Gaming": "Oyun",
   "General": "Ümumi",
   "github_no_public_email": "GitHub hesabınızda ictimai e-poçt olaraq heç bir e-poçtunuz yoxdur",
-  "Give_a_unique_name_for_the_custom_oauth": "Xüsusi oauth üçün unikal bir ad verin",
   "strike": "tətil",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Ərizə bir ad verin. Bu, istifadəçilər tərəfindən görünəcək.",
   "Global": "Qlobal",

packages/i18n/src/locales/be-BY.i18n.json

@@ -803,7 +803,6 @@
   "Custom_Emoji_Updated_Successfully": "Прыстасаваныя смайлікі паспяхова абноўленыя",
   "Custom_Fields": "прыстасаваныя поля",
   "Custom_oauth_helper": "Падчас усталявання OAuth пастаўшчыка, вы павінны будзеце паведаміць Callback URL. Выкарыстоўвайце <pre>%s</pre>.",
-  "Custom_oauth_unique_name": "Прыстасаваныя OAuth унікальнае імя",
   "Custom_Script_Logged_In": "Карыстацкі скрыпт для зарэгістраваных карыстальнікаў",
   "Custom_Script_Logged_Out": "Карыстацкі скрыпт для логаут карыстальнікаў",
   "Custom_Scripts": "прыстасаваныя скрыпты",
@@ -1212,7 +1211,6 @@
   "Gaming": "азартныя гульні",
   "General": "агульны",
   "github_no_public_email": "У вас няма адрасы электроннай пошты ў якасці публічнай электроннай пошты ў вашым акаўнце GitHub",
-  "Give_a_unique_name_for_the_custom_oauth": "Дайце унікальнае імя для карыстацкага OAuth",
   "strike": "забастоўка",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Дайце дадаткам імя. Гэта будзе бачна вашымі карыстальнікамі.",
   "Global": "глабальнай",

packages/i18n/src/locales/bg.i18n.json

@@ -784,7 +784,6 @@
   "Custom_Emoji_Updated_Successfully": "Персонализираното емотико се актуализира успешно",
   "Custom_Fields": "Персонализирани полета",
   "Custom_oauth_helper": "Когато настройвате своя доставчик на OAuth, ще трябва да информирате URL адрес за обратно повикване. Използвайте <pre>%s</pre>.",
-  "Custom_oauth_unique_name": "Потребителско уникално име",
   "Custom_Script_Logged_In": "Персонализиран скрипт за регистрирани потребители",
   "Custom_Script_Logged_Out": "Персонализиран скрипт за излезли потребители",
   "Custom_Scripts": "Персонализирани скриптове",
@@ -1196,7 +1195,6 @@
   "Gaming": "игрален",
   "General": "Общ",
   "github_no_public_email": "Нямате имейл като публичен имейл в профила си в GitHub",
-  "Give_a_unique_name_for_the_custom_oauth": "Дайте уникално име за обичайното име",
   "strike": "стачка",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Дайте име на приложението. Това ще се види от вашите потребители.",
   "Global": "в световен мащаб",

packages/i18n/src/locales/bs.i18n.json

@@ -783,7 +783,6 @@
   "Custom_Emoji_Updated_Successfully": "Poseban emotikon je ažuriran.",
   "Custom_Fields": "Prilagođena polja",
   "Custom_oauth_helper": "Prilikom postavljanja OAuth Provider, morate namjestiti URL povratnog poziva. Koristite <pre> %s </pre> ,",
-  "Custom_oauth_unique_name": "Prilagođeno OAuth jedinstveno ime",
   "Custom_Script_Logged_In": "Prilagođena skripta za prijavljene korisnike",
   "Custom_Script_Logged_Out": "Prilagođena skripta za odjavljene korisnike",
   "Custom_Scripts": "Prilagođene skripte",
@@ -1192,7 +1191,6 @@
   "Gaming": "kockanje",
   "General": "Općenito",
   "github_no_public_email": "Nemaš nijedan javni email u svom GitHub računu",
-  "Give_a_unique_name_for_the_custom_oauth": "Daj jedinstveno ime prilagođenom OAuth",
   "strike": "precrtaj",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Dajte ime aplikaciji. To će korisnici vidjeti.",
   "Global": "Globalno",

packages/i18n/src/locales/ca.i18n.json

@@ -1258,7 +1258,6 @@
   "Custom_Field_Not_Found": "Camp personalitzat no trobat",
   "Custom_Integration": "Integració personalitzada",
   "Custom_oauth_helper": "Per configurar el proveïdor OAuth, heu d'establir un URL de retorn (callback). Useu <pre>%s</pre>.",
-  "Custom_oauth_unique_name": "Nom únic de OAuth personalitzat",
   "Custom_Script_Logged_In": "Script personalitzat per a usuaris que han iniciat sessió",
   "Custom_Script_Logged_In_Description": "Script personalitzat que s'executarà SEMPRE i per QUALSEVOL usuari que estigui connectat. (Cada vegada que ingressa a xat i està connectat)",
   "Custom_Script_Logged_Out": "Script personalitzat per als usuaris que han tancat sessió",
@@ -2000,7 +1999,6 @@
   "get-password-policy-mustContainAtLeastOneUppercase": "La contrasenya ha de tenir al menys una lletra majúscula",
   "github_no_public_email": "No tens cap adreça electrònica com a correu-e públic al teu compte de GitHub",
   "github_HEAD": "CAP",
-  "Give_a_unique_name_for_the_custom_oauth": "Estableix un nom únic per al OAuth personalitzat",
   "strike": "strike",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Bateja l'aplicació. El nom escollit serà visible als usuaris.",
   "Global": "Global",

packages/i18n/src/locales/cs.i18n.json

@@ -1072,7 +1072,6 @@
   "Custom_Emoji_Updated_Successfully": "Vlastní emotikona upravena",
   "Custom_Fields": "Vlastní pole",
   "Custom_oauth_helper": "Při nastavování OAuth poskytovatele, budete muset nastavit callback URL. Použijte <pre> %s </pre> ,",
-  "Custom_oauth_unique_name": "Název vlastní OAuth",
   "Custom_Script_Logged_In": "Vlastní skripty pro přihlášené uživatele",
   "Custom_Script_Logged_In_Description": "Vlastní skript, který bude spuštěn VŽDY a VŠEM přihlášeným uživatelům (pokaždé, když vstoupíte do chatu a jste přihlášeni)",
   "Custom_Script_Logged_Out": "Vlastní skripty pro odhlášené uživatele",
@@ -1713,7 +1712,6 @@
   "get-password-policy-mustContainAtLeastOneSpecialCharacter": "Heslo musí obsahovat alespoň jeden speciální znak",
   "get-password-policy-mustContainAtLeastOneUppercase": "Heslo musí obsahovat alespoň jedno velké písmeno",
   "github_no_public_email": "Ve svém účtu GitHub nemáte žádný e-mail jako veřejný",
-  "Give_a_unique_name_for_the_custom_oauth": "Zadejte jedinečný název pro vlastní OAuth",
   "strike": "přeškrtnuté",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Pojmenujte jak se bude aplikace jmenovat pro Vaše uživatele.",
   "Global": "Globální",

packages/i18n/src/locales/cy.i18n.json

@@ -783,7 +783,6 @@
   "Custom_Emoji_Updated_Successfully": "Diweddarwyd emoji Custom yn llwyddiannus",
   "Custom_Fields": "Maesau Custom",
   "Custom_oauth_helper": "Wrth sefydlu eich Darparwr OAuth, bydd yn rhaid i chi hysbysu URL Callback. Defnyddiwch <pre> %s</pre>.",
-  "Custom_oauth_unique_name": "Enw unigryw oauth arferol",
   "Custom_Script_Logged_In": "Sgript Custom ar gyfer Defnyddwyr Mewnol",
   "Custom_Script_Logged_Out": "Sgript Custom ar gyfer Defnyddwyr Wedi Logio",
   "Custom_Scripts": "Sgriptiau Custom",
@@ -1192,7 +1191,6 @@
   "Gaming": "Hapchwarae",
   "General": "Cyffredinol",
   "github_no_public_email": "Nid oes gennych unrhyw e-bost fel e-bost cyhoeddus yn eich cyfrif GitHub",
-  "Give_a_unique_name_for_the_custom_oauth": "Rhowch enw unigryw ar gyfer yr arferiad",
   "strike": "streic",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Rhowch enw'r cais. Bydd eich defnyddwyr yn gweld hyn.",
   "Global": "Byd-eang",

packages/i18n/src/locales/da.i18n.json

@@ -1148,7 +1148,6 @@
   "Custom_Fields": "Brugerdefinerede felter",
   "Custom_Field_Removed": "Brugerdefineret felt fjernet",
   "Custom_oauth_helper": "Når du konfigurerer din OAuth-leverandør, skal du oplyse en tilbagekalds-url. Brug <pre>%s</pre>.",
-  "Custom_oauth_unique_name": "Brugerdefineret unikt oauth-navn",
   "Custom_Script_Logged_In": "Brugerdefineret script til brugere der er logget ind ",
   "Custom_Script_Logged_In_Description": "Brugerdefineret script der ALTID kører og for ENHVER bruger der er logget ind. (F.eks. hver gang du går ind i chatten og du er logget ind)",
   "Custom_Script_Logged_Out": "Brugerdefineret script for brugere der er logget ud",
@@ -1802,7 +1801,6 @@
   "get-password-policy-minLength-label": "Mindst {{limit}} tegn",
   "get-password-policy-forbidRepeatingCharactersCount-label": "Max. {{limit}} gentagne tegn",
   "github_no_public_email": "Du har ikke nogen e-mail som offentlig e-mail i din GitHub-konto",
-  "Give_a_unique_name_for_the_custom_oauth": "Angiv et unikt navn til den brugerdefinerede oauth",
   "strike": "gennemstreget",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Giv applikationen et navn. Dette ses af dine brugere.",
   "Global": "Global",

packages/i18n/src/locales/de-AT.i18n.json

@@ -785,7 +785,6 @@
   "Custom_Emoji_Updated_Successfully": "Benutzerdefiniertes Emoji wurde erfolgreich aktualisiert",
   "Custom_Fields": "Benutzerdefinierte Felder",
   "Custom_oauth_helper": "Bei der Einrichtung muss eine Rückruf-URL angegeben werden. Benutze dafür folgende URL: <pre>%s</pre>",
-  "Custom_oauth_unique_name": "Name des OAuth-Kontos",
   "Custom_Script_Logged_In": "Benutzerdefiniertes Script für angemeldete Benutzer",
   "Custom_Script_Logged_Out": "Benutzerdefiniertes Script für abgemeldete Benutzer",
   "Custom_Scripts": "Benutzerdefinierte Skripts",
@@ -1198,7 +1197,6 @@
   "Gaming": "Gaming",
   "General": "Allgemeines",
   "github_no_public_email": "Sie haben keine öffentliche E-Mail-Adresse in Ihrem GitHub-Account.",
-  "Give_a_unique_name_for_the_custom_oauth": "Geben Sie dem benutzerdefinierten OAuth-Konto einen eindeutigen Namen.",
   "strike": "durchgestrichen",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Geben Sie der Anwendung einen Namen. Die Nutzer können den Namen sehen.",
   "Global": "Global",

packages/i18n/src/locales/de-IN.i18n.json

@@ -890,7 +890,6 @@
   "Custom_Emoji_Updated_Successfully": "Benutzerdefinierter Emoji erfolgreich aktualisiert",
   "Custom_Fields": "Benutzerdefinierte Felder",
   "Custom_oauth_helper": "Bei der Einrichtung Deines OAuth-Providers muss eine Rückruf-URL angegeben werden. Benutze dafür folgende URL: <pre>%s</pre>",
-  "Custom_oauth_unique_name": "Name des OAuth-Kontos",
   "Custom_Script_Logged_In": "Benutzerdefiniertes Skript für angemeldete Benutzer",
   "Custom_Script_Logged_Out": "Benutzerdefiniertes Skript für abgemeldete Benutzer",
   "Custom_Scripts": "Benutzerdefinierte Skripte",
@@ -1378,7 +1377,6 @@
   "Gaming": "Spiele",
   "General": "Allgemeines",
   "github_no_public_email": "Du hast keine öffentliche E-Mail-Adresse in Deinem GitHub-Account.",
-  "Give_a_unique_name_for_the_custom_oauth": "Gib dem benutzerdefinierten OAuth-Konto einen eindeutigen Namen.",
   "strike": "durchgestrichen",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Gib der Anwendung einen Namen. Alle Nutzer können diesen Namen sehen.",
   "Global": "Global",

packages/i18n/src/locales/de.i18n.json

@@ -1394,7 +1394,6 @@
   "Custom_OAuth_has_been_added": "Benutzerdefiniertes OAuth wurde hinzugefügt",
   "Custom_OAuth_has_been_removed": "Benutzerdefiniertes OAuth wurde entfernt",
   "Custom_oauth_helper": "Bei der Einrichtung Ihres OAuth-Providers muss eine Rückruf-URL angegeben werden. Benutzen Sie dafür folgende URL: <pre>%s</pre>",
-  "Custom_oauth_unique_name": "Name des OAuth-Kontos",
   "Custom_roles": "Benutzerdefinierte Rollen",
   "Custom_roles_upsell_add_custom_roles_workspace": "Fügen Sie benutzerdefinierte Rollen hinzu, die zu Ihrem Arbeitsbereich passen",
   "Custom_roles_upsell_add_custom_roles_workspace_description": "Mit benutzerdefinierten Rollen können Sie Berechtigungen für die Personen in Ihrem Workspace festlegen. Legen Sie alle Rollen fest, die Sie benötigen, um sicherzustellen, dass die Mitarbeiter ein sicheres Arbeitsumfeld haben.",
@@ -2261,7 +2260,6 @@
   "get-server-info_description": "Berechtigung zum Abrufen von Serverinformationen",
   "github_no_public_email": "Sie haben keine öffentliche E-Mail-Adresse in Ihrem GitHub-Account.",
   "github_HEAD": "HEAD",
-  "Give_a_unique_name_for_the_custom_oauth": "Geben Sie dem benutzerdefinierten OAuth-Konto einen eindeutigen Namen.",
   "strike": "durchgestrichen",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Geben Sie der Anwendung einen Namen. Alle Nutzer können diesen Namen sehen.",
   "Global": "Global",

packages/i18n/src/locales/el.i18n.json

@@ -791,7 +791,6 @@
   "Custom_Emoji_Updated_Successfully": "Το προσαρμοσμένο emoji ενημερώθηκε επιτυχώς",
   "Custom_Fields": "Προσαρμοσμένα πεδία",
   "Custom_oauth_helper": "Κατά τη ρύθμιση του Παρόχου OAuth σας, θα πρέπει να ενημερώσετε μια διεύθυνση URL επανάκλησης. Χρησιμοποιήστε <pre>%s</pre> .",
-  "Custom_oauth_unique_name": "Προσαρμοσμένο μοναδικό όνομα oauth",
   "Custom_Script_Logged_In": "Προσαρμοσμένο Σενάριο για τη Σύνδεση Χρηστών",
   "Custom_Script_Logged_Out": "Προσαρμοσμένη Σενάριο για την Αποσύνδεση Χρηστών",
   "Custom_Scripts": "Προσαρμοσμένα Σενάρια",
@@ -1203,7 +1202,6 @@
   "Gaming": "Παιχνίδια",
   "General": "Γενικός",
   "github_no_public_email": "Δεν έχεις κανένα δημόσιο email στον GitHub λογαριασμό σου",
-  "Give_a_unique_name_for_the_custom_oauth": "Δώστε ένα μοναδικό όνομα για την προσαρμοσμένη OAuth",
   "strike": "σβήσιμο",
   "Give_the_application_a_name_This_will_be_seen_by_your_users": "Δώστε στην εφαρμογή ένα όνομα. Αυτό θα φανεί από τους χρήστες σας.",
   "Global": "Παγκόσμια",