Fixes error in validation

closes #6826 - refactors the validation of facebook and twitter input field in `general.js` and `user.js` controller - Example validations for facebook: - `facebook.com/username` will be corrected to the full URL - `user` will show error `Your Page name is not a valid Facebook Page name' for `general.js` and `Your Username is not a valid Facebook Username` for `user.js` as the username in facebook has to be at least 5 characters long - `twitter.com/username` will be autocorrected to the valid facebook URL incl. the `username` - Example validations for twitter: - `twitter.com/user_` will be corrected to the full URL - `user:99` will show error `Your Username is not a valid Twitter Username` - `facebook.com/username` will be autocorrected to the valid twitter URL incl. the `username` - updates both acceptance tests - adds further validation for facebook pages in general settings and user. Submitting a url which incl. `/page/` or `/pages/` will now accept any username followed incl. further `/`. - adds a custom transform `facebook-url-user` which will extract the username (if it's a facebook page, incl. `pages/`) to store only this in the backend - uses the `twitter-url-user` transform now also for user
TryGhost · May 17, 2016 · 6dbf610 · 6dbf610
1 parent 29c9e8b
commit 6dbf610
Show file tree

Hide file tree

Showing 9 changed files with 284 additions and 107 deletions.
diff --git a/core/client/app/controllers/settings/general.js b/core/client/app/controllers/settings/general.js
@@ -134,39 +134,51 @@ export default Controller.extend(SettingsSaveMixin, {
 
             // If new url didn't change, exit
             if (newUrl === oldUrl) {
+                this.get('model.errors').remove('facebook');
                 return;
             }
 
-            if (!newUrl.match(/(^https:\/\/www\.facebook\.com\/)(\S+)/g)) {
-                if (newUrl.match(/(?:facebook\.com\/)(\S+)/) || (!validator.isURL(newUrl) && newUrl.match(/([a-zA-Z0-9\.]+)/))) {
-                    let [ , username] = newUrl.match(/(?:facebook\.com\/)(\S+)/) || newUrl.match(/([a-zA-Z0-9\.]+)/);
-                    newUrl = `https://www.facebook.com/${username}`;
+            if (newUrl.match(/(?:facebook\.com\/)(\S+)/) || newUrl.match(/([a-z\d\.]+)/i)) {
+                let username = [];
 
-                    this.set('model.facebook', newUrl);
+                if (newUrl.match(/(?:facebook\.com\/)(\S+)/)) {
+                    [ , username ] = newUrl.match(/(?:facebook\.com\/)(\S+)/);
+                } else {
+                    [ , username ] = newUrl.match(/(?:https\:\/\/|http\:\/\/)?(?:www\.)?(?:\w+\.\w+\/+)?(\S+)/mi);
+                }
 
-                    this.get('model.errors').remove('facebook');
-                    this.get('model.hasValidated').pushObject('facebook');
+                // check if we have a /page/username or without
+                if (username.match(/^(?:\/)?(pages?\/\S+)/mi)) {
+                    // we got a page url, now save the username without the / in the beginning
+
+                    [ , username ] = username.match(/^(?:\/)?(pages?\/\S+)/mi);
+                } else if (username.match(/^(http|www)|(\/)/) || !username.match(/^([a-z\d\.]{5,50})$/mi)) {
+                    errMessage = !username.match(/^([a-z\d\.]{5,50})$/mi) ? 'Your Page name is not a valid Facebook Page name' : 'The URL must be in a format like https://www.facebook.com/yourPage';
 
-                    // User input is validated
-                    return this.save().then(() => {
-                        this.set('model.facebook', '');
-                        run.schedule('afterRender', this, function () {
-                            this.set('model.facebook', newUrl);
-                        });
-                    });
-                } else if (validator.isURL(newUrl)) {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://www.facebook.com/yourPage';
-                    this.get('model.errors').add('facebook', errMessage);
-                    this.get('model.hasValidated').pushObject('facebook');
-                    return;
-                } else {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://www.facebook.com/yourPage';
                     this.get('model.errors').add('facebook', errMessage);
                     this.get('model.hasValidated').pushObject('facebook');
                     return;
                 }
+
+                newUrl = `https://www.facebook.com/${username}`;
+                this.set('model.facebook', newUrl);
+
+                this.get('model.errors').remove('facebook');
+                this.get('model.hasValidated').pushObject('facebook');
+
+                // User input is validated
+                return this.save().then(() => {
+                    this.set('model.facebook', '');
+                    run.schedule('afterRender', this, function () {
+                        this.set('model.facebook', newUrl);
+                    });
+                });
+            } else {
+                errMessage = 'The URL must be in a format like ' +
+                    'https://www.facebook.com/yourPage';
+                this.get('model.errors').add('facebook', errMessage);
+                this.get('model.hasValidated').pushObject('facebook');
+                return;
             }
         },
 
@@ -184,39 +196,47 @@ export default Controller.extend(SettingsSaveMixin, {
 
             // If new url didn't change, exit
             if (newUrl === oldUrl) {
+                this.get('model.errors').remove('twitter');
                 return;
             }
 
-            if (!newUrl.match(/(^https:\/\/twitter\.com\/)(\S+)/g)) {
-                if (newUrl.match(/(?:twitter\.com\/)(\S+)/) || (!validator.isURL(newUrl) && newUrl.match(/([a-zA-Z0-9\.]+)/))) {
-                    let [ , username] = newUrl.match(/(?:twitter\.com\/)(\S+)/) || newUrl.match(/([a-zA-Z0-9\.]+)/);
-                    newUrl = `https://twitter.com/${username}`;
+            if (newUrl.match(/(?:twitter\.com\/)(\S+)/) || newUrl.match(/([a-z\d\.]+)/i)) {
+                let username = [];
 
-                    this.set('model.twitter', newUrl);
+                if (newUrl.match(/(?:twitter\.com\/)(\S+)/)) {
+                    [ , username] = newUrl.match(/(?:twitter\.com\/)(\S+)/);
+                } else {
+                    [username] = newUrl.match(/([^/]+)\/?$/mi);
+                }
 
-                    this.get('model.errors').remove('twitter');
-                    this.get('model.hasValidated').pushObject('twitter');
+                // check if username starts with http or www and show error if so
+                if (username.match(/^(http|www)|(\/)/) || !username.match(/^[a-z\d\.\_]{1,15}$/mi)) {
+                    errMessage = !username.match(/^[a-z\d\.\_]{1,15}$/mi) ? 'Your Username is not a valid Twitter Username' : 'The URL must be in a format like https://twitter.com/yourUsername';
 
-                    // User input is validated
-                    return this.save().then(() => {
-                        this.set('model.twitter', '');
-                        run.schedule('afterRender', this, function () {
-                            this.set('model.twitter', newUrl);
-                        });
-                    });
-                } else if (validator.isURL(newUrl)) {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://twitter.com/yourUsername';
-                    this.get('model.errors').add('twitter', errMessage);
-                    this.get('model.hasValidated').pushObject('twitter');
-                    return;
-                } else {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://twitter.com/yourUsername';
                     this.get('model.errors').add('twitter', errMessage);
                     this.get('model.hasValidated').pushObject('twitter');
                     return;
                 }
+
+                newUrl = `https://twitter.com/${username}`;
+                this.set('model.twitter', newUrl);
+
+                this.get('model.errors').remove('twitter');
+                this.get('model.hasValidated').pushObject('twitter');
+
+                // User input is validated
+                return this.save().then(() => {
+                    this.set('model.twitter', '');
+                    run.schedule('afterRender', this, function () {
+                        this.set('model.twitter', newUrl);
+                    });
+                });
+            } else {
+                errMessage = 'The URL must be in a format like ' +
+                    'https://twitter.com/yourUsername';
+                this.get('model.errors').add('twitter', errMessage);
+                this.get('model.hasValidated').pushObject('twitter');
+                return;
             }
         }
     }

diff --git a/core/client/app/controllers/team/user.js b/core/client/app/controllers/team/user.js
@@ -258,41 +258,53 @@ export default Controller.extend({
 
             // If new url didn't change, exit
             if (newUrl === oldUrl) {
+                this.get('user.errors').remove('facebook');
                 return;
             }
 
             // TODO: put the validation here into a validator
-            if (!newUrl.match(/(^https:\/\/www\.facebook\.com\/)(\S+)/g)) {
-                if (newUrl.match(/(?:facebook\.com\/)(\S+)/) || (!validator.isURL(newUrl) && newUrl.match(/([a-zA-Z0-9\.]+)/))) {
-                    let [ , username] = newUrl.match(/(?:facebook\.com\/)(\S+)/) || newUrl.match(/([a-zA-Z0-9\.]+)/);
-                    newUrl = `https://www.facebook.com/${username}`;
+            if (newUrl.match(/(?:facebook\.com\/)(\S+)/) || newUrl.match(/([a-z\d\.]+)/i)) {
+                let username = [];
 
-                    this.set('user.facebook', newUrl);
+                if (newUrl.match(/(?:facebook\.com\/)(\S+)/)) {
+                    [ , username ] = newUrl.match(/(?:facebook\.com\/)(\S+)/);
+                } else {
+                    [ , username ] = newUrl.match(/(?:https\:\/\/|http\:\/\/)?(?:www\.)?(?:\w+\.\w+\/+)?(\S+)/mi);
+                }
 
-                    this.get('user.errors').remove('facebook');
-                    this.get('user.hasValidated').pushObject('facebook');
+                // check if we have a /page/username or without
+                if (username.match(/^(?:\/)?(pages?\/\S+)/mi)) {
+                    // we got a page url, now save the username without the / in the beginning
+
+                    [ , username ] = username.match(/^(?:\/)?(pages?\/\S+)/mi);
+                } else if (username.match(/^(http|www)|(\/)/) || !username.match(/^([a-z\d\.]{5,50})$/mi)) {
+                    errMessage = !username.match(/^([a-z\d\.]{5,50})$/mi) ? 'Your Username is not a valid Facebook Username' : 'The URL must be in a format like https://www.facebook.com/yourUsername';
 
-                    // User input is validated
-                    invoke(this, 'save').then(() => {
-                        // necessary to update the value in the input field
-                        this.set('user.facebook', '');
-                        run.schedule('afterRender', this, function () {
-                            this.set('user.facebook', newUrl);
-                        });
-                    });
-                } else if (validator.isURL(newUrl)) {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://www.facebook.com/yourUsername';
-                    this.get('user.errors').add('facebook', errMessage);
-                    this.get('user.hasValidated').pushObject('facebook');
-                    return;
-                } else {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://www.facebook.com/yourUsername';
                     this.get('user.errors').add('facebook', errMessage);
                     this.get('user.hasValidated').pushObject('facebook');
                     return;
                 }
+
+                newUrl = `https://www.facebook.com/${username}`;
+                this.set('user.facebook', newUrl);
+
+                this.get('user.errors').remove('facebook');
+                this.get('user.hasValidated').pushObject('facebook');
+
+                // User input is validated
+                invoke(this, 'save').then(() => {
+                    // necessary to update the value in the input field
+                    this.set('user.facebook', '');
+                    run.schedule('afterRender', this, function () {
+                        this.set('user.facebook', newUrl);
+                    });
+                });
+            } else {
+                errMessage = 'The URL must be in a format like ' +
+                    'https://www.facebook.com/yourUsername';
+                this.get('user.errors').add('facebook', errMessage);
+                this.get('user.hasValidated').pushObject('facebook');
+                return;
             }
         },
 
@@ -310,41 +322,49 @@ export default Controller.extend({
 
             // If new url didn't change, exit
             if (newUrl === oldUrl) {
+                this.get('user.errors').remove('twitter');
                 return;
             }
 
             // TODO: put the validation here into a validator
-            if (!newUrl.match(/(^https:\/\/twitter\.com\/)(\S+)/g)) {
-                if (newUrl.match(/(?:twitter\.com\/)(\S+)/) || (!validator.isURL(newUrl) && newUrl.match(/([a-zA-Z0-9\.]+)/))) {
-                    let [ , username] = newUrl.match(/(?:twitter\.com\/)(\S+)/) || newUrl.match(/([a-zA-Z0-9\.]+)/);
-                    newUrl = `https://twitter.com/${username}`;
+            if (newUrl.match(/(?:twitter\.com\/)(\S+)/) || newUrl.match(/([a-z\d\.]+)/i)) {
+                let username = [];
 
-                    this.set('user.twitter', newUrl);
+                if (newUrl.match(/(?:twitter\.com\/)(\S+)/)) {
+                    [ , username] = newUrl.match(/(?:twitter\.com\/)(\S+)/);
+                } else {
+                    [username] = newUrl.match(/([^/]+)\/?$/mi);
+                }
 
-                    this.get('user.errors').remove('twitter');
-                    this.get('user.hasValidated').pushObject('twitter');
+                // check if username starts with http or www and show error if so
+                if (username.match(/^(http|www)|(\/)/) || !username.match(/^[a-z\d\.\_]{1,15}$/mi)) {
+                    errMessage = !username.match(/^[a-z\d\.\_]{1,15}$/mi) ? 'Your Username is not a valid Twitter Username' : 'The URL must be in a format like https://twitter.com/yourUsername';
 
-                    // User input is validated
-                    invoke(this, 'save').then(() => {
-                        // necessary to update the value in the input field
-                        this.set('user.twitter', '');
-                        run.schedule('afterRender', this, function () {
-                            this.set('user.twitter', newUrl);
-                        });
-                    });
-                } else if (validator.isURL(newUrl)) {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://twitter.com/yourUsername';
-                    this.get('user.errors').add('twitter', errMessage);
-                    this.get('user.hasValidated').pushObject('twitter');
-                    return;
-                } else {
-                    errMessage = 'The URL must be in a format like ' +
-                        'https://twitter.com/yourUsername';
                     this.get('user.errors').add('twitter', errMessage);
                     this.get('user.hasValidated').pushObject('twitter');
                     return;
                 }
+
+                newUrl = `https://twitter.com/${username}`;
+                this.set('user.twitter', newUrl);
+
+                this.get('user.errors').remove('twitter');
+                this.get('user.hasValidated').pushObject('twitter');
+
+                // User input is validated
+                invoke(this, 'save').then(() => {
+                    // necessary to update the value in the input field
+                    this.set('user.twitter', '');
+                    run.schedule('afterRender', this, function () {
+                        this.set('user.twitter', newUrl);
+                    });
+                });
+            } else {
+                errMessage = 'The URL must be in a format like ' +
+                    'https://twitter.com/yourUsername';
+                this.get('user.errors').add('twitter', errMessage);
+                this.get('user.hasValidated').pushObject('twitter');
+                return;
             }
         },
 

diff --git a/core/client/app/models/setting.js b/core/client/app/models/setting.js
@@ -18,7 +18,7 @@ export default Model.extend(ValidationEngine, {
     availableThemes: attr(),
     ghost_head: attr('string'),
     ghost_foot: attr('string'),
-    facebook: attr('string'),
+    facebook: attr('facebook-url-user'),
     twitter: attr('twitter-url-user'),
     labs: attr('string'),
     navigation: attr('navigation-settings'),

diff --git a/core/client/app/models/user.js b/core/client/app/models/user.js
@@ -38,8 +38,8 @@ export default Model.extend(ValidationEngine, {
         async: false
     }),
     count: attr('raw'),
-    facebook: attr('string'),
-    twitter: attr('string'),
+    facebook: attr('facebook-url-user'),
+    twitter: attr('twitter-url-user'),
 
     ghostPaths: service(),
     ajax: service(),

diff --git a/core/client/app/transforms/facebook-url-user.js b/core/client/app/transforms/facebook-url-user.js
@@ -0,0 +1,21 @@
+import Transform from 'ember-data/transform';
+
+export default Transform.extend({
+    deserialize(serialized) {
+        if (serialized) {
+            let [ , user ] = serialized.match(/(\S+)/);
+
+            return `https://www.facebook.com/${user}`;
+        }
+        return serialized;
+    },
+
+    serialize(deserialized) {
+        if (deserialized) {
+            let [ , user] = deserialized.match(/(?:https:\/\/)(?:www\.)(?:facebook\.com)\/(?:#!\/)?(\w+\/?\S+)/mi);
+
+            return user;
+        }
+        return deserialized;
+    }
+});