Add username and role columns

Other changes:
* Comparisons are case-insensitive
* Checkbox css improvements

bam/forms.py

 from flask_wtf import FlaskForm
-from wtforms import PasswordField, SubmitField, BooleanField
+from wtforms import StringField, PasswordField, SubmitField, BooleanField
 from wtforms.fields.html5 import EmailField
 from wtforms.validators import DataRequired, Length, Email, EqualTo, ValidationError
 from bam.models import User
 
 
 class RegistrationForm(FlaskForm):
+    username = StringField(
+        "Username",
+        validators=[DataRequired()],
+        render_kw={"placeholder": "Enter a username"},
+    )
     email = EmailField(
         "Email",
         validators=[DataRequired(), Email()],
@@ -24,16 +29,20 @@ class RegistrationForm(FlaskForm):
 
     submit = SubmitField("Register")
 
+    def validate_username(self, username):
+        if User.query.filter(User.username.ilike(username.data)).first():
+            raise ValidationError("Username taken - choose another.")
+
     def validate_email(self, email):
-        if User.query.filter_by(email=email.data).first():
+        if User.query.filter(User.email.ilike(email.data)).first():
             raise ValidationError("A user with this email already exists.")
 
 
 class LoginForm(FlaskForm):
-    email = EmailField(
-        "Email",
-        validators=[DataRequired(), Email()],
-        render_kw={"placeholder": "bookmaster@bam.com"},
+    username = StringField(
+        "Username",
+        validators=[DataRequired()],
+        render_kw={"placeholder": "bookmaster"},
     )
     password = PasswordField(
         "Password",

bam/models.py

@@ -10,7 +10,9 @@ def load_user(user_id):
 class User(db.Model, UserMixin):
     id = db.Column(db.Integer, primary_key=True)
     email = db.Column(db.String(120), unique=True, nullable=False)
+    username = db.Column(db.String(60), unique=True, nullable=False)
     password = db.Column(db.String(60), nullable=False)
+    role = db.Column(db.String(10), default="user")
 
     def __repr__(self):
         return f"User({self.email}, {self.password})"

bam/routes.py

@@ -22,12 +22,12 @@ def register():
         hashed_password = bcrypt.generate_password_hash(form.password.data).decode(
             "utf-8"
         )
-        user = User(email=form.email.data, password=hashed_password)
+        user = User(
+            username=form.username.data, email=form.email.data, password=hashed_password
+        )
         db.session.add(user)
         db.session.commit()
-        flash(
-            f"Account successfully created! You may login now.", "success"
-        )
+        flash(f"Account successfully created! You may login now.", "success")
         return redirect(url_for("login"))
     return render_template("register.html", title="Register", form=form)
 
@@ -38,7 +38,7 @@ def login():
         return redirect(url_for("home"))
     form = LoginForm()
     if form.validate_on_submit():
-        user = User.query.filter_by(email=form.email.data).first()
+        user = User.query.filter(User.username.ilike(form.username.data)).first()
         if user and bcrypt.check_password_hash(user.password, form.password.data):
             login_user(user, remember=form.remember.data)
             return redirect(url_for("home"))

bam/static/outform.css

@@ -22,17 +22,15 @@ form {
 input {
   font-family: Roboto;
   font-size: 16px;
-  /* margin-bottom: 5px; */
   border-radius: 3px;
   padding: 17px;
   background-color: var(--t-dark);
   border: 1px solid black;
   color: #eee;
   transition: background 0.3s;
-  /* margin: 3px 0 10px; */
 }
 .field:hover {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: var(--t-darker);
 }
 .field:focus,
 .field:active {
@@ -79,12 +77,13 @@ label,
   margin-top: 10px;
 }
 
-.remember-row input {
-  order: 2;
-  opacity: 0;
+.remember-row div {
+  order: 1;
 }
+
 .checkbox-indicator {
   display: flex;
+  order: 2;
   height: 1.5rem;
   width: 1.5rem;
   border: 1px solid black;
@@ -93,10 +92,15 @@ label,
   background-color: var(--t-dark);
 }
 
+.remember-row input {
+  order: 3;
+  opacity: 0;
+}
+
 .checkbox-indicator svg {
   height: 50%;
   width: 100%;
-  fill: transparent;
+  fill: #252525;
 }
 
 .remember-row:hover .checkbox-indicator {

bam/static/outlayout.css

@@ -10,6 +10,7 @@ body {
   --red: #e50914;
   --dark-red: #bb0009;
   --t-dark: rgba(0, 0, 0, 0.8);
+  --t-darker: rgba(0, 0, 0, 0.9);
 }
 
 * {

bam/templates/login.html

@@ -8,8 +8,8 @@
     {% with messages = get_flashed_messages(with_categories=True) %} {% if
     messages %} {% for category, message in messages %}
     <div class="f-message f-message-{{ category }}">{{ message }}</div>
-    {% endfor %} {% endif %} {% endwith %} {{ form.email.label() }} {{
-    form.email(class="field") }} {% for error in form.email.errors %}
+    {% endfor %} {% endif %} {% endwith %} {{ form.username.label() }} {{
+    form.username(class="field") }} {% for error in form.username.errors %}
     <div class="field-error">{{ error }}</div>
     {% endfor %} {{ form.password.label() }} {{ form.password(class="field") }}
     {% for error in form.password.errors %}

bam/templates/register.html

@@ -8,8 +8,11 @@
     {% with messages = get_flashed_messages(with_categories=True) %} {% if
     messages %} {% for category, message in messages %}
     <div class="f-message f-message-{{ category }}">{{ message }}</div>
-    {% endfor %} {% endif %} {% endwith %} {{ form.email.label() }} {{
-    form.email(class="field") }} {% for error in form.email.errors %}
+    {% endfor %} {% endif %} {% endwith %} {{ form.username.label() }} {{
+    form.username(class="field") }} {% for error in form.username.errors %}
+    <div class="field-error">{{ error }}</div>
+    {% endfor %} {{ form.email.label() }} {{ form.email(class="field") }} {% for
+    error in form.email.errors %}
     <div class="field-error">{{ error }}</div>
     {% endfor %} {{ form.password.label() }} {{ form.password(class="field") }}
     {% for error in form.password.errors %}