feat: added settings page for access key and access secret

src/renderer/components/blocks/layout/LeftNav.tsx

@@ -5,8 +5,9 @@ import {
   HiOutlineArrowLeft, 
   HiOutlineArrowRight, 
   HiChartPie,
-  HiGlobeAlt 
+  HiGlobeAlt,
 } from 'react-icons/hi';
+import { IoSettingsOutline } from 'react-icons/io5';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 import { useState } from 'react';
@@ -67,6 +68,14 @@ const LeftNav = () => {
               >
                 <FormattedMessage id="browser"/>
               </Sidebar.Item>
+              <Sidebar.Item
+                style={{ cursor: 'pointer' }}
+                active={isActive(ROUTES.SETTINGS)}
+                onClick={() => navigate(ROUTES.SETTINGS)}
+                icon={IoSettingsOutline}
+              >
+                <FormattedMessage id="settings"/>
+              </Sidebar.Item>
               <Sidebar.Item
                 style={{ cursor: 'pointer' }}
                 active={isActive(ROUTES.APP_DEFAULT)}
@@ -121,6 +130,13 @@ const LeftNav = () => {
               >
                 <HiGlobeAlt />
               </Sidebar.Item>
+              <Sidebar.Item
+                style={{ cursor: 'pointer' }}
+                active={isActive(ROUTES.SETTINGS)}
+                onClick={() => navigate(ROUTES.SETTINGS)}
+              >
+                <IoSettingsOutline />
+              </Sidebar.Item>
               <Sidebar.Item
                 style={{ cursor: 'pointer' }}
                 active={isActive(ROUTES.APP_DEFAULT)}

src/renderer/pages/Browser/NavigationBar.tsx

@@ -56,7 +56,7 @@ const ForwardButton: React.FC<NavButton> = ({onClick}) => {
 const HomeButton: React.FC<NavButton> = ({onClick}) => {
   return (
     <StyledNavButton onClick={onClick} color={navButtonColor}>
-      <HiHome font-size={navButtonIconSize}/>
+      <HiHome fontSize={navButtonIconSize}/>
     </StyledNavButton>
   );
 }

src/renderer/pages/Settings/Settings.tsx

@@ -0,0 +1,93 @@
+import { Button, TextInput } from "flowbite-react";
+import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
+import {useCallback, useEffect, useRef} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {
+  getAccessKey,
+  getAccessSecret,
+  setAccessKey,
+  setAccessSecret
+} from "@/store/slices/userOptions";
+
+const SettingsDiv = styled('div')`
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+`;
+
+interface SettingsProps {
+
+}
+
+interface AccessSettingsProps {
+
+}
+
+const AccessSettings: React.FC<AccessSettingsProps> = () => {
+
+  const dispatch = useDispatch();
+  const accessKeyTextInput = useRef<HTMLInputElement>(null);
+  const accessSecretTextInput = useRef<HTMLInputElement>(null);
+  const accessKey = useSelector((state: any) => getAccessKey(state));
+  const accessSecret = useSelector((state: any) => getAccessSecret(state));
+
+  useEffect(() => {
+    if (accessKeyTextInput.current && accessSecretTextInput.current) {
+      accessKeyTextInput.current.value = accessKey;
+      accessSecretTextInput.current.value = accessSecret;
+    }
+  }, [accessKeyTextInput, accessSecretTextInput, accessSecret, accessKey]);
+
+  const onSave = useCallback(() => {
+    if (accessKeyTextInput.current && accessSecretTextInput.current) {
+      if (accessKeyTextInput.current.value != '' && accessSecretTextInput.current.value != '') {
+        dispatch(setAccessKey(accessKeyTextInput.current.value as string));
+        dispatch(setAccessSecret(accessSecretTextInput.current.value as string));
+      }
+    }
+  }, [dispatch]);
+
+  return (
+    <>
+      <div>
+        <div className="mb-2 block">
+          <FormattedMessage id="access-key"/>
+        </div>
+        <TextInput
+          id="acessKey"
+          type="text"
+          ref={accessKeyTextInput}
+          required/>
+      </div>
+      <div>
+        <div className="mb-2 block">
+          <FormattedMessage id="access-secret"/>
+        </div>
+        <TextInput
+          id="accessSecret"
+          type="text"
+          ref={accessSecretTextInput}
+          required/>
+      </div>
+      <div style={{height: "20px"}}/>
+      <Button type="submit" onClick={onSave} style={{width: "100%"}}>
+        <FormattedMessage id="save"/>
+      </Button>
+    </>
+  );
+}
+
+const Settings: React.FC<SettingsProps> = () => {
+  return (
+    <SettingsDiv>
+      <div style={{width: "448px"}}>
+        <AccessSettings/>
+      </div>
+    </SettingsDiv>
+  );
+}
+
+export {Settings};

src/renderer/pages/Settings/index.ts

@@ -0,0 +1 @@
+export * from './Settings';

src/renderer/pages/index.ts

@@ -1,5 +1,6 @@
 export * from './AppDefault';
 export * from './Hello1';
 export * from './Hello2';
-export * from './Browser'
+export * from './Browser';
+export * from './Settings';
 export * from './Error';

src/renderer/routes/index.tsx

@@ -30,7 +30,11 @@ const AppNavigator: React.FC = () => {
             <Route
               path={ROUTES.BROWSER}
               element={<Pages.Browser/>}
-            />  
+            />
+            <Route
+              path={ROUTES.SETTINGS}
+              element={<Pages.Settings/>}
+            />
             <Route 
               path={ROUTES.APP_DEFAULT} 
               element={<Pages.AppDefault />} 

src/renderer/routes/route-constants.ts

@@ -2,5 +2,6 @@ export default {
   APP_DEFAULT: '/AppDefault',
   HELLO_1: '/Hello1',
   HELLO_2: '/Hello2',
-  BROWSER: '/Browser'
+  BROWSER: '/Browser',
+  SETTINGS: '/Settings',
 };

src/renderer/store/slices/userOptions/index.ts

@@ -1 +1,2 @@
-export * from './userOptions.slice';
+export * from './userOptions.slice';
+export * from './userOptions.view';

src/renderer/store/slices/userOptions/userOptions.initialstate.ts

@@ -1,3 +1,5 @@
 export default {
-  selectedTheme: 'light'
+  selectedTheme: 'light',
+  accessKey: '',
+  accessSecret: '',
 };

src/renderer/store/slices/userOptions/userOptions.slice.ts

@@ -11,12 +11,30 @@ export const userOptionsSlice = createSlice({
       } else {
         state.selectedTheme = 'light';
       }
+    },
+
+    setAccessKey: (state, { payload }) => {
+
+      if ((typeof payload === 'string') && payload) {
+        state.accessKey = payload;
+      }else{
+        console.error("invalid access key. key must be a string and must not be null");
+      }
+    },
+
+    setAccessSecret: (state, { payload }) => {
+
+      if ((typeof payload === 'string') && payload) {
+        state.accessSecret = payload;
+      }else{
+        console.error("invalid access secret. secret must be a string and must not be null");
+      }
     }
   },
 });
 
 export const {
-  toggleTheme,
+  toggleTheme,setAccessKey, setAccessSecret
 } = userOptionsSlice.actions;
 
 export default userOptionsSlice.reducer;

src/renderer/store/slices/userOptions/userOptions.view.tsx

@@ -0,0 +1,7 @@
+export const getAccessKey = (state) => {
+  return state.userOptions.accessKey;
+}
+
+export const getAccessSecret = (state) => {
+  return state.userOptions.accessSecret;
+}

src/renderer/translations/tokens/en-US.json

@@ -1,7 +1,10 @@
 {
-
   "app-default": "App Default",
   "hello-1": "Hello 1",
   "hello-2": "Hello 2",
-  "browser": "Browser"
+  "browser": "Browser",
+  "settings": "Settings",
+  "access-key": "Access Key",
+  "access-secret": "Access Secret",
+  "save": "Save"
 }