client side i18n fully implemented

components/ModalContent/NewUserModal.tsx

@@ -3,6 +3,7 @@ import Modal from "../Modal";
 import useUserStore from "@/store/admin/users";
 import TextInput from "../TextInput";
 import { FormEvent, useState } from "react";
+import { useTranslation, Trans } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -18,15 +19,14 @@ type FormData = {
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
 
 export default function NewUserModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { addUser } = useUserStore();
-
   const [form, setForm] = useState<FormData>({
     name: "",
     username: "",
     email: emailEnabled ? "" : undefined,
     password: "",
   });
-
   const [submitLoader, setSubmitLoader] = useState(false);
 
   async function submit(event: FormEvent<HTMLFormElement>) {
@@ -45,11 +45,11 @@ export default function NewUserModal({ onClose }: Props) {
 
       if (checkFields()) {
         if (form.password.length < 8)
-          return toast.error("Passwords must be at least 8 characters.");
+          return toast.error(t("password_length_error"));
 
         setSubmitLoader(true);
 
-        const load = toast.loading("Creating Account...");
+        const load = toast.loading(t("creating_account"));
 
         const response = await addUser(form);
 
@@ -57,29 +57,29 @@ export default function NewUserModal({ onClose }: Props) {
         setSubmitLoader(false);
 
         if (response.ok) {
-          toast.success("User Created!");
+          toast.success(t("user_created"));
           onClose();
         } else {
           toast.error(response.data as string);
         }
       } else {
-        toast.error("Please fill out all the fields.");
+        toast.error(t("fill_all_fields_error"));
       }
     }
   }
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Create New User</p>
+      <p className="text-xl font-thin">{t("create_new_user")}</p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <form onSubmit={submit}>
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
-            <p className="mb-2">Display Name</p>
+            <p className="mb-2">{t("display_name")}</p>
             <TextInput
-              placeholder="Johnny"
+              placeholder={t("placeholder_johnny")}
               className="bg-base-200"
               onChange={(e) => setForm({ ...form, name: e.target.value })}
               value={form.name}
@@ -88,9 +88,9 @@ export default function NewUserModal({ onClose }: Props) {
 
           {emailEnabled ? (
             <div>
-              <p className="mb-2">Email</p>
+              <p className="mb-2">{t("email")}</p>
               <TextInput
-                placeholder="johnny@example.com"
+                placeholder={t("placeholder_email")}
                 className="bg-base-200"
                 onChange={(e) => setForm({ ...form, email: e.target.value })}
                 value={form.email}
@@ -100,13 +100,13 @@ export default function NewUserModal({ onClose }: Props) {
 
           <div>
             <p className="mb-2">
-              Username{" "}
+              {t("username")}{" "}
               {emailEnabled && (
-                <span className="text-xs text-neutral">(Optional)</span>
+                <span className="text-xs text-neutral">{t("optional")}</span>
               )}
             </p>
             <TextInput
-              placeholder="john"
+              placeholder={t("placeholder_john")}
               className="bg-base-200"
               onChange={(e) => setForm({ ...form, username: e.target.value })}
               value={form.username}
@@ -114,7 +114,7 @@ export default function NewUserModal({ onClose }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">Password</p>
+            <p className="mb-2">{t("password")}</p>
             <TextInput
               placeholder="••••••••••••••"
               className="bg-base-200"
@@ -127,8 +127,7 @@ export default function NewUserModal({ onClose }: Props) {
         <div role="note" className="alert alert-note mt-5">
           <i className="bi-exclamation-triangle text-xl" />
           <span>
-            <b>Note:</b> Please make sure you inform the user that they need to
-            change their password.
+            <Trans i18nKey="password_change_note" components={[<b />]} />
           </span>
         </div>
 
@@ -137,7 +136,7 @@ export default function NewUserModal({ onClose }: Props) {
             className="btn btn-accent dark:border-violet-400 text-white ml-auto"
             type="submit"
           >
-            Create User
+            {t("create_user")}
           </button>
         </div>
       </form>