From 75af1eb8798b8ce2477d5b1dc0fa045959b83eb3 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Tue, 31 Jan 2023 14:04:42 -0500
Subject: [PATCH] minor tou revisions (#184)

---
 etc/ctrl.yml                       | 13 ++++++++-----
 ui/src/console/login/Login.js      |  5 +++--
 ui/src/index.css                   |  4 ++++
 ui/src/register/SetPasswordForm.js |  6 ++++--
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/etc/ctrl.yml b/etc/ctrl.yml
index f1aa058f..0bcf4250 100644
--- a/etc/ctrl.yml
+++ b/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
-# administration of the `zrok` controller.
-#
-# Change this for your installation.
-#
 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.
+  #
   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.
 #
diff --git a/ui/src/console/login/Login.js b/ui/src/console/login/Login.js
index 5ace21dd..3c380899 100644
--- a/ui/src/console/login/Login.js
+++ b/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>
diff --git a/ui/src/index.css b/ui/src/index.css
index d243c838..a7713c43 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -116,4 +116,8 @@ code, pre {
 
 #zrok-reset-password {
     margin-top: 25px;
+}
+
+#zrok-tou {
+    margin-top: 15px;
 }
\ No newline at end of file
diff --git a/ui/src/register/SetPasswordForm.js b/ui/src/register/SetPasswordForm.js
index 77cf8276..71ad43dd 100644
--- a/ui/src/register/SetPasswordForm.js
+++ b/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>