From d71143148c077a6dde8d4d22b26668a8ac902711 Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Wed, 31 Jul 2024 12:41:32 -0400 Subject: [PATCH 1/4] dodgy attempt at getting a ui together (#669) --- ui/src/index.css | 11 ++++++++--- ui/src/register/SetPasswordForm.js | 31 +++++++++++++++++++----------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/ui/src/index.css b/ui/src/index.css index da3726e8..dcc28525 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -119,8 +119,13 @@ code, pre { margin-top: 25px; } -#zrok-tou { - margin-top: 15px; +.zrok-tou { + margin: 15px; + color: white; +} + +.zrok-type { + font-family: 'Russo One', sans-serif; } #controls-row { @@ -130,4 +135,4 @@ code, pre { #navbar { background: linear-gradient(180deg, #0E0238 0%, #231069 100%); -} \ No newline at end of file +} diff --git a/ui/src/register/SetPasswordForm.js b/ui/src/register/SetPasswordForm.js index ef979ae0..c53f36db 100644 --- a/ui/src/register/SetPasswordForm.js +++ b/ui/src/register/SetPasswordForm.js @@ -4,13 +4,14 @@ import * as metadata from "../api/metadata" import Success from "./Success"; import {Button, Container, Form, Row} from "react-bootstrap"; import PasswordForm from "../components/password"; +import {Checkbox, FormControl, FormControlLabel, FormGroup, InputLabel} from "@mui/material"; const SetPasswordForm = (props) => { const [password, setPassword] = useState(''); const [message, setMessage] = useState(); const [authToken, setAuthToken] = useState(''); const [complete, setComplete] = useState(false); - const [tou, setTou] = useState(); + const [tou, setTou] = useState(); const [passwordLength, setPasswordLength] = useState(10); const [passwordRequireCapital, setPasswordRequireCapital] = useState(true); const [passwordRequireNumeric, setPasswordRequireNumeric] = useState(true); @@ -23,7 +24,7 @@ const SetPasswordForm = (props) => { metadata.configuration().then(resp => { if(!resp.error) { if (resp.data.touLink !== undefined && resp.data.touLink.trim() !== "") { - setTou(resp.data.touLink) + setTou() } setPasswordLength(resp.data.passwordRequirements.length) setPasswordRequireCapital(resp.data.passwordRequirements.requireCapital) @@ -73,14 +74,22 @@ const SetPasswordForm = (props) => {
- +
+ +
+
+

{tou}

+
+
+ } label={I have read and agree to the above}/> +
@@ -88,7 +97,7 @@ const SetPasswordForm = (props) => { {message} -
+ From f42bb96739700baf91a42520577df7458a296f71 Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Wed, 31 Jul 2024 14:04:43 -0400 Subject: [PATCH 2/4] rudimentary terms checkbox (#669) --- ui/src/index.css | 5 +++++ ui/src/register/SetPasswordForm.js | 7 ++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/ui/src/index.css b/ui/src/index.css index dcc28525..ff483914 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -136,3 +136,8 @@ code, pre { #navbar { background: linear-gradient(180deg, #0E0238 0%, #231069 100%); } + +#zrok-message-row { + padding: 10px; + height: 50px; +} \ No newline at end of file diff --git a/ui/src/register/SetPasswordForm.js b/ui/src/register/SetPasswordForm.js index c53f36db..73288d61 100644 --- a/ui/src/register/SetPasswordForm.js +++ b/ui/src/register/SetPasswordForm.js @@ -88,17 +88,14 @@ const SetPasswordForm = (props) => {

{tou}

- } label={I have read and agree to the above}/> + } label={I have read and agree to the above}/>
- + {message} - - - From f015cfeb3a7c760ac7312a2b3c874099417f5679 Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Wed, 31 Jul 2024 14:05:22 -0400 Subject: [PATCH 3/4] lint (imports) (#669) --- ui/src/register/SetPasswordForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/register/SetPasswordForm.js b/ui/src/register/SetPasswordForm.js index 73288d61..06e90e2b 100644 --- a/ui/src/register/SetPasswordForm.js +++ b/ui/src/register/SetPasswordForm.js @@ -4,7 +4,7 @@ import * as metadata from "../api/metadata" import Success from "./Success"; import {Button, Container, Form, Row} from "react-bootstrap"; import PasswordForm from "../components/password"; -import {Checkbox, FormControl, FormControlLabel, FormGroup, InputLabel} from "@mui/material"; +import {Checkbox, FormControlLabel} from "@mui/material"; const SetPasswordForm = (props) => { const [password, setPassword] = useState(''); From e26db343dfce6b66dceeb53fb4a52f5381e286fc Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Wed, 31 Jul 2024 14:07:02 -0400 Subject: [PATCH 4/4] changelog (#669) --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2cd76e7..4948b031 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ FEATURE: Conditionally enable interstitial page based on `User-Agent` prefix lis CHANGE: The interstitial configuration has been modified from a simple `interstitial: ` to a richer structure, but the config version has not been incremented; this feature has not been widely adopted yet. See the [frontend configuration template](etc/frontend.yml) for details on the new structure. +CHANGE: The registration page where a new user's password is set now includes a required checkbox, asking them to acknowledge the terms and conditions presented above the checkbox (https://github.com/openziti/zrok/issues/669) + +FIX: The registration page where a new user's password is set now includes better styling of the error message `
` to prevent the entire page from jumping when the message changes. + ## v0.4.37 FIX: Fix for setting the `zrok_interstitial` cookie on Chrome-based browsers.