Skip to content

Commit

Permalink
fix: fixed alert component
Browse files Browse the repository at this point in the history
  • Loading branch information
@NithinKuruba
NithinKuruba committed Jun 25, 2024
1 parent 68213f9 commit 4f3d0a6
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 141 deletions.
8 changes: 8 additions & 0 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
FROM node:20-alpine
WORKDIR /opt/app
COPY . .
RUN yarn install --frozen-lockfile
RUN yarn build

EXPOSE 3000
CMD ["yarn", "start"]
7 changes: 5 additions & 2 deletions src/app/api/token/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,12 @@ export async function POST(request: NextRequest, response: NextResponse) {
});

if (!tokenResult.ok) {
const err = await tokenResult.json();
return NextResponse.json(
{ error: "Failed to retrieve token" },
{ status: 400 }
{
error: err?.error_description || err?.error || err,
},
{ status: tokenResult.status }
);
}

Expand Down
29 changes: 23 additions & 6 deletions src/app/components/AlertProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import { Box, Snackbar, SnackbarOrigin } from "@mui/material";
import { createContext, useState } from "react";
import { Alert, Box, Snackbar, SnackbarOrigin } from "@mui/material";
import { createContext, useEffect, useState } from "react";
import Slide, { SlideProps } from "@mui/material/Slide";

interface AlertProviderProps {
children: React.ReactNode;
Expand All @@ -10,6 +11,10 @@ interface State extends SnackbarOrigin {
open: boolean;
}

function SlideTransition(props: SlideProps) {
return <Slide {...props} direction="down" />;
}

export interface AlertContext {
error: string;
setError: React.Dispatch<React.SetStateAction<string>>;
Expand All @@ -29,9 +34,11 @@ export const AlertProvider = (props: AlertProviderProps) => {
});
const { vertical, horizontal, open } = state;

const handleClick = (newState: SnackbarOrigin) => () => {
setState({ ...newState, open: true });
};
useEffect(() => {
if (error) {
setState({ ...state, open: true });
}
}, [error]);

const handleClose = () => {
setState({ ...state, open: false });
Expand All @@ -47,7 +54,17 @@ export const AlertProvider = (props: AlertProviderProps) => {
onClose={handleClose}
message={error}
autoHideDuration={5000}
/>
TransitionComponent={SlideTransition}
>
<Alert
onClose={handleClose}
severity="error"
sx={{ width: "100%" }}
variant="filled"
>
{error}
</Alert>
</Snackbar>
</Box>
)}

Expand Down
273 changes: 143 additions & 130 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export default function Form() {
}
} catch (err: any) {
setError(err?.message || err);
console.error("testoig", error);
console.error(error);
}
};

