Improve login/create account forms

app/i18n/locales/en.json

@@ -37,7 +37,10 @@
     "confirm_password": "Confirm Password",
     "username": "Username",
     "display_name": "Display Name",
-    "create_account_button": "Create Account!"
+    "create_account_button": "Create Account!",
+    "login_required_field_blank": "You must enter both a valid email address and password.",
+    "create_required_field_blank": "You must complete all required fields.",
+    "create_password_confirm_mismatch": "Both password fields must match."
   },
   "search": {
     "header": "Search",
@@ -62,6 +65,7 @@
     "see_book_details": "See Book Details"
   },
   "interaction": {
+    "required": "Required",
     "reload": "Reload",
     "heart": "Like",
     "add": "Add to Shelf",
@@ -75,6 +79,22 @@
     "account_create_invalid_username": "The username entered is not valid. Usernames must be at least 2 characters long and can only contain letters a–z, numbers 0–9, and underscores",
     "account_email_exists": "The email address entered is already in use.",
     "account_username_exists": "The username entered is already in use.",
-    "account_create_success": "Account created successfully! You are now logged in."
+    "account_email_send_fail": "Your account was created successfully, but we were unable to send the confirmation email!",
+    "account_confirm_email": "A confirmation email has been sent to the address you specified. Please confirm your account using the link provided.",
+    "account_create_success": "Account created successfully! You may now log in using the email address and password you provided.",
+    "account_confirm_required_data_missing": "Could not confirm account because required data is missing.",
+    "account_confirm_invalid_code": "The specified confirmation code is not valid.",
+    "account_confirm_update_fail": "Something went wrong and we couldn't confirm your account. Please try again later!",
+    "account_confirm_email_send_fail": "Your account has been confirmed, but we were unable to send the email notification about it. You can log in anyway.",
+    "account_confirm_success_email": "Your account has been confirmed, and an email notification has been sent! You may now log in using your email address and password.",
+    "account_confirm_success": "Your account has been confirmed! You may now log in using your email address and password.",
+    "account_login_required_data_missing": "Could not attempt login because required data is missing.",
+    "account_login_invalid_email": "The email address specified does not have an associated account.",
+    "account_login_not_confirmed": "The specified account has not been confirmed. Please use the link you received to confirm your email address.",
+    "account_login_invalid_password": "The password specified is not correct.",
+    "account_login_success": "You have been successfully logged in! You will now be redirected to the home screen.",
+    "account_validate_missing_token": "User not logged in: There is no login token to validate.",
+    "account_validate_invalid_token": "User not logged in: The stored token is not a valid token.",
+    "account_validate_renewed_token": "User logged in, and the token has been renewed."
   }
 }

app/views/login/index.js

@@ -48,6 +48,7 @@ export const loginView = (state, emit, i18n) => {
               <input type="email" name="email"
                 value=${controller.state.fieldValues.loginEmail}
                 oninput=${e => controller.state.fieldValues.loginEmail = e.target.value.trim()}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateLogin() }}
               >
             </label>
             <label>
@@ -55,12 +56,13 @@ export const loginView = (state, emit, i18n) => {
               <input type="password" name="password"
                 value=${controller.state.fieldValues.loginPassword}
                 oninput=${e => controller.state.fieldValues.loginPassword = e.target.value}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateLogin() }}
               >
             </label>
             ${
               controller.state.loginError === ''
               ? null
-              : html`<div class="error card">${controller.state.loginError}</div>`
+              : html`<div class="error card"><header>${controller.state.loginError}</header></div>`
             }
             <button ${controller.state.isChecking ? 'disabled' : null}
               onclick=${() => controller.validateLogin()}
@@ -86,31 +88,35 @@ export const loginView = (state, emit, i18n) => {
               : html`<div class="success card"><header>${controller.state.createMessage}</header></div>`
             }
             <label>
-              <span>${__('login.email')}</span>
-              <input type="email" name="new_email"
+              <span title=${__('interaction.required')}>${__('login.email')}*</span>
+              <input type="email" name="new_email" required
                 value=${controller.state.fieldValues.createEmail}
                 oninput=${e => controller.state.fieldValues.createEmail = e.target.value.trim()}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateCreateAccount() }}
               >
             </label>
             <label>
-              <span>${__('login.password')}</span>
-              <input type="password" name="new_password"
+              <span title=${__('interaction.required')}>${__('login.password')}*</span>
+              <input type="password" name="new_password" required
                 value=${controller.state.fieldValues.createPassword}
                 oninput=${e => controller.state.fieldValues.createPassword = e.target.value}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateCreateAccount() }}
               >
             </label>
             <label>
-              <span>${__('login.confirm_password')}</span>
-              <input type="password" name="confirm_password"
+              <span title=${__('interaction.required')}>${__('login.confirm_password')}*</span>
+              <input type="password" name="confirm_password" required
                 value=${controller.state.fieldValues.createConfirm}
                 oninput=${e => controller.state.fieldValues.createConfirm = e.target.value}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateCreateAccount() }}
               >
             </label>
             <label>
-              <span>${__('login.username')}</span>
-              <input type="text" name="new_username"
+              <span title=${__('interaction.required')}>${__('login.username')}*</span>
+              <input type="text" name="new_username" required
                 value=${controller.state.fieldValues.createUsername}
                 oninput=${e => controller.state.fieldValues.createUsername = e.target.value.trim()}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateCreateAccount() }}
               >
             </label>
             <label>
@@ -118,6 +124,7 @@ export const loginView = (state, emit, i18n) => {
               <input type="text" name="new_displayname"
                 value=${controller.state.fieldValues.createDisplayName}
                 oninput=${e => controller.state.fieldValues.createDisplayName = e.target.value.trim()}
+                onkeyup=${e => { if (e.key === 'Enter') controller.validateCreateAccount() }}
               >
             </label>
             ${

server/controllers/account.js

@@ -69,10 +69,11 @@ class Account {
   }
 
   static cleanCreateAccountFormData (formData) {
+    var displayName = typeof formData.displayName !== 'undefined' ? formData.displayName.toString().trim() : '';
     return {
       email: formData.email.trim(),
       username: formData.username.toString().trim(),
-      displayName: typeof formData.displayName !== 'undefined' ? formData.displayName.toString().trim() : 'A Bee',
+      displayName: displayName.length > 0 ? displayName : 'A Bee',
       password: formData.password,
     }
   }

server/getSequelizeModels.js

@@ -30,7 +30,7 @@ function getSequelizeModels (sequelize) {
       allowNull: false,
       unique: true,
       validate: {
-        len: [2, 32],
+        len: [1, 32],
       },
     },
     passwordHash: {