feat: JWT apiAuthentication UI integration

package.json

@@ -46,7 +46,7 @@
     "axios": "^1.11.0",
     "bcryptjs": "^3.0.2",
     "bit-mask": "^1.0.2",
-    "classnames": "2.5.1",
+    "clsx": "^2.1.1",
     "concurrently": "^9.2.0",
     "connect-mongo": "^5.1.0",
     "cors": "^2.8.5",

src/constants/languageColors.ts

@@ -1,5 +1,3 @@
-// src/constants/languageColors.ts
-
 export const languageColors: Record<string, string> = {
   '1C Enterprise': '#814CCC',
   '2-Dimensional Array': '#38761D',

src/routes.tsx

@@ -25,9 +25,11 @@ import User from './ui/views/User/User';
 import UserList from './ui/views/UserList/UserList';
 import RepoDetails from './ui/views/RepoDetails/RepoDetails';
 import RepoList from './ui/views/RepoList/RepoList';
+import SettingsView from './ui/views/Settings/Settings';
 
 import { RepoIcon } from '@primer/octicons-react';
-import { Group, AccountCircle, Dashboard } from '@material-ui/icons';
+import { Group, AccountCircle, Dashboard, Settings } from '@material-ui/icons';
+
 import { Route } from './types/models';
 
 const dashboardRoutes: Route[] = [
@@ -97,6 +99,18 @@ const dashboardRoutes: Route[] = [
     layout: '/dashboard',
     visible: false,
   },
+  {
+    path: '/admin/settings',
+    name: 'Settings',
+    icon: Settings,
+    component: (props) =>
+      <RouteGuard
+        component={SettingsView}
+        fullRoutePath={`/dashboard/admin/settings`}
+      />,
+    layout: '/dashboard',
+    visible: true,
+  },
 ];
 
 export default dashboardRoutes;

src/service/passport/jwtAuthHandler.js

@@ -17,10 +17,6 @@ const jwtAuthHandler = (overrideConfig = null) => {
           return next();
       }
 
-      if (req.isAuthenticated()) {
-          return next();
-      }
-
       const token = req.header("Authorization");
       if (!token) {
           return res.status(401).send("No token provided\n");
@@ -30,11 +26,15 @@ const jwtAuthHandler = (overrideConfig = null) => {
       const audience = expectedAudience || clientID;
 
       if (!authorityURL) {
-          return res.status(500).send("OIDC authority URL is not configured\n");
+          return res.status(500).send({
+            message: "JWT handler: authority URL is not configured\n"
+          });
       }
 
       if (!clientID) {
-          return res.status(500).send("OIDC client ID is not configured\n");
+          return res.status(500).send({
+            message: "JWT handler: client ID is not configured\n"
+          });
       }
 
       const tokenParts = token.split(" ");

src/ui/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardStyle';
 
@@ -23,7 +23,7 @@ const Card: React.FC<CardProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardClasses = classNames({
+  const cardClasses = clsx({
     [classes.card]: true,
     [classes.cardPlain]: plain,
     [classes.cardProfile]: profile,

src/ui/components/Card/CardAvatar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardAvatarStyle';
 
@@ -21,7 +21,7 @@ const CardAvatar: React.FC<CardAvatarProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardAvatarClasses = classNames({
+  const cardAvatarClasses = clsx({
     [classes.cardAvatar]: true,
     [classes.cardAvatarProfile]: profile,
     [classes.cardAvatarPlain]: plain,

src/ui/components/Card/CardBody.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardBodyStyle';
 
@@ -21,7 +21,7 @@ const CardBody: React.FC<CardBodyProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardBodyClasses = classNames({
+  const cardBodyClasses = clsx({
     [classes.cardBody]: true,
     [classes.cardBodyPlain]: plain,
     [classes.cardBodyProfile]: profile,

src/ui/components/Card/CardFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardFooterStyle';
 
@@ -25,7 +25,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
 }) => {
   const classes = useStyles();
 
-  const cardFooterClasses = classNames({
+  const cardFooterClasses = clsx({
     [classes.cardFooter]: true,
     [classes.cardFooterPlain]: plain,
     [classes.cardFooterProfile]: profile,

src/ui/components/Card/CardHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardHeaderStyle';
 
@@ -20,7 +20,7 @@ const CardHeader: React.FC<CardHeaderProps> = (props) => {
   const classes = useStyles();
   const { className, children, color, plain, stats, icon, ...rest } = props;
 
-  const cardHeaderClasses = classNames({
+  const cardHeaderClasses = clsx({
     [classes.cardHeader]: true,
     [color ? classes[`${color}CardHeader`] : '']: color,
     [classes.cardHeaderPlain]: plain,

src/ui/components/Card/CardIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardIconStyle';
 
@@ -18,7 +18,7 @@ const CardIcon: React.FC<CardIconProps> = (props) => {
   const classes = useStyles();
   const { className, children, color, ...rest } = props;
 
-  const cardIconClasses = classNames({
+  const cardIconClasses = clsx({
     [classes.cardIcon]: true,
     [color ? classes[`${color}CardHeader`] : '']: color,
     [className || '']: className !== undefined,

src/ui/components/CustomButtons/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import styles from '../../assets/jss/material-dashboard-react/components/buttonStyle';
@@ -48,7 +48,7 @@ export default function RegularButton(props: RegularButtonProps) {
     ...rest
   } = props;
 
-  const btnClasses = classNames({
+  const btnClasses = clsx({
     [classes.button]: true,
     [classes[size as Size]]: size,
     [classes[color as Color]]: color,