Merge pull request #46 from gangjun06/feat/39

Localize Web UI (#39)
Infisical · Dec 27, 2022 · c9dc024 · c9dc024
2 parents 876c5f5 + cc2803a
commit c9dc024
Show file tree

Hide file tree

Showing 58 changed files with 2,085 additions and 644 deletions.
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -48,6 +48,8 @@ services:
       - ./frontend/public:/app/public
       - ./frontend/styles:/app/styles
       - ./frontend/components:/app/components
+      - ./frontend/locales:/app/locales
+      - ./frontend/next-i18next.config.js:/app/next-i18next.config.js
     env_file: .env
     environment:
       - NEXT_PUBLIC_ENV=development

diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -32,3 +32,5 @@ yarn-error.log*
 .env.production.local
 .vercel
 .env.infisical
+
+.vscode
diff --git a/frontend/components/basic/Layout.tsx b/frontend/components/basic/Layout.tsx
diff --git a/frontend/components/basic/dialog/AddIncidentContactDialog.js b/frontend/components/basic/dialog/AddIncidentContactDialog.js
@@ -1,4 +1,5 @@
 import { Fragment, useState } from "react";
+import { useTranslation } from "next-i18next";
 import { Dialog, Transition } from "@headlessui/react";
 
 import addIncidentContact from "~/pages/api/organization/addIncidentContact";
@@ -14,6 +15,7 @@ const AddIncidentContactDialog = ({
   setIncidentContacts,
 }) => {
   let [incidentContactEmail, setIncidentContactEmail] = useState("");
+  const { t } = useTranslation();
 
   const submit = () => {
     setIncidentContacts(
@@ -59,17 +61,16 @@ const AddIncidentContactDialog = ({
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-400"
                   >
-                    Add an Incident Contact
+                    {t("section-incident:add-dialog.title")}
                   </Dialog.Title>
                   <div className="mt-2 mb-2">
                     <p className="text-sm text-gray-500">
-                      This contact will be notified in the unlikely event of a
-                      severe incident.
+                      {t("section-incident:add-dialog.description")}
                     </p>
                   </div>
                   <div className="max-h-28">
                     <InputField
-                      label="Email"
+                      label={t("common:email")}
                       onChangeHandler={setIncidentContactEmail}
                       type="varName"
                       value={incidentContactEmail}
@@ -81,7 +82,7 @@ const AddIncidentContactDialog = ({
                     <Button
                       onButtonPressed={submit}
                       color="mineshaft"
-                      text="Add Incident Contact"
+                      text={t("section-incident:add-dialog.add-incident")}
                       size="md"
                     />
                   </div>

diff --git a/frontend/components/basic/dialog/AddProjectMemberDialog.js b/frontend/components/basic/dialog/AddProjectMemberDialog.js
@@ -1,5 +1,6 @@
 import { Fragment, useState } from "react";
 import { useRouter } from "next/router";
+import { Trans, useTranslation } from "next-i18next";
 import { Dialog, Transition } from "@headlessui/react";
 
 import Button from "../buttons/Button";
@@ -15,6 +16,7 @@ const AddProjectMemberDialog = ({
   setEmail,
 }) => {
   const router = useRouter();
+  const { t } = useTranslation();
 
   return (
     <div className="z-50">
@@ -49,48 +51,55 @@ const AddProjectMemberDialog = ({
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-400 z-50"
                     >
-                      Add a member to your project
+                      {t("section-members:add-dialog.add-member-to-project")}
                     </Dialog.Title>
                   ) : (
                     <Dialog.Title
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-400 z-50"
                     >
-                      All the users in your organization are already invited.
+                      {t("section-members:add-dialog.already-all-invited")}
                     </Dialog.Title>
                   )}
                   <div className="mt-2 mb-4">
                     {data?.length > 0 ? (
                       <div className="flex flex-col">
                         <p className="text-sm text-gray-500">
-                          The user will receive an email with the instructions.
+                          {t("section-members:add-dialog.user-will-email")}
                         </p>
                         <div className="">
-                          <button
-                            type="button"
-                            className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                            onClick={() =>
-                              router.push("/settings/org/" + router.query.id)
-                            }
-                          >
-                            If you are looking to add users to your org,
-                          </button>
-                          <button
-                            type="button"
-                            className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                            onClick={() =>
-                              router.push(
-                                "/settings/org/" + router.query.id + "?invite"
-                              )
-                            }
-                          >
-                            click here.
-                          </button>
+                          <Trans
+                            i18nKey="section-members:add-dialog.looking-add"
+                            components={[
+                              // eslint-disable-next-line react/jsx-key
+                              <button
+                                type="button"
+                                className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                onClick={() =>
+                                  router.push(
+                                    "/settings/org/" + router.query.id
+                                  )
+                                }
+                              />,
+                              // eslint-disable-next-line react/jsx-key
+                              <button
+                                type="button"
+                                className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                onClick={() =>
+                                  router.push(
+                                    "/settings/org/" +
+                                      router.query.id +
+                                      "?invite"
+                                  )
+                                }
+                              />,
+                            ]}
+                          />
                         </div>
                       </div>
                     ) : (
                       <p className="text-sm text-gray-500">
-                        Add more users to the organization first.
+                        {t("section-members:add-dialog.add-user-org-first")}
                       </p>
                     )}
                   </div>
@@ -110,7 +119,7 @@ const AddProjectMemberDialog = ({
                         <Button
                           onButtonPressed={submitModal}
                           color="mineshaft"
-                          text="Add Member"
+                          text={t("section-members:add-member")}
                           size="md"
                         />
                       </div>
@@ -120,7 +129,7 @@ const AddProjectMemberDialog = ({
                           router.push("/settings/org/" + router.query.id)
                         }
                         color="mineshaft"
-                        text="Add Users to Organization"
+                        text={t("section-members:add-dialog.add-user-to-org")}
                         size="md"
                       />
                     )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,3 +32,5 @@ yarn-error.log* @@
     .env.production.local
     .vercel
     .env.infisical
+    .vscode