From 782464b611df56366ccdb8f289df31dadf2a3060 Mon Sep 17 00:00:00 2001 From: D3visionNL Date: Fri, 25 Nov 2022 03:02:28 +0100 Subject: [PATCH] - Standardized button colors. - Fixed register page. - Added copy button for One-Click Sign-Up. - Made sidebar fixed to the viewport (so it doesn't scroll with the page). - Added support for a loader class. - Cleaned up the Users page (added headers and hr's). - Fixed Admin page cause Navy broke it. --- src/components/UserControls.js | 2 +- src/css/App.css | 65 +++++++++++++++++++++++++++++++++- src/css/components/Sidebar.css | 3 +- src/css/index.css | 59 +++++++++++++++++++++++++++++- src/css/pages/Login.css | 15 +++++++- src/css/pages/Register.css | 25 +++++++++++++ src/css/pages/Users.css | 22 ++++++++++++ src/pages/Admin.js | 2 +- src/pages/Login.js | 10 +++--- src/pages/Register.js | 37 ++++++++++--------- src/pages/Users.js | 39 +++++++++++--------- 11 files changed, 235 insertions(+), 44 deletions(-) create mode 100644 src/css/pages/Register.css diff --git a/src/components/UserControls.js b/src/components/UserControls.js index 67a9903..422b109 100644 --- a/src/components/UserControls.js +++ b/src/components/UserControls.js @@ -24,7 +24,7 @@ const UserControls = () => { }}>
- Hello {user.displayName} + Hello {user.displayName || user.username} diff --git a/src/css/App.css b/src/css/App.css index 546d460..f40f7c6 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -21,6 +21,69 @@ header { .main-content { width: 100%; height: 100%; - padding: 0 15px; background-color: var(--background-secondary); +} + +.page{ + padding: 0 15px 0 245px; +} + +.ld{ + min-height: 140px; + position: relative; +} +.ld:before { + content: " "; + display: block; + background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E"); + border-radius: 50%; + margin: auto; + box-sizing: border-box; + width: 65px; + height: 65px; + position: absolute; + top: -20px; + right: 0; + bottom: 0; + left: 0; + visibility: hidden; + opacity: 0; + transition: all .3s ease-in-out; + background-repeat: no-repeat; + z-index: 49; +} +.ld:after{ + content: "Loading..."; + display: block; + background: var(--bg-secondary-color); + width: 99%; + height: 95%; + margin: auto; + box-sizing: border-box; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + visibility: hidden; + opacity: 0; + transition: all .3s ease-in-out; + z-index: 48; + display: flex; + align-items: center; + justify-content: center; + padding-top: 45px; + font-size: 17px; +} +.ld.loading:before,.ld.loading:after{ + visibility: visible; + opacity: 1; +} +@keyframes ld_rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } \ No newline at end of file diff --git a/src/css/components/Sidebar.css b/src/css/components/Sidebar.css index f423e1a..dd9258e 100644 --- a/src/css/components/Sidebar.css +++ b/src/css/components/Sidebar.css @@ -1,6 +1,7 @@ .sidebar { - min-width: 200px; height: 100%; + position: fixed; + width: 230px; } .sidebar-menu { diff --git a/src/css/index.css b/src/css/index.css index 22d8df7..8da4635 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -18,6 +18,14 @@ --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; } +hr{ + margin: 1.5rem 0; +} + +.flex-wrap{ + flex-wrap: wrap; +} + .clickable { cursor: pointer; } @@ -37,7 +45,7 @@ details[open] summary ~ * { } .main-content .card{ - padding: 1rem 2rem 2rem 2rem; + padding: 1.5rem 2rem 1.5rem 2rem; } table.hover tbody tr{ @@ -577,4 +585,53 @@ tbody tr:hover { .ml-auto, .mx-auto { margin-left: auto !important; +} + +.iconButton{ + padding: 0.5rem; +} + +.iconButton img{ + height: 20px; +} + +/* Tooltip container */ +.tooltip { + position: relative; + display: inline-block; +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* Position the tooltip text - see examples below! */ + position: absolute; + z-index: 1; + top: -35px; + left: -43px; +} + +.tooltip .tooltiptext::before{ + content: ' '; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 15px solid #000000; + position: absolute; + display: block; + right: 5px; + bottom: -5px; + margin-right: calc(50% - 13px); + z-index: -1; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tooltip:focus .tooltiptext { + visibility: visible; } \ No newline at end of file diff --git a/src/css/pages/Login.css b/src/css/pages/Login.css index 0f45902..6a466f3 100644 --- a/src/css/pages/Login.css +++ b/src/css/pages/Login.css @@ -7,9 +7,22 @@ input{ .logoImg{ max-height: 120px; } -.dingus{ +.loginWrapper{ max-width: 407px; } .methodsWrapper{ gap: 1px 10px; +} +.loginForm{ + width: 77%; + display: flex; + flex-direction: column; + align-items: center; +} +.loginForm .button{ + width: fit-content; +} +.registerText{ + line-height: 1.6em; + padding: 18px 10px 4px 10px; } \ No newline at end of file diff --git a/src/css/pages/Register.css b/src/css/pages/Register.css new file mode 100644 index 0000000..adebd5d --- /dev/null +++ b/src/css/pages/Register.css @@ -0,0 +1,25 @@ +input{ + margin-bottom: 1rem; +} +.logoImg{ + max-height: 120px; +} +.registerWrapper{ + max-width: 407px; +} +.methodsWrapper{ + gap: 1px 10px; +} +.registerForm{ + width: 77%; + display: flex; + flex-direction: column; + align-items: center; +} +.registerForm .button{ + width: fit-content; +} +.loginText{ + line-height: 1.6em; + padding: 18px 10px 4px 10px; +} \ No newline at end of file diff --git a/src/css/pages/Users.css b/src/css/pages/Users.css index 246feeb..06883cf 100644 --- a/src/css/pages/Users.css +++ b/src/css/pages/Users.css @@ -52,4 +52,26 @@ li input { } .tree input{ width: 60px !important; +} +.userActionButtons{ + display:flex; + flex-direction: row; + gap: 4px; + margin-bottom: 1em; +} +.userActionButtons .button+.button{ + margin-left: 0; +} +.registerCodeWrapper{ + display: flex; + align-items: center; + align-content: center; + gap: 5px; +} +.registerCodeWrapper p{ + margin-bottom: 0; +} +.userId{ + overflow-wrap: anywhere; + line-height: initial; } \ No newline at end of file diff --git a/src/pages/Admin.js b/src/pages/Admin.js index 70f7df8..1dae121 100644 --- a/src/pages/Admin.js +++ b/src/pages/Admin.js @@ -3,7 +3,7 @@ import '../css/pages/Admin.css'; const Admin = () => { - return
+ return

Admin

diff --git a/src/pages/Login.js b/src/pages/Login.js index 46f8ab5..140626d 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -48,14 +48,14 @@ const CredentialFields = () => { {fail ?

Invalid credentials

: null}

Log in

-
+ - +
-
- Don't ave an account? navigate('/register')} className="clickable">Register instead +
@@ -106,7 +106,7 @@ const Login = () => { document.body.classList.add('bg-triangles'); return
-
+
} /> diff --git a/src/pages/Register.js b/src/pages/Register.js index ea401d9..385155b 100644 --- a/src/pages/Register.js +++ b/src/pages/Register.js @@ -1,6 +1,8 @@ import React, { useState } from "react"; import { useNavigate, useSearchParams } from "react-router-dom"; import { post } from "../util/Util"; +import '../css/pages/Register.css'; +import logoImg from '../img/logo.png'; // TODO: Make this page look similar to the login page, probably generalise the components const Register = () => { @@ -23,27 +25,30 @@ const Register = () => { }; return
- -
-
-

Register

- - {error &&

{error}

} - -
- - - -
- -
- Have an account? navigate('/login')} className="clickable">Log in instead +
+
+
+
+
+

Register

+ + {error &&

{error}

} + +
+ + + +
+ + +
; - }; export default Register; \ No newline at end of file diff --git a/src/pages/Users.js b/src/pages/Users.js index ce2ad7e..90f1eb1 100644 --- a/src/pages/Users.js +++ b/src/pages/Users.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { Route, Routes, useNavigate, useParams } from "react-router"; import ErrorBoundary from "../util/ErrorBoundary"; import { get } from '../util/Util'; @@ -114,16 +114,17 @@ const User = ({ user }) => { return
-
-
- -

User {user.id}

+

User {user.id}

+
+
+ {user.disabled ? : } +
- - {user.disabled ? : } -

Created: {new Date(user.createdTimestamp).toDateString()}

2FA: {user.twoFactor.toString()}

@@ -148,7 +149,7 @@ const User = ({ user }) => {
-
+
@@ -163,6 +164,7 @@ const User = ({ user }) => { const CreateUserField = () => { const [link, setLink] = useState(null); + const registerCode = useRef(); const getSignupCode = async () => { const response = await get('/api/register/code'); if (response.status === 200) { @@ -171,16 +173,18 @@ const CreateUserField = () => { } }; - const copyToClipboard = (event) => { - const text = event.target.innerText; + const copyToClipboard = () => { + const text = registerCode.current.innerText; navigator.clipboard.writeText(text); }; - return
+ return
+

One-Click Sign-Up

{link ? - {link} : - } - +

{link}

: + } +
+

Create User

@@ -218,7 +222,8 @@ const Users = () => { const navigate = useNavigate(); const UserListWrapper = () => { return
-
+
+

All Users

{users.map(user => { @@ -238,7 +243,7 @@ const Users = () => { -
+