05/06 Phase 2: fixed issues

app/templates/tenant/auth/account_locked.html

@@ -0,0 +1,17 @@
+{% extends "layouts/base.html" %}
+{% block title %}Account Suspended{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-center align-items-center" style="min-height: 80vh;">
+  <div class="text-center">
+    <i class="bi bi-lock-fill display-1 text-danger"></i>
+    <h3 class="mt-3">Account Suspended</h3>
+    <p class="text-muted">
+      Your account has been suspended. Please contact support to resolve any outstanding issues.
+    </p>
+    <a href="{{ url_for('tenant_auth.logout') }}" class="btn btn-outline-secondary mt-2">
+      Sign Out
+    </a>
+  </div>
+</div>
+{% endblock %}

app/templates/tenant/auth/login.html

@@ -1,32 +1,52 @@
-{% extends "tenant/base.html" %}
+{% extends "layouts/base.html" %}
 {% block title %}Sign In{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-4">
-    <div class="card shadow-sm mt-5">
-      <div class="card-body p-4">
-        <h4 class="card-title mb-4 text-center">Salon Login</h4>
-        {% if error %}
-          <div class="alert alert-danger">{{ error }}</div>
-        {% endif %}
-        <form method="POST" action="{{ url_for('tenant_auth.login') }}">
-          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <div class="mb-3">
-            <label class="form-label">Email</label>
-            <input type="email" name="email" class="form-control" required autofocus>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Password</label>
-            <input type="password" name="password" class="form-control" required>
-          </div>
-          <button type="submit" class="btn btn-primary w-100">Sign In</button>
-        </form>
-        <hr>
-        <div class="text-center small">
-          <a href="{{ url_for('tenant_auth.password_reset_request') }}">Forgot password?</a>
-          &nbsp;|&nbsp;
-          <a href="{{ url_for('staff_auth.staff_login') }}">Staff login</a>
+<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+  <div class="card shadow" style="width: 420px;">
+    <div class="card-body p-4">
+      <div class="text-center mb-4">
+        <i class="bi bi-scissors fs-1 text-primary"></i>
+        <h4 class="mt-2 fw-bold">Salon POS</h4>
+        <p class="text-muted small">Sign in to your account</p>
+      </div>
+
+      {% if error %}
+        <div class="alert alert-danger py-2">{{ error }}</div>
+      {% endif %}
+
+      <form method="POST" action="{{ url_for('tenant_auth.login') }}" novalidate>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+
+        <div class="mb-3">
+          <label for="email" class="form-label">Email address</label>
+          <input type="email" class="form-control" id="email" name="email"
+                 autocomplete="username" required autofocus>
         </div>
+
+        <div class="mb-3">
+          <label for="password" class="form-label">Password</label>
+          <input type="password" class="form-control" id="password" name="password"
+                 autocomplete="current-password" required>
+        </div>
+
+        <div class="d-grid mt-4">
+          <button type="submit" class="btn btn-primary">Sign In</button>
+        </div>
+      </form>
+
+      <hr class="my-3">
+
+      <div class="text-center">
+        <a href="{{ url_for('staff_auth.staff_login') }}" class="btn btn-outline-secondary btn-sm w-100 mb-2">
+          <i class="bi bi-person-badge me-1"></i>Staff Login (PIN)
+        </a>
+        <a href="{{ url_for('tenant_auth.password_reset_request') }}" class="text-muted small d-block mt-2">
+          Forgot password?
+        </a>
+        <a href="{{ url_for('tenant_auth.demo_login') }}" class="text-muted small d-block mt-1">
+          View demo account
+        </a>
       </div>
     </div>
   </div>

app/templates/tenant/auth/password_reset_confirm.html

@@ -1,28 +1,33 @@
-{% extends "tenant/base.html" %}
+{% extends "layouts/base.html" %}
 {% block title %}Set New Password{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-4">
-    <div class="card shadow-sm mt-5">
-      <div class="card-body p-4">
-        <h5 class="card-title mb-3">Set New Password</h5>
-        {% if error %}
-          <div class="alert alert-danger">{{ error }}</div>
-        {% endif %}
-        <form method="POST">
-          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <div class="mb-3">
-            <label class="form-label">New Password</label>
-            <input type="password" name="password" class="form-control" required minlength="10">
-            <div class="form-text">Min 10 chars, must include uppercase, lowercase, and a digit.</div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Confirm Password</label>
-            <input type="password" name="confirm_password" class="form-control" required>
-          </div>
-          <button type="submit" class="btn btn-primary w-100">Update Password</button>
-        </form>
-      </div>
+<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+  <div class="card shadow" style="width: 420px;">
+    <div class="card-body p-4">
+      <h5 class="fw-bold mb-3">Set New Password</h5>
+
+      {% if error %}
+        <div class="alert alert-danger py-2">{{ error }}</div>
+      {% endif %}
+
+      <form method="POST" novalidate>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+        <div class="mb-3">
+          <label for="password" class="form-label">New password</label>
+          <input type="password" class="form-control" id="password" name="password"
+                 autocomplete="new-password" required autofocus>
+          <div class="form-text">Min 10 characters. Uppercase, lowercase, and a digit required.</div>
+        </div>
+        <div class="mb-3">
+          <label for="confirm_password" class="form-label">Confirm password</label>
+          <input type="password" class="form-control" id="confirm_password"
+                 name="confirm_password" autocomplete="new-password" required>
+        </div>
+        <div class="d-grid">
+          <button type="submit" class="btn btn-primary">Update Password</button>
+        </div>
+      </form>
     </div>
   </div>
 </div>

app/templates/tenant/auth/password_reset_request.html

@@ -1,26 +1,26 @@
-{% extends "tenant/base.html" %}
+{% extends "layouts/base.html" %}
 {% block title %}Reset Password{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-4">
-    <div class="card shadow-sm mt-5">
-      <div class="card-body p-4">
-        <h5 class="card-title mb-3">Reset Password</h5>
-        {% if message %}
-          <div class="alert alert-info">{{ message }}</div>
-        {% else %}
-        <form method="POST">
-          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <div class="mb-3">
-            <label class="form-label">Email address</label>
-            <input type="email" name="email" class="form-control" required autofocus>
-          </div>
-          <button type="submit" class="btn btn-primary w-100">Send Reset Link</button>
-        </form>
-        {% endif %}
-        <div class="text-center mt-3 small">
-          <a href="{{ url_for('tenant_auth.login') }}">Back to login</a>
+<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+  <div class="card shadow" style="width: 420px;">
+    <div class="card-body p-4">
+      <h5 class="fw-bold mb-3">Reset Password</h5>
+      <p class="text-muted small">Enter your email address and we'll send a reset link.</p>
+
+      <form method="POST" novalidate>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+        <div class="mb-3">
+          <label for="email" class="form-label">Email address</label>
+          <input type="email" class="form-control" id="email" name="email" required autofocus>
         </div>
+        <div class="d-grid">
+          <button type="submit" class="btn btn-primary">Send Reset Link</button>
+        </div>
+      </form>
+
+      <div class="text-center mt-3">
+        <a href="{{ url_for('tenant_auth.login') }}" class="text-muted small">Back to login</a>
       </div>
     </div>
   </div>