From cfd19ac6946c9f4415f0846de43f090e384008bb Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Mon, 15 Oct 2018 11:27:49 -0500
Subject: [PATCH] fix(usernames): various Better modal positioning Correct text
 colors for input field Don't show "already taken" if username has other
 errors

---
 .../components/settings/verifyUsername.vue    | 26 ++++++++++++++-----
 website/server/controllers/api-v4/auth.js     | 12 +++++----
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/website/client/components/settings/verifyUsername.vue b/website/client/components/settings/verifyUsername.vue
index c48221b3b6..5ef311fc24 100644
--- a/website/client/components/settings/verifyUsername.vue
+++ b/website/client/components/settings/verifyUsername.vue
@@ -20,7 +20,7 @@
             :placeholder="$t('newDisplayName')",
             v-model='temporaryDisplayName',
             @blur='restoreEmptyDisplayName()',
-            :class='{"is-invalid input-invalid": displayNameInvalid, "input-valid": displayNameValid}')
+            :class='{"is-invalid input-invalid": displayNameInvalid, "input-valid": displayNameValid, "text-darker": temporaryDisplayName.length > 0}')
     .mb-3(v-if="displayNameIssues.length > 0")
       .input-error.text-center(v-for="issue in displayNameIssues") {{ issue }}
     .form-group
@@ -34,7 +34,7 @@
               :placeholder="$t('newUsername')",
               v-model='temporaryUsername',
               @blur='restoreEmptyUsername()',
-              :class='{"is-invalid input-invalid": usernameInvalid, "input-valid": usernameValid}')
+              :class='{"is-invalid input-invalid": usernameInvalid, "input-valid": usernameValid, "text-darker": temporaryUsername.length > 0}')
     .mb-3(v-if="usernameIssues.length > 0")
       .input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
     .small.text-center {{ $t('usernameLimitations') }}
@@ -44,10 +44,19 @@
 </template>
 
 <style lang="scss">
-  #verify-username___BV_modal_outer_ .modal-content {
-    width: 566px;
-    padding-left: 2rem;
-    padding-right: 2rem;
+  #verify-username___BV_modal_outer_ {
+    .modal-content {
+      height: 620px;
+      width: 566px;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    .modal-dialog   {
+      -webkit-transform: translate(-5%, calc(50vh - 60%));
+      -ms-transform: translate(0, 50vh) translate(-5%, -60%);
+      -o-transform: translate(-5%, calc(50vh - 60%));
+      transform: translate(0, 50vh) translate(-5%, -60%);
+    }
   }
 </style>
 
@@ -95,6 +104,7 @@
   }
 
   label {
+    color: $gray-100;
     font-weight: bold;
     margin-bottom: 0rem;
     margin-left: 1rem;
@@ -116,6 +126,10 @@
     color: $gray-200;
   }
 
+  .text-darker {
+    color: $gray-50;
+  }
+
   .tos-footer {
     background-color: $gray-700;
     border-radius: 0rem 0rem 0.3rem 0.3rem;
diff --git a/website/server/controllers/api-v4/auth.js b/website/server/controllers/api-v4/auth.js
index 607562aca4..fb1533a7c7 100644
--- a/website/server/controllers/api-v4/auth.js
+++ b/website/server/controllers/api-v4/auth.js
@@ -90,12 +90,14 @@ api.verifyUsername = {
 
     const issues = verifyUsername(chosenUsername, res);
 
-    const existingUser = await User.findOne({
-      'auth.local.lowerCaseUsername': chosenUsername.toLowerCase(),
-    }, {auth: 1}).exec();
+    if (issues.length < 1) {
+      const existingUser = await User.findOne({
+        'auth.local.lowerCaseUsername': chosenUsername.toLowerCase(),
+      }, {auth: 1}).exec();
 
-    if (existingUser) {
-      if (!user ||  existingUser._id !== user._id) issues.push(res.t('usernameTaken'));
+      if (existingUser) {
+        if (!user ||  existingUser._id !== user._id) issues.push(res.t('usernameTaken'));
+      }
     }
 
     if (issues.length > 0) {