From b600c585bcc5e4de824c05d0ed10ac7ebf47613b Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Fri, 29 Sep 2017 17:50:13 +0200 Subject: [PATCH] Better settings menu Changing password is now possible --- controllers/auth/views.js | 4 +- controllers/settings/templates/settings.pug | 201 ++++++++++++++------ controllers/settings/urls.js | 7 +- controllers/settings/views.js | 46 ++++- templates/base.pug | 4 + 5 files changed, 195 insertions(+), 67 deletions(-) diff --git a/controllers/auth/views.js b/controllers/auth/views.js index 30d956a..3e1bc55 100644 --- a/controllers/auth/views.js +++ b/controllers/auth/views.js @@ -5,7 +5,7 @@ const mail = require('mail'); const pug = require('pug'); const config = require('settings/config'); -SIGNUP_ERRORS = { +let SIGNUP_ERRORS = { USERNAME_ALREADY_EXISTS: "The username you want is already used.", EMAIL_ALREADY_EXISTS: "The email you want is already used.", UNKOWN_ERROR: "Something weird happened, i'm sorry :'(", @@ -143,7 +143,7 @@ module.exports.activate = function(req, res, render, next) { user.save((err, user) => { req.session.user = user; req.session.save(); - res.redirect(getUrl('settings')); + res.redirect(getUrl('calendarSettings')); }); }); } diff --git a/controllers/settings/templates/settings.pug b/controllers/settings/templates/settings.pug index f33c9c5..5e426a1 100644 --- a/controllers/settings/templates/settings.pug +++ b/controllers/settings/templates/settings.pug @@ -1,72 +1,153 @@ extends ../../../templates/base.pug +block extracss + style. + .tab-content { + margin-top: 10px; + } + + block content - form(method="POST", action=getUrl("settingsTarget")) - .form-group.row - .col-2 - label.col-2.col-form-label(for="username") Username - .col-6 - input.form-control(type="text", value=session.user.username, disabled, name="username", id="username") - .col-2 - .form-group.row - .col-2 - label.col-2.col-form-label(for="email") Email - .col-6 - input.form-control(type="email", value=session.user.email, disabled, name="email", id="email") - .col-2 - .form-group.row - .col-2 - label.col-2.col-form-label(for="resources") Resources - .col-6 - input.form-control(type="number", value=session.user.resources, name="resources", id="resources") - .col-2 - .form-group.row - .col-2 - label.col-2.col-form-label(for="projectId") Project id - .col-6 - input.form-control(type="number", value=session.user.projectId, name="projectId", id="projectId") - .col-2 - .form-group.row - .col-2 - .col-8.form-text.text-muted. - If you don't know your resources and your project id, simply go - to your edt, click the export button, click on Generate - url, copy the url you get and paste it in the field below, - and click the Set from url button. - .col-2 + nav.nav.nav-tabs(role='tablist') + if !calendar + a#account-settings-tab.tab.nav-item.nav-link.active(data-toggle='tab', href='#account-settings', role='tab', aria-controls='account-settings', aria-expanded='true') Account settings + a#calendar-settings-tab.tab.nav-item.nav-link(data-toggle='tab', href='#calendar-settings', role='tab', aria-controls='calendar-settings') Calendar settings + else + a#account-settings-tab.tab.nav-item.nav-link(data-toggle='tab', href='#account-settings', role='tab', aria-controls='account-settings') Account settings + a#calendar-settings-tab.tab.nav-item.nav-link.active(data-toggle='tab', href='#calendar-settings', role='tab', aria-controls='calendar-settings', aria-expanded='true') Calendar settings - .form-group.row - .col-2 - label.col-2.col-from-label(for="url") Set from url - .col-4 - input.form-control(type="text", id="url", placeholder="Url generated from edt") - .col-2 - #urlButton.btn.btn-primary Set from url + .tab-content + if settingsFailed !== undefined + if settingsFailed === false + .form-group.row + .col-2 + .col-8 + .alert.alert-success.alert-dismissible.fade.show Modifications saved ! + .col-2 - .form-group.row - .col-4 - .col-4 - input.btn.btn-primary.form-control(type="submit", value="Submit") - .col-4 + else + .form-group.row + .col-2 + .col-8 + .alert.alert-danger.alert-dismissible.fade.show #{settingsFailed} + .col-2 + + .tab-content + #account-settings.tab-pane.fade(class=!calendar ? 'active show' : '', role='tabpanel', aria-labelledby='account-settings-tab') + form.content(method="POST", action=getUrl("accountSettingsTarget")) + .form-group.row + .col-2 + label.col-2.col-form-label(for="username") Username + .col-6 + input.form-control(type="text", value=session.user.username, name="username", id="username") + .col-2 + .form-group.row + .col-2 + label.col-2.col-form-label(for="email") Email + .col-6 + input.form-control(type="email", value=session.user.email, name="email", id="email" disabled) + .col-2 + .form-group.row + .col-2 + label.col-2.col-form-label(for="oldpassword") Old password + .col-6 + input#oldpassword.form-control(type='password', name='oldpassword') + .col2 + .form-group.row + .col-2 + label.col-2.col-form-label(for="pass1") New password + .col-6 + input#pass1.form-control(type='password', name='newpassword') + .col2 + .form-group.row + .col-2 + label.col-2.col-form-label(for="psss2") Confirm + .col-6 + input#pass2.form-control(type='password') + .col2 + .form-group.row + .col-2 + .col-8.form-text.text-muted. + Leave new password and confirm empty + if you do not wish to change your password + .col-2 + + .form-group.row + .col-2 + .col-8 + input.btn.btn-primary.form-control(type='submit', value='Submit changes') + .col-2 + + + #calendar-settings.tab-pane.fade(class=calendar ? 'active show' : '',role='tabpanel', aria-labelledby='calendar-settings-tab') + form.content(method="POST", action=getUrl("calendarSettingsTarget")) + .form-group.row + .col-2 + label.col-2.col-form-label(for="resources") Resources + .col-6 + input.form-control(type="number", value=session.user.resources, name="resources", id="resources") + .col-2 + .form-group.row + .col-2 + label.col-2.col-form-label(for="projectId") Project id + .col-6 + input.form-control(type="number", value=session.user.projectId, name="projectId", id="projectId") + .col-2 + + .form-group.row + .col-2 + .col-8.form-text.text-muted. + If you don't know your resources and your project id, simply go + to your edt, click the export button, click on Generate + url, copy the url you get and paste it in the field below, + and click the Set from url button. + .col-2 + + .form-group.row + .col-2 + label.col-2.col-from-label(for="url") Set from url + .col-4 + input.form-control(type="text", id="url", placeholder="Url generated from edt") + .col-2 + #urlButton.btn.btn-primary Set from url + + .form-group.row + .col-4 + .col-4 + input.btn.btn-primary.form-control(type="submit", value="Submit changes") + .col-4 block extrajs script. - var urlButton = document.getElementById('urlButton'); - var url = document.getElementById('url'); - var resources = document.getElementById('resources'); - var projectId = document.getElementById('projectId'); + $(function() { - urlButton.addEventListener('click', function() { - var urlContent = url.value; - var values = urlContent.split('?')[1].split('&'); - for (var i = 0; i < values.length; i++) { - var params = values[i].split('='); - var key = params[0]; - if (key === 'resources') { - resources.value = parseInt(params[1], 10); - } else if (key === 'projectId') { - projectId.value = parseInt(params[1], 10); - } + var tabs = document.getElementsByClassName('tab'); + for (var i = 0; i < tabs.length; i++) { + tabs[i].addEventListener('click', function() { + var alerts = document.getElementsByClassName('alert'); + for (var j = 0; j < alerts.length; j++) { + $(alerts[j]).alert('close'); + } + }); } + + var urlButton = document.getElementById('urlButton'); + var url = document.getElementById('url'); + var resources = document.getElementById('resources'); + var projectId = document.getElementById('projectId'); + + urlButton.addEventListener('click', function() { + var urlContent = url.value; + var values = urlContent.split('?')[1].split('&'); + for (var i = 0; i < values.length; i++) { + var params = values[i].split('='); + var key = params[0]; + if (key === 'resources') { + resources.value = parseInt(params[1], 10); + } else if (key === 'projectId') { + projectId.value = parseInt(params[1], 10); + } + } + }); }); diff --git a/controllers/settings/urls.js b/controllers/settings/urls.js index 1c37627..52731b9 100644 --- a/controllers/settings/urls.js +++ b/controllers/settings/urls.js @@ -1,6 +1,9 @@ const url = require('create-url').url; module.exports = [ - url('/settings/', 'settings', 'settings'), - url('/settingsTarget/', 'settingsTarget', 'settingsTarget', 'POST'), + url('/settings', 'accountSettings', 'settings'), + url('/settings/account', 'accountSettings', 'accountSettings'), + url('/settings/calendar', 'calendarSettings', 'calendarSettings'), + url('/accountSettingsTarget/', 'accountSettingsTarget', 'accountSettingsTarget', 'POST'), + url('/calendarSettingsTarget/', 'calendarSettingsTarget', 'calendarSettingsTarget', 'POST'), ] diff --git a/controllers/settings/views.js b/controllers/settings/views.js index 875feaf..7b370e8 100644 --- a/controllers/settings/views.js +++ b/controllers/settings/views.js @@ -1,13 +1,52 @@ const getUrl = require('create-url').getUrl; const User = require('auth/models'); +const model = require('model'); const redirectIfNotLogged = require('auth/views').redirectIfNotLogged; -module.exports.settings = redirectIfNotLogged('settings', function(req, res, render) { +let SETTINGS_ERROR = { + INCORRECT_PASSWORD: 'Your password is incorrect.', +}; + +module.exports.accountSettings = redirectIfNotLogged('accountSettings', function(req, res, render) { + if (req.session.settingsFailed !== undefined) { + res.locals.settingsFailed = req.session.settingsFailed; + req.session.settingsFailed = undefined; + req.session.save(); + } render('settings.pug'); }); -module.exports.settingsTarget = function(req, res, render) { +module.exports.calendarSettings = redirectIfNotLogged('calendarSettings', function(req, res, render) { + if (req.session.settingsFailed !== undefined) { + res.locals.settingsFailed = req.session.settingsFailed; + req.session.settingsFailed = undefined; + req.session.save(); + } + res.locals.calendar = true; + render('settings.pug'); +}); + +module.exports.accountSettingsTarget = function(req, res, render) { + User.getById(req.session.user.id, (err, user) => { + if (!model.PasswordField.testSync(req.body.oldpassword, user.password)) { + req.session.settingsFailed = SETTINGS_ERROR.INCORRECT_PASSWORD; + req.session.save(); + return res.redirect(getUrl('settings')); + } + + if (req.body.newpassword) { + req.session.settingsFailed = false; + req.session.save(); + user.password = req.body.newpassword; + user.save(() => { + return res.redirect(getUrl('accountSettings')); + }); + } + }); +} + +module.exports.calendarSettingsTarget = function(req, res, render) { let projectId = parseInt(req.body.projectId, 10); let resources = parseInt(req.body.resources, 10); @@ -22,8 +61,9 @@ module.exports.settingsTarget = function(req, res, render) { user.save(() => { req.session.user = user; + req.session.settingsFailed = false; req.session.save(); - res.redirect(getUrl('index')); + res.redirect(getUrl('calendarSettings')); }); }); diff --git a/templates/base.pug b/templates/base.pug index de01d7d..4e723ff 100644 --- a/templates/base.pug +++ b/templates/base.pug @@ -12,6 +12,10 @@ html body { padding-top: 65px; } + *::-moz-focus-inner { + border: 0; + } + block extracss title ADEjs body