Feature/v1.0.41 (#6)

UI improvements
in4it · Aug 19, 2024 · feb0df7 · feb0df7
1 parent e4a970f
commit feb0df7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 13 deletions.
diff --git a/docs/release-notes.md b/docs/release-notes.md
@@ -1,5 +1,10 @@
 # Release Notes
 
+## Version v1.0.41
+* UI: axios version bump
+* UI: disable https forwarding when request is served over http
+* UI: general improvements
+
 ## Version v1.0.40
 * GCP marketplace release
 
@@ -42,4 +47,4 @@ Once upgraded to this release, new upgrades can be done through the UI.
 
 * Local Users Support
 * OIDC Support
-* Wireguard® for VPN Connections
+* Wireguard® for VPN Connections
diff --git a/latest b/latest
@@ -1 +1 @@
-v1.0.40
+v1.0.41
diff --git a/webapp/src/Routes/Setup/Setup.tsx b/webapp/src/Routes/Setup/Setup.tsx
@@ -8,7 +8,6 @@ import { useAuthContext } from "../../Auth/Auth";
 import { useForm } from '@mantine/form';
 import axios, { AxiosError } from "axios";
 
-
 type SetupRequest = {
   hostname: string;
   enableTLS: boolean;
@@ -130,13 +129,14 @@ export function Setup() {
               </div>
             </UnstyledButton>
             <Space h="md" />
-            <UnstyledButton className={classes.button} onClick={() => form.setFieldValue("redirectToHttps", !form.getValues().redirectToHttps )}>
+            <UnstyledButton className={classes.button} onClick={() => window.location.protocol === "https:" ? form.setFieldValue("redirectToHttps", !form.getValues().redirectToHttps) : null }>
               <Checkbox
                 tabIndex={-1}
                 size="md"
                 mr="xl"
                 styles={{ input: { cursor: 'pointer' } }}
                 aria-hidden
+                disabled={ window.location.protocol === "https:" ? false : true }
                 key={form.key('redirectToHttps')}
                 {...form.getInputProps('redirectToHttps', { type: 'checkbox' })}
               />
@@ -147,7 +147,7 @@ export function Setup() {
                 <Text fz="sm" c="dimmed">
                   Redirect http requests to https.
                   Not needed when terminating TLS on an external LoadBalancer.
-                  Recommended once TLS is activated and working.
+                  Can only be enabled once this page is requested through https.
                 </Text>
               </div>
             </UnstyledButton>

diff --git a/webapp/src/Routes/Upgrade/Upgrade.tsx b/webapp/src/Routes/Upgrade/Upgrade.tsx
@@ -27,6 +27,7 @@ export function Upgrade() {
         if(upgradeStatus === "upgrading") {
           setUpgradeStatus("completed")
           setMessage("")
+          queryClient.invalidateQueries({ queryKey: ['version'] })
         }
         return res.json()
         }

diff --git a/webapp/src/Routes/Users/ListUsers.tsx b/webapp/src/Routes/Users/ListUsers.tsx
@@ -17,6 +17,11 @@ type UserIDAndPassword = {
   password: string;
 }
 
+type Status = {
+  status: string;
+  color: string;
+}
+
 export function ListUsers({localAuthDisabled}:Props) {
     const [opened, { open, close }] = useDisclosure(false);
     const [newPassword, setNewPassword] = useState<string>();
@@ -89,12 +94,7 @@ export function ListUsers({localAuthDisabled}:Props) {
         saml: 'teal',
         provisioned: 'grape',
     };
-    const userStatus: Record<string, string> = {
-        active: 'green',
-        suspended: 'red',
-        tokenExpired: 'amber',
-        localAuthDisabled: 'yellow'
-    };
+
     const rolesData = ["user", "admin"];
 
     const openPasswordModal = (id:string) => {
@@ -106,6 +106,16 @@ export function ListUsers({localAuthDisabled}:Props) {
       const date = new Date(dateInput)
       return date.getFullYear() + "-" + (date.getMonth()+1).toString().padStart(2, '0') + "-" + date.getDate().toString().padStart(2, '0') + " " + date.getHours().toString().padStart(2, '0') + ":" + date.getMinutes().toString().padStart(2, '0') + ":" + date.getSeconds().toString().padStart(2, '0')
     }
+
+    const getStatus = (item:User) : Status => {
+      if(item.suspended) {
+        return {status: "Suspended", color: "red"} 
+      }
+      if (localAuthDisabled && item.oidcID == "" && !item.provisioned) {
+        return {status: "Local Auth Disabled", color: "yellow"} 
+      }
+      return {status: "Active", color: "green"}
+    }
 
     const rows = data.map((item:User) => (
           <Table.Tr key={item.id}>
@@ -148,8 +158,8 @@ export function ListUsers({localAuthDisabled}:Props) {
               : null}
             </Table.Td>
             <Table.Td>
-              <Badge color={userStatus[item.suspended ? "suspended" : localAuthDisabled && item.oidcID == "" ? "localAuthDisabled" : "active"]} variant="light">
-                {item.suspended ? "Suspended" : localAuthDisabled && item.oidcID == "" ? "Local Auth Disabled" : "Active"}
+              <Badge color={getStatus(item).color} variant="light">
+                {getStatus(item).status}
               </Badge>
             </Table.Td>
             <Table.Td>