From 735bcdd30da01bed1cb62c009a12cd99ca6f2e4a Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 6 Apr 2023 13:56:48 +0200
Subject: [PATCH] [TASK] styling password reset page

---
 templates/auth/set-pw.html.tera | 40 +++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/templates/auth/set-pw.html.tera b/templates/auth/set-pw.html.tera
index 34af874..913b02f 100644
--- a/templates/auth/set-pw.html.tera
+++ b/templates/auth/set-pw.html.tera
@@ -1,8 +1,34 @@
-<h1>Passwort setzen</h1>
+{% extends "base" %}
 
-<form action="/auth/set-pw" method="post">
-	<input type="hidden" name="userid" value="{{ userid }}" />
-	<input type="password" name="password" placeholder="PW" />
-	<input type="password" name="password_confirm" placeholder="Confirm PW"/>
-	<input type="submit" />
-</form>
+{% block content %}
+<div class="w-full max-w-md space-y-8">
+  <h1 class="mt-6 text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Passwort setzen</h1>
+
+  <form class="mt-8 space-y-6" action="/auth/set-pw" method="post">
+    <input type="hidden" name="remember" value="true">
+    <input type="hidden" name="userid" value="{{ userid }}" />
+    <div class="-space-y-px rounded-md shadow-sm">
+      <div>
+        <label for="password" class="sr-only">Passwort</label>
+        <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full rounded-t-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Passwort">
+      </div>
+      <div>
+        <label for="password_confirm" class="sr-only">Passwort confirm</label>
+        <input id="password_confirm" name="password_confirm" type="password" autocomplete="current-password" required class="relative block w-full rounded-b-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Passwort besätigen">
+      </div>
+    </div>
+  
+    <div>
+      <button type="submit" class="group relative flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
+        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+          <svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+          </svg>
+        </span>
+        Bestätigen
+      </button>
+    </div>
+  </form>
+</div>
+
+{% endblock content %}