Updates for user

htmx_contact/static/css/main.css

@@ -25,7 +25,8 @@
 }
 
 input[type=text],
-input[type=email] {
+input[type=email],
+input[type=password] {
     padding: 10px 5px;
     border-radius: .25rem;
     border: 2px solid black;
@@ -35,7 +36,11 @@ input[type=email] {
 
 body {
     font-family: 'Roboto', "Helvetica Neue";
-    font-size: 16px;
+    font-size: 18px;
+    background-color: #f9fafb;
+    color: #1f2937;
+    -webkit-font-smoothing: antialiased;
+    font-weight: 400;
 }
 
 a {
@@ -60,6 +65,7 @@ table a:hover {
     border: none;
     border-radius: .25rem;
     font-size: 16px;
+    font-weight: 600;
 }
 
 .button:hover {
@@ -165,3 +171,11 @@ form span {
 .width-100 {
     width: 100%;
 }
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.flex-right {
+    justify-content: right;
+}

htmx_contact/templates/contacts.html

@@ -7,7 +7,7 @@
         <div class="flex-row flex-space-betw">
             <form action="/contacts" method="get">
                 <!-- <label for="search">Search Term</label> -->
-                <input class="width-375-px" id="search" type="text" name="q", value="{{ request.args.get('q') or '' }}">
+                <input class="width-375-px" id="search" type="text" name="q", placeholder="&#128269;..." value="{{ request.args.get('q') or '' }}">
                 <input class="button" type="submit", value="Search">
             </form>
             <span><a class="button" href="/contacts/new">Add Contact</a></span>

htmx_contact/templates/login.html

@@ -1,11 +1,18 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <form action="/user/login" method="post">
-    <label for="username">Email:</label>
-    <input type="text" name="email" >
+<div class="flex-row flex-center">
+  <div class="flex-column flex-center">
+    <h1>Login</h1>
+    <form  class="width-375-px" action="/user/login" method="post">
+      <label for="email">Email:</label>
+      <input class="width-100 mb-4" type="text" name="email" >
       <label for="password">Password:</label>
-    <input type="password" name="password">
-    <button type="submit">Sign In</button>
+      <input class="width-100 mb-4" type="password" name="password">
+      <div class="flex-row flex-right">
+        <button class="button" type="submit">Sign In</button>
+      </div>
     </form>
+  </div>
+</div>
 {% endblock %}

htmx_contact/templates/new_contact.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 <div class="flex-row flex-center">
-<div class=".flex-column flex-center">
+<div class="flex-column flex-center">
 <h1>New Contact</h1>
 <form class="width-375-px" action="/contacts/new" method="post">
     <fieldset>

htmx_contact/user.py

@@ -1,5 +1,6 @@
 import logging
 
+from argon2.exceptions import VerifyMismatchError
 from flask import Blueprint
 from flask import abort
 from flask import flash
@@ -42,12 +43,16 @@ def user_login():
         with Session() as session:
             select_user_stmt = select(User).where(User.primary_email == data.email)
             user = session.scalar(select_user_stmt)
-            if user is not None and user.check_password(data.password):
+            try:
+                if user is not None:
+                    user.check_password(data.password)
                     # Login and redirect from where they came from
                     fl_login_user(user=user)
                     flash("Welcome back {}.".format(user.username))
                     return redirect(request.args.get("next") or url_for("main.contacts"))
             # User was None or password was incorrect
+            except VerifyMismatchError:
+                logger.warning("User %s failed password verfication.", user.id)
             flash("Incorrect username or password")
             return render_template("login.html")
     else: