From 959bbde02625e3ed041aca7e919742bd08c48d25 Mon Sep 17 00:00:00 2001
From: Rich Lott / Artful Robot <code.commits@artfulrobot.uk>
Date: Sat, 2 Dec 2023 16:44:33 +0000
Subject: [PATCH] Pretty up the forgotted password screen in standaloen

---
 .../CRM/Standaloneusers/Page/Login.php        |   2 +
 .../Standaloneusers/Page/ResetPassword.php    |   3 +
 .../crmChangePassword/crmChangePassword.html  |   3 +-
 .../crmResetPassword/crmResetPassword.html    |  10 +-
 .../CRM/Standaloneusers/Page/Login.tpl        | 259 +----------------
 .../Standaloneusers/Page/ResetPassword.tpl    |   2 +
 .../CRM/Standaloneusers/Page/_contentFoot.tpl |   3 +
 .../CRM/Standaloneusers/Page/_contentHead.tpl | 272 ++++++++++++++++++
 8 files changed, 292 insertions(+), 262 deletions(-)
 create mode 100644 ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl
 create mode 100644 ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl

diff --git a/ext/standaloneusers/CRM/Standaloneusers/Page/Login.php b/ext/standaloneusers/CRM/Standaloneusers/Page/Login.php
index d43779d95b..6fec79f817 100644
--- a/ext/standaloneusers/CRM/Standaloneusers/Page/Login.php
+++ b/ext/standaloneusers/CRM/Standaloneusers/Page/Login.php
@@ -12,6 +12,8 @@ class CRM_Standaloneusers_Page_Login extends CRM_Core_Page {
     }
 
     $this->assign('logoUrl', E::url('images/civicrm-logo.png'));
+    $this->assign('pageTitle', '');
+    $this->assign('forgottenPasswordURL', CRM_Utils_System::url('civicrm/login/password'));
     // Remove breadcrumb for login page.
     $this->assign('breadcrumb', NULL);
 
