updated channel login & create functions

This commit is contained in:
bill bittner 2017-10-03 11:23:10 -07:00
parent 4d9671f5c8
commit 67bba8cf3d
8 changed files with 24 additions and 20 deletions

View file

@ -167,6 +167,7 @@ input:-webkit-autofill {
} }
.label, .input-text, .select, .textarea { .label, .input-text, .select, .textarea {
margin: 0px;
padding: 0.3em; padding: 0.3em;
outline: none; outline: none;
border: 0px; border: 0px;
@ -198,13 +199,16 @@ input:-webkit-autofill {
.input-text--large, .select--large, .textarea--large { .input-text--large, .select--large, .textarea--large {
font-size: 2rem; font-size: 2rem;
border-left: 1px solid dodgerblue; border-left: 1px solid dodgerblue;
margin: 0.5rem;
} }
.input-text--large:focus, .select--large:focus, .textarea--large:focus { .input-text--large:focus, .select--large:focus, .textarea--large:focus {
border-left: 1px solid grey; border-left: 1px solid grey;
} }
.input-text--full-width, .textarea--full-width {
width: calc(100% - 0.6em);
}
.input-checkbox, .input-textarea { .input-checkbox, .input-textarea {
border: 1px solid grey; border: 1px solid grey;
} }

View file

@ -138,7 +138,7 @@ 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 Channel has been taken by another user', '/api/isChannelAvailable/'); checkAvailability(name, successDisplayElement, errorDisplayElement, validateChannelName, isNameAvailable, 'Sorry, that Channel name has been taken by another user', '/api/isChannelAvailable/');
} }
// validation function which checks all aspects of the publish submission // validation function which checks all aspects of the publish submission
@ -205,7 +205,7 @@ function validateNewChannelSubmission(channelName, password){
// 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 isNameAvailable(channelName, '/api/isChannelAvailable/') // validate the availability
.then(() => { .then(() => {
console.log('channel is avaliable'); console.log('channel is available');
resolve(); resolve();
}) })
.catch( error => { .catch( error => {

View file

@ -20,7 +20,7 @@
<div id="publish-form-wrapper" hidden="true"> <div id="publish-form-wrapper" hidden="true">
<div class="column column--10"> <div class="column column--10">
<!-- title input --> <!-- title input -->
<input type="text" id="publish-title" class="input-text input-text--large" placeholder="Title (optional)"> <input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Title (optional)">
</div> </div>
<div class="column column--5 align-content-top" > <div class="column column--5 align-content-top" >
<!-- preview --> <!-- preview -->
@ -28,7 +28,7 @@
<div id="asset-preview-holder" class="asset-show"></div> <div id="asset-preview-holder" class="asset-show"></div>
</div> </div>
<!-- description input --> <!-- description input -->
<textarea rows="3" id="publish-description" class="textarea textarea--large" placeholder="Description (optional)"></textarea> <textarea rows="3" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea>
</div><div class="column column--5 align-content-top"> </div><div class="column column--5 align-content-top">
<div id="publish-status" class="row" hidden="true"></div> <div id="publish-status" class="row" hidden="true"></div>
<div id="publish-progress-bar" class="row" hidden="true"></div> <div id="publish-progress-bar" class="row" hidden="true"></div>

View file

@ -3,7 +3,7 @@
<div class="row row--wide"> <div class="row row--wide">
<div class="column column--3"> <div class="column column--3">
<label class="label" for="new-channel-name">Name:</label> <label class="label" for="new-channel-name">Name:</label>
</div><div class="column column--4"> </div><div class="column column--6">
<div id="input-error-channel-name" class="info-message info-message--failure"></div> <div id="input-error-channel-name" class="info-message info-message--failure"></div>
<div class="input-text--primary"> <div class="input-text--primary">
<span>@</span> <span>@</span>
@ -15,14 +15,14 @@
<div class="row row--wide"> <div class="row row--wide">
<div class="column column--3"> <div class="column column--3">
<label class="label" for="new-channel-password">Password:</label> <label class="label" for="new-channel-password">Password:</label>
</div><div class="column column--4"> </div><div class="column column--6">
<div id="input-error-channel-password" class="info-message info-message--failure"></div> <div id="input-error-channel-password" class="info-message info-message--failure"></div>
<input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary"> <input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
</div> </div>
</div> </div>
<div class="row row--wide"> <div class="row row--wide">
<button onclick="publishNewChannel(event)">Create Channel</button> <button class="button--primary" onclick="publishNewChannel(event)">Create Channel</button>
</div> </div>
</form> </form>

View file

@ -3,7 +3,7 @@
<div class="row row--wide"> <div class="row row--wide">
<div class="column column--3"> <div class="column column--3">
<label class="label" for="login-channel-name">Name:</label> <label class="label" for="login-channel-name">Name:</label>
</div><div class="column column--4"> </div><div class="column column--6">
<div id="login-error-display-element" class="info-message info-message--failure"></div> <div id="login-error-display-element" class="info-message info-message--failure"></div>
<div class="input-text--primary"> <div class="input-text--primary">
<span>@</span> <span>@</span>
@ -14,12 +14,12 @@
<div class="row row--wide"> <div class="row row--wide">
<div class="column column--3"> <div class="column column--3">
<label class="label" for="login-channel-password" >Password:</label> <label class="label" for="login-channel-password" >Password:</label>
</div><div class="column column--4"> </div><div class="column column--6">
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value=""> <input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
</div> </div>
</div> </div>
<div class="row row--wide"> <div class="row row--wide">
<button onclick="loginToChannel(event)">Login</button> <button class="button--primary" onclick="loginToChannel(event)">Login</button>
</div> </div>
</form> </form>

View file

@ -1,7 +1,7 @@
<div class="row"> <div class="row">
<div class="column column--4"> <div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label> <label class="label" for="channel-name-select">Channel:</label>
</div><div class="column column--6"> </div><div class="column column--7">
<div id="input-error-channel-select" class="info-message info-message--failure"></div> <div id="input-error-channel-select" class="info-message info-message--failure"></div>
<select type="text" id="channel-name-select" class="select select--primary select--arrow" value="channel" onchange="toggleChannel(event)"> <select type="text" id="channel-name-select" class="select select--primary select--arrow" value="channel" onchange="toggleChannel(event)">
<optgroup> <optgroup>
@ -18,11 +18,11 @@
</div> </div>
</div> </div>
<div id="channel-login-details" class="row" hidden="true"> <div id="channel-login-details" class="row row--short" hidden="true">
{{> channelLoginForm}} {{> channelLoginForm}}
</div> </div>
<div id="channel-create-details" class="row" hidden="true"> <div id="channel-create-details" class="row row--short" hidden="true">
{{> channelCreationForm}} {{> channelCreationForm}}
</div> </div>

View file

@ -1,9 +1,9 @@
<div id="details-detail" hidden="true"> <div id="details-detail" hidden="true">
<div class="row"> <div class="row">
<div class="column column--4"> <div class="column column--3">
<label for="publish-license" class="label">License:* </label> <label for="publish-license" class="label">License:* </label>
</div><div class="column column--6"> </div><div class="column column--7">
<select type="text" id="publish-license" class="select select--primary"> <select type="text" id="publish-license" class="select select--primary">
<option value="Public Domain">Public Domain</option> <option value="Public Domain">Public Domain</option>
<option value="Creative Commons">Creative Commons</option> <option value="Creative Commons">Creative Commons</option>
@ -12,9 +12,9 @@
</div> </div>
<div class="row"> <div class="row">
<div class="column column--4"> <div class="column column--3">
<label for="publish-nsfw" class="label">NSFW*</label> <label for="publish-nsfw" class="label">NSFW*</label>
</div><div class="column column--6"> </div><div class="column column--7">
<input class="input-checkbox" type="checkbox" id="publish-nsfw"> <input class="input-checkbox" type="checkbox" id="publish-nsfw">
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="column column--4"> <div class="column column--3">
<label class="label">URL:</label> <label class="label">URL:</label>
</div><div class="column column--6"> </div><div class="column column--6">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div> <div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>