fix(usernames): various

Better modal positioning
Correct text colors for input field
Don't show "already taken" if username has other errors
This commit is contained in:
Sabe Jones
2018-10-15 11:27:49 -05:00
parent 0897ab5dc9
commit cfd19ac694
2 changed files with 27 additions and 11 deletions

View File

@@ -20,7 +20,7 @@
:placeholder="$t('newDisplayName')", :placeholder="$t('newDisplayName')",
v-model='temporaryDisplayName', v-model='temporaryDisplayName',
@blur='restoreEmptyDisplayName()', @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") .mb-3(v-if="displayNameIssues.length > 0")
.input-error.text-center(v-for="issue in displayNameIssues") {{ issue }} .input-error.text-center(v-for="issue in displayNameIssues") {{ issue }}
.form-group .form-group
@@ -34,7 +34,7 @@
:placeholder="$t('newUsername')", :placeholder="$t('newUsername')",
v-model='temporaryUsername', v-model='temporaryUsername',
@blur='restoreEmptyUsername()', @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") .mb-3(v-if="usernameIssues.length > 0")
.input-error.text-center(v-for="issue in usernameIssues") {{ issue }} .input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
.small.text-center {{ $t('usernameLimitations') }} .small.text-center {{ $t('usernameLimitations') }}
@@ -44,11 +44,20 @@
</template> </template>
<style lang="scss"> <style lang="scss">
#verify-username___BV_modal_outer_ .modal-content { #verify-username___BV_modal_outer_ {
.modal-content {
height: 620px;
width: 566px; width: 566px;
padding-left: 2rem; padding-left: 2rem;
padding-right: 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> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -95,6 +104,7 @@
} }
label { label {
color: $gray-100;
font-weight: bold; font-weight: bold;
margin-bottom: 0rem; margin-bottom: 0rem;
margin-left: 1rem; margin-left: 1rem;
@@ -116,6 +126,10 @@
color: $gray-200; color: $gray-200;
} }
.text-darker {
color: $gray-50;
}
.tos-footer { .tos-footer {
background-color: $gray-700; background-color: $gray-700;
border-radius: 0rem 0rem 0.3rem 0.3rem; border-radius: 0rem 0rem 0.3rem 0.3rem;

View File

@@ -90,6 +90,7 @@ api.verifyUsername = {
const issues = verifyUsername(chosenUsername, res); const issues = verifyUsername(chosenUsername, res);
if (issues.length < 1) {
const existingUser = await User.findOne({ const existingUser = await User.findOne({
'auth.local.lowerCaseUsername': chosenUsername.toLowerCase(), 'auth.local.lowerCaseUsername': chosenUsername.toLowerCase(),
}, {auth: 1}).exec(); }, {auth: 1}).exec();
@@ -97,6 +98,7 @@ api.verifyUsername = {
if (existingUser) { if (existingUser) {
if (!user || existingUser._id !== user._id) issues.push(res.t('usernameTaken')); if (!user || existingUser._id !== user._id) issues.push(res.t('usernameTaken'));
} }
}
if (issues.length > 0) { if (issues.length > 0) {
res.respond(200, { isUsable: false, issues }); res.respond(200, { isUsable: false, issues });