updates

public/js/headfoot.js

+var menu = [{'name':'Informationen', 'combos':[{'name':'Projekte', 'link':'/project'}, {'name':'Über das M4_LAB', 'link':'/projectoverview?projectID=1'},{'name':'Kontakt', 'link':'/account/contact'}], 'type':'dropdown', 'link':'#'},{'name':'Zusammenarbeit', 'combos':[{'name':'Mailinglisten', 'link':'/mailinglists'},{'name':'Videokonferenzen', 'link':'/videoconference.html'},/* {'name':'...', 'link':'#'}*/], 'type':'dropdown', 'link':'#'},{'name':'Events', 'combos':[{'name':'Veranstaltungen der HfT', 'link':'http://www.hft-stuttgart.de/Aktuell/Veranstaltungen/'},{'name':'Veranstaltungen der HfT Forschung', 'link':'https://www.hft-stuttgart.de/forschung/veranstaltungen'}], 'type':'dropdown', 'link':'#'},{'name':'Benutzerkonto', 'combos': [], 'type':'', 'link':'/account/'}];
+
+
+var hft_links = [{'url':'/account/contact', 'name':'Kontakt'},{'url':'https://www.hft-stuttgart.de/impressum', 'name':'Impressum'},{'url':'https://www.hft-stuttgart.de/datenschutz', 'name':'Datenschutz'}]
+
+var socialmedias = [{'url':'https://twitter.com/InnolabM4', 'name': 'fa-twitter'}, {'url':'https://www.facebook.com/HfTStuttgart/', 'name': 'fa-facebook-square'}, {'url':'https://www.instagram.com/m4_lab/', 'name': 'fa-instagram'}, {'url':'https://de.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/', 'name': 'fa-linkedin'}, {'url':'https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA', 'name': 'fa-youtube'}];
+
+var footer_images = [/*{'src':'/images/demo/bbf_logo.png', 'alt':'BMBF'},*/ {'src':'/images/demo/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.jpg', 'alt':'Innovative Hochschule'}]
+
+function prependChild(parent,child){
+    parent.insertBefore(child, parent.childNodes[0]);
+}
+
+
+function readCookie(cname) {
+  var name = cname + "=";
+  var decodedCookie = decodeURIComponent(document.cookie);
+  var ca = decodedCookie.split(';');
+  for(var i = 0; i <ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+function sendRequest(URL){
+    console.log(document.cookie);
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", URL, true);
+    let token = readCookie("XSRF-TOKEN");
+    //Send the proper header information along with the request
+    xhr.setRequestHeader('X-CSRF-TOKEN', token);
+    xhr.send();
+}
+
+
+/* function head()
+ * creates header and prepends it to the documents body
+ */
+
+function head() {
+    let navheader = document.createElement("header");
+    navheader.id = "header";
+    navheader.classList.add("clear");
+
+    // disclaimer
+    let alertdiv = document.createElement("div");
+    alertdiv.classList.add("alert", "alert-danger", "alert-dismissible", "fade", "show");
+    alertdiv.style = "text-align:center;";
+    alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use."
+    let alertbutton = document.createElement("button");
+    alertbutton.type = "button";
+    alertbutton.classList.add("close");
+    alertbutton.setAttribute("data-dismiss", "alert");
+    alertbutton.innerHTML = "&times;";
+    prependChild(alertdiv, alertbutton);
+
+    // navigation header
+    let navbar = document.createElement("nav");
+    navbar.classList.add("navbar", "navbar-expand-md", "navbar-light");
+    navbar.style = "background-color: #ffffff;";
+
+    let navbarcontainer = document.createElement("div");
+    navbarcontainer.classList.add("container");
+
+    let navbarheader = document.createElement("div");
+    navbarheader.classList.add("navbar-header");
+    // navigation header - logo
+    let link_m4lab = document.createElement('a');
+    link_m4lab.href = "/";
+    link_m4lab.classList.add("navbar-brand");
+    link_m4lab.innerHTML = "<img src='/img/header/Logozeile_Header.png' alt='Logo Innovationslabor M4_LAB'>";
+    navbarheader.appendChild(link_m4lab);
+    // navigation header - toggle button menu for mobile devices
+    let togglebutton = document.createElement('button');
+    togglebutton.classList.add("navbar-toggler")
+    togglebutton.type = "button";
+    togglebutton.setAttribute("data-toggle", "collapse");
+    togglebutton.setAttribute("data-target", "#navbarCollapse");
+    togglebutton.setAttribute("aria-controls", "navbarCollapse");
+    togglebutton.setAttribute("aria-expanded", "false");
+    togglebutton.setAttribute("aria-label", "Toggle navigation");
+    togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>";
+    // nav menu
+    let navelements = document.createElement('ul');
+    navelements.id="navbarCollapse";
+    navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
+    for(let j = 0; j<menu.length; j++){
+        let headitem = document.createElement('li');
+        let itemtype = menu[j].type;
+        headitem.classList.add("nav-item")
+        let headlink = document.createElement('a');
+        headlink.href=menu[j].link;
+        headlink.id="navbarDropdown" + j;
+        headlink.classList.add('nav-link');
+        headlink.setAttribute("role", "button");
+        if(itemtype=='dropdown'){
+            headitem.classList.add("dropdown");
+            headlink.classList.add('dropdown-toggle');
+            headlink.setAttribute("data-toggle", "dropdown");
+            headlink.setAttribute("aria-haspopup", "true");
+            headlink.setAttribute("aria-expanded", "false");
+        }
+        headlink.innerHTML=menu[j].name;
+        if(itemtype=='dropdown'){
+            let combodiv = document.createElement('div');
+            combodiv.id=headlink.id+"_par";
+            combodiv.setAttribute("aria-labelledby",headlink.id);
+            combodiv.classList.add("dropdown-menu");
+            for(let k = 0; k< menu[j].combos.length; k++){
+                let combolink = document.createElement('a');
+                combolink.classList.add("dropdown-item");
+                combolink.href = menu[j].combos[k].link;
+                combolink.innerHTML = menu[j].combos[k].name;
+                combodiv.appendChild(combolink);
+            }
+            headitem.appendChild(combodiv);
+        }
+        prependChild(headitem, headlink)
+        navelements.appendChild(headitem);
+    }
+
+    navbarcontainer.appendChild(navbarheader);
+    navbarcontainer.appendChild(togglebutton);
+    navbarcontainer.appendChild(navelements);
+    navbar.appendChild(navbarcontainer)
+
+    navheader.appendChild(alertdiv);
+    navheader.appendChild(navbar);
+    prependChild(document.body, navheader);
+}
+
+/* function foot()
+ * creates footer and appends it to the documents body
+ */
+
+function foot() {
+    // add styles to <head> to manage sticky footer
+    var styles = `
+        @media only screen and (min-width: 768px) {
+            html {
+                position: relative;
+                min-height: 100%;
+            }
+            body {
+                margin-bottom: 120px; /* Margin bottom by footer height */
+            }
+            #homepage {
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+                text-align: center;
+            }
+        }
+    `
+    var styleSheet = document.createElement("style")
+    styleSheet.type = "text/css"
+    styleSheet.innerText = styles
+    document.head.appendChild(styleSheet)
+    
+    let footerdiv = document.createElement('div');
+    footerdiv.id="homepage";
+    //footerdiv.classList.add("last", "clear");
+    footerdiv.innerHTML = "<hr>";
+    let containerdiv = document.createElement('div');
+    containerdiv.classList.add('container');
+    let containerdivrow = document.createElement('div');
+    containerdivrow.classList.add('row');
+
+    //bmbf
+    let bmbf = document.createElement('div');
+    bmbf.classList.add("col-md-auto");
+    bmbf.innerHTML = "<img src='/img/footer/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.png' alt='Innovative Hochschule' style='height:90px'/>"
+    //m4labgrau
+    let m4labgrau = document.createElement('div');
+    m4labgrau.classList.add("col-md-auto");
+    m4labgrau.innerHTML = "<img src='/img/footer/M4_LAB_LOGO_Graustufen.png' alt='M4_LAB' style='height:80px'/>"
+    // socmed
+    let socialdiv = document.createElement('div');
+    socialdiv.classList.add("col-md-auto");
+    let socialrow = document.createElement('div');
+    socialrow.id="socialmediabuttons";
+    for(let j = 0; j< socialmedias.length; j++){
+        let sociallink = document.createElement('a');
+        sociallink.href = socialmedias[j].url;
+        let socialcontent = document.createElement('i');
+        socialcontent.classList.add("fab", socialmedias[j].name);
+        sociallink.appendChild(socialcontent);
+        socialrow.appendChild(sociallink);
+        socialrow.innerHTML+="&nbsp;";
+    }
+    socialdiv.appendChild(socialrow);
+    // contact
+    let contactdiv = document.createElement('div');
+    contactdiv.classList.add("col-md-auto", "footer-unten")
+    contactdiv.innerHTML="Hochschule für Technik Stuttgart";
+    let rowdiv = document.createElement('div');
+    rowdiv.classList.add("row");
+    for(let i = 0; i<hft_links.length; i++){
+        let coldiv = document.createElement('div');
+        coldiv.classList.add("contactrow", "footer-unten");
+        let collink = document.createElement('a');
+        collink.innerHTML = hft_links[i].name;
+        collink.classList.add("contact-lower")
+        collink.href = hft_links[i].url;
+        coldiv.appendChild(collink)
+        rowdiv.appendChild(coldiv);
+    }
+    contactdiv.appendChild(rowdiv);
+
+    containerdivrow.appendChild(bmbf);
+    containerdivrow.appendChild(m4labgrau);
+    containerdivrow.appendChild(socialdiv);
+    containerdivrow.appendChild(contactdiv);
+
+    containerdiv.appendChild(containerdivrow);
+    footerdiv.appendChild(containerdiv);
+    document.body.appendChild(footerdiv);
+}
+
+head();
+foot();

routes/methods.js

@@ -42,14 +42,26 @@ var methods = {
                                 throw err
                             });
                         }
