update toggle switch logic and styles

Author: javiert-okta

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

@@ -1,5 +1,11 @@
 @use "@/libs/theme/styles/variables" as *;
 
+.encoder_switch {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
 .container {
     display: flex;
     align-items: center;

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

@@ -5,38 +5,58 @@ 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";
 
 interface EncodingFormatToggleSwitchComponentProps {
   languageCode: string;
+  isEncoding?: boolean;
 }
 
 export const EncodingFormatToggleSwitchComponent: React.FC<
   EncodingFormatToggleSwitchComponentProps
-> = ({ languageCode }) => {
+> = ({ languageCode, isEncoding = false }) => {
   const dictionary = getPickersUiDictionary(languageCode);
 
-  const handleSymmetricSecretKeyEncodingChange = useDecoderStore(
+  const handleSymmetricSecretKeyEncodingChangeDe = useDecoderStore(
     (state) => state.handleSymmetricSecretKeyEncodingChange
   );
 
-  const onSecretEncodingFormatChange = (event: ChangeEvent<HTMLInputElement>) => {
-      handleSymmetricSecretKeyEncodingChange(event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8);
+  const handleSymmetricSecretKeyEncodingChangeEn = useEncoderStore(
+    (state) => state.handleSymmetricSecretKeyEncodingChange
+  );
+
+  const onSecretEncodingFormatChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ) => {
+    if (isEncoding) {
+      handleSymmetricSecretKeyEncodingChangeEn(
+        event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8
+      );
+      return;
+    }
+    handleSymmetricSecretKeyEncodingChangeDe(
+      event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8
+    );
   };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.label}>
-        <span className={styles.fullLabel}>Base64URL Encoded?</span>
+    <div className={styles.encoder_switch}>
+      <div className={styles.container}>
+        <div className={styles.label}>
+          <span className={styles.fullLabel}>Base64URL Encoded?</span>
+        </div>
+        <label className={styles.switch__container}>
+          <input
+            type="checkbox"
+            role="switch"
+            className={styles.input}
+            onChange={onSecretEncodingFormatChange}
+          />
+          <span
+            className={clsx(styles.picker__round, styles.picker__slider)}
+          ></span>
+        </label>
       </div>
-      <label className={styles.switch__container}>
-        <input type="checkbox" role="switch" className={styles.input} onChange={onSecretEncodingFormatChange}/>
-        <span
-          className={clsx(
-            styles.picker__round,
-            styles.picker__slider
-          )}
-        ></span>
-      </label>
     </div>
   );
 };