Feat/mui5

package.json

@@ -32,6 +32,7 @@
         "build": "npx lerna run build",
         "test": "lerna run test:ci",
         "bootstrap": "npx lerna bootstrap",
+        "start": "npx lerna --scope @immobiliarelabs/backstage-plugin-ldap-auth run start",
         "publish:ci": "lerna publish from-package --yes --pre-dist-tag alpha",
         "version:release": "lerna version --yes --conventional-commits --conventional-graduate --create-release github --message 'chore(release): publish'",
         "version:prerelease": "lerna version --yes --force-publish --conventional-commits --conventional-prerelease --create-release github --message 'chore(prerelease): publish'",

packages/ldap-auth/package.json

@@ -30,14 +30,17 @@
     "dependencies": {
         "@backstage/core-components": "^0.14.0",
         "@backstage/core-plugin-api": "^1.9.0",
-        "@backstage/theme": "^0.5.1",
-        "@material-ui/core": "^4.12.4",
+        "@backstage/theme": "^0.5.2",
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@mui/material": "^5.15.15",
+        "@mui/styles": "^5.15.15",
         "@react-hookz/web": "^23.0.0",
         "password-validator": "^5.3.0",
         "zod": "^3.17.3"
     },
     "peerDependencies": {
-        "react": "^16.13.1 || ^17.0.0"
+        "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
     },
     "devDependencies": {
         "@backstage/cli": "^0.22.0",

packages/ldap-auth/src/components/LoginPage/Form.tsx

@@ -1,7 +1,7 @@
 import { Content, Page } from '@backstage/core-components';
 import React, { useEffect, useState } from 'react';
-import { Paper, TextField, Container, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Paper, TextField, Container, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import PasswordValidator from 'password-validator';
 
 export type LoginFormProps = {
@@ -15,17 +15,10 @@ export type LoginFormProps = {
     usernameLabel?: string;
 };
 
-const useStyles = makeStyles((theme) => ({
-    paper: {
-        padding: theme.spacing(2),
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-    },
-    paperHead: {
-        marginBottom: theme.spacing(2),
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-    },
+const StyledPaper = styled(Paper)(({ theme }) => ({
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
 }));
 
 const passwordSchema = new PasswordValidator();
@@ -53,7 +46,6 @@ export const LoginForm = ({
     const [password, setPassword] = useState('');
     const [uError, setUError] = useState(Boolean(error));
     const [pError, setPError] = useState(Boolean(error));
-    const classes = useStyles();
 
     function onClick() {
         const isUsernameValid = validateUsern(username) as boolean;
@@ -92,7 +84,7 @@ export const LoginForm = ({
         <Page themeId="tool">
             <Content>
                 <Container maxWidth="sm">
-                    <Paper elevation={4} className={classes.paper}>
+                    <StyledPaper elevation={4}>
                         <TextField
                             required
                             label={usernameLabel || 'LDAP Name'}
@@ -129,7 +121,7 @@ export const LoginForm = ({
                         >
                             Login
                         </Button>
-                    </Paper>
+                    </StyledPaper>
                 </Container>
             </Content>
         </Page>