Authentication flow is functional
This commit is contained in:
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>matrixgw_frontend</title>
|
<title>MatrixGW</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
17
matrixgw_frontend/package-lock.json
generated
17
matrixgw_frontend/package-lock.json
generated
@@ -11,6 +11,8 @@
|
|||||||
"@emotion/react": "^11.14.0",
|
"@emotion/react": "^11.14.0",
|
||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@fontsource/roboto": "^5.2.8",
|
"@fontsource/roboto": "^5.2.8",
|
||||||
|
"@mdi/js": "^7.4.47",
|
||||||
|
"@mdi/react": "^1.6.1",
|
||||||
"@mui/icons-material": "^7.3.5",
|
"@mui/icons-material": "^7.3.5",
|
||||||
"@mui/material": "^7.3.5",
|
"@mui/material": "^7.3.5",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
@@ -789,6 +791,21 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@mdi/js": {
|
||||||
|
"version": "7.4.47",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
|
||||||
|
"integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
},
|
||||||
|
"node_modules/@mdi/react": {
|
||||||
|
"version": "1.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
|
||||||
|
"integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@mui/core-downloads-tracker": {
|
"node_modules/@mui/core-downloads-tracker": {
|
||||||
"version": "7.3.5",
|
"version": "7.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.5.tgz",
|
||||||
|
|||||||
@@ -13,6 +13,8 @@
|
|||||||
"@emotion/react": "^11.14.0",
|
"@emotion/react": "^11.14.0",
|
||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@fontsource/roboto": "^5.2.8",
|
"@fontsource/roboto": "^5.2.8",
|
||||||
|
"@mdi/js": "^7.4.47",
|
||||||
|
"@mdi/react": "^1.6.1",
|
||||||
"@mui/icons-material": "^7.3.5",
|
"@mui/icons-material": "^7.3.5",
|
||||||
"@mui/material": "^7.3.5",
|
"@mui/material": "^7.3.5",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
|
|||||||
@@ -1,3 +1,50 @@
|
|||||||
|
import { Alert, Box, Button, CircularProgress } from "@mui/material";
|
||||||
|
import Icon from "@mdi/react";
|
||||||
|
import { mdiOpenid } from "@mdi/js";
|
||||||
|
import { ServerApi } from "../../api/ServerApi";
|
||||||
|
import React from "react";
|
||||||
|
import { AuthApi } from "../../api/AuthApi";
|
||||||
|
|
||||||
export function LoginRoute(): React.ReactElement {
|
export function LoginRoute(): React.ReactElement {
|
||||||
return <>LoginRoute</>;
|
const [loading, setLoading] = React.useState(false);
|
||||||
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
|
||||||
|
const authWithOpenID = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const res = await AuthApi.StartOpenIDLogin();
|
||||||
|
window.location.href = res.url;
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
setError("Failed to initialize OpenID login");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading)
|
||||||
|
return (
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{error && (
|
||||||
|
<Alert style={{ width: "100%" }} severity="error">
|
||||||
|
{error}
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
onClick={authWithOpenID}
|
||||||
|
startIcon={<Icon path={mdiOpenid} size={1} />}
|
||||||
|
>
|
||||||
|
Sign in with {ServerApi.Config.oidc_provider_name}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -46,8 +46,8 @@ export function OIDCCbRoute(): React.ReactElement {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div style={{ textAlign: "center" }}>
|
||||||
<CircularProgress />
|
<CircularProgress />
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,71 @@
|
|||||||
|
import { mdiMessageTextFast } from "@mdi/js";
|
||||||
|
import Icon from "@mdi/react";
|
||||||
|
import { Typography } from "@mui/material";
|
||||||
|
import MuiCard from "@mui/material/Card";
|
||||||
|
import Stack from "@mui/material/Stack";
|
||||||
|
import { styled } from "@mui/material/styles";
|
||||||
|
import { Outlet } from "react-router";
|
||||||
|
|
||||||
|
const Card = styled(MuiCard)(({ theme }) => ({
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignSelf: "center",
|
||||||
|
width: "100%",
|
||||||
|
padding: theme.spacing(4),
|
||||||
|
gap: theme.spacing(2),
|
||||||
|
margin: "auto",
|
||||||
|
[theme.breakpoints.up("sm")]: {
|
||||||
|
maxWidth: "450px",
|
||||||
|
},
|
||||||
|
boxShadow:
|
||||||
|
"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
|
||||||
|
...theme.applyStyles("dark", {
|
||||||
|
boxShadow:
|
||||||
|
"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const SignInContainer = styled(Stack)(({ theme }) => ({
|
||||||
|
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
|
||||||
|
minHeight: "100%",
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
[theme.breakpoints.up("sm")]: {
|
||||||
|
padding: theme.spacing(4),
|
||||||
|
},
|
||||||
|
"&::before": {
|
||||||
|
content: '""',
|
||||||
|
display: "block",
|
||||||
|
position: "absolute",
|
||||||
|
zIndex: -1,
|
||||||
|
inset: 0,
|
||||||
|
backgroundImage:
|
||||||
|
"radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
...theme.applyStyles("dark", {
|
||||||
|
backgroundImage:
|
||||||
|
"radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))",
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export function BaseLoginPage(): React.ReactElement {
|
export function BaseLoginPage(): React.ReactElement {
|
||||||
return <p>Todo login page route</p>;
|
return (
|
||||||
|
<SignInContainer direction="column" justifyContent="space-between">
|
||||||
|
<Card variant="outlined">
|
||||||
|
<Typography
|
||||||
|
component="h1"
|
||||||
|
variant="h4"
|
||||||
|
sx={{ width: "100%", fontSize: "clamp(2rem, 10vw, 2.15rem)" }}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
path={mdiMessageTextFast}
|
||||||
|
size={"1em"}
|
||||||
|
style={{ display: "inline-table" }}
|
||||||
|
/>{" "}
|
||||||
|
MatrixGW
|
||||||
|
</Typography>
|
||||||
|
<Outlet />
|
||||||
|
</Card>
|
||||||
|
</SignInContainer>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user