diff --git a/ext/standaloneusers/CRM/Standaloneusers/Page/ResetPassword.php b/ext/standaloneusers/CRM/Standaloneusers/Page/ResetPassword.php
index 1f18b66c39..6017a8f284 100644
--- a/ext/standaloneusers/CRM/Standaloneusers/Page/ResetPassword.php
+++ b/ext/standaloneusers/CRM/Standaloneusers/Page/ResetPassword.php
@@ -13,7 +13,10 @@ class CRM_Standaloneusers_Page_ResetPassword extends CRM_Core_Page {
 
   public function run() {
 
+    $this->assign('logoUrl', E::url('images/civicrm-logo.png'));
     $this->assign('hibp', CIVICRM_HIBP_URL);
+    $this->assign('pageTitle', '');
+    $this->assign('breadcrumb', NULL);
     // $this->assign('loggedInUserID', CRM_Utils_System::getLoggedInUfID());
     Civi::service('angularjs.loader')->addModules('crmResetPassword');
 
diff --git a/ext/standaloneusers/ang/crmChangePassword/crmChangePassword.html b/ext/standaloneusers/ang/crmChangePassword/crmChangePassword.html
index d2604837fd..d9332425c2 100644
--- a/ext/standaloneusers/ang/crmChangePassword/crmChangePassword.html
+++ b/ext/standaloneusers/ang/crmChangePassword/crmChangePassword.html
@@ -1,4 +1,5 @@
 <div>
+  <h1>Forgotten Password</h1>
   <form name="changePassword" crm-ui-id-scope>
 
     <div crm-ui-field="{name: 'actorPassword', title: ts('Enter your current password')}">
@@ -34,7 +35,7 @@
       </span>
     </div>
 
-    <button ng-click="$ctrl.attemptChange()" >{{ts('Change Password')}}</button>
+    <button class=btn ng-click="$ctrl.attemptChange()" >{{ts('Change Password')}}</button>
 
   </form>
   <div ng-if="$ctrl.busy" >{{$ctrl.busy}}</div>
diff --git a/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html b/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html
index 26793c848e..88a9ae8a6c 100644
--- a/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html
+++ b/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html
@@ -1,19 +1,19 @@
 <div>
+  <h1>Request Password Reset Link</h1>
   <!-- without a token, we offer for them to generate one. -->
   <form name="requestLink" crm-ui-id-scope
     ng-if="!$ctrl.formSubmitted && !$ctrl.token">
 
-    <div crm-ui-field="{name: 'identifier', title: ts('Enter the username or email on your account')}">
-      <input
+    <label crm-ui-for="identifier">{{ts('Enter the username or email on your account')}}</label>
+    <input
         crm-ui-id="identifier"
         name="identifier"
         ng-model="$ctrl.identifier"
         class="crm-form-text"
         type=text
-      />
-    </div>
+        />
 
-    <button ng-click="$ctrl.sendPasswordReset()" >{{ts('Send Password Reset')}}</button>
+    <button class=btn ng-click="$ctrl.sendPasswordReset()" >{{ts('Send Password Reset')}}</button>
   </form>
   <div ng-if="$ctrl.resetSuccessfullySubmitted" >
     <p>{{ts('Thanks. If your username/email matched an active account, we will email you with a special link to provide a new password.')}}</p>
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl
index 4dc2993675..b6a3dcfa86 100644
--- a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl
+++ b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl
@@ -1,256 +1,4 @@
-<style>
-{literal}
-/***Structure****
-    Variables (comment out your subtheme)
-        - Finsbury Park
-        - Jerry Seinfeld
-        - Shoreditch (soon)
-        - Aah (soon)
-    Resets
-    Base
-****************/
-
-/***************
-    Variables
-****************/
-
-/* Finsbury Park
-
-:root {
-    --roundness: 0.25rem;
-    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans, Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    --text-colour: #000;
-    --text-size: 0.9rem;
-    --error-colour: #aa0c0c;
-    --label-colour: #000;
-    --background-colour: #ededed;
-    --box-border: 1px #cdcdcd solid;
-    --box-padding: 2rem 1.75rem;
-    --box-shadow: none;
-    --box-roundness: 0.25rem;
-    --box-background: #fff;
-    --input-border: 1px solid #ccc;
-    --input-padding: 0.5rem;
-    --input-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-    --button-border: 1px solid #bbb;
-    --button-shadow: 0 1px 2px rgba(0,0,0,0.05);
-    --button-padding: 5px 15px;
-    --button-text-colour: #3e3e3e;
-    --button-background: #f0f0f0;
-}
-
-/* Shoreditch
-
-:root {
-    --roundness: 2px;
-    --font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-    --text-colour: #232429;
-    --text-size: 0.9rem;
-    --error-colour: #cf3458;
-    --label-colour: #464354;
-    --background-colour: #f3f6f7;
-    --box-border: 0 transparent solid;
-    --box-padding: 20px;
-    --box-shadow: 0 3px 18px 0 rgba(48,40,40,0.25);
-    --box-roundness: 2px;
-    --box-background: #fff;
-    --input-border: 1px solid #c2cfd8;
-    --input-padding: 5px 10px;
-    --input-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
-    --button-border: 0 solid transparent;
-    --button-shadow: none;
-    --button-padding: 8px 28px;
-    --button-text-colour: #fff;
-    --button-background: #0071bd;
-}
-
-/* Aah */
-
-:root {
-    --roundness: 3px;
-    --font-family: Lato,Helvetica,Arial,sans-serif;
-    --text-colour: #222;
-    --text-size: 0.9rem;
-    --error-colour: #a00;
-    --warning-colour: #fbb862;
-    --success-colour: #86c66c;
-    --label-colour: #464354;
-    --background-colour: rgb(242,242,237);
-    --box-border: 0 transparent solid;
-    --box-padding: 1.6rem;
-    --box-shadow: none;
-    --box-roundness: 0;
-    --box-background: #fff;
-    --input-border: 1px solid rgba(0,0,0,.2);
-    --input-padding: 5px 10px;
-    --input-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
-    --button-border: 0 solid transparent;
-    --button-shadow: 0 0 6px rgba(0,0,0,.2);
-    --button-padding: .4rem 1.6rem;
-    --button-text-colour: #fff;
-    --button-background: #2c98ed;
-    --button-text-shadow: none;
-}
-
-/* Ffresh
-
-:root {
-    --roundness: 2rem;
-    --font-family: Lato,Helvetica,Arial,sans-serif;
-    --text-colour: #222;
-    --text-size: 1rem;
-    --error-colour: #a00;
-    --label-colour: #464354;
-    --background-colour: #2c98ed;
-    --box-border: 0 transparent solid;
-    --box-padding: 1.6rem;
-    --box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
-    --box-roundness: 1.75rem;
-    --box-background: #fff;
-    --input-border: 2px solid #2c98ed;
-    --input-padding: 0.75rem;
-    --input-shadow: none;
-    --button-border: 0 solid transparent;
-    --button-shadow: none;
-    --button-padding: 0.75rem 2rem;
-    --button-text-colour: #fff;
-    --button-background: #2c98ed;
-}
-
-/***************
-    Base
-****************/
-
-body {
-    background-color: var(--background-colour);
-    font-family: var(--font-family);
-    color: var(--text-colour);
-    font-size: var(--text-size);
-}
-#crm-container.standalone-entry * {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-    font-size: 90%;
-}
-a:hover, a:focus {
-    text-decoration: underline;
-}
-.flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-/***************
-    UI Elements
-****************/
-
-#crm-container.standalone-entry .mid-block {
-    margin: 0;
-    background-color: var(--box-background);
-    border: var(--box-border);
-    border-radius: var(--box-roundness);
-    padding: var(--box-padding);
-    box-shadow: var(--box-shadow);
-}
-#crm-container.standalone-entry img {
-    width: 100%;
-    max-width: 400px;
-    margin-bottom: 2rem;
-}
-#crm-container.standalone-entry label {
-    display: inline-block;
-    max-width: 100%;
-    margin-bottom: 5px;
-    font-weight: 700;
-    color: var(--label-colour);
-}
-#crm-container.standalone-entry input {
-    display: block;
-    width: 100%;
-    color: #555;
-    background-color: #fff;
-    background-image: none;
-    margin-bottom: 0.75rem;
-    padding: var(--input-padding);
-    font-size: var(--text-size);
-    border-radius: var(--roundness);
-    border: var(--input-border);
-    box-shadow: var(--input-shadow);
-}
-#crm-container.standalone-entry input:focus,
-#crm-container.standalone-entry input:focus-visible {
-    border: 1px solid #66afe9;
-}
-#crm-container.standalone-entry .btn {
-    display: inline-block;
-    margin:0;
-    text-align: center;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    font-size: var(--text-size);
-    background-color: var(--button-background);
-    color: var(--button-text-colour);
-    border: var(--button-border);
-    padding: var(--button-padding);
-    border-radius: var(--roundness);
-    font-family: var(--font-family);
-    box-shadow: var(--button-shadow);
-    text-shadow: var(--button-text-shadow);
-}
-#crm-container.standalone-entry .btn:hover,
-#crm-container.standalone-entry .btn:focus {
-    filter: brightness(80%);
-}
-#crm-container.standalone-entry .float-right {
-    float: right;
-    font-size: 90%;
-    margin-top: 0.2rem;
-}
-#crm-container.standalone-entry .form-alert {
-    color: var(--error-colour);
-    margin: 1rem 0;
-}
-
-
-#loggedOutNotice {
-  text-align: center;
-  font-weight: bold;
-  padding: var(--box-padding);
-  background-color: var(--success-colour);
-  margin: 1rem 0;
-  border-radius: var(--box-roundness);
-}
-#anonAccessDenied {
-  text-align: center;
-  font-weight: bold;
-  padding: var(--box-padding);
-  background-color: var(--warning-colour);
-  margin: 1rem 0;
-  border-radius: var(--box-roundness);
-}
-
-@media  (min-width: 768px) {
-    #crm-container.standalone-entry {
-        width: 60vw;
-        margin: 20vh auto 0;
-    }
-}
-@media  (min-width: 960px) {
-    #crm-container.standalone-entry {
-        width: 30vw;
-    }
-}
-{/literal}
-</style>
-
-<div id="crm-container" class="crm-container standalone-entry">
-  <div class="mid-block">
-    <img src="{$logoUrl}" alt="logo for CiviCRM, with an intersecting blue and green triangle">
+{include file='CRM/Standaloneusers/Page/_contentHead.tpl'}
     <div class="message info" style="display:none;" id="loggedOutNotice">{ts}You have been logged out.{/ts}</div>
     <div class="message warning" style="display:none;" id="anonAccessDenied">{ts}You may need to login to access that.{/ts}</div>
     <form>
