Merge pull request #237 from ThePhisch/feature-235-multi_accounts_modal

Added `Modal` for Login Multiaccounts select
rucio · Jul 12, 2023 · 8d3c3e1 · 8d3c3e1
2 parents a64073d + 411d2d9
commit 8d3c3e1
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@types/react": "18.0.27",
     "@types/react-datepicker": "^4.10.0",
     "@types/react-dom": "18.0.10",
+    "@types/react-modal": "^3.16.0",
     "bulma": "^0.9.4",
     "bulma-checkradio": "^2.1.3",
     "bulma-steps": "^2.2.1",
@@ -44,6 +45,7 @@
     "react-datepicker": "^4.10.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
+    "react-modal": "^3.16.1",
     "reflect-metadata": "^0.1.13",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.11.0",

diff --git a/src/component-library/components/Pages/Login/Login.stories.tsx b/src/component-library/components/Pages/Login/Login.stories.tsx
@@ -64,6 +64,7 @@ LoginPage.args = {
         message: 'Invalid Login Credentials',
         rucioIdentity: '',
         rucioAccount: '',
+        rucioMultiAccount: '',
         rucioAuthToken: '',
         rucioAuthType: AuthType.USERPASS,
         rucioAuthTokenExpires: '',

diff --git a/src/component-library/components/Pages/Login/Login.tsx b/src/component-library/components/Pages/Login/Login.tsx
@@ -11,6 +11,10 @@ import { AuthViewModel } from '@/lib/infrastructure/data/auth/auth';
 import { Alert } from '../../Alert/Alert';
 import { LabelledInput } from './LabelledInput';
 import { DefaultVO } from '@/lib/core/entity/auth-models';
+import Modal from "react-modal";
+import { Dropdown } from '../../Input/Dropdown';
+import { H2 } from '../../Text/Headings/H2';
+import { P } from '../../Text/Content/P';
 
 export type SupportedAuthWorkflows = "oidc" | "x509" | "userpass" | "none"
 
@@ -23,13 +27,14 @@ export interface LoginPageProps {
     oidcSubmitHandler: (oidcProvider: OIDCProvider, vo: VO, account?: string) => void
 }
 
+
 export const Login = ({
     loginViewModel,
     authViewModel,
     userPassSubmitHandler: handleUserPassSubmit,
     x509SubmitHandler: handleX509Submit,
     x509SessionHandler: handleX509Session,
-    oidcSubmitHandler: handleOIDCSubmit
+    oidcSubmitHandler: handleOIDCSubmit,
 }: LoginPageProps) => {
 
     const [showUserPassLoginForm, setShowUserPassLoginForm] = useState<boolean>(false)
@@ -42,6 +47,20 @@ export const Login = ({
 
     const [error, setError] = useState<string | undefined>(undefined)
 
+    const [multiaccounts, setMultiaccounts] = useState<string[]>([])
+    const [multiaccountModal, setMultiaccountModal] = useState<boolean>(false)
+
+    useEffect(() => {
+        setMultiaccounts(authViewModel?.rucioMultiAccount?.split(',') ?? [])
+    }, [authViewModel])
+    useEffect(() => {
+        if (multiaccounts.length > 1) {
+            setMultiaccountModal(true)
+        } else {
+            setMultiaccountModal(false)
+        }
+    }, [multiaccounts])
+
     useEffect(() => {
         if (authViewModel && authViewModel.status === 'error') {
             setError(authViewModel.message)
@@ -53,11 +72,41 @@ export const Login = ({
     }, [loginViewModel, authViewModel])
 
     return (
-        <div className={twMerge(
-            "rounded p-4 flex flex-col justify-center space-y-2",
-            "border dark:border-2",
-            "border-gray-300 dark:border-white",
-        )}>
+        <div
+            className={twMerge(
+                "rounded p-4 flex flex-col justify-center space-y-2",
+                "border dark:border-2",
+                "border-gray-300 dark:border-white",
+            )}
+            id="root"
+        >
+            <Modal
+                isOpen={multiaccountModal}
+                onRequestClose={() => { setMultiaccountModal(false) }}
+                overlayClassName="fixed bg-transparent inset-0 z-0" // will not work if set with twmerge (uses custom regex)
+                className={twMerge(
+                    "absolute top-32 inset-x-32 rounded shadow",
+                    "border-2",
+                    "bg-white dark:bg-gray-800",
+                    "flex flex-col space-y-2 p-2"
+                )}
+                contentLabel="Multiaccount Modal"
+            >
+                <H2>Select Account</H2>
+                <P>Multiple accounts are mapped to the passed credentials. Choose one to continue.</P>
+                <Dropdown<string>
+                    keys={multiaccounts}
+                    renderFunc={(key: string | undefined) => { return (<p>{key ?? "undefined"}</p>) }}
+                    handleChange={(key: string | undefined) => { setAccount(key) }}
+                    disableUndefined
+                />
+                <Button
+                    type="submit"
+                    label="Select"
+                    disabled={account === undefined}
+                    onClick={() => {setMultiaccountModal(false)}}
+                />
+            </Modal>
             <Collapsible id='login-page-error' showIf={error !== undefined}>
                 <Alert variant="error" message={error} onClose={
                     () => {

diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
@@ -579,6 +579,10 @@ video {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -594,6 +598,11 @@ video {
   left: 0px;
 }
 
+.inset-x-32 {
+  left: 8rem;
+  right: 8rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -614,6 +623,14 @@ video {
   top: 2.5rem;
 }
 
+.top-32 {
+  top: 8rem;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1169,6 +1186,10 @@ video {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;
@@ -1523,6 +1544,10 @@ video {
   background-color: rgb(94 234 212 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));

diff --git a/src/lib/infrastructure/data/auth/auth.d.ts b/src/lib/infrastructure/data/auth/auth.d.ts
@@ -7,6 +7,7 @@ export type AuthViewModel = {
     redirectTo?: string;
     rucioIdentity: string;
     rucioAccount: string;
+    rucioMultiAccount?: string;
     rucioAuthType: AuthType | '';
     rucioAuthToken: string;
     rucioAuthTokenExpires: string;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,7 +4,10 @@ module.exports = {
         extract: {
             columnMetaStyle: (content) => {
                 return content.match(/(?<=meta([:\s{]*)style:\s")[a-zA-Z\-\[\]0-9:\s]*(?=")/)
-            }
+            },
+            reactModalStyle: (content) => {
+                return content.match(/(?<=overlayClassName=")[a-zA-Z\-\[\]0-9:\s]*(?=")/)
+            },
         }
     },
     theme: {