From 68f0ade18848d41f2579bd6642199e6a1b9b0c18 Mon Sep 17 00:00:00 2001 From: Edward Viaene Date: Thu, 5 Sep 2024 11:33:46 -0500 Subject: [PATCH] UI elements for packetlogs --- pkg/rest/router.go | 2 +- pkg/rest/stats.go | 19 ++++++-- pkg/rest/types.go | 5 ++- webapp/package-lock.json | 35 +++++---------- webapp/package.json | 2 +- webapp/src/App.tsx | 3 ++ webapp/src/Auth/AuthBanner.tsx | 4 +- webapp/src/Auth/AuthError.tsx | 4 +- webapp/src/NavBar/NavBar.tsx | 44 ++++++++++--------- webapp/src/NavBar/Navbar.module.css | 1 + .../src/Routes/Connection/ListConnections.tsx | 4 +- .../src/Routes/Connection/NewConnection.tsx | 4 +- webapp/src/Routes/Home/Home.tsx | 4 +- webapp/src/Routes/Home/UpgradeAlert.tsx | 4 +- .../src/Routes/Licenses/GetMoreLicenses.tsx | 4 +- webapp/src/Routes/Profile/ChangePassword.tsx | 4 +- webapp/src/Routes/Profile/ListFactors.tsx | 6 +-- webapp/src/Routes/Profile/NewFactor.tsx | 4 +- .../src/Routes/Setup/AuthSetup/AuthSetup.tsx | 8 ++-- .../Setup/AuthSetup/ListOIDCProviders.tsx | 12 ++--- .../Setup/AuthSetup/ListSAMLProviders.tsx | 16 +++---- webapp/src/Routes/Setup/AuthSetup/NewOIDC.tsx | 4 +- webapp/src/Routes/Setup/AuthSetup/NewSAML.tsx | 4 +- webapp/src/Routes/Setup/GeneralSetup.tsx | 6 +-- webapp/src/Routes/Setup/Restart.tsx | 4 +- webapp/src/Routes/Setup/Setup.tsx | 14 +++--- webapp/src/Routes/Setup/TemplateSetup.tsx | 4 +- webapp/src/Routes/Setup/VPNSetup.tsx | 4 +- webapp/src/Routes/Upgrade/Upgrade.tsx | 4 +- webapp/src/Routes/Users/ListUsers.tsx | 12 ++--- webapp/src/Routes/Users/NewUser.tsx | 4 +- webapp/yarn.lock | 19 +++----- 32 files changed, 134 insertions(+), 134 deletions(-) diff --git a/pkg/rest/router.go b/pkg/rest/router.go index 227e688..98a1e8d 100644 --- a/pkg/rest/router.go +++ b/pkg/rest/router.go @@ -63,7 +63,7 @@ func (c *Context) getRouter(assets fs.FS, indexHtml []byte) *http.ServeMux { mux.Handle("/api/users", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.usersHandler))))) mux.Handle("/api/user/{id}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.userHandler))))) mux.Handle("/api/stats/user/{date}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.userStatsHandler))))) - mux.Handle("/api/stats/{user}/{date}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.ipLogsHandler))))) + mux.Handle("/api/stats/packetlogs/{user}/{date}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.packetLogsHandler))))) return mux } diff --git a/pkg/rest/stats.go b/pkg/rest/stats.go index e1efccd..e387f0d 100644 --- a/pkg/rest/stats.go +++ b/pkg/rest/stats.go @@ -210,7 +210,7 @@ func (c *Context) userStatsHandler(w http.ResponseWriter, r *http.Request) { c.write(w, out) } -func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) { +func (c *Context) packetLogsHandler(w http.ResponseWriter, r *http.Request) { vpnConfig, err := wireguard.GetVPNConfig(c.Storage.Client) if err != nil { c.returnError(w, fmt.Errorf("get vpn config error: %s", err), http.StatusBadRequest) @@ -252,7 +252,7 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) { for _, user := range users { userMap[user.ID] = user.Login } - // calculate stats + // logs statsFiles := []string{ path.Join(wireguard.VPN_STATS_DIR, wireguard.VPN_PACKETLOGGER_DIR, userID+"-"+date.Format("2006-01-02")+".log"), } @@ -265,6 +265,8 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) { return } logInputData.Write(fileLogData) + } else { + fmt.Printf("File does not exist: %s", statsFile) } } @@ -281,9 +283,10 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) { "Destination": "string", }, }, + Data: []LogRow{}, } - for scanner.Scan() { // all other entries + for scanner.Scan() { inputSplit := strings.Split(scanner.Text(), ",") timestamp, err := time.Parse(wireguard.TIMESTAMP_FORMAT, inputSplit[0]) if err != nil { @@ -301,7 +304,15 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) { return } - out, err := json.Marshal(LogDataResponse{Enabled: true, LogData: logData}) + // logtypes + packetLogTypes := []string{} + for k, enabled := range vpnConfig.PacketLogsTypes { + if enabled { + packetLogTypes = append(packetLogTypes, k) + } + } + + out, err := json.Marshal(LogDataResponse{Enabled: true, LogData: logData, LogTypes: packetLogTypes}) if err != nil { c.returnError(w, fmt.Errorf("user stats response marshal error: %s", err), http.StatusBadRequest) return diff --git a/pkg/rest/types.go b/pkg/rest/types.go index 7ecbd76..59b3e09 100644 --- a/pkg/rest/types.go +++ b/pkg/rest/types.go @@ -209,8 +209,9 @@ type NewUserRequest struct { } type LogDataResponse struct { - LogData LogData `json:"logData"` - Enabled bool `json:"enabled"` + LogData LogData `json:"logData"` + Enabled bool `json:"enabled"` + LogTypes []string `json:"logTypes"` } type LogData struct { diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 7c054e3..120f729 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -12,7 +12,6 @@ "@mantine/dates": "^7.12.1", "@mantine/form": "^7.10.0", "@mantine/hooks": "^7.9.2", - "@tabler/icons-react": "^3.4.0", "@tanstack/react-query": "^5.36.2", "axios": "^1.7.4", "base32-encode": "^2.0.0", @@ -24,6 +23,7 @@ "react-cookie": "^7.1.4", "react-dom": "^18.2.0", "react-hook-qrcode-svg": "^1.5.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.23.1" }, "devDependencies": { @@ -1356,30 +1356,6 @@ "win32" ] }, - "node_modules/@tabler/icons": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.5.0.tgz", - "integrity": "sha512-I53dC3ZSHQ2MZFGvDYJelfXm91L2bTTixS4w5jTAulLhHbCZso5Bih4Rk/NYZxlngLQMKHvEYwZQ+6w/WluKiA==", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/codecalm" - } - }, - "node_modules/@tabler/icons-react": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.5.0.tgz", - "integrity": "sha512-bn05XKZV3ZfOv5Jr1FCTmVPOQGBVJoA4NefrnR919rqg6WGXAa08NovONHJGSuMxXUMV3b9Cni85diIW/E9yuw==", - "dependencies": { - "@tabler/icons": "3.5.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/codecalm" - }, - "peerDependencies": { - "react": ">= 16" - } - }, "node_modules/@tanstack/query-core": { "version": "5.45.0", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.45.0.tgz", @@ -3733,6 +3709,15 @@ "react": ">=18.0.0" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index b33abd9..41d6964 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -15,7 +15,6 @@ "@mantine/dates": "^7.12.1", "@mantine/form": "^7.10.0", "@mantine/hooks": "^7.9.2", - "@tabler/icons-react": "^3.4.0", "@tanstack/react-query": "^5.36.2", "axios": "^1.7.4", "base32-encode": "^2.0.0", @@ -27,6 +26,7 @@ "react-cookie": "^7.1.4", "react-dom": "^18.2.0", "react-hook-qrcode-svg": "^1.5.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.23.1" }, "devDependencies": { diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index ed795a8..3d7d19c 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -18,6 +18,7 @@ import { Users } from "./Routes/Users/Users"; import { Profile } from "./Routes/Profile/Profile"; import { Upgrade } from "./Routes/Upgrade/Upgrade"; import { GetMoreLicenses } from "./Routes/Licenses/GetMoreLicenses"; +import { PacketLogs } from "./Routes/Logs/PacketLogs"; const queryClient = new QueryClient() @@ -44,6 +45,7 @@ export default function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -52,6 +54,7 @@ export default function App() { } /> } /> } /> + } /> diff --git a/webapp/src/Auth/AuthBanner.tsx b/webapp/src/Auth/AuthBanner.tsx index 74eb62e..54d3d21 100644 --- a/webapp/src/Auth/AuthBanner.tsx +++ b/webapp/src/Auth/AuthBanner.tsx @@ -18,7 +18,7 @@ import { AppSettings } from '../Constants/Constants'; import { useAuthContext } from './Auth'; import { AuthError } from './AuthError'; import { MFAInput } from './MFAInput'; -import { IconInfoCircle } from '@tabler/icons-react'; +import { TbInfoCircle } from "react-icons/tb"; type LoginResponse = { @@ -117,7 +117,7 @@ export function AuthBanner() { authenticate.mutate({login, password, factorResponse}) } } - const alertIcon = + const alertIcon = if (error) return 'An backend error has occurred: ' + error.message diff --git a/webapp/src/Auth/AuthError.tsx b/webapp/src/Auth/AuthError.tsx index 3e8e7c0..be91b21 100644 --- a/webapp/src/Auth/AuthError.tsx +++ b/webapp/src/Auth/AuthError.tsx @@ -1,9 +1,9 @@ import { Alert } from "@mantine/core"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { useSearchParams } from "react-router-dom"; export function AuthError() { - const alertIcon = ; + const alertIcon = ; let [ searchParams, _ ] = useSearchParams(); if(!searchParams.has("error")) return '' diff --git a/webapp/src/NavBar/NavBar.tsx b/webapp/src/NavBar/NavBar.tsx index 5616b8d..d0437fe 100644 --- a/webapp/src/NavBar/NavBar.tsx +++ b/webapp/src/NavBar/NavBar.tsx @@ -1,15 +1,18 @@ import { useState } from 'react'; import { Group, Code } from '@mantine/core'; import { - IconBellRinging, - IconSettings, - IconLogout, - IconUser, - IconPlugConnected, - IconCloudDataConnection, - IconBook, - IconUserCircle, -} from '@tabler/icons-react'; + TbBellRinging, + TbSettings, + TbLogout, + TbUser, + TbPlugConnected, + TbCloudDataConnection, + TbBook, + TbUserCircle, + +} from 'react-icons/tb'; +import { FaStream } from "react-icons/fa"; + import classes from './Navbar.module.css'; import { NavLink, useLocation } from 'react-router-dom'; import { useAuthContext } from '../Auth/Auth'; @@ -22,16 +25,17 @@ export function NavBar() { const [active, setActive] = useState(pathname); const data = authInfo.role === "admin" ? [ - { link: '/', label: 'Status', icon: IconBellRinging }, - { link: '/connection', label: 'VPN Connections', icon: IconPlugConnected }, - { link: '/users', label: 'Users', icon: IconUser }, - { link: '/setup', label: 'VPN Setup', icon: IconSettings }, - { link: '/auth-setup', label: 'Authentication & Provisioning', icon: IconCloudDataConnection }, - { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: IconBook }, + { link: '/', label: 'Status', icon: TbBellRinging }, + { link: '/connection', label: 'VPN Connections', icon: TbPlugConnected }, + { link: '/users', label: 'Users', icon: TbUser }, + { link: '/setup', label: 'VPN Setup', icon: TbSettings }, + { link: '/auth-setup', label: 'Authentication & Provisioning', icon: TbCloudDataConnection }, + { link: '/packetlogs', label: 'Logging', icon: FaStream }, + { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: TbBook }, ] : [ - { link: '/connection', label: 'VPN Connections', icon: IconPlugConnected }, - { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: IconBook }, + { link: '/connection', label: 'VPN Connections', icon: TbPlugConnected }, + { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: TbBook }, ]; const links = data.map((item) => ( @@ -45,7 +49,7 @@ export function NavBar() { setActive(item.link); }} > - + {item.label} )); @@ -62,14 +66,14 @@ export function NavBar() {
{authInfo.userType == "local" ? { setActive("/profile"); }} data-active={"/profile" === active || undefined}> - + Profile : null } - + Logout
diff --git a/webapp/src/NavBar/Navbar.module.css b/webapp/src/NavBar/Navbar.module.css index d2db1b8..ed6b460 100644 --- a/webapp/src/NavBar/Navbar.module.css +++ b/webapp/src/NavBar/Navbar.module.css @@ -60,4 +60,5 @@ margin-right: var(--mantine-spacing-sm); width: rem(25px); height: rem(25px); + stroke-width: 1.25px; } \ No newline at end of file diff --git a/webapp/src/Routes/Connection/ListConnections.tsx b/webapp/src/Routes/Connection/ListConnections.tsx index 40e2399..cf584cd 100644 --- a/webapp/src/Routes/Connection/ListConnections.tsx +++ b/webapp/src/Routes/Connection/ListConnections.tsx @@ -4,7 +4,7 @@ import { Table, ScrollArea, Button } from '@mantine/core'; import classes from './ListConnections.module.css'; import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'; import { AppSettings } from '../../Constants/Constants'; -import { IconTrash } from '@tabler/icons-react'; +import { TbTrash } from 'react-icons/tb'; import axios from 'axios'; import { useAuthContext } from '../../Auth/Auth'; import { Download } from './Download'; @@ -49,7 +49,7 @@ export function ListConnections() { {row.name} - + )); diff --git a/webapp/src/Routes/Connection/NewConnection.tsx b/webapp/src/Routes/Connection/NewConnection.tsx index 3315a41..0197e50 100644 --- a/webapp/src/Routes/Connection/NewConnection.tsx +++ b/webapp/src/Routes/Connection/NewConnection.tsx @@ -4,13 +4,13 @@ import axios, { AxiosError } from "axios" import { useAuthContext } from "../../Auth/Auth"; import { useState } from "react"; import { Alert, Button } from "@mantine/core"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; export function NewConnection() { const queryClient = useQueryClient() const {authInfo} = useAuthContext(); const [newConnectionError, setError] = useState("") - const alertIcon = + const alertIcon = const newConnection = useMutation({ mutationFn: () => { return axios.post(AppSettings.url + '/connections', {}, { diff --git a/webapp/src/Routes/Home/Home.tsx b/webapp/src/Routes/Home/Home.tsx index 86dac66..dcb0fdf 100644 --- a/webapp/src/Routes/Home/Home.tsx +++ b/webapp/src/Routes/Home/Home.tsx @@ -6,7 +6,7 @@ import classes from './Home.module.css'; import { AppSettings } from '../../Constants/Constants'; import { useQuery } from '@tanstack/react-query'; import { UpgradeAlert } from './UpgradeAlert'; -import { IconPaperBag } from '@tabler/icons-react'; +import { TbPaperBag } from 'react-icons/tb'; import { UserStats } from './UserStats'; export function Home() { @@ -54,7 +54,7 @@ export function Home() { {isPending || data.cloudType === "aws-marketplace" || data.cloudType === "azure" ? null : - diff --git a/webapp/src/Routes/Home/UpgradeAlert.tsx b/webapp/src/Routes/Home/UpgradeAlert.tsx index 98d145b..f4ef6b8 100644 --- a/webapp/src/Routes/Home/UpgradeAlert.tsx +++ b/webapp/src/Routes/Home/UpgradeAlert.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; import { AppSettings } from '../../Constants/Constants'; import { useQuery } from '@tanstack/react-query'; -import { IconInfoCircle } from '@tabler/icons-react'; +import { TbInfoCircle } from "react-icons/tb"; export function UpgradeAlert() { const {authInfo} = useAuthContext() @@ -26,7 +26,7 @@ export function UpgradeAlert() { if (error) return '' if (isPending) return '' - const alertIcon = + const alertIcon = if (!data.newVersionAvailable) return '' diff --git a/webapp/src/Routes/Licenses/GetMoreLicenses.tsx b/webapp/src/Routes/Licenses/GetMoreLicenses.tsx index 9de1121..9fc3ede 100644 --- a/webapp/src/Routes/Licenses/GetMoreLicenses.tsx +++ b/webapp/src/Routes/Licenses/GetMoreLicenses.tsx @@ -4,7 +4,7 @@ import classes from './GetMoreLicenses.module.css'; import { AppSettings } from '../../Constants/Constants'; import { useQuery, useQueryClient } from '@tanstack/react-query'; -import { IconInfoCircle } from '@tabler/icons-react'; +import { TbInfoCircle } from "react-icons/tb"; import { useState } from 'react'; export function GetMoreLicenses() { @@ -36,7 +36,7 @@ export function GetMoreLicenses() { if (error) return 'cannot retrieve licensed users' if (isPending) return 'Loading...' - const alertIcon = ; + const alertIcon = ; return ( diff --git a/webapp/src/Routes/Profile/ChangePassword.tsx b/webapp/src/Routes/Profile/ChangePassword.tsx index 241cdfb..e1f7cd0 100644 --- a/webapp/src/Routes/Profile/ChangePassword.tsx +++ b/webapp/src/Routes/Profile/ChangePassword.tsx @@ -1,5 +1,5 @@ import { Alert, Button, PasswordInput, Space } from "@mantine/core"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { useMutation } from "@tanstack/react-query"; import axios from "axios"; import { useState } from "react"; @@ -57,7 +57,7 @@ export function ChangePassword() { } changePassword.mutate({password: newPassword}) } - const alertIcon = ; + const alertIcon = ; return ( <> diff --git a/webapp/src/Routes/Profile/ListFactors.tsx b/webapp/src/Routes/Profile/ListFactors.tsx index d805aca..95bd8e6 100644 --- a/webapp/src/Routes/Profile/ListFactors.tsx +++ b/webapp/src/Routes/Profile/ListFactors.tsx @@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { AppSettings } from "../../Constants/Constants" import { useAuthContext } from "../../Auth/Auth"; import { ActionIcon, Group, Menu, Table, Text, rem } from "@mantine/core"; -import { IconDots, IconTrash } from "@tabler/icons-react"; +import { TbDots, TbTrash } from "react-icons/tb"; import axios from "axios"; type Factor = { @@ -69,12 +69,12 @@ export function ListFactors() { > - + } + leftSection={} color="red" onClick={() => deleteFactor.mutate(item.name)} > diff --git a/webapp/src/Routes/Profile/NewFactor.tsx b/webapp/src/Routes/Profile/NewFactor.tsx index 323f019..226e263 100644 --- a/webapp/src/Routes/Profile/NewFactor.tsx +++ b/webapp/src/Routes/Profile/NewFactor.tsx @@ -4,7 +4,7 @@ import classes from './NewFactor.module.css'; import { useMutation } from "@tanstack/react-query"; import axios, { AxiosError } from "axios"; import { AppSettings } from "../../Constants/Constants"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { useAuthContext } from "../../Auth/Auth"; import { useForm } from "@mantine/form"; import { QRCode } from "./QRCode"; @@ -50,7 +50,7 @@ export function NewFactor({setShowNewFactor, secret} :Props) { } } }) - const alertIcon = ; + const alertIcon = ; const form = useForm({ mode: 'uncontrolled', initialValues: { diff --git a/webapp/src/Routes/Setup/AuthSetup/AuthSetup.tsx b/webapp/src/Routes/Setup/AuthSetup/AuthSetup.tsx index 90738d6..42d4741 100644 --- a/webapp/src/Routes/Setup/AuthSetup/AuthSetup.tsx +++ b/webapp/src/Routes/Setup/AuthSetup/AuthSetup.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import { NewOIDC } from "./NewOIDC"; import { ListOIDCProviders } from "./ListOIDCProviders"; import { Provisioning } from "./Provisioning"; -import { IconDevices, IconIdBadge, IconUserCircle } from "@tabler/icons-react"; +import { TbDevices, TbIdBadge, TbUserCircle } from "react-icons/tb"; import { ListSAMLProviders } from "./ListSAMLProviders"; import { NewSAML } from "./NewSAML"; @@ -20,13 +20,13 @@ export function AuthSetup() { - }> + }> OpenID Connect (OIDC) Connections - }> + }> SAML - }> + }> Provisioning diff --git a/webapp/src/Routes/Setup/AuthSetup/ListOIDCProviders.tsx b/webapp/src/Routes/Setup/AuthSetup/ListOIDCProviders.tsx index 072a1cc..57fd80b 100644 --- a/webapp/src/Routes/Setup/AuthSetup/ListOIDCProviders.tsx +++ b/webapp/src/Routes/Setup/AuthSetup/ListOIDCProviders.tsx @@ -4,7 +4,7 @@ import { Table, ScrollArea, Button, Tooltip, rem } from '@mantine/core'; import classes from './ListOIDCProviders.module.css'; import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'; import { AppSettings } from '../../../Constants/Constants'; -import { IconCheck, IconCopy, IconTrash } from '@tabler/icons-react'; +import { TbCheck, TbCopy, TbTrash } from 'react-icons/tb'; import { useClipboard } from '@mantine/hooks'; import axios from 'axios'; import { useAuthContext } from '../../../Auth/Auth'; @@ -65,9 +65,9 @@ export function ListOIDCProviders() { variant="light" rightSection={ clipboard.copied && activeRow === row.id + "#redirectURI" ? ( - + ) : ( - + ) } radius="xl" @@ -94,9 +94,9 @@ export function ListOIDCProviders() { variant="light" rightSection={ clipboard.copied && activeRow === row.id + "#loginURL" ? ( - + ) : ( - + ) } radius="xl" @@ -112,7 +112,7 @@ export function ListOIDCProviders() { {row.scope} - + )); diff --git a/webapp/src/Routes/Setup/AuthSetup/ListSAMLProviders.tsx b/webapp/src/Routes/Setup/AuthSetup/ListSAMLProviders.tsx index 8a3735c..b965c8f 100644 --- a/webapp/src/Routes/Setup/AuthSetup/ListSAMLProviders.tsx +++ b/webapp/src/Routes/Setup/AuthSetup/ListSAMLProviders.tsx @@ -4,7 +4,7 @@ import { Table, ScrollArea, Button, Tooltip, rem, Select } from '@mantine/core'; import classes from './ListSAMLProviders.module.css'; import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'; import { AppSettings } from '../../../Constants/Constants'; -import { IconCheck, IconCopy, IconTrash } from '@tabler/icons-react'; +import { TbCheck, TbCopy, TbTrash } from 'react-icons/tb'; import { useClipboard } from '@mantine/hooks'; import axios from 'axios'; import { useAuthContext } from '../../../Auth/Auth'; @@ -91,9 +91,9 @@ export function ListSAMLProviders() { variant="light" rightSection={ clipboard.copied && activeRow === row.id + "#acs" ? ( - + ) : ( - + ) } radius="xl" @@ -120,9 +120,9 @@ export function ListSAMLProviders() { variant="light" rightSection={ clipboard.copied && activeRow === row.id + "#aud" ? ( - + ) : ( - + ) } radius="xl" @@ -149,9 +149,9 @@ export function ListSAMLProviders() { variant="light" rightSection={ clipboard.copied && activeRow === row.id + "#issuer" ? ( - + ) : ( - + ) } radius="xl" @@ -166,7 +166,7 @@ export function ListSAMLProviders() { - + )); diff --git a/webapp/src/Routes/Setup/AuthSetup/NewOIDC.tsx b/webapp/src/Routes/Setup/AuthSetup/NewOIDC.tsx index 02d7b60..9cbae3c 100644 --- a/webapp/src/Routes/Setup/AuthSetup/NewOIDC.tsx +++ b/webapp/src/Routes/Setup/AuthSetup/NewOIDC.tsx @@ -4,7 +4,7 @@ import classes from './NewOIDC.module.css'; import { useMutation } from "@tanstack/react-query"; import axios, { AxiosError } from "axios"; import { AppSettings } from "../../../Constants/Constants"; -import { IconX } from "@tabler/icons-react"; +import { TbX } from "react-icons/tb"; import { useAuthContext } from "../../../Auth/Auth"; type OIDCProviderError = { @@ -59,7 +59,7 @@ export function NewOIDC({setShowNewOIDCProvider} :Props) { <>
- + {oidcProviderError}
diff --git a/webapp/src/Routes/Setup/AuthSetup/NewSAML.tsx b/webapp/src/Routes/Setup/AuthSetup/NewSAML.tsx index 7fe7965..9b4691a 100644 --- a/webapp/src/Routes/Setup/AuthSetup/NewSAML.tsx +++ b/webapp/src/Routes/Setup/AuthSetup/NewSAML.tsx @@ -4,7 +4,7 @@ import classes from './NewSAML.module.css'; import { useMutation } from "@tanstack/react-query"; import axios, { AxiosError } from "axios"; import { AppSettings } from "../../../Constants/Constants"; -import { IconX } from "@tabler/icons-react"; +import { TbX } from "react-icons/tb"; import { useAuthContext } from "../../../Auth/Auth"; type SAMLProviderError = { @@ -58,7 +58,7 @@ export function NewSAML({setShowNewSAMLProvider} :Props) { <>
- + {samlProviderError}
diff --git a/webapp/src/Routes/Setup/GeneralSetup.tsx b/webapp/src/Routes/Setup/GeneralSetup.tsx index 95e84e0..156acda 100644 --- a/webapp/src/Routes/Setup/GeneralSetup.tsx +++ b/webapp/src/Routes/Setup/GeneralSetup.tsx @@ -1,7 +1,7 @@ import { Text, Checkbox, Container, UnstyledButton, Tooltip, Center, rem, TextInput, Space, Button, Alert } from "@mantine/core"; import classes from './Setup.module.css'; import { useEffect, useState } from "react"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { AppSettings } from "../../Constants/Constants"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useAuthContext } from "../../Auth/Auth"; @@ -48,7 +48,7 @@ export function GeneralSetup() { enableOIDCTokenRenewal: false, }, }); - const alertIcon = ; + const alertIcon = ; const setupMutation = useMutation({ mutationFn: (setupRequest: GeneralSetupRequest) => { return axios.post(AppSettings.url + '/setup/general', setupRequest, { @@ -91,7 +91,7 @@ export function GeneralSetup() { >
- +
diff --git a/webapp/src/Routes/Setup/Restart.tsx b/webapp/src/Routes/Setup/Restart.tsx index 8337bf3..aa017c5 100644 --- a/webapp/src/Routes/Setup/Restart.tsx +++ b/webapp/src/Routes/Setup/Restart.tsx @@ -1,6 +1,6 @@ import { Container, Button, Alert, Space } from "@mantine/core"; import { useState } from "react"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { AppSettings } from "../../Constants/Constants"; import { useMutation } from "@tanstack/react-query"; import { useAuthContext } from "../../Auth/Auth"; @@ -15,7 +15,7 @@ export function Restart() { const [pending, setPending] = useState(false) const [saveError, setSaveError] = useState("") const {authInfo} = useAuthContext(); - const alertIcon = ; + const alertIcon = ; const setupMutation = useMutation({ mutationFn: () => { return axios.post(AppSettings.url + '/setup/restart-vpn', {}, { diff --git a/webapp/src/Routes/Setup/Setup.tsx b/webapp/src/Routes/Setup/Setup.tsx index 54c236a..c8387be 100644 --- a/webapp/src/Routes/Setup/Setup.tsx +++ b/webapp/src/Routes/Setup/Setup.tsx @@ -1,31 +1,33 @@ import { Container, Tabs, Title, rem } from "@mantine/core"; import classes from './Setup.module.css'; -import { IconFile, IconNetwork, IconRestore, IconSettings } from "@tabler/icons-react"; +import { TbFile, TbNetwork, TbRestore, TbSettings } from "react-icons/tb"; import { GeneralSetup } from "./GeneralSetup"; import { VPNSetup } from "./VPNSetup"; import { TemplateSetup } from "./TemplateSetup"; import { Restart } from "./Restart"; +import { useParams } from "react-router-dom"; export function Setup() { const iconStyle = { width: rem(12), height: rem(12) }; + let { page } = useParams(); return ( VPN Setup - + - }> + }> General - }> + }> VPN - }> + }> Templates - }> + }> Restart diff --git a/webapp/src/Routes/Setup/TemplateSetup.tsx b/webapp/src/Routes/Setup/TemplateSetup.tsx index e96035a..d48985b 100644 --- a/webapp/src/Routes/Setup/TemplateSetup.tsx +++ b/webapp/src/Routes/Setup/TemplateSetup.tsx @@ -1,6 +1,6 @@ import { Container, Button, Alert, Textarea, Space } from "@mantine/core"; import { useEffect, useState } from "react"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { AppSettings } from "../../Constants/Constants"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useAuthContext } from "../../Auth/Auth"; @@ -41,7 +41,7 @@ export function TemplateSetup() { serverTemplate: "", }, }); - const alertIcon = ; + const alertIcon = ; const setupMutation = useMutation({ mutationFn: (setupRequest: TemplateSetupRequest) => { return axios.post(AppSettings.url + '/setup/templates', setupRequest, { diff --git a/webapp/src/Routes/Setup/VPNSetup.tsx b/webapp/src/Routes/Setup/VPNSetup.tsx index 70f923f..f51d00c 100644 --- a/webapp/src/Routes/Setup/VPNSetup.tsx +++ b/webapp/src/Routes/Setup/VPNSetup.tsx @@ -2,7 +2,7 @@ import { Container, TextInput, Alert, InputWrapper, Button, Space, UnstyledButton, Checkbox, Text, MultiSelect } from "@mantine/core"; import { useEffect, useState } from "react"; import classes from './Setup.module.css'; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { AppSettings } from "../../Constants/Constants"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useAuthContext } from "../../Auth/Auth"; @@ -84,7 +84,7 @@ export function VPNSetup() { } }) - const alertIcon = ; + const alertIcon = ; useEffect(() => { if (isSuccess) { diff --git a/webapp/src/Routes/Upgrade/Upgrade.tsx b/webapp/src/Routes/Upgrade/Upgrade.tsx index 7cbf1a1..88b192f 100644 --- a/webapp/src/Routes/Upgrade/Upgrade.tsx +++ b/webapp/src/Routes/Upgrade/Upgrade.tsx @@ -5,7 +5,7 @@ import classes from './Upgrade.module.css'; import { AppSettings } from '../../Constants/Constants'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import axios, { AxiosError } from 'axios'; -import { IconInfoCircle } from '@tabler/icons-react'; +import { TbInfoCircle } from "react-icons/tb"; import { useEffect, useState } from 'react'; export function Upgrade() { @@ -74,7 +74,7 @@ export function Upgrade() { if (error) return 'cannot retrieve licensed users' if (isPending) return 'Loading...' - const alertIcon = ; + const alertIcon = ; return ( diff --git a/webapp/src/Routes/Users/ListUsers.tsx b/webapp/src/Routes/Users/ListUsers.tsx index 0abd406..f29b4c9 100644 --- a/webapp/src/Routes/Users/ListUsers.tsx +++ b/webapp/src/Routes/Users/ListUsers.tsx @@ -3,7 +3,7 @@ import { Table, Button, rem, Group, Text, Badge, Select, PasswordInput, Menu, Ac //import classes from './ListUsers.module.css'; import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query'; import { AppSettings } from '../../Constants/Constants'; -import { IconDots, IconInfoCircle, IconPassword, IconTrash, IconUserPause } from '@tabler/icons-react'; +import { TbDots, TbInfoCircle, TbPassword, TbTrash, TbUserPause } from 'react-icons/tb'; import { useDisclosure } from '@mantine/hooks'; import axios from 'axios'; import { useAuthContext } from '../../Auth/Auth'; @@ -82,7 +82,7 @@ export function ListUsers({localAuthDisabled}:Props) { queryClient.invalidateQueries({ queryKey: ['license'] }) } }) - const alertIcon = ; + const alertIcon = ; if(isPending) return "Loading..." @@ -182,26 +182,26 @@ export function ListUsers({localAuthDisabled}:Props) { > - + {item.oidcID == "" ? } + leftSection={} onClick={() => openPasswordModal(item.id)} > Change Password : null } } + leftSection={} onClick={() => updateUser.mutate({...item, id: item.id, password: "", suspended: !item.suspended})} > {item.suspended ? "Unsuspend" : "Suspend"} User } + leftSection={} color="red" onClick={() => deleteUser.mutate(item.id)} > diff --git a/webapp/src/Routes/Users/NewUser.tsx b/webapp/src/Routes/Users/NewUser.tsx index ce03b87..4ea3c91 100644 --- a/webapp/src/Routes/Users/NewUser.tsx +++ b/webapp/src/Routes/Users/NewUser.tsx @@ -4,7 +4,7 @@ import classes from './NewUser.module.css'; import { useMutation } from "@tanstack/react-query"; import axios, { AxiosError } from "axios"; import { AppSettings } from "../../Constants/Constants"; -import { IconInfoCircle } from "@tabler/icons-react"; +import { TbInfoCircle } from "react-icons/tb"; import { useAuthContext } from "../../Auth/Auth"; import { useForm } from "@mantine/form"; @@ -40,7 +40,7 @@ export function NewUser({setShowNewUser} :Props) { } } }) - const alertIcon = ; + const alertIcon = ; const rolesData = ["user", "admin"]; const form = useForm({ mode: 'uncontrolled', diff --git a/webapp/yarn.lock b/webapp/yarn.lock index f280366..e30472c 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -411,18 +411,6 @@ resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz" integrity sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w== -"@tabler/icons-react@^3.4.0": - version "3.5.0" - resolved "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.5.0.tgz" - integrity sha512-bn05XKZV3ZfOv5Jr1FCTmVPOQGBVJoA4NefrnR919rqg6WGXAa08NovONHJGSuMxXUMV3b9Cni85diIW/E9yuw== - dependencies: - "@tabler/icons" "3.5.0" - -"@tabler/icons@3.5.0": - version "3.5.0" - resolved "https://registry.npmjs.org/@tabler/icons/-/icons-3.5.0.tgz" - integrity sha512-I53dC3ZSHQ2MZFGvDYJelfXm91L2bTTixS4w5jTAulLhHbCZso5Bih4Rk/NYZxlngLQMKHvEYwZQ+6w/WluKiA== - "@tanstack/query-core@5.45.0": version "5.45.0" resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.45.0.tgz" @@ -1777,6 +1765,11 @@ react-hook-qrcode-svg@^1.5.1: resolved "https://registry.npmjs.org/react-hook-qrcode-svg/-/react-hook-qrcode-svg-1.5.1.tgz" integrity sha512-VEzs5VOWg4RQ7NT1kv34f2k78TjIHPgXbrxVTDqqg7LZoPkdbjvjEB5XqI682U7o7/gyo2piIGE+fqqOtO7OHw== +react-icons@^5.3.0: + version "5.3.0" + resolved "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz" + integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" @@ -1846,7 +1839,7 @@ react-textarea-autosize@8.5.3: use-composed-ref "^1.3.0" use-latest "^1.2.1" -"react@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.3.0", react@>=16.8, react@>=16.8.0, react@>=18.0.0: +react@*, "react@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16.3.0", react@>=16.8, react@>=16.8.0, react@>=18.0.0: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==