@@ -264,12 +12,11 @@ a:hover, a:focus {
       </div>
       <div id="error" style="display:none;" class="form-alert">Your username and password do not match</div>
       <div class="flex">
-      <a href="request.html">Forgotten password?</a>
+      <a href="{$forgottenPasswordURL}">Forgotten password?</a>
       <button id="loginSubmit" type="submit" class="btn btn-secondary crm-button">Submit</button>
       </div>
     </form>
-  </div>
-</div>
+  {include file='CRM/Standaloneusers/Page/_contentFoot.tpl'}
 {literal}
 <script>
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl
index 5a594b3356..702641abe9 100644
--- a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl
+++ b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl
@@ -1,5 +1,7 @@
+{include file='CRM/Standaloneusers/Page/_contentHead.tpl'}
 <crm-angular-js modules="crmResetPassword">
   <crm-reset-password
     hibp="{$hibp|escape}"
     token="{$token|escape}" ></crm-reset-password>
 </crm-angular-js>
+{include file='CRM/Standaloneusers/Page/_contentFoot.tpl'}
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl
new file mode 100644
index 0000000000..4a1592de2a
--- /dev/null
+++ b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl
@@ -0,0 +1,3 @@
+  </div>
+</div>
+
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl
new file mode 100644
index 0000000000..742cbcb61f
--- /dev/null
+++ b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl
@@ -0,0 +1,272 @@
+<style>
+{literal}
+/***Structure****
+    Variables (comment out your subtheme)
+        - Finsbury Park
+        - Jerry Seinfeld
+        - Shoreditch (soon)
+        - Aah (soon)
+    Resets
+    Base
+****************/
+
+/***************
+    Variables
+****************/
+
+/* Finsbury Park
+
+:root {
+    --roundness: 0.25rem;
+    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans, Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --text-colour: #000;
+    --text-size: 0.9rem;
+    --error-colour: #aa0c0c;
+    --label-colour: #000;
+    --background-colour: #ededed;
+    --box-border: 1px #cdcdcd solid;
+    --box-padding: 2rem 1.75rem;
+    --box-shadow: none;
+    --box-roundness: 0.25rem;
+    --box-background: #fff;
+    --input-border: 1px solid #ccc;
+    --input-padding: 0.5rem;
+    --input-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    --button-border: 1px solid #bbb;
+    --button-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    --button-padding: 5px 15px;
+    --button-text-colour: #3e3e3e;
+    --button-background: #f0f0f0;
+}
+
+/* Shoreditch
+
+:root {
+    --roundness: 2px;
+    --font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+    --text-colour: #232429;
+    --text-size: 0.9rem;
+    --error-colour: #cf3458;
+    --label-colour: #464354;
+    --background-colour: #f3f6f7;
+    --box-border: 0 transparent solid;
+    --box-padding: 20px;
+    --box-shadow: 0 3px 18px 0 rgba(48,40,40,0.25);
+    --box-roundness: 2px;
+    --box-background: #fff;
+    --input-border: 1px solid #c2cfd8;
+    --input-padding: 5px 10px;
+    --input-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
+    --button-border: 0 solid transparent;
+    --button-shadow: none;
+    --button-padding: 8px 28px;
+    --button-text-colour: #fff;
+    --button-background: #0071bd;
+}
+
+/* Aah */
+
+:root {
+    --roundness: 3px;
+    --font-family: Lato,Helvetica,Arial,sans-serif;
+    --font-size-h1: 1.6rem;
+    --text-colour: #222;
+    --text-size: 0.9rem;
+    --error-colour: #a00;
+    --warning-colour: #fbb862;
+    --success-colour: #86c66c;
+    --label-colour: #464354;
+    --background-colour: rgb(242,242,237);
+    --box-border: 0 transparent solid;
+    --box-padding: 1.6rem;
+    --box-shadow: none;
+    --box-roundness: 0;
+    --box-background: #fff;
+    --input-border: 1px solid rgba(0,0,0,.2);
+    --input-padding: 5px 10px;
+    --input-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
+    --button-border: 0 solid transparent;
+    --button-shadow: 0 0 6px rgba(0,0,0,.2);
+    --button-padding: .4rem 1.6rem;
+    --button-text-colour: #fff;
+    --button-background: #2c98ed;
+    --button-text-shadow: none;
+}
+
+/* Ffresh
+
+:root {
+    --roundness: 2rem;
+    --font-family: Lato,Helvetica,Arial,sans-serif;
+    --text-colour: #222;
+    --text-size: 1rem;
+    --error-colour: #a00;
+    --label-colour: #464354;
+    --background-colour: #2c98ed;
+    --box-border: 0 transparent solid;
+    --box-padding: 1.6rem;
+    --box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+    --box-roundness: 1.75rem;
+    --box-background: #fff;
+    --input-border: 2px solid #2c98ed;
+    --input-padding: 0.75rem;
+    --input-shadow: none;
+    --button-border: 0 solid transparent;
+    --button-shadow: none;
+    --button-padding: 0.75rem 2rem;
+    --button-text-colour: #fff;
+    --button-background: #2c98ed;
+}
+
+/***************
+    Base
+****************/
+
+body {
+    background-color: var(--background-colour);
+    font-family: var(--font-family);
+    color: var(--text-colour);
+    font-size: var(--text-size);
+    padding: 0;
+    margin: 0;
+}
+#crm-container.standalone-entry {
+    display: grid;
+    place-content: center;
+    width: 100%;
+    height: 100vh;
+}
+#crm-container.standalone-entry * {
+    box-sizing: border-box;
+}
+a {
+    text-decoration: none;
+    font-size: 90%;
+}
+a:hover, a:focus {
+    text-decoration: underline;
+}
+.flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h1 {
+  font-family: var(--font-family);
+  font-size: var(--font-size-h1);
+}
+
+/***************
+    UI Elements
+****************/
+
+#crm-container.standalone-entry .mid-block {
+    width: clamp(280px, 68vw, 34rem);
+    margin: 0;
+    background-color: var(--box-background);
+    border: var(--box-border);
+    border-radius: var(--box-roundness);
+    padding: var(--box-padding);
+    box-shadow: var(--box-shadow);
+}
+#crm-container.standalone-entry img {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto 2rem;
+    display: block;
+}
+#crm-container.standalone-entry label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+    font-weight: 700;
+    color: var(--label-colour);
+}
+#crm-container.standalone-entry input {
+    display: block;
+    width: 100%;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    margin-bottom: 0.75rem;
+    padding: var(--input-padding);
+    font-size: var(--text-size);
+    border-radius: var(--roundness);
+    border: var(--input-border);
+    box-shadow: var(--input-shadow);
+}
+#crm-container.standalone-entry input:focus,
+#crm-container.standalone-entry input:focus-visible {
+    border: 1px solid #66afe9;
+}
+#crm-container.standalone-entry .btn {
+    display: inline-block;
+    margin:0;
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    font-size: var(--text-size);
+    background-color: var(--button-background);
+    color: var(--button-text-colour);
+    border: var(--button-border);
+    padding: var(--button-padding);
+    border-radius: var(--roundness);
+    font-family: var(--font-family);
+    box-shadow: var(--button-shadow);
+    text-shadow: var(--button-text-shadow);
+}
+#crm-container.standalone-entry .btn:hover,
+#crm-container.standalone-entry .btn:focus {
+    filter: brightness(80%);
+}
+#crm-container.standalone-entry .float-right {
+    float: right;
+    font-size: 90%;
+    margin-top: 0.2rem;
+}
+#crm-container.standalone-entry .form-alert {
+    color: var(--error-colour);
+    margin: 1rem 0;
+}
+
+
+#loggedOutNotice {
+  text-align: center;
+  font-weight: bold;
+  padding: var(--box-padding);
+  background-color: var(--success-colour);
+  margin: 1rem 0;
+  border-radius: var(--box-roundness);
+}
+#anonAccessDenied {
+  text-align: center;
+  font-weight: bold;
+  padding: var(--box-padding);
+  background-color: var(--warning-colour);
+  margin: 1rem 0;
+  border-radius: var(--box-roundness);
+}
+
+/*
+@media  (min-width: 768px) {
+    #crm-container.standalone-entry {
+        width: 60vw;
+        margin: 20vh auto 0;
+    }
+}
+@media  (min-width: 960px) {
+    #crm-container.standalone-entry {
+        width: 30vw;
+    }
+}
+*/
+{/literal}
+</style>
+
+<div id="crm-container" class="crm-container standalone-entry">
+  <div class="mid-block">
+    <img src="{$logoUrl}" alt="logo for CiviCRM, with an intersecting blue and green triangle">
+
-- 
2.25.1