Expand Down Expand Up @@ -301,12 +301,20 @@ export default function Form() {

return (
<>
<Grid container sx={{ flexGrow: 1, padding: 0.5 }} spacing={0.5}>
<Grid container sx={{ flexGrow: 1, padding: 0.5 }}>
<Grid item xs={12} md={authenticated ? 6 : 12}>
<Typography variant="h5" sx={{ padding: 1, color: "black" }}>
OpenID-Connect
</Typography>
<form noValidate onSubmit={handleSubmit}>
<form
noValidate
onSubmit={handleSubmit}
style={{
height: "100vh",
display: "flex",
flexDirection: "column",
}}
>
<FormControl sx={{ width: "100%", padding: 1 }}>
<FormLabel>Flow</FormLabel>
<RadioGroup
Expand All @@ -332,147 +340,152 @@ export default function Form() {
/>
</RadioGroup>
</FormControl>
<Box
sx={{
textAlign: "center",
height: "100vh",
}}
>
<TextField
name="discoveryUrl"
label="Discovery URL"
onChange={(e) => handleChange(e)}
value={formValues.discoveryUrl.value}
InputProps={{
endAdornment: validDiscoveryUrl && (
<CheckCircleIcon color="success" />
),
{flowType && (
<Box
sx={{
textAlign: "center",
height: "100vh",
}}
/>

{flowType === "authorization-code" && (
<>
<TextField
name="authorizationUrl"
label="Authorization URL"
onChange={(e) => handleChange(e)}
value={formValues.authorizationUrl.value}
required
error={formValues.authorizationUrl.error}
helperText={
formValues.authorizationUrl.error &&
formValues.authorizationUrl.errorMessage
}
/>
<TextField
name="forwardQueryParams"
label="Forward Query Params"
onChange={(e) => handleChange(e)}
value={formValues.forwardQueryParams.value}
/>
</>
)}
>
<TextField
name="discoveryUrl"
label="Discovery URL"
onChange={(e) => handleChange(e)}
value={formValues.discoveryUrl.value}
InputProps={{
endAdornment: validDiscoveryUrl && (
<CheckCircleIcon color="success" />
),
}}
/>

<TextField
name="tokenUrl"
label="Token URL"
onChange={(e) => handleChange(e)}
value={formValues.tokenUrl.value}
error={formValues.tokenUrl.error}
helperText={
formValues.tokenUrl.error && formValues.tokenUrl.errorMessage
}
required
/>
{!["service-account", "password"].includes(flowType) && (
<>
<TextField
name="authorizationUrl"
label="Authorization URL"
onChange={(e) => handleChange(e)}
value={formValues.authorizationUrl.value}
required
error={formValues.authorizationUrl.error}
helperText={
formValues.authorizationUrl.error &&
formValues.authorizationUrl.errorMessage
}
/>
<TextField
name="forwardQueryParams"
label="Forward Query Params"
onChange={(e) => handleChange(e)}
value={formValues.forwardQueryParams.value}
helperText="param1=value1&param2=value2"
/>
</>
)}

{flowType === "authorization-code" && (
<TextField
name="logoutUrl"
label="Logout URL"
name="tokenUrl"
label="Token URL"
onChange={(e) => handleChange(e)}
value={formValues.logoutUrl.value}
value={formValues.tokenUrl.value}
error={formValues.tokenUrl.error}
helperText={
formValues.tokenUrl.error &&
formValues.tokenUrl.errorMessage
}
required
/>
)}
<TextField
name="clientId"
label="Client ID"
onChange={(e) => handleChange(e)}
value={formValues.clientId.value}
required
error={formValues.clientId.error}
helperText={
formValues.clientId.error && formValues.clientId.errorMessage
}
/>
<TextField
name="clientSecret"
label="Client Secret"
onChange={(e) => handleChange(e)}
value={formValues.clientSecret.value}
/>
{flowType === "password" && (
<>
<TextField
name="username"
label="Username"
onChange={(e) => handleChange(e)}
value={formValues.username.value}
error={formValues.username.error}
helperText={
formValues.username.error &&
formValues.username.errorMessage
}
/>

{!["service-account", "password"].includes(flowType) && (
<TextField
name="password"
label="Password"
name="logoutUrl"
label="Logout URL"
onChange={(e) => handleChange(e)}
value={formValues.password.value}
error={formValues.password.error}
helperText={
formValues.password.error &&
formValues.password.errorMessage
}
value={formValues.logoutUrl.value}
/>
</>
)}

<MultiSelect
onChange={setScopes}
label="Scopes"
defaultValue={["openid"]}
fixedOptions={["openid"]}
/>
{flowType === "authorization-code" && (
)}
<TextField
name="redirectUri"
label="Redirect URI"
name="clientId"
label="Client ID"
onChange={(e) => handleChange(e)}
value={formValues.redirectUri.value}
value={formValues.clientId.value}
required
error={formValues.clientId.error}
helperText={
formValues.clientId.error &&
formValues.clientId.errorMessage
}
/>
)}
{authenticated ? (
<Button variant="contained" onClick={handleLogout}>
Logout
</Button>
) : (
<Button variant="contained" type="submit">
Login
<TextField
name="clientSecret"
label="Client Secret"
onChange={(e) => handleChange(e)}
value={formValues.clientSecret.value}
/>
{flowType === "password" && (
<>
<TextField
name="username"
label="Username"
onChange={(e) => handleChange(e)}
value={formValues.username.value}
error={formValues.username.error}
helperText={
formValues.username.error &&
formValues.username.errorMessage
}
/>

<TextField
name="password"
label="Password"
onChange={(e) => handleChange(e)}
value={formValues.password.value}
error={formValues.password.error}
helperText={
formValues.password.error &&
formValues.password.errorMessage
}
/>
</>
)}

<MultiSelect
onChange={setScopes}
label="Scopes"
defaultValue={["openid"]}
fixedOptions={["openid"]}
/>
{!["service-account", "password"].includes(flowType) && (
<TextField
name="redirectUri"
label="Redirect URI"
onChange={(e) => handleChange(e)}
value={formValues.redirectUri.value}
/>
)}
{authenticated ? (
<Button variant="contained" onClick={handleLogout}>
Logout
</Button>
) : (
<Button variant="contained" type="submit">
Login
</Button>
)}
<Button
variant="contained"
onClick={() => {
localStorage.removeItem("formValues");
window.location.reload();
}}
color="error"
sx={{ marginLeft: 2 }}
>
Reset
</Button>
)}
<Button
variant="contained"
onClick={() => {
localStorage.removeItem("formValues");
window.location.reload();
}}
color="error"
sx={{ marginLeft: 2 }}
>
Reset
</Button>
</Box>
</Box>
)}
</form>
</Grid>
{authenticated && (
Expand Down
Loading

0 comments on commit 4f3d0a6

Please sign in to comment.