Merge pull request #17 from Aar-if/newaltv1

Micro UI fixes + clearing expired token
transform1234 · Oct 4, 2023 · 532b64b · 532b64b
2 parents 8fa3721 + ab0f501
commit 532b64b
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 58 deletions.
diff --git a/packages/admin/src/api/StudentResetPasswordAPI.jsx b/packages/admin/src/api/StudentResetPasswordAPI.jsx
@@ -2,9 +2,6 @@ import axios from "axios";
 import { studentReset } from "../routes/links";
 
 const studentResetPasswordAPI = async (username, password) => {
-  console.log("INSIDE RESET PASS API");
-  console.log(username, password);
-
   const token = localStorage.getItem("token");
 
   const headers = {

diff --git a/packages/admin/src/components/CustomLoadingCellRenderer.jsx b/packages/admin/src/components/CustomLoadingCellRenderer.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export default (props) => {
+  return (
+    <div
+      className="ag-custom-loading-cell"
+      style={{ paddingLeft: "10px", lineHeight: "25px" }}
+    >
+      <i className="fas fa-spinner fa-pulse"></i>{" "}
+      <span> {props.loadingMessage}</span>
+    </div>
+  );
+};
diff --git a/packages/admin/src/components/SchoolListView.jsx b/packages/admin/src/components/SchoolListView.jsx
@@ -173,16 +173,26 @@ function SchoolListView() {
 
   return (
     <div className="ag-theme-material" style={{ height: 400, width: "100%" }}>
-      <button
-        onClick={onBtnExport}
-        style={{ background: "#41C88E", border: "none", borderRadius: "5px" }}
-      >
-        <FileDownloadOutlinedIcon
-          style={{ color: "white", fontSize: "largest" }}
-        />
-        <H4 style={{ color: "white" }}> Download Template </H4>
-      </button>
-      {/* <button
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <button
+          onClick={onBtnExport}
+          style={{
+            background: "#41C88E",
+            border: "none",
+            borderRadius: "5px",
+            display: "flex", // Center align vertically
+            alignItems: "center",
+          }}
+        >
+          <FileDownloadOutlinedIcon
+            style={{
+              color: "white",
+              fontSize: "largest",
+            }}
+          />
+          <H4 style={{ color: "white" }}> Download Template </H4>
+        </button>
+        {/* <button
         onClick={onBtnExportFields}
         style={{
           background: "#41C88E",
@@ -196,6 +206,7 @@ function SchoolListView() {
         />
         <H4 style={{ color: "white" }}> Download username & password </H4>
       </button>  */}
+      </div>
       <AgGridReact
         ref={gridRef}
         rowData={rowData}

diff --git a/packages/admin/src/components/StudentListView.jsx b/packages/admin/src/components/StudentListView.jsx
@@ -1,6 +1,12 @@
 // export default listView;
 
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
 import { AgGridReact } from "ag-grid-react";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-material.css";
@@ -18,20 +24,7 @@ import Modal from "react-modal";
 import StudentResetPassword from "./StudentResetPassword";
 import studentResetPasswordAPI from "api/StudentResetPasswordAPI";
 import SyncLockIcon from "@mui/icons-material/SyncLock";
-
-const customStyles = {
-  content: {
-    maxHeight: "90%",
-    maxWidth: "90%",
-    margin: 0,
-    padding: "20",
-    backgroundColor: "#fff",
-  },
-  scrollableContent: {
-    maxHeight: "90%",
-    overflowY: "auto",
-  },
-};
+import CustomLoadingCellRenderer from "./CustomLoadingCellRenderer";
 
 function StudentListView() {
   const [token, setToken] = useState([]);
@@ -78,6 +71,7 @@ function StudentListView() {
                 display: "flex", // Center align vertically
                 alignItems: "center",
                 marginTop: "10px",
+                cursor: "pointer",
               }}
             >
               {" "}
@@ -269,6 +263,16 @@ function StudentListView() {
       });
   }, [token]);
 
+  const loadingCellRenderer = useMemo(() => {
+    return CustomLoadingCellRenderer;
+  }, []);
+
+  const loadingCellRendererParams = useMemo(() => {
+    return {
+      loadingMessage: "One moment please...",
+    };
+  }, []);
+
   return (
     <div className="ag-theme-material" style={{ height: 400, width: "100%" }}>
       <div style={{ display: "flex", flexDirection: "row" }}>
@@ -316,6 +320,8 @@ function StudentListView() {
         pagination={true}
         paginationAutoPageSize={true}
         onCellClicked={cellClickedListener}
+        loadingCellRenderer={loadingCellRenderer}
+        loadingCellRendererParams={loadingCellRendererParams}
       ></AgGridReact>{" "}
     </div>
   );

diff --git a/packages/admin/src/components/TeacherListView.jsx b/packages/admin/src/components/TeacherListView.jsx
@@ -126,29 +126,45 @@ function TeacherListView() {
 
   return (
     <div className="ag-theme-material" style={{ height: 400, width: "100%" }}>
-      <button
-        onClick={onBtnExport}
-        style={{ background: "#41C88E", border: "none", borderRadius: "5px" }}
-      >
-        <FileDownloadOutlinedIcon
-          style={{ color: "white", fontSize: "largest" }}
-        />
-        <H4 style={{ color: "white" }}> Download Template </H4>
-      </button>
-      <button
-        onClick={onBtnExportFields}
-        style={{
-          background: "#41C88E",
-          border: "none",
-          borderRadius: "5px",
-          marginLeft: "10px", // Add some spacing between the buttons
-        }}
-      >
-        <FileDownloadOutlinedIcon
-          style={{ color: "white", fontSize: "largest" }}
-        />
-        <H4 style={{ color: "white" }}> Download username & password </H4>
-      </button>
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <button
+          onClick={onBtnExport}
+          style={{
+            background: "#41C88E",
+            border: "none",
+            borderRadius: "5px",
+            display: "flex", // Center align vertically
+            alignItems: "center",
+          }}
+        >
+          <FileDownloadOutlinedIcon
+            style={{
+              color: "white",
+              fontSize: "largest",
+            }}
+          />
+          <H4 style={{ color: "white" }}> Download Template </H4>
+        </button>
+        <button
+          onClick={onBtnExportFields}
+          style={{
+            background: "#41C88E",
+            border: "none",
+            borderRadius: "5px",
+            marginLeft: "10px", // Add some spacing between the buttons
+            display: "flex", // Center align vertically
+            alignItems: "center",
+          }}
+        >
+          <FileDownloadOutlinedIcon
+            style={{
+              color: "white",
+              fontSize: "largest",
+            }}
+          />
+          <H4 style={{ color: "white" }}> Download username & password </H4>
+        </button>
+      </div>
       <AgGridReact
         ref={gridRef}
         rowData={rowData}

diff --git a/packages/admin/src/pages/SchoolPage.jsx b/packages/admin/src/pages/SchoolPage.jsx
@@ -60,8 +60,8 @@ function SchoolPage() {
 
   const customStyles = {
     content: {
-      width: "30%",
-      height: "50%",
+      width: "auto",
+      height: "auto",
       top: "50%",
       left: "50%",
       right: "auto",

diff --git a/packages/admin/src/pages/StudentPage.jsx b/packages/admin/src/pages/StudentPage.jsx
@@ -60,8 +60,8 @@ function StudentPage() {
 
   const customStyles = {
     content: {
-      width: "30%",
-      height: "50%",
+      width: "auto",
+      height: "auto",
       top: "50%",
       left: "50%",
       right: "auto",

diff --git a/packages/admin/src/pages/TeacherPage.jsx b/packages/admin/src/pages/TeacherPage.jsx
@@ -56,8 +56,8 @@ function TeacherPage() {
   //csv modal styles
   const customStyles = {
     content: {
-      width: "30%",
-      height: "50%",
+      width: "auto",
+      height: "auto",
       top: "50%",
       left: "50%",
       right: "auto",

diff --git a/packages/core/jsconfig.json b/packages/core/jsconfig.json
@@ -2,5 +2,5 @@
   "compilerOptions": {
     "baseUrl": "src"
   },
-  "include": ["src"]
+  "include": ["src", "../student-app/src/api's/getNewAccessToken.jsx"]
 }
diff --git a/packages/core/src/pages/StudentLogin.js b/packages/core/src/pages/StudentLogin.js
@@ -31,6 +31,7 @@ import {
   H3,
   telemetryFactory,
 } from "@shiksha/common-lib";
+import getNewAccessToken from "api's/getNewAccessToken";
 
 const colors = overrideColorTheme();
 
@@ -190,8 +191,14 @@ export default function StudentLogin({ swPath }) {
       );
 
       if (result?.data) {
+        console.log("Token Data");
+
         let token = result.data.access_token;
+        let refreshToken = result.data.refresh_token;
+        console.log(refreshToken);
+        localStorage.setItem("refreshToken", refreshToken);
         localStorage.setItem("token", token);
+
         let resultTeacher = {};
         // try {
 

diff --git a/packages/student-app/src/App.js b/packages/student-app/src/App.js
@@ -12,6 +12,8 @@ import adminRoutes from "./Routes/admin";
 const StudentLogin = React.lazy(() => import("core/StudentLogin"));
 import { teachers, students } from "./config/footerLinks";
 import ReactGA from "react-ga";
+import { useEffect } from "react";
+import getNewAccessToken from "api's/getNewAccessToken";
 
 function App() {
   const [routes, setRoutes] = React.useState([]);
@@ -54,6 +56,52 @@ function App() {
     telemetryFactory.init(); //TODO: Enable this when all the telemetry endpoints are set
   }, []);
 
+  useEffect(() => {
+    // Call checkTokenValidity to start checking immediately after the component is mounted
+    checkTokenValidity();
+  }, []);
+
+  function checkTokenValidity() {
+    console.log("INSIDE checkTokenValidity");
+    const refreshToken = localStorage.getItem("refreshToken");
+    console.log("INSIDE tokenCheckInterval2 ");
+    console.log(refreshToken);
+    if (Object.keys(refreshToken).length) {
+      const interval = 30 * 60 * 1000; // 30 minutes
+      // const interval = 2 * 1000; // 2 seconds
+
+      const tokenCheckInterval = setInterval(async () => {
+        console.log("INSIDE tokenCheckInterval");
+        try {
+          const response = await fetch(
+            "https://alt.uniteframework.io/auth/realms/hasura-app/protocol/openid-connect/token/introspect",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+              },
+              body: `client_id=hasura-app&token=${refreshToken}&client_secret=ixoAI89JICldF5xF9Y8cgDGJrbOu6SGw`,
+            }
+          );
+          console.log("REFRESH check");
+          console.log(response.ok);
+
+          if (response.ok == false) {
+            const result = await getNewAccessToken();
+            const newAccessToken = result.access_token;
+            const newrefreshToken = result.refresh_token;
+            localStorage.setItem("token", newAccessToken);
+            localStorage.setItem("token", newrefreshToken);
+          } else {
+            return;
+          }
+        } catch (error) {
+          console.error("Error checking token:", error);
+        }
+      }, interval);
+    }
+  }
+
   const skipLogin = !(
     process.env.REACT_APP_OAUTH_PROXY_ENABLED == undefined ||
     JSON.parse(process.env.REACT_APP_OAUTH_PROXY_ENABLED) == false

diff --git a/packages/student-app/src/api's/getNewAccessToken.jsx b/packages/student-app/src/api's/getNewAccessToken.jsx
@@ -0,0 +1,19 @@
+import axios from "axios";
+
+const getNewAccessToken = async () => {
+  const token = localStorage.getItem("refreshToken");
+  let result;
+  await axios.post(
+    "https://alt.uniteframework.io/auth/realms/hasura-app/protocol/openid-connect/token",
+    new URLSearchParams({
+      client_id: "hasura-app",
+      refresh_token: token,
+      grant_type: "refresh_token",
+      client_secret: "ixoAI89JICldF5xF9Y8cgDGJrbOu6SGw",
+    }).then((response) => {
+      return response;
+    })
+  );
+};
+
+export default getNewAccessToken;