From f771a422c3b19c276fa850e4ebdfe47575122f4d Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 11 Jul 2024 17:34:28 -0500
Subject: [PATCH] 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
---
 .../apps/accounts/password_reset.html         | 55 +++++++++++++++++--
 designsafe/static/styles/variables.css        |  1 +
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/designsafe/apps/accounts/templates/designsafe/apps/accounts/password_reset.html b/designsafe/apps/accounts/templates/designsafe/apps/accounts/password_reset.html
index 13f4614d50..a29a07e6ed 100644
--- a/designsafe/apps/accounts/templates/designsafe/apps/accounts/password_reset.html
+++ b/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 %}
diff --git a/designsafe/static/styles/variables.css b/designsafe/static/styles/variables.css
index 334d51cba7..6cb9e46c01 100644
--- a/designsafe/static/styles/variables.css
+++ b/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) */