public/assets/js/createChannelFunctions.js

@@ -24,7 +24,7 @@ function publishNewChannel (event) {
     // prevent default so this script can handle submission
     event.preventDefault();
     // validate submission
-    validateNewChannelSubmission(userName, password)
+    validationFunctions.validateNewChannelSubmission(userName, password)
         .then(() => {
             showChannelCreateInProgressDisplay();
             return sendAuthRequest(userName, password, '/signup') // post the request

public/assets/js/loginFunctions.js

@@ -47,7 +47,7 @@ function loginToChannel (event) {
     const password = document.getElementById('channel-login-password-input').value;
     // prevent default
     event.preventDefault()
-    validateNewChannelLogin(userName, password)
+    validationFunctions.validateNewChannelLogin(userName, password)
         .then(() => {
             // send request
             return sendAuthRequest(userName, password, '/login')
@@ -71,9 +71,9 @@ function loginToChannel (event) {
         .catch(error => {
             const loginErrorDisplayElement = document.getElementById('login-error-display-element');
             if (error.name){
-                showError(loginErrorDisplayElement, error.message);
+                validationFunctions.showError(loginErrorDisplayElement, error.message);
             } else {
-                showError(loginErrorDisplayElement, 'There was an error logging into your channel');
+                validationFunctions.showError(loginErrorDisplayElement, 'There was an error logging into your channel');
             }
         })
 }

public/assets/js/publishFileFunctions.js

@@ -12,9 +12,9 @@ var publishFileFunctions = {
         // When a file is selected for publish, validate that file and
         // stage it so it will be ready when the publish button is clicked
         try {
-            validateFile(selectedFile); // validate the file's name, type, and size
+            validationFunctions.validateFile(selectedFile); // validate the file's name, type, and size
         } catch (error) {
-            showError(fileSelectionInputError, error.message);
+            validationFunctions.showError(fileSelectionInputError, error.message);
             return;
         }
         // set image preview, if an image was provided
@@ -36,8 +36,8 @@ var publishFileFunctions = {
         const nameInput = document.getElementById('claim-name-input');
         if (nameInput.value === "") {
             var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
-            nameInput.value = cleanseClaimName(filename);
-            checkClaimName(nameInput.value);
+            nameInput.value = validationFunctions.cleanseClaimName(filename);
+            validationFunctions.checkClaimName(nameInput.value);
         }
     },
     setImagePreview: function (selectedFile) {
@@ -99,7 +99,6 @@ var publishFileFunctions = {
         }
     },
     appendDataToFormData: function (file, metadata) {
-        console.log(metadata);
         var fd = new FormData();
         fd.append('file', file)
         for (var key in metadata) {
@@ -156,20 +155,20 @@ var publishFileFunctions = {
         const channelSelectError = document.getElementById('input-error-channel-select');
         const publishSubmitError = document.getElementById('input-error-publish-submit');
         // validate, submit, and handle response
-        validateFilePublishSubmission(stagedFiles, metadata)
+        validationFunctions.validateFilePublishSubmission(stagedFiles, metadata)
             .then( function() {
                 that.publishFile(stagedFiles[0], metadata);
             })
             .catch(error => {
                 if (error.name === 'FileError') {
-                    showError(fileSelectionInputError, error.message);
+                    validationFunctions.showError(fileSelectionInputError, error.message);
                 } else if (error.name === 'NameError') {
-                    showError(claimNameError, error.message);
+                    validationFunctions.showError(claimNameError, error.message);
                 } else if (error.name === 'ChannelNameError'){
                     console.log(error);
-                    showError(channelSelectError, error.message);
+                    validationFunctions.showError(channelSelectError, error.message);
                 } else {
-                    showError(publishSubmitError, error.message);
+                    validationFunctions.showError(publishSubmitError, error.message);
                 }
                 return;
             })

public/assets/js/validationFunctions.js

@@ -1,239 +1,231 @@
 // validation function which checks the proposed file's type, size, and name
-function validateFile(file) {
-    if (!file) {
-        console.log('no file found');
-        throw new Error('no file provided');
-    }
-    if (/'/.test(file.name)) {
-        console.log('file name had apostrophe in it');
-        throw new Error('apostrophes are not allowed in the file name');
-    }
-    // validate size and type
-    switch (file.type) {
-        case 'image/jpeg':
-        case 'image/jpg':
-        case 'image/png':
-            if (file.size > 10000000){
-                console.log('file was too big');
-                throw new Error('Sorry, images are limited to 10 megabytes.');
-            }
-            break;
-        case 'image/gif':
-            if (file.size > 50000000){
-                console.log('file was too big');
-                throw new Error('Sorry, .gifs are limited to 50 megabytes.');
-            }
-            break;
-        case 'video/mp4':
-            if (file.size > 50000000){
-                console.log('file was too big');
-                throw new Error('Sorry, videos are limited to 50 megabytes.');
-            }
-            break;
-        default:
-            console.log('file type is not supported');
-            throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.')
-    }
-}
-
-// validation function that checks to make sure the claim name is valid
-function validateClaimName (name) {
-    console.log('validating the claim name');
-    // ensure a name was entered
-    if (name.length < 1) {
-        throw new NameError("You must enter a name for your url");
-    }
-    // validate the characters in the 'name' field
-    const invalidCharacters = /[^A-Za-z0-9,-]/g.exec(name);
-    if (invalidCharacters) {
-        throw new NameError('"' + invalidCharacters + '" characters are not allowed');
-    }
-}
-
-function validateChannelName (name) {
-    name = name.substring(name.indexOf('@') + 1);
-    // ensure a name was entered
-    if (name.length < 1) {
-        throw new ChannelNameError("You must enter a name for your channel");
-    }
-    // validate the characters in the 'name' field
-    const invalidCharacters = /[^A-Za-z0-9,-,@]/g.exec(name);
-    if (invalidCharacters) {
-        throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed');
-    }
-}
-
-function validatePassword (password) {
-    if (password.length < 1) {
-        throw new ChannelPasswordError("You must enter a password for you channel");
-    }
-}
-
-function cleanseClaimName(name) {
-    name = name.replace(/\s+/g, '-'); // replace spaces with dashes
-    name = name.replace(/[^A-Za-z0-9-]/g, '');  // remove all characters that are not A-Z, a-z, 0-9, or '-'
-    return name;
-}
-
-// validation functions to check claim & channel name eligibility as the inputs change
-
-function isNameAvailable (name, apiUrl) {
-    const url = apiUrl + name;
-    return getRequest(url)
-}
-
-function showError(errorDisplay, errorMsg) {
-    errorDisplay.hidden = false;
-    errorDisplay.innerText = errorMsg;
-}
-
-function hideError(errorDisplay) {
-    errorDisplay.hidden = true;
-    errorDisplay.innerText = '';
-}
-
-function showSuccess (successElement) {
-    successElement.hidden = false;
-    successElement.innerHTML = "&#x2714";
-}
-
-function hideSuccess (successElement) {
-    successElement.hidden = true;
-    successElement.innerHTML = "";
-}
-
-function checkAvailability(name, successDisplayElement, errorDisplayElement, validateName, isNameAvailable, errorMessage, apiUrl) {
-    try {
-        // check to make sure the characters are valid
-        validateName(name);
-        // check to make sure it is available
-        isNameAvailable(name, apiUrl)
-            .then(result => {
-                if (result === true) {
-                    hideError(errorDisplayElement);
-                    showSuccess(successDisplayElement)
-                } else {
-                    hideSuccess(successDisplayElement);
-                    showError(errorDisplayElement, errorMessage);
+var validationFunctions = {
+    validateFile: function (file) {
+        if (!file) {
+            console.log('no file found');
+            throw new Error('no file provided');
+        }
+        if (/'/.test(file.name)) {
+            console.log('file name had apostrophe in it');
+            throw new Error('apostrophes are not allowed in the file name');
+        }
+        // validate size and type
+        switch (file.type) {
+            case 'image/jpeg':
+            case 'image/jpg':
+            case 'image/png':
+                if (file.size > 10000000) {
+                    console.log('file was too big');
+                    throw new Error('Sorry, images are limited to 10 megabytes.');
                 }
-            })
-            .catch(error => {
-                hideSuccess(successDisplayElement);
-                showError(errorDisplayElement, error.message);
-            });
-    } catch (error) {
-        hideSuccess(successDisplayElement);
-        showError(errorDisplayElement, error.message);
-    }
-}
-
-function checkClaimName(name){
-    const successDisplayElement = document.getElementById('input-success-claim-name');
-    const errorDisplayElement = document.getElementById('input-error-claim-name');
-    checkAvailability(name, successDisplayElement, errorDisplayElement, validateClaimName, isNameAvailable, 'Sorry, that ending is already taken', '/api/isClaimAvailable/');
-}
-
-function checkChannelName(name){
-    const successDisplayElement = document.getElementById('input-success-channel-name');
-    const errorDisplayElement = document.getElementById('input-error-channel-name');
-    name = `@${name}`;
-    checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that name is already taken', '/api/isChannelAvailable/');
-}
-
-// validation function which checks all aspects of the publish submission
-function validateFilePublishSubmission(stagedFiles, metadata){
-    const channelName = metadata.channelName;
-    const claimName = metadata.name;
-    return new Promise(function (resolve, reject) {
-        // 1. make sure 1 file was staged
-        if (!stagedFiles) {
-            reject(new FileError("Please select a file"));
-            return;
-        } else if (stagedFiles.length > 1) {
-            reject(new FileError("Only one file is allowed at a time"));
-            return;
-        }
-        // 2. validate the file's name, type, and size
-        try {
-            validateFile(stagedFiles[0]);
-        } catch (error) {
-            reject(error);
-            return;
-        }
-        // 3. validate that a channel was chosen
-        if (channelName === 'new' || channelName === 'login') {
-            reject(new ChannelNameError("Please log in to a channel"));
-            return;
-        };
-        // 4. validate the claim name
-        try {
-            validateClaimName(claimName);
-        } catch (error) {
-            reject(error);
-            return;
-        }
-        // if all validation passes, check availability of the name (note: do we need to re-validate channel name vs. credentials as well?)
-        return isNameAvailable(claimName, '/api/isClaimAvailable/')
-            .then(result => {
-                if (result) {
-                    resolve();
-                } else {
-                    reject(new NameError('Sorry, that ending is already taken'));
+                break;
+            case 'image/gif':
+                if (file.size > 50000000) {
+                    console.log('file was too big');
+                    throw new Error('Sorry, .gifs are limited to 50 megabytes.');
                 }
-            })
-            .catch(error => {
+                break;
+            case 'video/mp4':
+                if (file.size > 50000000) {
+                    console.log('file was too big');
+                    throw new Error('Sorry, videos are limited to 50 megabytes.');
+                }
+                break;
+            default:
+                console.log('file type is not supported');
+                throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.')
+        }
+    },
+    // validation function that checks to make sure the claim name is valid
+    validateClaimName: function (name) {
+        console.log('validating the claim name');
+        // ensure a name was entered
+        if (name.length < 1) {
+            throw new NameError("You must enter a name for your url");
+        }
+        // validate the characters in the 'name' field
+        const invalidCharacters = /[^A-Za-z0-9,-]/g.exec(name);
+        if (invalidCharacters) {
+            throw new NameError('"' + invalidCharacters + '" characters are not allowed');
+        }
+    },
+    validateChannelName: function (name) {
+        name = name.substring(name.indexOf('@') + 1);
+        // ensure a name was entered
+        if (name.length < 1) {
+            throw new ChannelNameError("You must enter a name for your channel");
+        }
+        // validate the characters in the 'name' field
+        const invalidCharacters = /[^A-Za-z0-9,-,@]/g.exec(name);
+        if (invalidCharacters) {
+            throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed');
+        }
+    },
+    validatePassword: function (password) {
+        if (password.length < 1) {
+            throw new ChannelPasswordError("You must enter a password for you channel");
+        }
+    },
+    cleanseClaimName: function (name) {
+        name = name.replace(/\s+/g, '-'); // replace spaces with dashes
+        name = name.replace(/[^A-Za-z0-9-]/g, '');  // remove all characters that are not A-Z, a-z, 0-9, or '-'
+        return name;
+    },
+    // validation functions to check claim & channel name eligibility as the inputs change
+    isNameAvailable: function (name, apiUrl) {
+        const url = apiUrl + name;
+        return getRequest(url)
+    },
+    showError: function (errorDisplay, errorMsg) {
+        errorDisplay.hidden = false;
+        errorDisplay.innerText = errorMsg;
+    },
+    hideError: function (errorDisplay) {
+        errorDisplay.hidden = true;
+        errorDisplay.innerText = '';
+    },
+    showSuccess: function (successElement) {
+        successElement.hidden = false;
+        successElement.innerHTML = "&#x2714";
+    },
+    hideSuccess: function (successElement) {
+        successElement.hidden = true;
+        successElement.innerHTML = "";
+    },
+    checkAvailability: function (name, successDisplayElement, errorDisplayElement, validateName, errorMessage, apiUrl) {
+        var that = this;
+        try {
+            // check to make sure the characters are valid
+            validateName(name);
+            // check to make sure it is available
+            that.isNameAvailable(name, apiUrl)
+                .then(function (result) {
+                    if (result === true) {
+                        that.hideError(errorDisplayElement);
+                        that.showSuccess(successDisplayElement)
+                    } else {
+                        that.hideSuccess(successDisplayElement);
+                        that.showError(errorDisplayElement, errorMessage);
+                    }
+                })
+                .catch(error => {
+                    that.hideSuccess(successDisplayElement);
+                    that.showError(errorDisplayElement, error.message);
+                });
+        } catch (error) {
+            that.hideSuccess(successDisplayElement);
+            that.showError(errorDisplayElement, error.message);
+        }
+    },
+    checkClaimName: function (name) {
+        const successDisplayElement = document.getElementById('input-success-claim-name');
+        const errorDisplayElement = document.getElementById('input-error-claim-name');
+        this.checkAvailability(name, successDisplayElement, errorDisplayElement, this.validateClaimName, 'Sorry, that ending is already taken', '/api/isClaimAvailable/');
+    },
+    checkChannelName: function (name) {
+        const successDisplayElement = document.getElementById('input-success-channel-name');
+        const errorDisplayElement = document.getElementById('input-error-channel-name');
+        name = `@${name}`;
+        this.checkAvailability(name, successDisplayElement, errorDisplayElement, this.validateChannelName, 'Sorry, that name is already taken', '/api/isChannelAvailable/');
+    },
+    // validation function which checks all aspects of the publish submission
+    validateFilePublishSubmission: function (stagedFiles, metadata) {
+        const channelName = metadata.channelName;
+        const claimName = metadata.name;
+        var that = this;
+        return new Promise(function (resolve, reject) {
+            // 1. make sure 1 file was staged
+            if (!stagedFiles) {
+                reject(new FileError("Please select a file"));
+                return;
+            } else if (stagedFiles.length > 1) {
+                reject(new FileError("Only one file is allowed at a time"));
+                return;
+            }
+            // 2. validate the file's name, type, and size
+            try {
+                that.validateFile(stagedFiles[0]);
+            } catch (error) {
                 reject(error);
-            });
-    });
-}
-
-// validation function which checks all aspects of a new channel submission
-function validateNewChannelSubmission(userName, password){
-    const channelName = `@${userName}`;
-    return new Promise(function (resolve, reject) {
-        // 1. validate name
-        try {
-            validateChannelName(channelName);
-        } catch (error) {
-            return reject(error);
-        }
-        // 2. validate password
-        try {
-            validatePassword(password);
-        } catch (error) {
-            return reject(error);
-        }
-        // 3. if all validation passes, check availability of the name
-        isNameAvailable(channelName, '/api/isChannelAvailable/')  // validate the availability
-            .then(result => {
-                if (result) {
-                    resolve();
-                } else {
-                    reject(new ChannelNameError('Sorry, that name is already taken'));
-                }
-            })
-            .catch( error => {
-                console.log('error evaluating channel name availability', error);
+                return;
+            }
+            // 3. validate that a channel was chosen
+            if (channelName === 'new' || channelName === 'login') {
+                reject(new ChannelNameError("Please log in to a channel"));
+                return;
+            }
+            ;
+            // 4. validate the claim name
+            try {
+                that.validateClaimName(claimName);
+            } catch (error) {
                 reject(error);
-            });
-    });
-}
-// validation function which checks all aspects of a new channel login
-function validateNewChannelLogin(userName, password){
-    const channelName = `@${userName}`;
-    return new Promise(function (resolve, reject) {
-        // 1. validate name
-        try {
-            validateChannelName(channelName);
-        } catch (error) {
-            return reject(error);
-        }
-        // 2. validate password
-        try {
-            validatePassword(password);
-        } catch (error) {
-            return reject(error);
-        }
-        resolve();
-    });
-}
+                return;
+            }
+            // if all validation passes, check availability of the name (note: do we need to re-validate channel name vs. credentials as well?)
+            return that.isNameAvailable(claimName, '/api/isClaimAvailable/')
+                .then(result => {
+                    if (result) {
+                        resolve();
+                    } else {
+                        reject(new NameError('Sorry, that ending is already taken'));
+                    }
+                })
+                .catch(error => {
+                    reject(error);
+                });
+        });
+    },
+    // validation function which checks all aspects of a new channel submission
+    validateNewChannelSubmission: function (userName, password) {
+        const channelName = `@${userName}`;
+        var that = this;
+        return new Promise(function (resolve, reject) {
+            // 1. validate name
+            try {
+                that.validateChannelName(channelName);
+            } catch (error) {
+                return reject(error);
+            }
+            // 2. validate password
+            try {
+                that.validatePassword(password);
+            } catch (error) {
+                return reject(error);
+            }
+            // 3. if all validation passes, check availability of the name
+            that.isNameAvailable(channelName, '/api/isChannelAvailable/')  // validate the availability
+                .then(function(result) {
+                    if (result) {
+                        resolve();
+                    } else {
+                        reject(new ChannelNameError('Sorry, that name is already taken'));
+                    }
+                })
+                .catch(function(error) {
+                    console.log('error evaluating channel name availability', error);
+                    reject(error);
+                });
+        });
+    },
+    // validation function which checks all aspects of a new channel login
+    validateNewChannelLogin: function (userName, password) {
+        const channelName = `@${userName}`;
+        var that = this;
+        return new Promise(function (resolve, reject) {
+            // 1. validate name
+            try {
+                that.validateChannelName(channelName);
+            } catch (error) {
+                return reject(error);
+            }
+            // 2. validate password
+            try {
+                that.validatePassword(password);
+            } catch (error) {
+                return reject(error);
+            }
+            resolve();
+        });
+    }
+};

views/partials/channelCreationForm.handlebars

@@ -6,7 +6,7 @@
         </div><div class="column column--6 column--sml-10">
             <div class="input-text--primary flex-container--row flex-container--left-bottom">
                 <span>@</span>
-                <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)">
+                <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="validationFunctions.checkChannelName(event.target.value)">
                 <span id="input-success-channel-name" class="info-message--success"></span>
             </div>
         </div>

views/partials/publishForm-Url.handlebars

@@ -9,7 +9,7 @@
             <span id="url-channel" class="url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>
             <span id="url-no-channel-placeholder" class="url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be a random id</span></span>
             <span id="url-channel-placeholder" class="url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span> /
-            <input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
+            <input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="validationFunctions.checkClaimName(event.target.value)">
             <span id="input-success-claim-name" class="info-message--success span--absolute"></span>
     </div>