Added "SHOW" button to login password input
Keith Irwin
parent
e222b62f82
commit
4de5964e70
|
|
@ -38,6 +38,13 @@ router
|
|||
else {
|
||||
res.sendStatus(200);
|
||||
}
|
||||
})
|
||||
|
||||
.get('/settings', (req,res)=>{
|
||||
res.render('settings');
|
||||
})
|
||||
.post('/settings', (req,res)=>{
|
||||
//TODO: Test validation here.
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
|
@ -84,6 +84,31 @@ pre {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
top: 59px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.container {
|
||||
padding-right: 5%;
|
||||
padding-left: 5%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.container:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
section {
|
||||
padding: 10vh 0 5vh;
|
||||
}
|
||||
|
||||
/* Modifiers */
|
||||
.hide { display: none !important; }
|
||||
.red, .red:hover { color: #fb6e3d !important; }
|
||||
.yellow, .yellow:hover { color: #fbc93d !important; }
|
||||
|
|
@ -108,28 +133,6 @@ pre {
|
|||
.left { float: left; }
|
||||
.right { float: right; }
|
||||
|
||||
main {
|
||||
top: 59px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.container {
|
||||
padding-right: 5%;
|
||||
padding-left: 5%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.container:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
section {
|
||||
padding: 10vh 0 5vh;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
|
|
@ -156,7 +159,8 @@ section {
|
|||
inset -.11vw -.18vw .52vw rgba(0,0,0,.4),
|
||||
.18vw .18vw .36vw #000;
|
||||
} .btn:disabled {
|
||||
border: 1px solid #999;
|
||||
color: #aaa;
|
||||
border: 1px solid #444;
|
||||
} .btn:hover:not(:disabled) {
|
||||
text-decoration: none;
|
||||
background: rgba(255,255,255,0.2);
|
||||
|
|
|
|||
|
|
@ -23,21 +23,25 @@ form input, form textarea, form select {
|
|||
padding: 1% 1.5%;
|
||||
border-radius: .3vw;
|
||||
}
|
||||
form input:not(:disabled), form textarea:not(:disabled), form select:not(:disabled) {
|
||||
form input:not(:disabled), form textarea:not(:disabled),
|
||||
form select:not(:disabled), form .input-addon {
|
||||
border: 1px solid #666;
|
||||
-moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
-webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
}
|
||||
form input:disabled, form textarea:disabled form select:disabled {
|
||||
border: 1px solid #999;
|
||||
form input:disabled:not(.input-addon), form textarea:disabled,
|
||||
form select:disabled {
|
||||
border: 1px solid #444;
|
||||
}
|
||||
form input:not(.input-addon):not(.input-with-addon):not([type="radio"]):not([type="checkbox"]),
|
||||
form .input-with-addon-group {
|
||||
min-width: 50%;
|
||||
}
|
||||
form input:active:not(.input-addon), form textarea:active, form select:active,
|
||||
form input:focus:not(.input-addon), form textarea:focus, form select:focus {
|
||||
form input:active:not(.input-addon), form textarea:active,
|
||||
form select:active,
|
||||
form input:focus:not(.input-addon), form textarea:focus,
|
||||
form select:focus {
|
||||
outline: none;
|
||||
border: 1px solid #fbc93d;
|
||||
}
|
||||
|
|
@ -45,25 +49,45 @@ form input:focus:not(.input-addon), form textarea:focus, form select:focus {
|
|||
form .input-with-addon-group {
|
||||
display: flex;
|
||||
}
|
||||
form .input-addon, form .input-with-addon {
|
||||
-moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
-webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
}
|
||||
form .input-addon {
|
||||
text-align: center;
|
||||
width: auto;
|
||||
}
|
||||
form .input-with-addon {
|
||||
flex-grow: 1;
|
||||
}
|
||||
form .input-addon.left {
|
||||
padding: 1% 0 1% 1.5%;
|
||||
border-right-color: #202020;
|
||||
border-right-color: rgba(102,102,102,0);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
-moz-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
-webkit-box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
box-shadow: inset .11vw .18vw .25vw rgba(0,0,0,.5);
|
||||
}
|
||||
form .input-with-addon {
|
||||
form .input-with-addon.left {
|
||||
padding: 1% 1.5% 1% 0;
|
||||
border-left-color: #202020;
|
||||
border-left-color: rgba(102,102,102,0);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
-moz-box-shadow: inset 0 .18vw .25vw rgba(0,0,0,.5);
|
||||
-webkit-box-shadow: inset 0 .18vw .25vw rgba(0,0,0,.5);
|
||||
box-shadow: inset 0 .18vw .25vw rgba(0,0,0,.5);
|
||||
}
|
||||
form .input-addon.right {
|
||||
padding: 1% 1.5% 1% 0;
|
||||
border-left-color: #202020;
|
||||
border-left-color: rgba(102,102,102,0);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
form .input-with-addon.right {
|
||||
padding: 1% 0 1% 1.5%;
|
||||
border-right-color: #202020;
|
||||
border-right-color: rgba(102,102,102,0);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,45 @@
|
|||
section > .flex > div {
|
||||
/* More padding on the bottom */
|
||||
.container {
|
||||
padding-bottom: 10vh;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
#login, #signup {
|
||||
width: 50%;
|
||||
padding: 0 2%;
|
||||
margin: 0 2%;
|
||||
}
|
||||
|
||||
form input {
|
||||
/* Form overrides */
|
||||
form .form-group {
|
||||
margin: 8% 0 0;
|
||||
}
|
||||
form input:not(.input-addon):not(.input-with-addon),
|
||||
form .input-with-addon-group {
|
||||
width: 96%;
|
||||
margin: 0 auto 5vh;
|
||||
}
|
||||
|
||||
form input.btn,
|
||||
form #social-login {
|
||||
form .input-with-addon, form .input-addon {
|
||||
margin: 0;
|
||||
}
|
||||
form .input-with-addon-group {
|
||||
width: 100%;
|
||||
}
|
||||
p, input, #social-login {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
form input.btn[type="submit"] {
|
||||
margin: 0 2% 5vh;
|
||||
}
|
||||
form #social-login {
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
#show {
|
||||
padding: 1%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Social buttons */
|
||||
#social-login .btn {
|
||||
padding: 2%;
|
||||
text-align: center;
|
||||
|
|
@ -22,7 +50,7 @@ form #social-login {
|
|||
position: relative;
|
||||
}
|
||||
#social-login .btn .text {
|
||||
font-size: .8em;
|
||||
font-size: .6em;
|
||||
}
|
||||
#social-login .btn.gp {
|
||||
background: rgb(206,77,57);
|
||||
|
|
@ -42,7 +70,8 @@ form #social-login {
|
|||
#social-login .btn.tw:hover {
|
||||
background: rgb(89,213,255);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
/* Small buttons */
|
||||
@media (max-width:600px), (min-width:800px) and (max-width:1200px) {
|
||||
#social-login .btn {
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
|
|
@ -56,14 +85,20 @@ form #social-login {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
/* Single column */
|
||||
@media (max-width:800px) {
|
||||
|
||||
#login, #signup {
|
||||
width: 100%;
|
||||
}
|
||||
section > .flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
section > .flex > div {
|
||||
width: 100%;
|
||||
}
|
||||
hr { display: block; }
|
||||
hr {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@
|
|||
{{super()}}
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/.form.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/.login.min.css">
|
||||
<style>
|
||||
p, input, #social-login {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
|
|
@ -24,7 +19,7 @@
|
|||
<h3>Login</h3>
|
||||
<form method="post">
|
||||
|
||||
<div id='social-login' class='flex form-group' style="justify-content:space-around">
|
||||
<div id='social-login' class='flex form-group'>
|
||||
|
||||
<a href="/login/google" class='gp btn'>
|
||||
<i class="fa fa-google-plus"></i>
|
||||
|
|
@ -44,13 +39,16 @@
|
|||
</div>
|
||||
|
||||
<div class='form-group' style="flex-wrap:wrap">
|
||||
<input type="email" placeholder="Email" name="email" required>
|
||||
<input type="password" placeholder="Password" name="password" required>
|
||||
<input type="email" name="email" placeholder="Email" required>
|
||||
<div id='password-group' class='input-with-addon-group'>
|
||||
<input id='password' type="password" class='input-with-addon right' placeholder="Password" name="password" minlength="8" maxlength="160" required>
|
||||
<input id='show' type="text" class='right input-addon yellow' size="4" value="SHOW" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Sign in" class='btn main'>
|
||||
|
||||
<p><a href="/login/forgot">Forgot your password?</a></p>
|
||||
<p style="margin-bottom:0"><a href="/login/forgot">Forgot your password?</a></p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
@ -59,8 +57,8 @@
|
|||
<div id='signup'>
|
||||
<h3>Create account</h3>
|
||||
<p>Welcome aboard! </p>
|
||||
<form action="/signup" method="POST">
|
||||
<input type="email" name="email" placeholder="Your Email" required>
|
||||
<form action="/signup" method="post">
|
||||
<input type="email" name="email" placeholder="Your email" required>
|
||||
<p>You will be sent an email confrimation with a link to create a password. </p>
|
||||
<p>By signing up, you agree to our <a href="/terms">terms of service</a> and <a href="/privacy">privacy policy</a>. </p>
|
||||
<input type="submit" value="Sign up" class='btn'>
|
||||
|
|
@ -71,4 +69,25 @@
|
|||
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block javascript %}
|
||||
<script type="text/javascript">
|
||||
/* global $ */
|
||||
|
||||
// On page load
|
||||
$(function(){
|
||||
|
||||
// On clocking 'show'
|
||||
$('#show').click(function(){
|
||||
if ($('#password').attr('type')==="password") {
|
||||
$('#password').attr('type','text');
|
||||
} else {
|
||||
$('#password').attr('type','password');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -106,8 +106,8 @@
|
|||
<div id='slug' class='form-group' title="This is the URL which shows your location. Be careful whom you share it with! ">
|
||||
<label for="slug">URL</label>
|
||||
<div class='input-with-addon-group'>
|
||||
<input type="text" class='input-addon' size="13" value="tracman.org/map/" disabled readonly>
|
||||
<input type="text" class='input-with-addon' name="slug" value="{{user.slug}}" maxlength="160" required>
|
||||
<input type="text" class='left input-addon' size="13" value="tracman.org/map/" disabled readonly>
|
||||
<input type="text" class='input-with-addon left' name="slug" value="{{user.slug}}" maxlength="160" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue