Added client-side validation for settings

master
Keith Irwin 2017-04-17 12:45:48 -04:00
parent 57a9ff2ceb
commit 955ef3027f
No known key found for this signature in database
GPG Key ID: 378933C743E2BBC0
4 changed files with 37 additions and 16 deletions

View File

@ -38,12 +38,14 @@ router.get('/favicon.ico', (req,res)=>{
// Endpoint to validate forms
router.get('/validate', (req,res)=>{
console.log(req.query);
// Validate unused slug
// Validate unique slug
if (req.query.slug) {
console.log(`Checking slug: ${req.query.slug} for user ${req.user.id}`);
User.findOne({ slug: slug(req.query.slug) })
.then( (existingUser)=>{
if (existingUser && existingUser.id!==req.user) {
if (existingUser && existingUser.id!==req.user.id) {
res.sendStatus(400);
}
else { res.sendStatus(200); }
@ -51,11 +53,12 @@ router.get('/validate', (req,res)=>{
.catch( (err)=>{ mw.throwErr(err); });
}
// Validate unused email
// Validate unique email
else if (req.query.email) {
User.findOne({ email: slug(req.query.email) })
console.log(`Checking email: ${req.query.email} for user ${req.user.id}`);
User.findOne({ email: req.query.email })
.then( (existingUser)=>{
if (existingUser && existingUser.id!==req.user) {
if (existingUser && existingUser.id!==req.user.id) {
res.sendStatus(400);
}
else { res.sendStatus(200); }
@ -63,6 +66,11 @@ router.get('/validate', (req,res)=>{
.catch( (err)=>{ mw.throwErr(err); });
}
// Create slug
else if (req.query.slugify) {
res.send(slug(req.query.slugify));
}
});
// Link to androidapp in play store
@ -71,6 +79,7 @@ router.get('/android', (req,res)=>{
});
// Link to iphone app in the apple store
// ... maybe someday
router.get('/ios', (req,res)=>{
res.redirect('/help#why-is-there-no-ios-app');
});

View File

@ -5,6 +5,7 @@ form {
.form-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 8% 0;
}

View File

@ -57,7 +57,15 @@
padding: 0 0 60px;
justify-content: space-around;
}
#submit-group .btn {
#submit-group .main {
width: 50%;
background: #333;
}
/* Help */
.help {
display: none;
width: 100%;
margin-top: 2%;
margin-bottom: 0;
text-align: right;
}

View File

@ -19,13 +19,15 @@
<div id='name' class='form-group' title="This appears in your page's title. ">
<label for="name">Name</label>
<input class='form-control' name="name" type="text" value="{{user.name}}" maxlength="160">
<input id='name-input' class='form-control' name="name" type="text" value="{{user.name}}" maxlength="160">
<p id='name-help' class='red help'></p>
</div>
<div id='email' class='form-group' title="For account stuff, no dumb newsletters. ">
<label for="email">Email</label>
<input class='form-control' name="email" type="email" value="{{user.email}}" maxlength="160">
</div>
<label for="email">Email</label>
<input id='email-input' class='form-control' name="email" type="email" value="{{user.email}}" maxlength="160">
<p id='email-help' class='red help'></p>
</div>
<div id='social-connect' class='form-group'>
<a href="/login/google" class='btn gp{% if user.auth.google %} connected{% endif %}'>
@ -43,8 +45,8 @@
</div>
<div id='password-delete' class='form-group'>
<a class='underline' href="/settings/password" title="Click here to {% if user.auth.password %}change{% else %}set{% endif %} your password. ">{% if user.auth.password %}Change{% else %}Set{% endif %} password</a>
<a class='red underline' style="text-align:right" href="#" onclick="deleteAccount()" title="Permently delete your Tracman account. ">Delete account</a>
<a id='password' class='underline' href="/settings/password" title="Click here to {% if user.auth.password %}change{% else %}set{% endif %} your password. ">{% if user.auth.password %}Change{% else %}Set{% endif %} password</a>
<a id='delete' class='red underline' style="text-align:right" href="#" title="Permently delete your Tracman account. ">Delete account</a>
</div>
<h2>Map settings</h2>
@ -53,8 +55,9 @@
<label for="slug">URL</label>
<div class='input-with-addon-group'>
<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>
<input type="text" class='input-with-addon left' id='slug-input' name="slug" value="{{user.slug}}" maxlength="160" required>
</div>
<p id='slug-help' class='red help'></p>
</div>
<div id='units' class='form-group' title="Select standard units for feet and miles/hour. Select metric units if you are a commie. ">
@ -127,8 +130,8 @@
</div>
<div id='submit-group' class='form-group flexbox'>
<input class='btn yellow' type="submit" value="Save">
<a href="#" class='btn'>cancel</a>
<input class='main btn' type="submit" value="Save" title="Click here to save your changes. ">
<a href="#" class='btn' title="Click here to discard your changes. ">cancel</a>
</div>
</form>