Set refresh task on voucher validation

2 files changed, 26 insertions, 4 deletions

diff --git a/thallium-frontend/src/App.tsx b/thallium-frontend/src/App.tsx
index 0223c46..54782cf 100644
--- a/thallium-frontend/src/App.tsx
+++ b/thallium-frontend/src/App.tsx
@@ -15,6 +15,8 @@ const ErrorPage = React.lazy(() => import("./pages/ErrorPage"));
 const DesignSystem = React.lazy(() => import("./pages/DesignSystem"));
 const StorePage = React.lazy(() => import("./pages/StorePage"));
 
+import { maybeRefreshTask } from "./api/jwt";
+
 const GlobalStyle = createGlobalStyle`
   html,
   body, #root {
@@ -86,6 +88,8 @@ const router = createBrowserRouter([
 function App() {
   const [isDarkMode, setIsDarkMode] = useState(false);
 
+  maybeRefreshTask();
+
   const theme = isDarkMode ? themes.dark : themes.light;
 
   useEffect(() => {
@@ -94,7 +98,6 @@ function App() {
     setIsDarkMode(prefersDark);
   }, []);
 
-
   return (
     <ThemeProvider theme={theme}>
       <AppContainer>
diff --git a/thallium-frontend/src/components/VoucherValidator.tsx b/thallium-frontend/src/components/VoucherValidator.tsx
index e05a509..fdb671b 100644
--- a/thallium-frontend/src/components/VoucherValidator.tsx
+++ b/thallium-frontend/src/components/VoucherValidator.tsx
@@ -2,13 +2,15 @@ import Card from "./Card";
 import TextInput from "./forms/TextInput";
 import styled from "styled-components";
 import { useState } from "react";
-import { validateVoucher } from "../api/vouchers";
+import { voucherLogin } from "../api/login";
 import { APIError } from "../api/client";
 import { setVoucherToken } from "../slices/authorization";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../store";
 import { useNavigate } from "react-router-dom";
 import Button from "./forms/Button";
+import { decodeJWT, isJWTExpired, maybeRefreshTask } from "../api/jwt";
+
 
 const VoucherValidateContainer = styled.div`
     margin-bottom: 1rem;
@@ -22,13 +24,23 @@ const VoucherValidator = () => {
 
     const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken);
 
+    let expired = false;
+
+    if (voucherToken) {
+        const parsed = decodeJWT(voucherToken);
+        expired = isJWTExpired(parsed);
+    }
+
+
     const validate = async () => {
         try {
-            const voucherClaim = await validateVoucher(voucherCode);
+            const voucherClaim = await voucherLogin(voucherCode);
 
             dispatch(setVoucherToken(voucherClaim.jwt));
 
             setError(null);
+
+            maybeRefreshTask();
         } catch (e) {
             if (e instanceof APIError) {
                 if (e.data?.detail) {
@@ -57,7 +69,7 @@ const VoucherValidator = () => {
                 />
             </VoucherValidateContainer>
 
-            {voucherToken && (
+            {(voucherToken && !expired) && (
                 <>
                     <h3>Voucher successfully validated!</h3>
                     <Button onClick={() => {
@@ -66,6 +78,13 @@ const VoucherValidator = () => {
                 </>
             )}
 
+            {expired && (
+                <div>
+                    <h3>Session expired</h3>
+                    <p>Your voucher session has expired. Please enter your voucher again.</p>
+                </div>
+            )}
+
             {error && (
                 <div>
                     <h3>Error</h3>