From 4f3d0a6d5c2cbee15f1bf1a543c953fe8edd82fc Mon Sep 17 00:00:00 2001
From: Nithin Shekar Kuruba <nithinshekar.kuruba@gov.bc.ca>
Date: Tue, 25 Jun 2024 14:51:00 -0700
Subject: [PATCH] fix: fixed alert component

---
 Dockerfile                           |   8 +
 src/app/api/token/route.ts           |   7 +-
 src/app/components/AlertProvider.tsx |  29 ++-
 src/app/page.tsx                     | 273 ++++++++++++++-------------
 src/app/services/authorization.ts    |   4 +-
 tsconfig.json                        |   3 +-
 6 files changed, 183 insertions(+), 141 deletions(-)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..96a5661
--- /dev/null
+++ b/Dockerfile
@@ -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"]
diff --git a/src/app/api/token/route.ts b/src/app/api/token/route.ts
index a5c8c2e..910f7a3 100644
--- a/src/app/api/token/route.ts
+++ b/src/app/api/token/route.ts
@@ -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 }
     );
   }
 
diff --git a/src/app/components/AlertProvider.tsx b/src/app/components/AlertProvider.tsx
index 85bc97b..4fbc0d7 100644
--- a/src/app/components/AlertProvider.tsx
+++ b/src/app/components/AlertProvider.tsx
@@ -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;
@@ -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>>;
@@ -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 });
@@ -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>
       )}
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 59d5640..982e307 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -191,7 +191,7 @@ export default function Form() {
       }
     } catch (err: any) {
       setError(err?.message || err);
-      console.error("testoig", error);
+      console.error(error);
     }
   };
 
@@ -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
@@ -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 && (
diff --git a/src/app/services/authorization.ts b/src/app/services/authorization.ts
index 9f5d6de..921eac3 100644
--- a/src/app/services/authorization.ts
+++ b/src/app/services/authorization.ts
@@ -119,8 +119,8 @@ export default class AuthService {
         },
       });
       if (response.status !== 200) {
-        const error = await response.text();
-        throw new Error("Failed to login");
+        const error = await response.json();
+        throw new Error(error?.error);
       }
       const tokens = await response.json();
       sessionStorage.setItem("tokens", JSON.stringify(tokens || {}));
diff --git a/tsconfig.json b/tsconfig.json
index 7b28589..18c1136 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -7,7 +8,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",