From c842a8adae2bd1846e98216886ac66e469b99f08 Mon Sep 17 00:00:00 2001
From: Tudor Amariei <tudor.amariei@commitglobal.org>
Date: Fri, 20 Dec 2024 11:00:14 +0200
Subject: [PATCH] update the set-password page

---
 backend/donations/views/account_management.py |  4 +-
 backend/templates/v1/parola-noua.html         | 55 -------------------
 .../v2/account/components/password-input.html | 23 ++++++++
 .../templates/v2/account/set-password.html    | 51 +++++++++++++++++
 4 files changed, 76 insertions(+), 57 deletions(-)
 delete mode 100644 backend/templates/v1/parola-noua.html
 create mode 100644 backend/templates/v2/account/components/password-input.html
 create mode 100644 backend/templates/v2/account/set-password.html

diff --git a/backend/donations/views/account_management.py b/backend/donations/views/account_management.py
index ecf76803..316a789f 100644
--- a/backend/donations/views/account_management.py
+++ b/backend/donations/views/account_management.py
@@ -154,7 +154,7 @@ def get(self, request, *args, **kwargs):
 
 
 class SetPasswordView(BaseVisibleTemplateView):
-    template_name = "parola-noua.html"
+    template_name = "account/set-password.html"
     title = _("Set New Password")
 
     def post(self, request, *args, **kwargs):
@@ -279,7 +279,7 @@ class VerificationView(BaseVisibleTemplateView):
         p - reset user password
     """
 
-    template_name = "parola-noua.html"
+    template_name = "account/set-password.html"
     title = _("Verification")
 
     def get(self, request, *args, **kwargs):
diff --git a/backend/templates/v1/parola-noua.html b/backend/templates/v1/parola-noua.html
deleted file mode 100644
index 90f670b5..00000000
--- a/backend/templates/v1/parola-noua.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-{% extends "base.html" %}
-
-
-{% block additional_headers %}
-    <script src='https://www.google.com/recaptcha/api.js?hl=ro' async defer></script>
-{% endblock %}
-
-
-{% block content %}
-<div class="container">
-
-    <div class="row">
-        {% if errors %}
-            <div class="col-xs-12 col-md-6 col-md-offset-3">
-                <div class="alert alert-dismissible alert-danger">
-                    <button type="button" class="close" data-dismiss="alert">×</button>
-                    <strong>Oops!</strong> {{ errors }}
-                </div>
-            </div>
-        {% endif %}
-    </div>
-
-    <div id="login-container" class="row">
-        <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4" id="reset-password">
-            <form class="form form-horizontal" action="/password/" role="form" method="post">
-                {{ csrf_input }}
-                <fieldset>
-                    <legend>Resetare parolă</legend>
-                    <input type="hidden" name="token" value="{{ token }}" />
-
-                    <div class="form-group">
-                        <input class="form-control" type="password" name="password" placeholder="Parola noua" required />
-                    </div>
-                    <div class="form-group">
-                        <input class="form-control" type="password" name="password_confirm" placeholder="Confirma parola" required />
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-12">
-                            <button type="submit" class="btn btn-primary">Trimite</button>
-                        </div>
-                    </div>
-                </fieldset>
-            </form>
-        </div>
-	</div>
-
-    <div class="g-recaptcha" data-sitekey="{{ captcha_public_key }}" data-size="invisible" data-callback="onSubmit"></div>
-
-</div>
-{% endblock %}
-
-{% block scripts %}
-    <script type="text/javascript" src="{{ static('js/login.js') }}"></script>
-{% endblock %}
diff --git a/backend/templates/v2/account/components/password-input.html b/backend/templates/v2/account/components/password-input.html
new file mode 100644
index 00000000..2e01f0ff
--- /dev/null
+++ b/backend/templates/v2/account/components/password-input.html
@@ -0,0 +1,23 @@
+{% load i18n %}
+
+{% if not field_label %}
+  {% trans "Password" as field_label %}
+{% endif %}
+
+<div>
+  <label>
+    <span class="block text-sm/6 font-medium text-gray-900 mb-2">
+      {{ field_label }}
+    </span>
+    <input
+      type="password"
+      name="{{ input_name }}"
+      {% if password_type == "new" %}
+      autocomplete="new-password"
+      {% else %}
+      autocomplete="current-password"
+      {% endif %}
+      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-amber-400 sm:text-sm/6"
+      required>
+  </label>
+</div>
diff --git a/backend/templates/v2/account/set-password.html b/backend/templates/v2/account/set-password.html
new file mode 100644
index 00000000..26ed18ad
--- /dev/null
+++ b/backend/templates/v2/account/set-password.html
@@ -0,0 +1,51 @@
+{% extends "account/base.html" %}
+{% load i18n static %}
+
+{% block head_title %}
+  {{ title }}
+{% endblock head_title %}
+
+{% block additional_headers %}
+  <script src='https://www.google.com/recaptcha/api.js?hl=ro' async defer></script>
+{% endblock %}
+
+{% block content %}
+
+  <div class="container max-w-6xl">
+
+    <form id='reset-password' action="/password/" role="form" method="post">
+      <header class="flex flex-col justify-center items-center">
+        <h1 class="text-center text-gray-900 text-3xl font-bold leading-9 mb-6">
+          {% trans "Set a new password" %}
+        </h1>
+      </header>
+
+      {% csrf_token %}
+
+      <div class="overflow-hidden rounded-lg bg-white drop-shadow ring-1 ring-gray-200">
+        <div class="px-10 py-8 grid gap-6">
+
+          <input type="hidden" name="token" value="{{ token }}"/>
+
+          {% trans "New password" as password_label %}
+          {% trans "Confirm password" as password_confirm_label %}
+
+          {% include "account/components/password-input.html" with field_label=password_label input_name="password" password_type="new" %}
+
+          {% include "account/components/password-input.html" with field_label=password_confirm_label input_name="password_confirm" password_type="new" %}
+
+          <button
+            type="submit"
+            class="w-full text-center bg-amber-300 sm:text-base text-sm sm:px-6 sm:py-2 px-2 py-1 shadow-sm rounded-full text-gray-900 hover:bg-amber-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-300">
+            {% trans "Change password" %}
+          </button>
+
+        </div>
+      </div>
+    </form>
+
+    <div class="g-recaptcha" data-sitekey="{{ captcha_public_key }}" data-size="invisible" data-callback="onSubmit"></div>
+
+  </div>
+
+{% endblock %}