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

finished validation on login page

Browse source
This commit is contained in:
bill bittner 2017-09-20 09:49:05 -07:00
parent 0dd8e19a26
commit 0575e9853f
7 changed files with 151 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
public/assets/js/channelFunctions.js
View file

@ -1,26 +0,0 @@
function sendSignupRequest (channelName, password) {
return new Promise(function(resolve, reject) {
// make sure the claim name is still available
let xhttp;
const params = `username=${channelName}&password=${password}`;
console.log(params);
xhttp = new XMLHttpRequest();
xhttp.open('POST', '/api/signup', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.responseType = 'json';
xhttp.onreadystatechange = function() {
if (this.readyState == 4 ) {
if ( this.status == 200) {
if (this.response == true) {
resolve();
} else {
reject( new NameError("Your request could not be completed"));
}
} else {
reject("createChannel request failed with status:" + this.status);
};
}
};
xhttp.send(params);
});
}

16
public/assets/js/generalFunctions.js
View file

@ -52,10 +52,18 @@ function NameError(message) {
NameError.prototype = Object.create(Error.prototype);
NameError.prototype.constructor = NameError;
function ChannelError(message) {
this.name = 'ChannelError';
function ChannelNameError(message) {
this.name = 'ChannelNameError';
this.message = message || 'Default Message';
this.stack = (new Error()).stack;
}
ChannelError.prototype = Object.create(Error.prototype);
ChannelError.prototype.constructor = ChannelError;
ChannelNameError.prototype = Object.create(Error.prototype);
ChannelNameError.prototype.constructor = ChannelNameError;
function ChannelPasswordError(message) {
this.name = 'ChannelPasswordError';
this.message = message || 'Default Message';
this.stack = (new Error()).stack;
}
ChannelPasswordError.prototype = Object.create(Error.prototype);
ChannelPasswordError.prototype.constructor = ChannelPasswordError;

56
public/assets/js/publishChannelFunctions.js Normal file
View file

@ -0,0 +1,56 @@
function sendSignupRequest (channelName, password) {
return new Promise(function(resolve, reject) {
// make sure the claim name is still available
let xhttp;
const params = `username=${channelName}&password=${password}`;
console.log(params);
xhttp = new XMLHttpRequest();
xhttp.open('POST', '/api/signup', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.responseType = 'json';
xhttp.onreadystatechange = function() {
if (this.readyState == 4 ) {
if ( this.status == 200) {
if (this.response == true) {
resolve();
} else {
reject( new NameError("Your request could not be completed"));
}
} else {
reject("createChannel request failed with status:" + this.status);
};
}
};
xhttp.send(params);
});
}
function publishNewChannel (event) {
const channelName = document.getElementById('new-channel-name').value;
const password = document.getElementById('new-channel-password').value;
const channelNameErrorDisplayElement = document.getElementById('input-error-channel-name');
const passwordErrorDisplayElement = document.getElementById('input-error-password');
// prevent default so this script can handle submission
event.preventDefault();
// validate submission
validateNewChannelSubmission(channelName, password)
.then(() => {
return sendSignupRequest(channelName, password) // post the request
})
.then(() => {
console.log('success');
document.getElementById('signup-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
window.location.href = '/channelName';
})
.catch(error => {
if (error.name === 'ChannelNameError'){
showError(channelNameErrorDisplayElement, error.message);
} else if (error.name === 'ChannelPasswordError'){
showError(passwordErrorDisplayElement, error.message);
} else {
console.log('failure:', error);
}
})
}

80
public/assets/js/publishFunctions.js → public/assets/js/publishFileFunctions.js
View file

@ -1,9 +1,38 @@
// update the publish status
function updatePublishStatus(msg){
document.getElementById('publish-status').innerHTML = msg;
/* drop zone functions */
function drop_handler(ev) {
ev.preventDefault();
// if dropped items aren't files, reject them
var dt = ev.dataTransfer;
if (dt.items) {
if (dt.items[0].kind == 'file') {
var droppedFile = dt.items[0].getAsFile();
previewAndStageFile(droppedFile);
}
}
}
/* publish helper functions */
function dragover_handler(ev) {
ev.preventDefault();
}
function dragend_handler(ev) {
var dt = ev.dataTransfer;
if (dt.items) {
for (var i = 0; i < dt.items.length; i++) {
dt.items.remove(i);
}
} else {
ev.dataTransfer.clearData();
}
}
/* publish functions */
// update the publish status
function updatePublishStatus(msg){
document.getElementById('publish-status').innerHTML = msg;
}
// When a file is selected for publish, validate that file and
// stage it so it will be ready when the publish button is clicked.
@ -40,19 +69,21 @@ function previewAndStageFile(selectedFile){
// Validate the publish submission and then trigger publishing.
function publishSelectedImage(event) {
event.preventDefault();
var claimName = document.getElementById('claim-name-input').value;
var channelName = document.getElementById('channel-name-select').value;
validateSubmission(stagedFiles, claimName, channelName)
.then(function() {
// prevent default so this script can handle submission
event.preventDefault();
// validate, submit, and handle response
validateFilePublishSubmission(stagedFiles, claimName, channelName)
.then(() => {
uploader.submitFiles(stagedFiles);
})
.catch(function(error) {
.catch(error => {
if (error.name === 'FileError') {
showError(document.getElementById('input-error-file-selection'), error.message);
} else if (error.name === 'NameError') {
showError(document.getElementById('input-error-claim-name'), error.message);
} else if (error.name === 'ChannelError'){
} else if (error.name === 'ChannelNameError'){
console.log(error);
showError(document.getElementById('input-error-channel-select'), error.message);
} else {
@ -60,33 +91,4 @@ function publishSelectedImage(event) {
}
return;
})
};
/* drop zone functions */
function drop_handler(ev) {
ev.preventDefault();
// if dropped items aren't files, reject them
var dt = ev.dataTransfer;
if (dt.items) {
if (dt.items[0].kind == 'file') {
var droppedFile = dt.items[0].getAsFile();
previewAndStageFile(droppedFile);
}
}
}
function dragover_handler(ev) {
ev.preventDefault();
}
function dragend_handler(ev) {
var dt = ev.dataTransfer;
if (dt.items) {
for (var i = 0; i < dt.items.length; i++) {
dt.items.remove(i);
}
} else {
ev.dataTransfer.clearData();
}
}
};

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

@ -45,18 +45,18 @@ function validateChannelName (name) {
console.log(name);
// ensure a name was entered
if (name.length < 1) {
throw new ChannelError("You must enter a name for your channel");
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 ChannelError('"' + invalidCharacters + '" characters are not allowed in the channel name.');
throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed in the channel name.');
}
}
function validatePassword (password) {
if (password.length < 1) {
throw new ChannelError("You must enter a password for you channel");
throw new ChannelNameError("You must enter a password for you channel");
}
}
@ -146,32 +146,32 @@ function checkChannelName(name){
}
// validation function which checks all aspects of the publish submission
function validateSubmission(stagedFiles, claimName, channelName){
function validateFilePublishSubmission(stagedFiles, claimName, channelName){
return new Promise(function (resolve, reject) {
// 1. make sure only 1 file was selected
if (!stagedFiles) {
reject(new FileError("Please select a file"));
return reject(new FileError("Please select a file"));
} else if (stagedFiles.length > 1) {
reject(new FileError("Only one file is allowed at a time"));
return reject(new FileError("Only one file is allowed at a time"));
}
// 2. validate the file's name, type, and size
try {
validateFile(stagedFiles[0]);
} catch (error) {
reject(error);
return reject(error);
}
// 3. validate that a channel was chosen
if (channelName === 'new') {
reject(new ChannelError("Please select a valid channel"));
return reject(new ChannelNameError("Please select a valid channel"));
};
// 4. validate the claim name
try {
validateClaimName(claimName); // validate the formatting
validateClaimName(claimName);
} catch (error) {
reject(error);
return reject(error);
}
console.log(claimName);
isNameAvailable(claimName, '/api/isClaimAvailable/') // validate the availability
// if all validation passes, check availability of the name
isNameAvailable(claimName, '/api/isClaimAvailable/')
.then(function() {
resolve();
})
@ -179,4 +179,30 @@ function validateSubmission(stagedFiles, claimName, channelName){
reject(error);
});
});
}
// validation function which checks all aspects of the publish submission
function validateNewChannelSubmission(channelName, password){
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(function() {
resolve();
})
.catch(function(error) {
reject(error);
});
});
}

2
views/index.handlebars
View file

@ -11,7 +11,7 @@
<script src="/siofu/client.js"></script>
<script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/validationFunctions.js"></script>
<script src="/assets/js/publishFunctions.js"></script>
<script src="/assets/js/publishFileFunctions.js"></script>
<script typ="text/javascript">
// define variables
var socket = io();

34
views/login.handlebars
View file

@ -20,9 +20,9 @@
<h2>Create New</h2>
<p>Create a brand new channel:</p>
<span id="input-error-channel-name" class="info-message info-message--failure"></span><br/>
<form id="signup-form" action="/signup" method="post">
<div>
<span id="input-error-channel-name" class="info-message info-message--failure"></span><br/>
<label>Channel name:</label>
@ <input type="text" name="username" value="" id="new-channel-name" class="input-text input-text--primary" oninput="checkChannelName(event.target.value)"/>
<span id="input-success-channel-name" class="info-message info-message--success"></span>
@ -33,7 +33,7 @@
<input type="password" name="password" value="" id="new-channel-password" class="input-text input-text--primary"/>
</div>
<div>
<input type="submit" value="Create" onclick="submitNewChannelRequest(event)"/>
<input type="submit" value="Create" onclick="publishNewChannel(event)"/>
</div>
</form>
@ -43,32 +43,4 @@
<script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/validationFunctions.js"></script>
<script src="/assets/js/channelFunctions.js"></script>
<script type="text/javascript">
function submitNewChannelRequest (event) {
const channelName = document.getElementById('new-channel-name').value;
const password = document.getElementById('new-channel-password').value;
// prevent default so this script can handle submission
event.preventDefault();
// validate channel name
// validate password
try {
validatePassword(password);
} catch (error) {
showError(document.getElementById('input-error-password'), error.message)
return;
}
// post request
sendSignupRequest(channelName, password)
.then(() => {
console.log('success');
document.getElementById('signup-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
window.location.href = '/channelName';
})
.catch(error => {
console.log(error);
})
}
</script>
<script src="/assets/js/publishChannelFunctions.js"></script>