Add jp translations (#898)

* add japanese translations

* fix language selector error and change banner background image

* add brand and base64checkbox translation

* fix card title translations

Author: christiansamaniego-okta

public/images/diagram.png public/images/en.diagram.pngpublic/images/diagram.png renamed to public/images/en.diagram.png

@@ -192,9 +192,16 @@
   border-radius: .75rem;
   background-size: cover;
   background-position: 50%;
-  background-image: url("/images/diagram.png");
   background-repeat: no-repeat;
 
+  :global(html[lang="en"]) & {
+    background-image: url("/images/en.diagram.png");
+  }
+
+  :global(html[lang="ja"]) & {
+    background-image: url("/images/ja.diagram.png");
+  }
+
   @media #{$breakpoint-dimension-md} {
     border-bottom-left-radius: 12rem;
     grid-column: span 6;

public/images/ja.diagram.png

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { MouseEvent, useState } from "react";
+import React, { MouseEvent, useEffect, useState } from "react";
 import Select, {
   SingleValue,
   OptionsOrGroups,
@@ -51,6 +51,12 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
   const [modalState, setModalState] = useState<ModalStateValues>(
     ModalStateValues.CLOSED
   );
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPortalTarget(document.body);
+  }, []);
+
   const images = getBrandDictionary(languageCode);
 
   const languagePathPrefix: string =
@@ -199,7 +205,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
                     GroupBase<UiLanguageModel>
                   >
                 }
-                menuPortalTarget={document.body}
+                menuPortalTarget={portalTarget}
                 classNamePrefix={"language-select"}
                 isSearchable={false}
                 placeholder={currentLanguage.label}

src/features/common/components/auth0-cta/auth0-cta.module.scss

@@ -3,7 +3,6 @@ import styles from "./encoding-format-toggle-switch.module.scss";
 import { EncodingValues } from "@/features/common/values/encoding.values";
 import { useDecoderStore } from "@/features/decoder/services/decoder.store";
 import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
-import { Switch } from "react-aria-components";
 import clsx from "clsx";
 import { useEncoderStore } from "@/features/encoder/services/encoder.store";
 import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
@@ -44,7 +43,7 @@ export const EncodingFormatToggleSwitchComponent: React.FC<
     <div className={clsx(styles.base_switch, isEncoding && styles.encoder)}>
       <div className={styles.container}>
         <div className={styles.label}>
-          <span className={styles.fullLabel}>Base64URL Encoded?</span>
+          <span className={styles.fullLabel}>{dictionary.base64checkbox.label}</span>
         </div>
         <label
           className={styles.switch__container}

src/features/common/components/footer/footer.component.tsx

@@ -72,7 +72,7 @@ export const JwtInputComponent: React.FC<JwtInputComponentProps> = ({
           isSelected={autoFocusEnabled}
           onChange={(e) => handleCheckboxChange(e)}
         >
-          <span className={styles.checkbox__label}>Enable auto-focus</span>
+          <span className={styles.checkbox__label}>{dictionary.autoFocusLabel}</span>
         </CheckboxComponent>
       </div>
       <CardComponent

src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx

@@ -81,6 +81,7 @@ export const enHomeDictionary: HomeDictionaryModel = {
       title: "JSON Web Token (JWT)",
       compactTitle: "JWT",
       successMessage: "Valid JWT",
+      autoFocusLabel: "Enable auto-focus",
     },
     decodedHeader: {
       title: "Decoded Header",
@@ -170,7 +171,7 @@ export const enHomeDictionary: HomeDictionaryModel = {
     },
     encodedJwt: {
       title: "Encoded JWT",
-      heading: "JWT Signature"
+      heading: "JWT Signature",
     },
   },
 };

src/features/decoder/components/jwt-input.component.tsx

@@ -80,6 +80,7 @@ export const jaHomeDictionary: HomeDictionaryModel = {
       title: "JSON Web Token (JWT)",
       compactTitle: "JWT",
       successMessage: "有効なJWT",
+      autoFocusLabel: "オートフォーカスを有効にする",
     },
     decodedHeader: {
       title: "デコードされたヘッダー",
@@ -141,18 +142,18 @@ export const jaHomeDictionary: HomeDictionaryModel = {
       label: "ヘッダー、ペイロード、署名サンプルジェネレーター",
     },
     headerEditor: {
-      title: "ヘッダー：アルゴリズムとトークンタイプ",
+      title: "アルゴリズムとトークンタイプ",
       compactTitle: "ヘッダー",
       successMessage: "有効なヘッダー",
     },
     payloadEditor: {
-      title: "ペイロード：データ",
+      title: "データ",
       compactTitle: "ペイロード",
       successMessage: "有効なペイロード",
     },
     signatureEditor: {
       title: {
-        secret: "JWTに署名：シークレット",
+        secret: "シークレット",
         privateKey: "JWTに署名：秘密鍵",
       },
       compactTitle: {

src/features/localization/dictionaries/home/en.ts

@@ -1,31 +1,31 @@
 import { BrandDictionaryModel } from "../../models/brand-dictionary.model";
 
 export const jaBrandDictionary: BrandDictionaryModel = {
-  alertMessage: "SVG copied to clipboard",
-  tooltip: "Right-click or long-press for logo options",
+  alertMessage: "SVG がクリップボードにコピーされました",
+  tooltip: "右クリックまたは長押し (ロゴオプション)",
   menu: {
     brand: {
-      label: "Brand",
+      label: "ブランド",
       svg: {
-        copyLabel: "Copy Logo SVG",
-        downloadLabel: "Download Logo",
+        copyLabel: "ロゴ SVG をコピー",
+        downloadLabel: "ロゴをダウンロード",
       },
       symbol: {
-        copyLabel: "Copy Symbol SVG",
-        downloadLabel: "Download Symbol",
+        copyLabel: "シンボル SVG をコピー",
+        downloadLabel: "シンボルをダウンロード",
       },
       wordmark: {
-        copyLabel: "Copy Wordmark SVG",
-        downloadLabel: "Download Wordmark",
+        copyLabel: "ワードマーク SVG をコピー",
+        downloadLabel: "ワードマークをダウンロード",
       },
     },
     tools: {
-      label: "Tools",
+      label: "ツール",
       items: [
         { label: "Passkeys Playground", url: "https://learnpasskeys.io" },
         { label: "WebAuthn Playground", url: "https://webauthn.me" },
         { label: "OIDC Playground", url: "https://openidconnect.net" },
-        { label: "SAML Tool", url: "https://samltool.io" },
+        { label: "SAMLツール", url: "https://samltool.io" },
       ],
     },
   },

src/features/localization/dictionaries/home/ja.ts

@@ -24,4 +24,7 @@ export const enPickersUiDictionary: PickersUiDictionaryModel = {
   privateKeyFormatPicker: {
     label: "Private Key Format",
   },
+  base64checkbox: {
+    label: "Base64URL Encoded",
+  },
 };