feat: DES-2700 Improve Login Support Page (#1324)

* feat: DES-2700 improve login support ux

* feat: DES-2700 style login support page

* feat: DES-2700 new html for logins upport page

designsafe/apps/accounts/templates/designsafe/apps/accounts/password_reset.html

@@ -1,13 +1,58 @@
 {% extends "base.html" %}
 
-{% load bootstrap3 %}
+{% load bootstrap3 sekizai_tags %}
 
-{% block title %}Password Reset{% endblock %}
+{% block title %}Account Help{% endblock %}
 
 {% block content %}
 <div class="container">
-    <h1>Password Reset</h1>
-    To reset your password, go here:
-    <a href="https://accounts.tacc.utexas.edu/forgot_password">TACC Password Reset</a>
+  <div class="row">
+    <div class="col-xs-12">
+      <h1>Account Help</h1>
+      <hr>
+      <h2>Forgot your Credentials?</h2>
+      <div class="row">
+        <div class="col-xs-12 col-md-6">
+          <h3>Password Reset</h3>
+          <p>To reset your password, go to <a href="https://accounts.tacc.utexas.edu/forgot_password" target="_blank">accounts.tacc.utexas.edu/forgot_password</a>, enter your username or email address that is associated with your user account, and you will receive an email with a password reset link.</p>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <h3>Request Username</h3> To request your username, go to <a href="https://accounts.tacc.utexas.edu/forgot_username" target="_blank">accounts.tacc.utexas.edu/forgot_username</a>, enter the email address that is associated with your user account, and you will receive an email with your username.
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6">
+          <h3>Reactivate Your Account</h3>
+          <p>If you receive an <strong>Authentication Failed</strong> error when logging in, and you are confident that you have entered the correct password for your account, then it is likely that you need to Reactivate Account due to your account being Deactivated due to more than 120 days having passed since you last logged in. To reactivate your account:</p>
+          <ol>
+            <li>Log in at <a href="https://accounts.tacc.utexas.edu/" target="_blank">accounts.tacc.utexas.edu</a>.</li>
+            <li>Request an activation link via <a href="https://accounts.tacc.utexas.edu/activate" target="_blank">accounts.tacc.utexas.edu/activate</a>.</li>
+            <li>You will receive an email at the email address associated with your user account with instructions for account reactivation.</li>
+          </ol>
+        </div>
+        <div class="col-xs-6">
+          <h3>Request an Account</h3>
+          <p>Any natural hazards researcher or practitioner that wants an environment to store, analyze, curate, publish, and discover data with a community of peers may register for an account. <a href="https://www.designsafe-ci.org/account/register/" target="_blank"><strong>Request a user account</strong></a>, and then follow the instructions in the email you receive to complete setting up your account. You will then be able to <a href="https://www.designsafe-ci.org/" target="_blank">log in to DesignSafe</a>. A DesignSafe account is a TACC user account, so you will sometimes see emails from TACC and URLs that take you to the TACC domain tacc.utexas.edu.</p>
+        </div>
+      </div>
+      <hr>
+      <h2>Additional Login Support</h2>
+      <p>If you are having trouble logging in, go to <a href="https://accounts.tacc.utexas.edu/login_support" target="_blank">accounts.tacc.utexas.edu/login_support</a>, enter the email address (username optional) that is associated with your user account, and a staff member will reach out.</p>
+    </div>
+  </div>
 </div>
 {% endblock %}
+
+{% block styles %}
+{# To mimic inline CSS plus override from "CSS: A11y: Color Contrast" snippet #}
+{# https://www.designsafe-ci.org/admin/djangocms_snippet/snippet/11/change #}
+<style>
+h1 {
+  color: var(--ds-accent-color--dark);
+}
+.h4 {
+  font-style: normal;
+  line-height: 1.5;
+}
+</style>
+{% endblock %}

designsafe/static/styles/variables.css

@@ -1,5 +1,6 @@
 :root {
   --ds-accent-color: #47a59d;
+  --ds-accent-color--dark: #37817B;
   --ds-active-color: #337AB7;
 
   /* Primary (Text, Layout) */