LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

combined validation functions into one object

Browse source
This commit is contained in:
bill bittner 2017-11-02 15:47:55 -07:00
parent 934c0fedd1
commit d92f499269
6 changed files with 241 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/js/createChannelFunctions.js
View file

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

6
public/assets/js/loginFunctions.js
View file

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

19
public/assets/js/publishFileFunctions.js
View file

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

130
public/assets/js/validationFunctions.js
View file

@ -1,5 +1,6 @@
// validation function which checks the proposed file's type, size, and name // validation function which checks the proposed file's type, size, and name
function validateFile(file) { var validationFunctions = {
validateFile: function (file) {
if (!file) { if (!file) {
console.log('no file found'); console.log('no file found');
throw new Error('no file provided'); throw new Error('no file provided');
@ -34,10 +35,9 @@ function validateFile(file) {
console.log('file type is not supported'); 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.') 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 // validation function that checks to make sure the claim name is valid
function validateClaimName (name) { validateClaimName: function (name) {
console.log('validating the claim name'); console.log('validating the claim name');
// ensure a name was entered // ensure a name was entered
if (name.length < 1) { if (name.length < 1) {
@ -48,9 +48,8 @@ function validateClaimName (name) {
if (invalidCharacters) { if (invalidCharacters) {
throw new NameError('"' + invalidCharacters + '" characters are not allowed'); throw new NameError('"' + invalidCharacters + '" characters are not allowed');
} }
} },
validateChannelName: function (name) {
function validateChannelName (name) {
name = name.substring(name.indexOf('@') + 1); name = name.substring(name.indexOf('@') + 1);
// ensure a name was entered // ensure a name was entered
if (name.length < 1) { if (name.length < 1) {
@ -61,89 +60,79 @@ function validateChannelName (name) {
if (invalidCharacters) { if (invalidCharacters) {
throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed'); throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed');
} }
} },
validatePassword: function (password) {
function validatePassword (password) {
if (password.length < 1) { if (password.length < 1) {
throw new ChannelPasswordError("You must enter a password for you channel"); throw new ChannelPasswordError("You must enter a password for you channel");
} }
} },
cleanseClaimName: function (name) {
function cleanseClaimName(name) {
name = name.replace(/\s+/g, '-'); // replace spaces with dashes 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 '-' name = name.replace(/[^A-Za-z0-9-]/g, ''); // remove all characters that are not A-Z, a-z, 0-9, or '-'
return name; return name;
} },
// validation functions to check claim & channel name eligibility as the inputs change // validation functions to check claim & channel name eligibility as the inputs change
isNameAvailable: function (name, apiUrl) {
function isNameAvailable (name, apiUrl) {
const url = apiUrl + name; const url = apiUrl + name;
return getRequest(url) return getRequest(url)
} },
showError: function (errorDisplay, errorMsg) {
function showError(errorDisplay, errorMsg) {
errorDisplay.hidden = false; errorDisplay.hidden = false;
errorDisplay.innerText = errorMsg; errorDisplay.innerText = errorMsg;
} },
hideError: function (errorDisplay) {
function hideError(errorDisplay) {
errorDisplay.hidden = true; errorDisplay.hidden = true;
errorDisplay.innerText = ''; errorDisplay.innerText = '';
} },
showSuccess: function (successElement) {
function showSuccess (successElement) {
successElement.hidden = false; successElement.hidden = false;
successElement.innerHTML = "&#x2714"; successElement.innerHTML = "&#x2714";
} },
hideSuccess: function (successElement) {
function hideSuccess (successElement) {
successElement.hidden = true; successElement.hidden = true;
successElement.innerHTML = ""; successElement.innerHTML = "";
} },
checkAvailability: function (name, successDisplayElement, errorDisplayElement, validateName, errorMessage, apiUrl) {
function checkAvailability(name, successDisplayElement, errorDisplayElement, validateName, isNameAvailable, errorMessage, apiUrl) { var that = this;
try { try {
// check to make sure the characters are valid // check to make sure the characters are valid
validateName(name); validateName(name);
// check to make sure it is available // check to make sure it is available
isNameAvailable(name, apiUrl) that.isNameAvailable(name, apiUrl)
.then(result => { .then(function (result) {
if (result === true) { if (result === true) {
hideError(errorDisplayElement); that.hideError(errorDisplayElement);
showSuccess(successDisplayElement) that.showSuccess(successDisplayElement)
} else { } else {
hideSuccess(successDisplayElement); that.hideSuccess(successDisplayElement);
showError(errorDisplayElement, errorMessage); that.showError(errorDisplayElement, errorMessage);
} }
}) })
.catch(error => { .catch(error => {
hideSuccess(successDisplayElement); that.hideSuccess(successDisplayElement);
showError(errorDisplayElement, error.message); that.showError(errorDisplayElement, error.message);
}); });
} catch (error) { } catch (error) {
hideSuccess(successDisplayElement); that.hideSuccess(successDisplayElement);
showError(errorDisplayElement, error.message); that.showError(errorDisplayElement, error.message);
} }
} },
checkClaimName: function (name) {
function checkClaimName(name){
const successDisplayElement = document.getElementById('input-success-claim-name'); const successDisplayElement = document.getElementById('input-success-claim-name');
const errorDisplayElement = document.getElementById('input-error-claim-name'); const errorDisplayElement = document.getElementById('input-error-claim-name');
checkAvailability(name, successDisplayElement, errorDisplayElement, validateClaimName, isNameAvailable, 'Sorry, that ending is already taken', '/api/isClaimAvailable/'); this.checkAvailability(name, successDisplayElement, errorDisplayElement, this.validateClaimName, 'Sorry, that ending is already taken', '/api/isClaimAvailable/');
} },
checkChannelName: function (name) {
function checkChannelName(name){
const successDisplayElement = document.getElementById('input-success-channel-name'); const successDisplayElement = document.getElementById('input-success-channel-name');
const errorDisplayElement = document.getElementById('input-error-channel-name'); const errorDisplayElement = document.getElementById('input-error-channel-name');
name = `@${name}`; name = `@${name}`;
checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that name is already taken', '/api/isChannelAvailable/'); 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 // validation function which checks all aspects of the publish submission
function validateFilePublishSubmission(stagedFiles, metadata){ validateFilePublishSubmission: function (stagedFiles, metadata) {
const channelName = metadata.channelName; const channelName = metadata.channelName;
const claimName = metadata.name; const claimName = metadata.name;
var that = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
// 1. make sure 1 file was staged // 1. make sure 1 file was staged
if (!stagedFiles) { if (!stagedFiles) {
@ -155,7 +144,7 @@ function validateFilePublishSubmission(stagedFiles, metadata){
} }
// 2. validate the file's name, type, and size // 2. validate the file's name, type, and size
try { try {
validateFile(stagedFiles[0]); that.validateFile(stagedFiles[0]);
} catch (error) { } catch (error) {
reject(error); reject(error);
return; return;
@ -164,16 +153,17 @@ function validateFilePublishSubmission(stagedFiles, metadata){
if (channelName === 'new' || channelName === 'login') { if (channelName === 'new' || channelName === 'login') {
reject(new ChannelNameError("Please log in to a channel")); reject(new ChannelNameError("Please log in to a channel"));
return; return;
}; }
;
// 4. validate the claim name // 4. validate the claim name
try { try {
validateClaimName(claimName); that.validateClaimName(claimName);
} catch (error) { } catch (error) {
reject(error); reject(error);
return; return;
} }
// if all validation passes, check availability of the name (note: do we need to re-validate channel name vs. credentials as well?) // 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/') return that.isNameAvailable(claimName, '/api/isClaimAvailable/')
.then(result => { .then(result => {
if (result) { if (result) {
resolve(); resolve();
@ -185,55 +175,57 @@ function validateFilePublishSubmission(stagedFiles, metadata){
reject(error); reject(error);
}); });
}); });
} },
// validation function which checks all aspects of a new channel submission // validation function which checks all aspects of a new channel submission
function validateNewChannelSubmission(userName, password){ validateNewChannelSubmission: function (userName, password) {
const channelName = `@${userName}`; const channelName = `@${userName}`;
var that = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
// 1. validate name // 1. validate name
try { try {
validateChannelName(channelName); that.validateChannelName(channelName);
} catch (error) { } catch (error) {
return reject(error); return reject(error);
} }
// 2. validate password // 2. validate password
try { try {
validatePassword(password); that.validatePassword(password);
} catch (error) { } catch (error) {
return reject(error); return reject(error);
} }
// 3. if all validation passes, check availability of the name // 3. if all validation passes, check availability of the name
isNameAvailable(channelName, '/api/isChannelAvailable/') // validate the availability that.isNameAvailable(channelName, '/api/isChannelAvailable/') // validate the availability
.then(result => { .then(function(result) {
if (result) { if (result) {
resolve(); resolve();
} else { } else {
reject(new ChannelNameError('Sorry, that name is already taken')); reject(new ChannelNameError('Sorry, that name is already taken'));
} }
}) })
.catch( error => { .catch(function(error) {
console.log('error evaluating channel name availability', error); console.log('error evaluating channel name availability', error);
reject(error); reject(error);
}); });
}); });
} },
// validation function which checks all aspects of a new channel login // validation function which checks all aspects of a new channel login
function validateNewChannelLogin(userName, password){ validateNewChannelLogin: function (userName, password) {
const channelName = `@${userName}`; const channelName = `@${userName}`;
var that = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
// 1. validate name // 1. validate name
try { try {
validateChannelName(channelName); that.validateChannelName(channelName);
} catch (error) { } catch (error) {
return reject(error); return reject(error);
} }
// 2. validate password // 2. validate password
try { try {
validatePassword(password); that.validatePassword(password);
} catch (error) { } catch (error) {
return reject(error); return reject(error);
} }
resolve(); resolve();
}); });
} }
};

2
views/partials/channelCreationForm.handlebars
View file

@ -6,7 +6,7 @@
</div><div class="column column--6 column--sml-10"> </div><div class="column column--6 column--sml-10">
<div class="input-text--primary flex-container--row flex-container--left-bottom"> <div class="input-text--primary flex-container--row flex-container--left-bottom">
<span>@</span> <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> <span id="input-success-channel-name" class="info-message--success"></span>
</div> </div>
</div> </div>

2
views/partials/publishForm-Url.handlebars
View file

@ -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-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-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> / <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> <span id="input-success-claim-name" class="info-message--success span--absolute"></span>
</div> </div>