add brand and base64checkbox translation

Author: christiansamaniego-okta

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

@@ -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";
 
@@ -43,7 +42,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}>
           <input

src/features/decoder/components/jwt-input.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/localization/dictionaries/images/ja.tsx

@@ -5,27 +5,27 @@ export const jaBrandDictionary: BrandDictionaryModel = {
   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/ui/pickers/en.tsx

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

src/features/localization/dictionaries/ui/pickers/ja.tsx

@@ -24,4 +24,7 @@ export const jaPickersUiDictionary: PickersUiDictionaryModel = {
   privateKeyFormatPicker: {
     label: "秘密鍵の形式",
   },
+  base64checkbox: {
+    label: "Base64URLエンコード",
+  },
 };

src/features/localization/models/ui/pickers-ui-dictionary.model.ts

@@ -22,4 +22,7 @@ export interface PickersUiDictionaryModel {
   privateKeyFormatPicker: {
     label: string;
   };
+  base64checkbox: {
+    label: string;
+  };
 }