From a556a5ce592c82d522866ddbec925ef930bead74 Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Wed, 11 Oct 2023 17:55:03 +0200
Subject: [PATCH] First pass, broken CSS
---
frontend/public/index.html | 42 +++++++++----------
frontend/public/manifest.json | 10 ++---
frontend/src/components/Modal/Modal/Modal.tsx | 8 ++--
.../src/components/UserModal/UserModal.tsx | 20 +++++++++
.../src/services/users/transformations.ts | 8 ++++
frontend/src/services/users/types.ts | 1 +
6 files changed, 59 insertions(+), 30 deletions(-)
diff --git a/frontend/public/index.html b/frontend/public/index.html
index aa069f27..76284b1b 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,21 +1,19 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="Web site created using create-react-app"
- />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <!--
+
+<head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <meta name="description" content="Stackspin" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+ <!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <!--
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
- </head>
- <body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="root"></div>
- <!--
+ <title>Stackspin Dashboard</title>
+</head>
+
+<body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
+ <div id="root"></div>
+ <!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -39,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
- </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index 080d6c77..8eec81fe 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Stackspin",
+ "name": "Stackspin Dashboard",
"icons": [
{
"src": "favicon.ico",
@@ -8,14 +8,14 @@
"type": "image/x-icon"
},
{
- "src": "logo192.png",
+ "src": "android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
- "src": "logo512.png",
+ "src": "android-chrome-256x256.png",
"type": "image/png",
- "sizes": "512x512"
+ "sizes": "256x256"
}
],
"start_url": ".",
diff --git a/frontend/src/components/Modal/Modal/Modal.tsx b/frontend/src/components/Modal/Modal/Modal.tsx
index 00e5ba03..deef0d97 100644
--- a/frontend/src/components/Modal/Modal/Modal.tsx
+++ b/frontend/src/components/Modal/Modal/Modal.tsx
@@ -49,7 +49,7 @@ export const Modal: React.FC<ModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
- <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
+ <div className="inline-block align-bottom bg-white max-h-screen rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
{isLoading && (
<Dialog.Overlay className="inset-0 bg-gray-400 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
<svg
@@ -85,11 +85,11 @@ export const Modal: React.FC<ModalProps> = ({
</div>
)}
- <div className="bg-white px-4 p-6">{children}</div>
+ <div className="bg-white px-4 p-6 overflow-scroll">{children}</div>
{onSave && (
- <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex">
- {leftActions}
+ <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex absolute bottom-0 w-full">
+ <div className="mr-auto sm:flex gap-2">{leftActions}</div>
<div className="ml-auto sm:flex sm:flex-row-reverse">
<button
type="button"
diff --git a/frontend/src/components/UserModal/UserModal.tsx b/frontend/src/components/UserModal/UserModal.tsx
index 05679dcb..838c955b 100644
--- a/frontend/src/components/UserModal/UserModal.tsx
+++ b/frontend/src/components/UserModal/UserModal.tsx
@@ -195,6 +195,24 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
);
};
+ // Button to reset 2FA
+ const buttonTotp = () => {
+ return (
+ userId &&
+ isAdmin &&
+ user.totp && (
+ <button
+ onClick={passwordLinkModalOpen}
+ type="button"
+ className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm
+ font-medium rounded-md text-yellow-400 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+ >
+ Reset 2FA
+ </button>
+ )
+ );
+ };
+
return (
<>
<Modal
@@ -206,6 +224,7 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
<>
{buttonDelete()}
{buttonPasswordLink()}
+ {buttonTotp()}
</>
}
useCancelButton
@@ -215,6 +234,7 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
<div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
+ {user.totp && <div>hello</div>}
</div>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
diff --git a/frontend/src/services/users/transformations.ts b/frontend/src/services/users/transformations.ts
index 3d4a0ecb..41e1525b 100644
--- a/frontend/src/services/users/transformations.ts
+++ b/frontend/src/services/users/transformations.ts
@@ -45,6 +45,13 @@ export const transformRequestAppRoles = (data: AppRoles): any => {
};
};
+export const transformTotp = (data: any) => {
+ if (data.credentials !== undefined) {
+ return data.credentials.totp !== undefined;
+ }
+ return undefined;
+};
+
export const transformUser = (response: any): User => {
return {
id: response.id ?? '',
@@ -53,6 +60,7 @@ export const transformUser = (response: any): User => {
name: response.traits.name ?? '',
preferredUsername: response.preferredUsername ?? '',
status: response.state ?? '',
+ totp: transformTotp(response),
};
};
diff --git a/frontend/src/services/users/types.ts b/frontend/src/services/users/types.ts
index bdc6cf73..cb3112f8 100644
--- a/frontend/src/services/users/types.ts
+++ b/frontend/src/services/users/types.ts
@@ -5,6 +5,7 @@ export interface User {
name: string;
preferredUsername: string;
status: string;
+ totp?: boolean;
}
export interface FormUser extends User {
--
GitLab