wip: Add API response localization and update form submission handling in AddNewUser component

Author: aeltorio

client/src/locales/base/ar-SA.json

@@ -46,5 +46,6 @@
   "name": "اسم",
   "please-enter-a-oauth-id": "الرجاء إدخال معرف Oauth 2.0 (sub)",
   "oauth-id": "OAuth 2.0 ID (sub)",
-  "enter-the-oauth-id": "أدخل معرف Oauth 2.0 (sub)"
+  "enter-the-oauth-id": "أدخل معرف Oauth 2.0 (sub)",
+  "api-response": "استجابة API"
 }

client/src/locales/base/en-US.json

@@ -46,5 +46,6 @@
   "name": "Name",
   "please-enter-a-oauth-id": "Please enter an OAuth 2.0 id (sub)",
   "oauth-id": "OAuth 2.0 id (sub)",
-  "enter-the-oauth-id": "Enter the OAuth 2.0 id (sub)"
+  "enter-the-oauth-id": "Enter the OAuth 2.0 id (sub)",
+  "api-response": "API Response"
 }

client/src/locales/base/es-ES.json

@@ -46,5 +46,6 @@
   "name": "Nombre",
   "please-enter-a-oauth-id": "Ingrese una ID de OAuth 2.0 (sub)",
   "oauth-id": "OAuth 2.0 ID (sub)",
-  "enter-the-oauth-id": "Ingrese la ID de OAuth 2.0 (sub)"
+  "enter-the-oauth-id": "Ingrese la ID de OAuth 2.0 (sub)",
+  "api-response": "Respuesta de la API"
 }

client/src/locales/base/fr-FR.json

@@ -46,5 +46,6 @@
   "name": "Nom",
   "please-enter-a-oauth-id": "Veuillez saisir un ID OAuth 2.0 (sub)",
   "oauth-id": "OAuth 2.0 ID (sub)",
-  "enter-the-oauth-id": "Entrez l'id OAuth 2.0 (sub)"
+  "enter-the-oauth-id": "Entrez l'id OAuth 2.0 (sub)",
+  "api-response": "Réponse de l'API"
 }

client/src/locales/base/he-IL.json

@@ -46,5 +46,6 @@
   "name": "שֵׁם",
   "please-enter-a-oauth-id": "אנא הזן מזהה OAuth 2.0 (sub)",
   "oauth-id": "OAuth 2.0 ID (sub)",
-  "enter-the-oauth-id": "הזן את מזהה OAuth 2.0 (Sub)"
+  "enter-the-oauth-id": "הזן את מזהה OAuth 2.0 (Sub)",
+  "api-response": "תגובת API"
 }

client/src/locales/base/zh-CN.json

@@ -46,5 +46,6 @@
   "name": "姓名",
   "please-enter-a-oauth-id": "请输入OAuth 2.0 ID（sub）",
   "oauth-id": "OAuth 2.0 ID（sub）",
-  "enter-the-oauth-id": "输入OAuth 2.0 ID（sub）"
+  "enter-the-oauth-id": "输入OAuth 2.0 ID（sub）",
+  "api-response": "API响应"
 }

client/src/pages/add-new-user.tsx

@@ -7,25 +7,33 @@ import { Input } from "@heroui/input";
 
 import { title } from "@/components/primitives";
 import DefaultLayout from "@/layouts/default";
-import { userHasPermission } from "@/components/auth0";
+import { postJsonToSecuredApi, userHasPermission } from "@/components/auth0";
 
 export default function AddNewUser() {
   const { t } = useTranslation();
   const { isAuthenticated, getAccessTokenSilently } = useAuth0();
 
   const [hasPermission, setHasPermission] = useState(false);
-  const [submitted, setSubmitted] = useState(
+  const [apiResponse, setApiResponse] = useState(
     null as {
       [k: string]: FormDataEntryValue;
     } | null,
   );
 
-  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const data = Object.fromEntries(new FormData(e.currentTarget));
+    const ids = [data["oauthId"] as string];
+    const name = data["name"] as string;
 
-    setSubmitted(data);
+    const apiResponse = await postJsonToSecuredApi(
+      `${import.meta.env.API_BASE_URL}/tester`,
+      { name, ids },
+      getAccessTokenSilently,
+    );
+
+    setApiResponse(apiResponse);
   };
 
   useEffect(() => {
@@ -38,7 +46,9 @@ export default function AddNewUser() {
               getAccessTokenSilently,
             ),
           );
-          console.log("You have permission to add a new user.");
+          console.log(
+            `You have ${hasPermission ? "" : "not "}permission to add a new user.`,
+          );
         } catch (error) {
           console.log(error as Error);
         }
@@ -60,28 +70,29 @@ export default function AddNewUser() {
           <Form className="w-full max-w-xs" onSubmit={onSubmit}>
             <Input
               isRequired
-              errorMessage={t('please-enter-a-name')}
-              label={t('name')}
+              errorMessage={t("please-enter-a-name")}
+              label={t("name")}
               labelPlacement="outside"
               name="name"
-              placeholder={t('enter-the-user-name')}
+              placeholder={t("enter-the-user-name")}
               type="text"
             />
             <Input
               isRequired
-              errorMessage={t('please-enter-a-oauth-id')}
-              label={t('oauth-id')}
+              errorMessage={t("please-enter-a-oauth-id")}
+              label={t("oauth-id")}
               labelPlacement="outside"
               name="oauthId"
-              placeholder={t('enter-the-oauth-id')}
+              pattern="^[a-zA-Z0-9]{4,30}\|[a-zA-Z0-9]{4,30}$"
+              placeholder={t("enter-the-oauth-id")}
               type="text"
             />
             <Button type="submit" variant="bordered">
-              {t('submit')}
+              {t("submit")}
             </Button>
-            {submitted && (
+            {apiResponse && (
               <div className="text-small text-default-500">
-                You submitted: <code>{JSON.stringify(submitted)}</code>
+                {t('api-response')}: <code>{JSON.stringify(apiResponse)}</code>
               </div>
             )}
           </Form>