Merge pull request #718 from openziti/terms_ack

Checkbox to Acknowledge Terms and Conditions (#669)

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: <bool>` 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 `<div/>` 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.

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 {
@@ -131,3 +136,8 @@ code, pre {
 #navbar {
     background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
 }
+
+#zrok-message-row {
+    padding: 10px;
+    height: 50px;
+}

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, FormControlLabel} 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(<span/>);
     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(<span dangerouslySetInnerHTML={{__html: resp.data.touLink}}/>)
                 }
                 setPasswordLength(resp.data.passwordRequirements.length)
                 setPasswordRequireCapital(resp.data.passwordRequirements.requireCapital)
@@ -73,23 +74,28 @@ const SetPasswordForm = (props) => {
                     <Container className={"fullscreen-form"}>
                         <Row>
                             <Form onSubmit={handleSubmit}>
-                                <PasswordForm
-                                    setMessage={setMessage}
-                                    passwordLength={passwordLength}
-                                    passwordRequireCapital={passwordRequireCapital}
-                                    passwordRequireNumeric={passwordRequireNumeric}
-                                    passwordRequireSpecial={passwordRequireSpecial}
-                                    passwordValidSpecialCharacters={passwordValidSpecialCharacters}
-                                    setParentPassword={setPassword}/>
+                                <div>
+                                    <PasswordForm
+                                        setMessage={setMessage}
+                                        passwordLength={passwordLength}
+                                        passwordRequireCapital={passwordRequireCapital}
+                                        passwordRequireNumeric={passwordRequireNumeric}
+                                        passwordRequireSpecial={passwordRequireSpecial}
+                                        passwordValidSpecialCharacters={passwordValidSpecialCharacters}
+                                        setParentPassword={setPassword}/>
+                                </div>
+                                <div class={"zrok-tou"}>
+                                    <p>{tou}</p>
+                                </div>
+                                <div class={"zrok-tou"}>
+                                    <FormControlLabel control={<Checkbox style={{color: 'white'}} required/>} label={<span class={"zrok-type"}>I have read and agree to the above</span>}/>
+                                </div>
                                 <Button variant={"light"} type={"submit"}>Register Account</Button>
                             </Form>
                         </Row>
-                        <Row>
+                        <Row id={"zrok-message-row"}>
                             {message}
                         </Row>
-                        <Row>
-                            <div id={"zrok-tou"} dangerouslySetInnerHTML={{__html: tou}}></div>
-                        </Row>
                     </Container>
                 </Row>
             </Container>