feat: Allow display username with uppercase characters (#43667)

* feat: Allow display username with uppercase characters

* fix: ensure user can change username to uppercased version

* fix: ensure that same username in a different case does not require validation

api-server/src/common/models/user.js

@@ -108,12 +108,13 @@ function isTheSame(val1, val2) {
 
 function getAboutProfile({
   username,
+  usernameDisplay,
   githubProfile: github,
   progressTimestamps = [],
   bio
 }) {
   return {
-    username,
+    username: usernameDisplay || username,
     github,
     browniePoints: progressTimestamps.length,
     bio
@@ -127,7 +128,8 @@ function nextTick(fn) {
 const getRandomNumber = () => Math.random();
 
 function populateRequiredFields(user) {
-  user.username = user.username.trim().toLowerCase();
+  user.usernameDisplay = user.username.trim();
+  user.username = user.usernameDisplay.toLowerCase();
   user.email =
     typeof user.email === 'string'
       ? user.email.trim().toLowerCase()
@@ -724,42 +726,6 @@ export default function initializeUser(User) {
     );
   };
 
-  User.prototype.updateMyUsername = function updateMyUsername(newUsername) {
-    return Observable.defer(() => {
-      const isOwnUsername = isTheSame(newUsername, this.username);
-      if (isOwnUsername) {
-        return Observable.of(dedent`
-          ${newUsername} is already associated with this account.
-          `);
-      }
-      return Observable.fromPromise(User.doesExist(newUsername));
-    }).flatMap(boolOrMessage => {
-      if (typeof boolOrMessage === 'string') {
-        return Observable.of(boolOrMessage);
-      }
-      if (boolOrMessage) {
-        return Observable.of(dedent`
-        ${newUsername} is already associated with a different account.
-        `);
-      }
-
-      const usernameUpdate = new Promise((resolve, reject) =>
-        this.updateAttribute('username', newUsername, err => {
-          if (err) {
-            return reject(err);
-          }
-          return resolve();
-        })
-      );
-
-      return Observable.fromPromise(usernameUpdate).map(
-        () => dedent`
-        Your username has been updated successfully.
-        `
-      );
-    });
-  };
-
   function prepUserForPublish(user, profileUI) {
     const {
       about,

api-server/src/common/models/user.json

@@ -74,6 +74,9 @@
       },
       "require": true
     },
+    "usernameDisplay": {
+      "type": "string"
+    },
     "about": {
       "type": "string",
       "default": ""

api-server/src/server/boot/settings.js

@@ -173,11 +173,14 @@ function updateMyAbout(req, res, next) {
 function createUpdateMyUsername(app) {
   const { User } = app.models;
   return async function updateMyUsername(req, res, next) {
-    const {
-      user,
-      body: { username }
-    } = req;
-    if (username === user.username) {
+    const { user, body } = req;
+    const usernameDisplay = body.username.trim();
+    const username = usernameDisplay.toLowerCase();
+    if (
+      username === user.username &&
+      user.usernameDisplay &&
+      usernameDisplay === user.usernameDisplay
+    ) {
       return res.json({
         type: 'info',
         message: 'flash.username-used'
@@ -192,7 +195,8 @@ function createUpdateMyUsername(app) {
       });
     }
 
-    const exists = await User.doesExist(username);
+    const exists =
+      username === user.username ? false : await User.doesExist(username);
 
     if (exists) {
       return res.json({
@@ -201,7 +205,7 @@ function createUpdateMyUsername(app) {
       });
     }
 
-    return user.updateAttribute('username', username, err => {
+    return user.updateAttributes({ username, usernameDisplay }, err => {
       if (err) {
         res.status(500).json(standardErrorMessage);
         return next(err);
@@ -210,7 +214,7 @@ function createUpdateMyUsername(app) {
       return res.status(200).json({
         type: 'success',
         message: `flash.username-updated`,
-        variables: { username: username }
+        variables: { username: usernameDisplay }
       });
     });
   };

api-server/src/server/boot/user.js

@@ -76,6 +76,7 @@ function createReadSessionUser(app) {
           user: {
             [user.username]: {
               ...pick(user, userPropsForSession),
+              username: user.usernameDisplay || user.username,
               isEmailVerified: !!user.emailVerified,
               isGithub: !!user.githubProfile,
               isLinkedIn: !!user.linkedin,