✨ Save login info to browser localstorage

Signed-off-by: Muhammed Hussein Karimi <[email protected]>
ParminCloud · Nov 30, 2024 · b35f1a7 · b35f1a7
1 parent 65e8841
commit b35f1a7
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ Check out [deployments](./deployments/README.md)
 ## TODO
 
 * [x] Pagination
-* [ ] Save credentials in browser
+* [x] Save credentials in browser (currently localStorage)
 * [ ] Creating and Using more reusable components (specially Dialogs in page)
 * [x] More Docs (Screenshot, Deployment)
 

diff --git a/src/app/loginDialog.tsx b/src/app/loginDialog.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import {
   DialogBody,
@@ -7,15 +9,17 @@ import {
   DialogHeader,
   DialogRoot,
 } from "@/components/ui/dialog"
-
+import { Checkbox } from "@/components/ui/checkbox"
 import { toaster } from "@/components/ui/toaster"
 import { Field } from "@/components/ui/field"
 import { Radio, RadioGroup } from "@/components/ui/radio"
 import {
   Button,
   Input,
   Stack,
-  RadioGroupValueChangeDetails
+  RadioGroupValueChangeDetails,
+  Fieldset,
+  Box
 } from "@chakra-ui/react";
 import { setValueFromEvent } from "./utils";
 import { S3Client } from "@aws-sdk/client-s3";
@@ -30,15 +34,18 @@ const LoginDialog = ({
   onClose: () => void;
   onLogin: ({ client, bucket }: { client: S3Client; bucket: string }) => void;
 }) => {
+  const isServer = typeof window === 'undefined'
   const initialRef = React.useRef(null);
   const finalRef = React.useRef(null);
   const endpoints: Record<string, string> = {
-    "https://s3.amin.parminpaas.ir": "https://s3.amin.parminpaas.ir (Amin)"
+    "https://s3.amin.parminpaas.ir": "https://s3.amin.parminpaas.ir (Amin, SAS Storage)"
   };
-  const [accessKey, setAccessKey] = React.useState("");
-  const [secretKey, setSecretKey] = React.useState("");
-  const [endpoint, setEndpoint] = React.useState<RadioGroupValueChangeDetails | null>(null);
-  const [bucket, setBucket] = React.useState("");
+  const savedInformation = (!isServer) && JSON.parse(localStorage.getItem("loginInformation") || "null");
+  const [saveToLocal, setSaveToLocal] = React.useState(false);
+  const [accessKey, setAccessKey] = React.useState(savedInformation?.accessKey || "");
+  const [secretKey, setSecretKey] = React.useState(savedInformation?.secretKey || "");
+  const [endpoint, setEndpoint] = React.useState<RadioGroupValueChangeDetails | null>(savedInformation?.endpoint || null);
+  const [bucket, setBucket] = React.useState(savedInformation?.bucket || "");
   return (
     <DialogRoot
       initialFocusEl={() => initialRef.current}
@@ -50,39 +57,52 @@ const LoginDialog = ({
         <DialogHeader>Login to ParminCloud Storage</DialogHeader>
         <DialogCloseTrigger />
         <DialogBody pb={6}>
-          <Field label="Access Key">
-            <Input
-              onChange={(ev) => setValueFromEvent(ev, setAccessKey)}
-              ref={initialRef}
-              placeholder="Access Key"
-            />
-          </Field>
+          <Fieldset.Root>
+            <Fieldset.Legend>Enter your Credencials</Fieldset.Legend>
+            <Field label="Access Key">
+              <Input
+                onChange={(ev) => setValueFromEvent(ev, setAccessKey)}
+                value={accessKey}
+                placeholder="Access Key"
+              />
+            </Field>
+
+            <Field label="Secret Key" mt={4}>
+              <Input
+                onChange={(ev) => setValueFromEvent(ev, setSecretKey)}
+                type="password"
+                value={secretKey}
+                placeholder="Secret Key"
+              />
+            </Field>
+            <Field label="Bucket" mt={4}>
+              <Input
+                value={bucket}
+                onChange={(ev) => setValueFromEvent(ev, setBucket)}
+                placeholder="Bucket"
+              />
+            </Field>
 
-          <Field label="Secret Key" mt={4}>
-            <Input
-              onChange={(ev) => setValueFromEvent(ev, setSecretKey)}
-              type="password"
-              placeholder="Secret Key"
-            />
-          </Field>
-          <Field label="Bucket" mt={4}>
-            <Input
-              onChange={(ev) => setValueFromEvent(ev, setBucket)}
-              placeholder="Bucket"
-            />
-          </Field>
+            <RadioGroup value={endpoint?.value} onValueChange={setEndpoint} mt={4}>
+              <Fieldset.Legend paddingBottom="2%">Region/Storage Class</Fieldset.Legend>
 
-          <RadioGroup onValueChange={setEndpoint} mt={4}>
-            <Stack direction="column">
-              {Object.keys(endpoints).map((key, _) => {
-                return (
-                  <Radio key={key} value={key}>
-                    {endpoints[key]}
-                  </Radio>
-                );
-              })}
-            </Stack>
-          </RadioGroup>
+              <Stack direction="column">
+                {Object.keys(endpoints).map((key, _) => {
+                  return (
+                    <Radio key={key} value={key}>
+                      {endpoints[key]}
+                    </Radio>
+                  );
+                })}
+              </Stack>
+            </RadioGroup>
+          </Fieldset.Root>
+          <Checkbox gap="4" paddingTop="5%" alignItems="flex-start" checked={!!(savedInformation)} onCheckedChange={(e) => setSaveToLocal(!!e.checked)}>
+            <Box lineHeight="1">Save credendials in browser</Box>
+            <Box fontWeight="normal" color="fg.muted" mt="1">
+              Will save information on browser local storage
+            </Box>
+          </Checkbox>
         </DialogBody>
 
         <DialogFooter>
@@ -98,6 +118,20 @@ const LoginDialog = ({
                   },
                   region: "us-east-1"
                 });
+                if (saveToLocal) {
+                  localStorage.setItem("loginInformation",
+                    JSON.stringify(
+                      {
+                        endpoint,
+                        accessKey,
+                        secretKey,
+                        bucket
+                      }
+                    )
+                  )
+                } else {
+                  localStorage.removeItem("loginInformation")
+                }
                 onLogin({ client: client, bucket: bucket });
                 onClose();
               } else {