made channel components DRYer
This commit is contained in:
bill bittner
parent
ef475ba951
commit
e4a56d5ed1
8 changed files with 134 additions and 198 deletions
|
|
@ -121,7 +121,7 @@ button {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, button:focus {
|
button:hover {
|
||||||
border: 1px solid blue;
|
border: 1px solid blue;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ module.exports = (app) => {
|
||||||
// route to log out
|
// route to log out
|
||||||
app.get('/logout', (req, res) => {
|
app.get('/logout', (req, res) => {
|
||||||
req.logout();
|
req.logout();
|
||||||
res.redirect('/login');
|
res.redirect('/');
|
||||||
});
|
});
|
||||||
// route to display login page
|
// route to display login page
|
||||||
app.get('/login', (req, res) => {
|
app.get('/login', (req, res) => {
|
||||||
|
|
|
||||||
|
|
@ -4,35 +4,10 @@
|
||||||
|
|
||||||
<h2>Log In</h2>
|
<h2>Log In</h2>
|
||||||
<p>Log in to an existing channel:</p>
|
<p>Log in to an existing channel:</p>
|
||||||
<form id="login-form">
|
{{>channelLogin}}
|
||||||
<div id="login-error-display-element" class="info-message info-message--failure"></div>
|
|
||||||
<div>
|
|
||||||
<label>Username:</label>
|
|
||||||
@ <input type="text" id="login-channel-name" class="input-text input-text--primary"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Password:</label>
|
|
||||||
<input type="password" id="login-channel-password" class="input-text input-text--primary"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<button onclick="loginToChannel(event)">Log In</button>
|
|
||||||
|
|
||||||
<h2>Create New</h2>
|
<h2>Create New</h2>
|
||||||
<p>Create a brand new channel:</p>
|
<p>Create a brand new channel:</p>
|
||||||
<form id="publish-channel-form">
|
{{>channelCreation}}
|
||||||
<div>
|
|
||||||
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
|
|
||||||
<label>Channel name:</label>
|
|
||||||
@ <input type="text" 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>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div id="input-error-password" class="info-message info-message--failure"></div>
|
|
||||||
<label>Password:</label>
|
|
||||||
<input type="password" id="new-channel-password" class="input-text input-text--primary"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<button onclick="publishNewChannel(event)">Create Channel</button>
|
|
||||||
</div>
|
</div>
|
||||||
{{> footer}}
|
{{> footer}}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,50 +15,3 @@
|
||||||
<script src="/assets/js/generalFunctions.js"></script>
|
<script src="/assets/js/generalFunctions.js"></script>
|
||||||
<script src="/assets/js/validationFunctions.js"></script>
|
<script src="/assets/js/validationFunctions.js"></script>
|
||||||
<script src="/assets/js/authFunctions.js"></script>
|
<script src="/assets/js/authFunctions.js"></script>
|
||||||
<script type="text/javascript">
|
|
||||||
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(() => {
|
|
||||||
document.getElementById('publish-channel-form').innerHTML = '<p>Creating your new channel...</p>';
|
|
||||||
return sendAuthRequest(channelName, password, '/signup'); // post the request
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
console.log('signup success');
|
|
||||||
document.getElementById('publish-channel-form').innerHTML = '<p>Your channel has been successfully created! Signing you in now...</p>';
|
|
||||||
window.location.href = '/';
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
if (error.name === 'ChannelNameError'){
|
|
||||||
showError(channelNameErrorDisplayElement, error.message);
|
|
||||||
} else if (error.name === 'ChannelPasswordError'){
|
|
||||||
showError(passwordErrorDisplayElement, error.message);
|
|
||||||
} else {
|
|
||||||
console.log('signup failure:', error);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function loginToChannel (event) {
|
|
||||||
const channelName = `@${document.getElementById('login-channel-name').value}`;
|
|
||||||
const password = document.getElementById('login-channel-password').value;
|
|
||||||
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
|
|
||||||
// prevent default action
|
|
||||||
event.preventDefault()
|
|
||||||
// send request
|
|
||||||
sendAuthRequest(channelName, password, '/login')
|
|
||||||
.then( () => {
|
|
||||||
console.log('login success');
|
|
||||||
window.location.href = `/${channelName}`;
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
showError(loginErrorDisplayElement, error);
|
|
||||||
console.log('login failure:', error);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
51
views/partials/channelCreation.handlebars
Normal file
51
views/partials/channelCreation.handlebars
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<div id="channel-publish-wrapper">
|
||||||
|
<p>
|
||||||
|
<form id="publish-channel-form">
|
||||||
|
<div>
|
||||||
|
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
|
||||||
|
<label for="new-channel-name">Channel Name: </label>
|
||||||
|
@<input type="text" name="new-channel-name" id="new-channel-name" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
|
||||||
|
<span id="input-success-channel-name" class="info-message info-message--success"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div id="input-error-channel-password" class="info-message info-message--failure"></div>
|
||||||
|
<label for="new-channel-password">Password: </label>
|
||||||
|
<input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</p>
|
||||||
|
<button onclick="publishNewChannel(event)">Create Channel</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
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-channel-password');
|
||||||
|
const wrapper = document.getElementById('channel-publish-wrapper');
|
||||||
|
// prevent default so this script can handle submission
|
||||||
|
event.preventDefault();
|
||||||
|
// validate submission
|
||||||
|
validateNewChannelSubmission(channelName, password)
|
||||||
|
.then(() => {
|
||||||
|
wrapper.innerHTML = '<p>Creating your new channel...</p>';
|
||||||
|
return sendAuthRequest(channelName, password, '/signup') // post the request
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
console.log('success');
|
||||||
|
wrapper.innerHTML = '<p>Your channel has been successfully created!</p>';
|
||||||
|
// referesh window logged in as the channel
|
||||||
|
window.location.href = '/';
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.name === 'ChannelNameError'){
|
||||||
|
showError(channelNameErrorDisplayElement, error.message);
|
||||||
|
} else if (error.name === 'ChannelPasswordError'){
|
||||||
|
showError(passwordErrorDisplayElement, error.message);
|
||||||
|
} else {
|
||||||
|
console.log('failure:', error);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
35
views/partials/channelLogin.handlebars
Normal file
35
views/partials/channelLogin.handlebars
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<p>
|
||||||
|
<form id="channel-login-form">
|
||||||
|
<div id="login-error-display-element" class="info-message info-message--failure"></div>
|
||||||
|
<div>
|
||||||
|
<label for="login-channel-name">Channel Name: </label>
|
||||||
|
@<input type="text" name="login-channel-name" id="login-channel-name" class="input-text input-text--primary" placeholder="" value="">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="login-channel-password" >Password: </label>
|
||||||
|
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</p>
|
||||||
|
<button onclick="loginToChannel(event)">Login</button>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function loginToChannel (event) {
|
||||||
|
const channelName = `@${document.getElementById('login-channel-name').value}`;
|
||||||
|
const password = document.getElementById('login-channel-password').value;
|
||||||
|
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
|
||||||
|
// prevent default
|
||||||
|
event.preventDefault()
|
||||||
|
// send request
|
||||||
|
sendAuthRequest(channelName, password, '/login')
|
||||||
|
.then(() => {
|
||||||
|
console.log('login success');
|
||||||
|
window.location.href = '/';
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
showError(loginErrorDisplayElement, error);
|
||||||
|
console.log('login failure:', error);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
43
views/partials/channelSelection.handlebars
Normal file
43
views/partials/channelSelection.handlebars
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
|
||||||
|
<label for="channel-name-select">Channel:</label>
|
||||||
|
<select type="text" id="channel-name-select" name="channel" value="channel" onclick="toggleChannel(event)">
|
||||||
|
{{#if user}}
|
||||||
|
<option value="{{user.channelName}}" >{{user.channelName}}</option>
|
||||||
|
{{/if}}
|
||||||
|
<option value="@speech" >Anonymous</option>
|
||||||
|
<option value="login">Login</option>
|
||||||
|
<option value="new" >New</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="channel-login-details" hidden="true">
|
||||||
|
{{> channelLogin}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="channel-create-details" hidden="true">
|
||||||
|
{{> channelCreation}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/assets/js/authFunctions.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function toggleChannel (event) {
|
||||||
|
const createChannelTool = document.getElementById('channel-create-details');
|
||||||
|
const loginToChannelTool = document.getElementById('channel-login-details');
|
||||||
|
const selectedOption = event.target.selectedOptions[0].value;
|
||||||
|
if (selectedOption === 'new') {
|
||||||
|
createChannelTool.hidden = false;
|
||||||
|
loginToChannelTool.hidden = true;
|
||||||
|
} else if (selectedOption === 'login') {
|
||||||
|
loginToChannelTool.hidden = false;
|
||||||
|
createChannelTool.hidden = true;
|
||||||
|
} else {
|
||||||
|
loginToChannelTool.hidden = true;
|
||||||
|
createChannelTool.hidden = true;
|
||||||
|
hideError(document.getElementById('input-error-channel-select'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
<div id="claim-channel-input-area">
|
|
||||||
<p>
|
|
||||||
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
|
|
||||||
<label for="channel-name-select">Channel:</label>
|
|
||||||
<select type="text" id="channel-name-select" name="channel" value="channel" onclick="toggleChannel(event)">
|
|
||||||
{{#if user}}
|
|
||||||
<option value="{{user.channelName}}" >{{user.channelName}}</option>
|
|
||||||
{{/if}}
|
|
||||||
<option value="@speech" >Anonymous</option>
|
|
||||||
<option value="login">Login</option>
|
|
||||||
<option value="new" >New</option>
|
|
||||||
</select>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div id="channel-login-details" hidden="true">
|
|
||||||
<p>
|
|
||||||
<form id="channel-login-form">
|
|
||||||
<div id="login-error-display-element" class="info-message info-message--failure"></div>
|
|
||||||
<div>
|
|
||||||
<label for="login-channel-name">Channel Name: </label>
|
|
||||||
@<input type="text" name="login-channel-name" id="login-channel-name" class="input-text input-text--primary" placeholder="" value="">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="login-channel-password" >Password: </label>
|
|
||||||
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</p>
|
|
||||||
<button onclick="loginToChannel(event)">Login</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="channel-create-details" hidden="true">
|
|
||||||
<p>
|
|
||||||
<form id="publish-channel-form">
|
|
||||||
<div>
|
|
||||||
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
|
|
||||||
<label for="new-channel-name">Channel Name: </label>
|
|
||||||
@<input type="text" name="new-channel-name" id="new-channel-name" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
|
|
||||||
<span id="input-success-channel-name" class="info-message info-message--success"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div id="input-error-channel-password" class="info-message info-message--failure"></div>
|
|
||||||
<label for="new-channel-password">Password: </label>
|
|
||||||
<input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</p>
|
|
||||||
<button onclick="publishNewChannel(event)">Create Channel</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/assets/js/authFunctions.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
function toggleChannel (event) {
|
|
||||||
const createChannelTool = document.getElementById('channel-create-details');
|
|
||||||
const loginToChannelTool = document.getElementById('channel-login-details');
|
|
||||||
const selectedOption = event.target.selectedOptions[0].value;
|
|
||||||
if (selectedOption === 'new') {
|
|
||||||
createChannelTool.hidden = false;
|
|
||||||
loginToChannelTool.hidden = true;
|
|
||||||
} else if (selectedOption === 'login') {
|
|
||||||
loginToChannelTool.hidden = false;
|
|
||||||
createChannelTool.hidden = true;
|
|
||||||
} else {
|
|
||||||
loginToChannelTool.hidden = true;
|
|
||||||
createChannelTool.hidden = true;
|
|
||||||
hideError(document.getElementById('input-error-channel-select'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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-channel-password');
|
|
||||||
// prevent default so this script can handle submission
|
|
||||||
event.preventDefault();
|
|
||||||
// validate submission
|
|
||||||
validateNewChannelSubmission(channelName, password)
|
|
||||||
.then(() => {
|
|
||||||
document.getElementById('channel-create-details').innerHTML = '<p>Creating your new channel...</p>';
|
|
||||||
return sendAuthRequest(channelName, password, '/signup') // post the request
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
console.log('success');
|
|
||||||
document.getElementById('channel-create-details').innerHTML = '<p>Your channel has been successfully created!</p>';
|
|
||||||
// referesh window logged in as the channel
|
|
||||||
window.location.href = '/';
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
if (error.name === 'ChannelNameError'){
|
|
||||||
showError(channelNameErrorDisplayElement, error.message);
|
|
||||||
} else if (error.name === 'ChannelPasswordError'){
|
|
||||||
showError(passwordErrorDisplayElement, error.message);
|
|
||||||
} else {
|
|
||||||
console.log('failure:', error);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function loginToChannel (event) {
|
|
||||||
const channelName = `@${document.getElementById('login-channel-name').value}`;
|
|
||||||
const password = document.getElementById('login-channel-password').value;
|
|
||||||
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
|
|
||||||
// prevent default
|
|
||||||
event.preventDefault()
|
|
||||||
// send request
|
|
||||||
sendAuthRequest(channelName, password, '/login')
|
|
||||||
.then(() => {
|
|
||||||
console.log('login success');
|
|
||||||
window.location.href = '/';
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
showError(loginErrorDisplayElement, error);
|
|
||||||
console.log('login failure:', error);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="stop-float">
|
<div class="stop-float">
|
||||||
{{> publishChannel}}
|
{{> channelSelection}}
|
||||||
</div>
|
</div>
|
||||||
<div class="stop-float">
|
<div class="stop-float">
|
||||||
{{> publishDetails}}
|
{{> publishDetails}}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue