added animations to borrow-system

FrontendV2/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11.14.0",
+    "@lottiefiles/dotlottie-react": "^0.19.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.90.5",
     "i18next": "^25.6.0",

FrontendV2/src/components/dotLottie.tsx

@@ -0,0 +1,28 @@
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+
+export const unlockAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/f839baa1-9c64-44c4-9386-f0e4c87ab208/2Iw1m4k86d.lottie"
+      autoplay
+    />
+  );
+};
+
+export const approvalAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/b7257009-9e3f-43e2-8112-a176f4696e4c/iQxxqAVOGX.lottie"
+      autoplay
+    />
+  );
+};
+
+export const logoutAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/4975758c-de38-4d15-9f74-927709751d32/v8FtKpnD1y.lottie"
+      autoplay
+    />
+  );
+};

FrontendV2/src/pages/HomePage.tsx

@@ -18,6 +18,7 @@ import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
 import { Header } from "@/components/Header";
 import { useTranslation } from "react-i18next";
+import { approvalAnimation } from "@/components/dotLottie";
 
 export interface User {
   username: string;
@@ -27,6 +28,8 @@ export interface User {
 export const HomePage = () => {
   const { t } = useTranslation();
 
+  const [showAnimation, setShowAnimation] = useState(false);
+
   const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
@@ -46,155 +49,172 @@ export const HomePage = () => {
     setSelectedItems((prevSelected) =>
       prevSelected.includes(itemId)
         ? prevSelected.filter((id) => id !== itemId)
-        : [...prevSelected, itemId]
+        : [...prevSelected, itemId],
     );
   };
 
+  const showApprovalAnimation = (seconds: number) => {
+    const milliseconds = seconds * 1000;
+
+    setShowAnimation(true);
+    window.setTimeout(() => {
+      setShowAnimation(false);
+    }, milliseconds);
+  };
+
   return (
-    <Container className="px-6 sm:px-8 pt-10">
-      <Header />
-      {isMsg && (
-        <MyAlert
-          status={msgStatus}
-          title={msgTitle}
-          description={msgDescription}
-        />
+    <>
+      {showAnimation && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{approvalAnimation()}</div>
+        </div>
       )}
-      <Stack as="main">
-        <Text>{t("timezone-info")}</Text>
-        <label htmlFor="startDate">
-          <strong>
-            <Text>{t("start-date")}</Text>
-          </strong>
-        </label>
-        <Input
-          id="startDate"
-          placeholder={t("start-date")}
-          type="datetime-local"
-          value={startDate}
-          onChange={(e) => setStartDate(e.target.value)}
-        />
-        <label htmlFor="endDate">
-          <strong>
-            <Text>{t("end-date")}</Text>
-          </strong>
-        </label>
-        <Input
-          id="endDate"
-          placeholder={t("end-date")}
-          type="datetime-local"
-          value={endDate}
-          onChange={(e) => setEndDate(e.target.value)}
-        />
-        <Button
-          onClick={async () => {
-            setIsLoadingA(true);
-            if (!startDate || !endDate) {
-              setMsgStatus("error");
-              setMsgTitle(t("missing-fields"));
-              setMsgDescription(t("missing-fields-desc"));
-              setIsMsg(true);
-              setIsLoadingA(false);
-              return;
-            }
-            await getBorrowableItems(startDate, endDate).then((response) => {
-              setIsLoadingA(false);
-              if (response && response.status === "error") {
+      <Container className="px-6 sm:px-8 pt-10">
+        <Header />
+        {isMsg && (
+          <MyAlert
+            status={msgStatus}
+            title={msgTitle}
+            description={msgDescription}
+          />
+        )}
+        <Stack as="main">
+          <Text>{t("timezone-info")}</Text>
+          <label htmlFor="startDate">
+            <strong>
+              <Text>{t("start-date")}</Text>
+            </strong>
+          </label>
+          <Input
+            id="startDate"
+            placeholder={t("start-date")}
+            type="datetime-local"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+          />
+          <label htmlFor="endDate">
+            <strong>
+              <Text>{t("end-date")}</Text>
+            </strong>
+          </label>
+          <Input
+            id="endDate"
+            placeholder={t("end-date")}
+            type="datetime-local"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+          />
+          <Button
+            onClick={async () => {
+              setIsLoadingA(true);
+              if (!startDate || !endDate) {
                 setMsgStatus("error");
-                setMsgTitle(response.title || t("error"));
-                setMsgDescription(response.description || t("unknown-error"));
+                setMsgTitle(t("missing-fields"));
+                setMsgDescription(t("missing-fields-desc"));
                 setIsMsg(true);
+                setIsLoadingA(false);
                 return;
               }
-              setBorrowableItems(response.data);
-              setIsMsg(false);
-            });
-          }}
-        >
-          {t("get-borrowable-items")}
-        </Button>
-        {isLoadingA && (
-          <VStack colorPalette="teal">
-            <Spinner color="colorPalette.600" />
-            <Text color="colorPalette.600">{t("loading")}</Text>
-          </VStack>
-        )}
-        {borrowableItems.length > 0 && (
-          <Table.ScrollArea borderWidth="1px" rounded="md">
-            <Table.Root size="sm" stickyHeader>
-              <Table.Header>
-                <Table.Row bg="bg.subtle">
-                  <Table.ColumnHeader></Table.ColumnHeader>
-                  <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
-                </Table.Row>
-              </Table.Header>
-
-              <Table.Body>
-                {borrowableItems.map((item) => (
-                  <Table.Row key={item.id}>
-                    <Table.Cell>
-                      <input
-                        onChange={() => handleCheckboxChange(item.id)}
-                        type="checkbox"
-                        name={item.id}
-                        id={item.id}
-                      />
-                    </Table.Cell>
-                    <Table.Cell>{item.item_name}</Table.Cell>
-                  </Table.Row>
-                ))}
-                <Table.Row>
-                  <Table.Cell colSpan={2}>
-                    <InputGroup
-                      endElement={
-                        <Span color="fg.muted" textStyle="xs">
-                          {note.length} / {MAX_CHARACTERS}
-                        </Span>
-                      }
-                    >
-                      <Input
-                        placeholder={t("optional-note")}
-                        value={note}
-                        maxLength={MAX_CHARACTERS}
-                        onChange={(e) => {
-                          setNote(
-                            e.currentTarget.value.slice(0, MAX_CHARACTERS)
-                          );
-                        }}
-                      />
-                    </InputGroup>
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table.Root>
-          </Table.ScrollArea>
-        )}
-        {selectedItems.length >= 1 && (
-          <Button
-            onClick={() =>
-              createLoan(selectedItems, startDate, endDate, note).then(
-                (response) => {
-                  if (response.status === "error") {
-                    setMsgStatus("error");
-                    setMsgTitle(response.title || t("error"));
-                    setMsgDescription(
-                      response.description || t("unknown-error")
-                    );
-                    setIsMsg(true);
-                    return;
-                  }
-                  setMsgStatus("success");
-                  setMsgTitle(t("success"));
-                  setMsgDescription(t("loan-success"));
+              await getBorrowableItems(startDate, endDate).then((response) => {
+                setIsLoadingA(false);
+                if (response && response.status === "error") {
+                  setMsgStatus("error");
+                  setMsgTitle(response.title || t("error"));
+                  setMsgDescription(response.description || t("unknown-error"));
                   setIsMsg(true);
+                  return;
                 }
-              )
-            }
+                setBorrowableItems(response.data);
+                setIsMsg(false);
+              });
+            }}
           >
-            {t("create-loan")}
+            {t("get-borrowable-items")}
           </Button>
-        )}
-      </Stack>
-    </Container>
+          {isLoadingA && (
+            <VStack colorPalette="teal">
+              <Spinner color="colorPalette.600" />
+              <Text color="colorPalette.600">{t("loading")}</Text>
+            </VStack>
+          )}
+          {borrowableItems.length > 0 && (
+            <Table.ScrollArea borderWidth="1px" rounded="md">
+              <Table.Root size="sm" stickyHeader>
+                <Table.Header>
+                  <Table.Row bg="bg.subtle">
+                    <Table.ColumnHeader></Table.ColumnHeader>
+                    <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
+                  </Table.Row>
+                </Table.Header>
+
+                <Table.Body>
+                  {borrowableItems.map((item) => (
+                    <Table.Row key={item.id}>
+                      <Table.Cell>
+                        <input
+                          onChange={() => handleCheckboxChange(item.id)}
+                          type="checkbox"
+                          name={item.id}
+                          id={item.id}
+                        />
+                      </Table.Cell>
+                      <Table.Cell>{item.item_name}</Table.Cell>
+                    </Table.Row>
+                  ))}
+                  <Table.Row>
+                    <Table.Cell colSpan={2}>
+                      <InputGroup
+                        endElement={
+                          <Span color="fg.muted" textStyle="xs">
+                            {note.length} / {MAX_CHARACTERS}
+                          </Span>
+                        }
+                      >
+                        <Input
+                          placeholder={t("optional-note")}
+                          value={note}
+                          maxLength={MAX_CHARACTERS}
+                          onChange={(e) => {
+                            setNote(
+                              e.currentTarget.value.slice(0, MAX_CHARACTERS),
+                            );
+                          }}
+                        />
+                      </InputGroup>
+                    </Table.Cell>
+                  </Table.Row>
+                </Table.Body>
+              </Table.Root>
+            </Table.ScrollArea>
+          )}
+          {selectedItems.length >= 1 && (
+            <Button
+              onClick={() =>
+                createLoan(selectedItems, startDate, endDate, note).then(
+                  (response) => {
+                    if (response.status === "error") {
+                      setMsgStatus("error");
+                      setMsgTitle(response.title || t("error"));
+                      setMsgDescription(
+                        response.description || t("unknown-error"),
+                      );
+                      setIsMsg(true);
+                      return;
+                    }
+                    showApprovalAnimation(3);
+                    setMsgStatus("success");
+                    setMsgTitle(t("success"));
+                    setMsgDescription(t("loan-success"));
+                    setIsMsg(true);
+                  },
+                )
+              }
+            >
+              {t("create-loan")}
+            </Button>
+          )}
+        </Stack>
+      </Container>
+    </>
   );
 };

FrontendV2/src/pages/LoginPage.tsx

@@ -4,26 +4,47 @@ import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
-import { Navigate, useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
 import { useTranslation } from "react-i18next";
 import { API_BASE } from "@/config/api.config";
+import { unlockAnimation } from "@/components/dotLottie";
+import { logoutAnimation } from "@/components/dotLottie";
 
 export const LoginPage = () => {
   const { t } = useTranslation();
 
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [showLogout, setShowLogout] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
   const from = location.state?.from?.pathname || "/";
 
   useEffect(() => {
-    if (isLoggedIn) {
-      navigate(from, { replace: true });
-      window.location.reload(); // if deleted, the user context is not updated in time
+    if (triggerLogout) {
+      setShowLogout(true);
+      window.setTimeout(() => {
+        setShowLogout(false);
+      }, 4500);
     }
-  }, [isLoggedIn, navigate, from]);
+
+    if (!isLoggedIn) return;
+
+    // Existing sessions should redirect immediately, fresh logins wait for animation.
+    if (!showAnimation) {
+      navigate(from, { replace: true });
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      navigate(from, { replace: true });
+      window.location.reload(); // keeps user context in sync after login
+    }, 3000);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [isLoggedIn, showAnimation, navigate, from]);
 
   const loginFnc = async (username: string, password: string) => {
     const response = await fetch(`${API_BASE}/api/users/login`, {
@@ -42,6 +63,8 @@ export const LoginPage = () => {
       };
     }
 
+    setShowAnimation(true);
+
     Cookies.set("token", data.token);
     setIsLoggedIn(true);
     return { success: true };
@@ -62,58 +85,75 @@ export const LoginPage = () => {
       return;
     }
     setTriggerLogout(false);
-    navigate(from, { replace: true });
   };
 
-  if (isLoggedIn) {
-    return <Navigate to={from} replace />;
-  }
-
   return (
-    <div className="flex flex-1 items-center justify-center p-4">
-      <form onSubmit={(e) => e.preventDefault()}>
-        <Card.Root maxW="sm">
-          <Card.Header>
-            <Card.Title>{t("login")}</Card.Title>
-            <Card.Description>{t("enter-credentials")}</Card.Description>
-          </Card.Header>
-          <Card.Body>
-            <Stack gap="4" w="full">
-              <Field.Root>
-                <Field.Label>{t("username")}</Field.Label>
-                <Input
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
+    <>
+      {showAnimation && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{unlockAnimation()}</div>
+        </div>
+      )}
+
+      {showLogout && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{logoutAnimation()}</div>
+        </div>
+      )}
+
+      <div className="flex flex-1 items-center justify-center p-4">
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Card.Root maxW="sm">
+            <Card.Header>
+              <Card.Title>{t("login")}</Card.Title>
+              <Card.Description>{t("enter-credentials")}</Card.Description>
+            </Card.Header>
+            <Card.Body>
+              <Stack gap="4" w="full">
+                <Field.Root>
+                  <Field.Label>{t("username")}</Field.Label>
+                  <Input
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                  />
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>{t("password")}</Field.Label>
+                  <PasswordInput
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                </Field.Root>
+              </Stack>
+            </Card.Body>
+            <Card.Footer justifyContent="flex-end">
+              {isError && (
+                <MyAlert
+                  status="error"
+                  title={errorMsg}
+                  description={errorDsc}
                 />
-              </Field.Root>
-              <Field.Root>
-                <Field.Label>{t("password")}</Field.Label>
-                <PasswordInput
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+              )}
+              <Button
+                type="submit"
+                onClick={() => handleLogin()}
+                variant="solid"
+              >
+                Login
+              </Button>
+            </Card.Footer>
+            <Card.Footer justifyContent="flex-end">
+              {triggerLogout && (
+                <MyAlert
+                  status="success"
+                  title={t("logout-success")}
+                  description={t("logout-success-desc")}
                 />
-              </Field.Root>
-            </Stack>
-          </Card.Body>
-          <Card.Footer justifyContent="flex-end">
-            {isError && (
-              <MyAlert status="error" title={errorMsg} description={errorDsc} />
-            )}
-            <Button type="submit" onClick={() => handleLogin()} variant="solid">
-              Login
-            </Button>
-          </Card.Footer>
-          <Card.Footer justifyContent="flex-end">
-            {triggerLogout && (
-              <MyAlert
-                status="success"
-                title={t("logout-success")}
-                description={t("logout-success-desc")}
-              />
-            )}
-          </Card.Footer>
-        </Card.Root>
-      </form>
-    </div>
+              )}
+            </Card.Footer>
+          </Card.Root>
+        </form>
+      </div>
+    </>
   );
 };