-                        // COMMIT
-                        dbconn.user.commit(function(err) {
+                        // MLAB-129: INSERT verification token
+                        let verificationData = {
+                            user_id: newUserId,
+                            token: data.verificationToken
+                        }
+                        dbconn.user.query('INSERT INTO verification SET ?', verificationData, function (err, results, fields) {
                             if (err) {
                                 return dbconn.user.rollback(function() {
                                     throw err
                                 });
                             }
-                        });
+                            // COMMIT
+                            dbconn.user.commit(function(err) {
+                                if (err) {
+                                    return dbconn.user.rollback(function() {
+                                        throw err
+                                    })
+                                }
+                            })
+                        })
                     })
                 });
             });
@@ -70,7 +82,7 @@ var methods = {
         });
     },
 	checkUserEmail: function(email, callback) {
-        var user;
+        let user;
         dbconn.user.query('SELECT id, email FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
             if (err) {
                 throw err;
@@ -100,20 +112,20 @@ var methods = {
             }
         );
     },
-	updateUser: function(userData, callback) {
-		dbconn.user.query('UPDATE user SET ? WHERE email = "' +userData.email+'"', userData, function (err, rows, fields) {
-            if (err) throw err;
-            callback(err);
+	updateUserById: function(userData, callback) {
+		dbconn.user.query('UPDATE user SET ? WHERE id = ' +userData.id, userData, function (err, rows, fields) {
+            if (err) throw err
+            callback(err)
         })
     },
     updateCredential: function(data, callback) {
         dbconn.user.query('UPDATE credential SET ? WHERE user_id = ' +data.user_id, data, function (err, rows, fields) {
-            if (err) throw err;
-            callback(err);
+            if (err) throw err
+            callback(err)
         })
     },
     getUserIdByEmail: function(email, callback) {
-        var userId
+        let userId
         dbconn.user.query('SELECT id FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
             if (err) {
                 throw err;
@@ -138,6 +150,57 @@ var methods = {
             callback(err);
         })
     },
+    // MLAB-129
+    getVerificationTokenByUserId: function(userId, callback) {
+        let token
+        dbconn.user.query('SELECT token FROM verification WHERE user_id = "' +userId+'"', function (err, rows, fields) {
+            if (err) {
+                throw err
+            }
+            else {
+                if (rows.length > 0) {
+                    token = rows[0].token
+                }
+            }
+            callback(token, err)
+        })
+    },
+    getUserIdByVerificationToken: function(token, callback) {
+        let userId
+        dbconn.user.query('SELECT user_id FROM verification WHERE token = "' +token+'"', function (err, rows, fields) {
+            if (err) {
+                throw err
+            }
+            else if(rows[0]) {
+                userId = rows[0].user_id
+            }
+            callback(userId, err)
+        })
+    },
+    verifyUserAccount: function(userData, callback) {
+        dbconn.user.beginTransaction(function(err) { // START TRANSACTION
+            if (err) { throw err }
+            // update user status
+            dbconn.user.query('UPDATE user SET ? WHERE id =' +userData.id, userData, function (err, rows, fields) {
+                if (err) {
+                    return dbconn.user.rollback(function() { throw err })
+                }
+                // delete verification token
+                dbconn.user.query('DELETE FROM verification WHERE user_id = '+userData.id, function (err, rows, fields) {
+                    if (err) {
+                        return dbconn.user.rollback(function() { throw err })
+                    }
+                    // COMMIT
+                    dbconn.user.commit(function(err) {
+                        if (err) {
+                            return dbconn.user.rollback(function() { throw err })
+                        }
+                    })
+                })
+            })
+            callback(err)
+        })
+    },
     // ======================= project db =======================
     getAllProjects: function(callback) {
         dbconn.project.query('CALL getAllprojects', function (err, rows, fields){

routes/routes-account.js

@@ -142,10 +142,18 @@ module.exports = function (app, config, passport, i18n) {
     if (req.isAuthenticated()) {
       methods.getUserByEmail(req.user.email, function(data, err){
         if (!err) {
-          res.render(lang+'/account/profile', {
-            user: data,
-            email: req.user.email
-          });
+          if (data.verificationStatus == 1) {
+            console.log(data)
+            res.render(lang+'/account/profile', {
+              user: data,
+              email: req.user.email
+            })
+          }
+          else {
+            res.render(lang+'/account/home', {
+              user: data
+            });
+          }
         }
       })
     } else {
@@ -155,63 +163,74 @@ module.exports = function (app, config, passport, i18n) {
 
   app.get('/services', function (req, res) {
     if (req.isAuthenticated()) {
-      async.waterfall([
-        // get userId by email from userdb
-        function(done) {
-          methods.getUserIdByEmail(req.user.email, function(userId, err) {
-            if (!err) {
-              done(err, userId)
-            }
-          })
-        },
-        // get user-project-role from userdb
-        function(userId, done) {
-          methods.getUserProjectRole(userId, function(userProjects, err) {
-            if (!err) {
-              done(err, userProjects)
-            }
-          })
-        },
-        // get all projects from projectdb
-        function(userProjects, done) {
-          methods.getAllProjects(function(projectsOverview, err) {
-            if (!err) {
-              done(err, userProjects, projectsOverview)
-            }
-          })
-        },
-        // create JSON object of projects and user status for front-end
-        function(userProjects, projectsOverview, done) {
-          var allProjects = []  // JSON object
-
-          var userProjectId = []  // array of user's project_id
-          for (var i = 0; i < userProjects.length; i++) {
-            userProjectId.push(userProjects[i].project_id)
+      methods.getUserByEmail(req.user.email, function(data, err){
+        if (!err) {
+          if (data.verificationStatus == 1) {
+            async.waterfall([
+              // get userId by email from userdb
+              function(done) {
+                methods.getUserIdByEmail(req.user.email, function(userId, err) {
+                  if (!err) {
+                    done(err, userId)
+                  }
+                })
+              },
+              // get user-project-role from userdb
+              function(userId, done) {
+                methods.getUserProjectRole(userId, function(userProjects, err) {
+                  if (!err) {
+                    done(err, userProjects)
+                  }
+                })
+              },
+              // get all projects from projectdb
+              function(userProjects, done) {
+                methods.getAllProjects(function(projectsOverview, err) {
+                  if (!err) {
+                    done(err, userProjects, projectsOverview)
+                  }
+                })
+              },
+              // create JSON object of projects and user status for front-end
+              function(userProjects, projectsOverview, done) {
+                var allProjects = []  // JSON object
+      
+                var userProjectId = []  // array of user's project_id
+                for (var i = 0; i < userProjects.length; i++) {
+                  userProjectId.push(userProjects[i].project_id)
+                }
+      
+                for (var i = 0; i < projectsOverview.length; i++) {
+                  // check if projectId is exist in userProjectId[]
+                  var status = false
+                  if (userProjectId.indexOf(projectsOverview[i].id) > -1) {
+                    status = true
+                  }
+                  // add data to JSON object
+                  allProjects.push({
+                    id: projectsOverview[i].id,
+                    title: projectsOverview[i].title,
+                    summary: projectsOverview[i].onelinesummary,
+                    cp: projectsOverview[i].contact_email,
+                    userStatus: status
+                  });
+                }
+      
+                // render the page
+                res.render(lang+'/account/services', {
+                  user: data,
+                  project: allProjects
+                });
+              }
+            ])
           }
-
-          for (var i = 0; i < projectsOverview.length; i++) {
-            // check if projectId is exist in userProjectId[]
-            var status = false
-            if (userProjectId.indexOf(projectsOverview[i].id) > -1) {
-              status = true
-            }
-            // add data to JSON object
-            allProjects.push({
-              id: projectsOverview[i].id,
-              title: projectsOverview[i].title,
-              summary: projectsOverview[i].onelinesummary,
-              cp: projectsOverview[i].contact_email,
-              userStatus: status
+          else {
+            res.render(lang+'/account/home', {
+              user: data
             });
           }
-
-          // render the page
-          res.render(lang+'/account/services', {
-            user: req.user,
-            project: allProjects
-          });
         }
-      ])
+      })
     } else {
       res.redirect('/login');
     }
@@ -219,9 +238,21 @@ module.exports = function (app, config, passport, i18n) {
 
   app.get('/security', function (req, res) {
     if (req.isAuthenticated()) {
-      res.render(lang+'/account/security', {
-        user: req.user // useful for view engine, useless for HTML
-      });
+      methods.getUserByEmail(req.user.email, function(data, err){
+        if (!err) {
+          if (data.verificationStatus == 1) {
+            console.log(data)
+            res.render(lang+'/account/security', {
+              user: data
+            })
+          }
+          else {
+            res.render(lang+'/account/home', {
+              user: data
+            });
+          }
+        }        
+      })
     } else {
       res.redirect('/login');
     }
@@ -345,6 +376,76 @@ module.exports = function (app, config, passport, i18n) {
     });
   });
 
+  // =========== MLAB-129 ========
+  app.get("/verifyAccount", function(req, res){
+    methods.getUserIdByVerificationToken(req.query.token, function(userId, err){
+      console.log(err)
+      console.log(userId)
+      if (userId) {
+        let userData = {
+          id: userId,
+          verificationStatus: 1
+        }
+        methods.verifyUserAccount(userData, function(err){
+          if (err) {
+            res.send("Failed to verify your account. Please try again. https://transfer.hft-stuttgart.de")
+            // todo: create a page for this. copy the template from error page.
+          }
+          else {
+            res.send("email verified.\n\nhttps://transfer.hft-stuttgart.de")
+            // todo: create a page for this. copy the template from error page.
+          }
+        })
+      }
+      else {
+        res.send("Your account is not found.\n\nhttps://transfer.hft-stuttgart.de")
+        // todo: create a page for this. copy the template from error page.
+      }
+    })
+  })
+
+  app.get("/resendVerificationEmail", function(req, res){
+    if (req.isAuthenticated()) {
+      var emailAddress = req.user.email
+      
+      methods.getUserIdByEmail(req.user.email, function(userId, err) {
+        if (!err) {
+          // get token
+          methods.getVerificationTokenByUserId(userId, function(token, err){
+            if (!err) {
+              if (token) {
+                // send email
+                var emailSubject = "Verify Your M4_LAB Account"; // todo: translate to DE
+                var emailContent = "Lieber Nutzer,\n\n"+
+                    "vielen Dank für Ihre Anmeldung am Transferportal der HFT Stuttgart. "+ 
+                    "\nUm Ihre Anmeldung zu bestätigen, klicken Sie bitte diesen Link: "+config.app.host+"/verifyAccount?token="+token+
+                    "\n\nOhne Bestätigung Ihres Kontos müssen wir Ihr Konto leider nach 7 Tagen löschen.\n\n"+mailSignature
+                
+                mailer.options.to = emailAddress;
+                mailer.options.subject = emailSubject;
+                mailer.options.text = emailContent;
+                mailer.transport.sendMail(mailer.options, function(err) {
+                  if (err) {
+                    console.log('cannot send email')
+                    throw err
+                  }
+                })
+                res.send(true)
+              }
+              else {
+                res.send(false)
+              }
+            }
+            else {
+              console.log(err)
+            }
+          })
+        }
+      })
+    }
+  })
+  // ===================
+
   app.post('/forgotPwd', function(req, res, next) {
     //methods.currentDate();
 
@@ -474,16 +575,11 @@ module.exports = function (app, config, passport, i18n) {
 
   });
 
-  // todo: user registration with captcha
   app.get('/registration', function(req, res) {
     res.render(lang+'/account/registration')
   })
 
   app.post('/registration', function(req, res) {
-    // TODO:
-    // create gitlab account?
-    // send email to activate profile?
-
     // user data
     var curDate = new Date()
     var userData = {
@@ -497,14 +593,30 @@ module.exports = function (app, config, passport, i18n) {
       speciality: req.body.inputSpeciality,
       createdDate: curDate.toISOString().slice(0,10)
     }
-    // encrypt password
-    bcrypt.genSalt(saltRounds, function(err, salt) {
-      bcrypt.hash(req.body.inputPassword, salt, function(err, hash) {
-        // create account
-        var newAccount = {
-          profile: userData,
-          password: hash
-        }
+
+    async.waterfall([
+      // token
+      function(done) {
+        crypto.randomBytes(20, function(err, buf) {
+          var token = buf.toString('hex');
+          done(err, token);
+        });
+      },
+      // encrypt password
+      function(token, done) {
+        bcrypt.genSalt(saltRounds, function(err, salt) {
+          bcrypt.hash(req.body.inputPassword, salt, function(err, hash) {
+            var newAccount = {
+              profile: userData,
+              password: hash,
+              verificationToken: token
+            }
+            done(err, newAccount)
+          });
+        });
+      },
+      // save data
+      function(newAccount, err) {
         methods.registerNewUser(newAccount, function(err){
           if (err) {
             //req.flash('error', "Failed")
@@ -516,8 +628,8 @@ module.exports = function (app, config, passport, i18n) {
           }
           res.redirect('/account/registration');
         })
-      });
-    });
+      }
+    ])
   })
 
   app.get('/email/:email', function(req, res) {

views/DE/account/home.pug

@@ -8,34 +8,43 @@ html(lang="de")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
   body
     div(class="container")
-        div(class="row min-vh-100 flex-column flex-md-row")
-            aside(class="col-12 col-md-3 p-0 flex-shrink-1")
-                nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
-                    div(class="collapse navbar-collapse")
-                        ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
-                            li(class="nav-item")
-                                a(class="nav-link pl-0 text-nowrap" href="#")
-                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
-                            li(class="nav-item")
-                                a(class="nav-link pl-0" href="/profile")
-                                    i(class="fa fa-user fa-fw")
-                                    span(class="d-none d-md-inline") Benutzerprofil
-                            li(class="nav-item")
-                                a(class="nav-link pl-0" href="/security")
-                                    i(class="fa fa-lock fa-fw")
-                                    span(class="d-none d-md-inline") Sicherheitseinstellungen
-                            li(class="nav-item")
-                                a(class="nav-link pl-0" href="/services")
-                                    i(class="fa fa-tasks fa-fw")
-                                    span(class="d-none d-md-inline") Projekte und Dienste
-                            li(class="nav-item")
-                                a(class="nav-link pl-0" href="/logout" style="color:red;")
-                                    i(class="fa fa-sign-out-alt fa-fw")
-                                    span(class="d-none d-md-inline") Logout
-            main(class="col bg-faded py-3 flex-grow-1")
-                p Willkommen im Benutzerkonto-Bereich des HFT Transferportals
-                p In diesem Bereich können Sie Ihr Benutzerkonto pflegen.<br/> Dazu finden Sie auf der linken Seite verschiedene Menüs.
-                p Bei Rückfragen kontaktieren Sie uns bitte unter: <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
+        if user.verificationStatus == 0
+            div.alert.alert-warning.alert-dismissible
+                | Willkommen im Benutzerkonto-Bereich des HFT Transferportals
+                | <br/><br/>
+                | Wir haben Ihnen eine E-Mail an Ihre verwendete Adresse gesendet. Diese enthält einen Link zur Bestätigung Ihres Accounts.
+                | Wenn Sie die Mail nicht in ihrem Postfach vorfinden, prüfen Sie bitte auch Ihren Spam-Ordner.
+                | <br >Falls Sie keine E-Mail von uns erhalten haben, können Sie <a href="javascript:void(0);" onclick="verify();">diese hier</a> erneut anfordern.
+                div(class="spinner-border text-secondary", role="status", style="display: none")
+        else
+            div(class="row min-vh-100 flex-column flex-md-row")
+                aside(class="col-12 col-md-3 p-0 flex-shrink-1")
+                    nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
+                        div(class="collapse navbar-collapse")
+                            ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
+                                li(class="nav-item")
+                                    a(class="nav-link pl-0 text-nowrap" href="#")
+                                        span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
+                                li(class="nav-item")
+                                    a(class="nav-link pl-0" href="/profile")
+                                        i(class="fa fa-user fa-fw")
+                                        span(class="d-none d-md-inline") Benutzerprofil
+                                li(class="nav-item")
+                                    a(class="nav-link pl-0" href="/security")
+                                        i(class="fa fa-lock fa-fw")
+                                        span(class="d-none d-md-inline") Sicherheitseinstellungen
+                                li(class="nav-item")
+                                    a(class="nav-link pl-0" href="/services")
+                                        i(class="fa fa-tasks fa-fw")
+                                        span(class="d-none d-md-inline") Projekte und Dienste
+                                li(class="nav-item")
+                                    a(class="nav-link pl-0" href="/logout" style="color:red;")
+                                        i(class="fa fa-sign-out-alt fa-fw")
+                                        span(class="d-none d-md-inline") Logout
+                main(class="col bg-faded py-3 flex-grow-1")
+                    p Willkommen im Benutzerkonto-Bereich des HFT Transferportals
+                    p In diesem Bereich können Sie Ihr Benutzerkonto pflegen.<br/> Dazu finden Sie auf der linken Seite verschiedene Menüs.
+                    p Bei Rückfragen kontaktieren Sie uns bitte unter: <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
                 
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
@@ -43,4 +52,25 @@ html(lang="de")
     // Bootstrap
     script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
     // M4_LAB
-    script(src="https://m4lab.hft-stuttgart.de/js/headfoot.js")
\ No newline at end of file
+    script(src="https://m4lab.hft-stuttgart.de/js/headfoot.js")
+    script.
+        // call verifyAccount
+        function verify() {
+            $(".spinner-border").show()
+            $.get( "/resendVerificationEmail", function( data ) {
+                console.log(data)
+                if (data) {
+                    alert( "Email sent!" )
+                }
+                else {
+                    alert("Please contact support-transfer@hft-stuttgart.de to verify your account.")
+                }
+            })
+            .fail(function() {
+                alert( "Something went wrong. Please try again." ) // todo: to DE
+            })
+            .always(function() {
+                $(".spinner-border").hide()
+            })
+            
+        }
\ No newline at end of file

views/DE/account/profile.pug

@@ -33,11 +33,6 @@ html(lang="de")
                                     i(class="fa fa-sign-out-alt fa-fw")
                                     span(class="d-none d-md-inline") Logout
             main(class="col bg-faded py-3 flex-grow-1")
-                if user.verificationStatus == 0
-                    div.alert.alert-warning.alert-dismissible
-                        | Wir haben Ihnen eine E-Mail an Ihre verwendete Adresse gesendet. Diese enthält einen Link zur Bestätigung Ihres Accounts.
-                        | Wenn Sie die Mail nicht in ihrem Postfach vorfinden, prüfen Sie bitte auch Ihren Spam-Ordner.
-                        | <br >Falls Sie keine E-Mail von uns erhalten haben, können Sie <a href="#">diese hier</a> erneut anfordern.
                 if successes
                     for success in successes
                         div.alert.alert-success.alert-dismissible #{ success }
@@ -50,7 +45,7 @@ html(lang="de")
                     div(class="form-row")
                         div(class='form-group col-md-2')
                             label(for="title") Anrede
-                            select#inputSalutation(name="inputSalutation", class="form-control", , value=user.salutation)
+                            select#inputSalutation(name="inputSalutation", class="form-control", value=user.salutation)
                                 option(value="") - Anrede -
                                 option(value="Herr") Herr
                                 option(value="Frau") Frau

views/DE/account/security.pug

@@ -19,7 +19,7 @@ html(lang="de")
                         ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
                             li(class="nav-item")
                                 a(class="nav-link pl-0 text-nowrap" href="/")
-                                    span(class="font-weight-bold" style="color:black;") #{user.firstName} #{user.lastName}
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
                             li(class="nav-item")
                                 a(class="nav-link pl-0" href="/profile")
                                     i(class="fa fa-user fa-fw")
@@ -64,7 +64,7 @@ html(lang="de")
                             span#message
                             div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
                     input#updateBtn(type="submit", class="btn btn-primary", value="Passwort ändern" disabled)
-                    
+                        
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")

views/DE/account/services.pug

@@ -15,7 +15,7 @@ html(lang="de")
                         ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
                             li(class="nav-item")
                                 a(class="nav-link pl-0 text-nowrap" href="/")
-                                    span(class="font-weight-bold" style="color:black;") #{user.firstName} #{user.lastName}
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
                             li(class="nav-item")
                                 a(class="nav-link pl-0" href="/profile")
                                     i(class="fa fa-user fa-fw")

views/DE/account/verification.pug

+doctype html
+html(lang="de")
+  head
+    title= "404 - Page not found"
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
+    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
+    style.
+      .container { 
+        height: 400px;
+        position: relative;
+      }
+      .center {
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+  body
+    div(class="container")
+      div(class="center", align="center")
+        a(href="https://m4lab.hft-stuttgart.de")
+          img(src="https://transfer.hft-stuttgart.de/images/demo/m4lab_logo.jpg", class="img-responsive center-block", width="185", height="192")
+        br
+        br
+        p(class="h5") 404. The requested URL was not found.
+        // success: email verified
+        // failed: Failed to verify your account. Please try again.
+    // Bootstrap
+    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
\ No newline at end of file