minor tou revisions (#184)

etc/ctrl.yml

@@ -11,14 +11,17 @@
 #
 v:                                2
 
-# The `admin/secrets` array contains a list of strings that represent valid `ZROK_ADMIN_TOKEN` values to be used for
+admin:
+  # The `secrets` array contains a list of strings that represent valid `ZROK_ADMIN_TOKEN` values to be used for
   # administration of the `zrok` controller.
   #
   # Change this for your installation.
   #
-admin:
   secrets:
     -                             77623cad-1847-4d6d-8ffe-37defc33c909
+  # if `tou_link` is present, the frontend will display the "Terms of Use" link on the login and registration forms
+  #
+  tou_link:                       '<a href="https://google.com" target="_">Terms and Conditions</a>'
 
 # The `endpoint` section determines where the HTTP listener that serves the API and web console will be bound.
 #

ui/src/console/login/Login.js

@@ -17,7 +17,7 @@ const Login = (props) => {
             console.log(resp)
             if(!resp.error) {
                 if (resp.data.touLink !== null && resp.data.touLink.trim() !== "") {
-                    setTou(<div>Please read the <a href={resp.data.touLink}>Terms of Use</a></div>)
+                    setTou(resp.data.touLink)
                 }
             }
         }).catch(err => {
@@ -80,7 +80,7 @@ const Login = (props) => {
                                         value={password}
                                     />
                                 </Form.Group>
-                                {tou}
+
                                 <Button variant={"light"} type={"submit"}>Log In</Button>
                                 
                                 <div id={"zrok-reset-password"}>
@@ -88,6 +88,7 @@ const Login = (props) => {
                                         Forgot Password?
                                     </Link>
                                 </div>
+                                <div id={"zrok-tou"} dangerouslySetInnerHTML={{__html: tou}}></div>
                             </Form>
                         </Row>
                         <Row>

ui/src/index.css

@@ -117,3 +117,7 @@ code, pre {
 #zrok-reset-password {
     margin-top: 25px;
 }
+
+#zrok-tou {
+    margin-top: 15px;
+}

ui/src/register/SetPasswordForm.js

@@ -21,7 +21,7 @@ const SetPasswordForm = (props) => {
             console.log(resp)
             if(!resp.error) {
                 if (resp.data.touLink !== null && resp.data.touLink.trim() !== "") {
-                    setTou(<div>Please read the <a href={resp.data.touLink}>Terms of Use</a></div>)
+                    setTou(resp.data.touLink)
                 }
             }
         }).catch(err => {
@@ -89,13 +89,15 @@ const SetPasswordForm = (props) => {
                                         value={confirm}
                                     />
                                 </Form.Group>
-                                {tou}
                                 <Button variant={"light"} type={"submit"}>Register Account</Button>
                             </Form>
                         </Row>
                         <Row>
                             {message}
                         </Row>
+                        <Row>
+                            <div id={"zrok-tou"} dangerouslySetInnerHTML={{__html: tou}}></div>
+                        </Row>
                     </Container>
                 </Row>
             </Container>