feat: implement OIDC settings

src/common/component/styled/Radio.js

@@ -2,103 +2,106 @@ import { useState, useId } from "react";
 import styled from "styled-components";
 
 const StyledForm = styled.form`
- > .option {
-  &:not(:last-child) {
-   margin-bottom: 8px;
-  }
-
-  > input[type="radio"] {
-   display: none;
-
-   & + .box {
-    background: #ffffff;
-    border: 1px solid #d0d5dd;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-    border-radius: 8px;
-    transition: all ease-in-out 250ms;
-
-    & > label {
-     display: flex;
-     flex-direction: row;
-     align-items: center;
-     font-weight: 400;
-     font-size: 16px;
-     line-height: 24px;
-     color: #667085;
-     cursor: pointer;
-     user-select: none;
-     transition: all ease-in-out 250ms;
-
-     &:before {
-      content: "";
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      border-radius: 8px;
-      background: #ffffff;
-      box-shadow: inset 0 0 0 4px #ffffff;
-      border: 1px solid #d0d5dd;
-      margin: 14px 8px 14px 14px;
-      transition: all ease-in-out 500ms;
-     }
+  > .option {
+    &:not(:last-child) {
+      margin-bottom: 8px;
     }
-   }
 
-   &:checked + .box {
-    background: #22ccee;
-    border: 1px solid #d0d5dd;
+    > input[type="radio"] {
+      display: none;
 
-    & > label {
-     color: #ffffff;
+      & + .box {
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        transition: all ease-in-out 250ms;
 
-     &:before {
-      background: #ffffff;
-      box-shadow: inset 0 0 0 4px #22ccee;
-      border: 1px solid #ffffff;
-     }
+        & > label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: #667085;
+          cursor: pointer;
+          user-select: none;
+          transition: all ease-in-out 250ms;
+
+          &:before {
+            content: "";
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border-radius: 8px;
+            background: #ffffff;
+            box-shadow: inset 0 0 0 4px #ffffff;
+            border: 1px solid #d0d5dd;
+            margin: 14px 8px 14px 14px;
+            transition: all ease-in-out 500ms;
+          }
+        }
+      }
+
+      &:checked + .box {
+        background: #22ccee;
+        border: 1px solid #d0d5dd;
+
+        & > label {
+          color: #ffffff;
+
+          &:before {
+            background: #ffffff;
+            box-shadow: inset 0 0 0 4px #22ccee;
+            border: 1px solid #ffffff;
+          }
+        }
+      }
     }
-   }
   }
- }
 `;
 
+const VALUE_NOT_SET = {};
+const VALUES_NOT_SET = {};
+
 export default function Radio({
- options,
- values = undefined,
- value = undefined,
- defaultValue = undefined,
- onChange = undefined
+  options,
+  values = VALUES_NOT_SET,
+  value = VALUE_NOT_SET,
+  defaultValue = undefined,
+  onChange = undefined
 }) {
- const id = useId();
+  const id = useId();
 
- const [fallbackValue, setFallbackValue] = useState(defaultValue);
- const _value = value !== undefined ? value : fallbackValue;
+  const [fallbackValue, setFallbackValue] = useState(defaultValue);
+  const _value = value !== VALUE_NOT_SET ? value : fallbackValue;
 
- return (
-  <StyledForm>
-   {options.map((item, index) => (
-    <div className="option" key={index}>
-     <input
-      type="radio"
-      checked={(values !== undefined ? values.indexOf(_value) : _value) === index}
-      onChange={() => {
-       const valueToSet = values === undefined ? index : values[index];
-       // Set fallback value if not in controlled mode
-       if (value === undefined) {
-        setFallbackValue(valueToSet);
-       }
-       // Invoke `onChange` handler if defined
-       if (onChange) {
-        onChange(valueToSet);
-       }
-      }}
-      id={`${id}-${index}`}
-     />
-     <div className="box">
-      <label htmlFor={`${id}-${index}`}>{item}</label>
-     </div>
-    </div>
-   ))}
-  </StyledForm>
- );
+  return (
+    <StyledForm>
+      {options.map((item, index) => (
+        <div className="option" key={index}>
+          <input
+            type="radio"
+            checked={(values !== VALUES_NOT_SET ? values.indexOf(_value) : _value) === index}
+            onChange={() => {
+              const valueToSet = values === VALUES_NOT_SET ? index : values[index];
+              // Set fallback value if not in controlled mode
+              if (value === VALUE_NOT_SET) {
+                setFallbackValue(valueToSet);
+              }
+              // Invoke `onChange` handler if defined
+              if (onChange) {
+                onChange(valueToSet);
+              }
+            }}
+            id={`${id}-${index}`}
+          />
+          <div className="box">
+            <label htmlFor={`${id}-${index}`}>{item}</label>
+          </div>
+        </div>
+      ))}
+    </StyledForm>
+  );
 }

src/common/component/styled/Select.js

@@ -24,7 +24,10 @@ const Styled = styled.div`
     height: 20px !important;
   }
 `;
-export default function Select({ options = [], updateSelect = null }) {
+
+const CURRENT_NOT_SET = {};
+
+export default function Select({ options = [], updateSelect = null, current = CURRENT_NOT_SET }) {
   const [optionsVisible, setOptionsVisible] = useState(false);
   const [curr, setCurr] = useState(undefined);
   const toggleVisible = () => {
@@ -62,7 +65,9 @@ export default function Select({ options = [], updateSelect = null }) {
       }
     >
       <Styled onClick={toggleVisible}>
-        <span className="txt">{curr?.title || `Select`}</span>
+        <span className="txt">
+          {(current !== CURRENT_NOT_SET ? current : curr)?.title || `Select`}
+        </span>
         <IconArrow className="icon" />
       </Styled>
     </Tippy>