Merge branch 'MLAB-383' into 'testing'

Mlab 383

See merge request !70

__tests__/gitlab.unit.test.js

+const gitlab = require('../routes/gitlab')
+//const axios = require('axios')
+//jest.mock('axios')
+
+describe('GitLab API', () => {
+  test('returns an existing gitlab user by an email address', async () => {
+    let user = await gitlab.getUserByEmail('putavaliduseremailaddress@here.com')
+    expect(user).not.toBeNull()
+  })
+  test('returns an undefined user', async () => {
+    let user = await gitlab.getUserByEmail('johndoe@nowhere.com')
+    expect(user).toBeUndefined()
+  })
+
+  test('returns users project', async () => {
+    let userProjects = await gitlab.getUserProjects('put a valid user id in integer here')
+    expect(userProjects).toBeDefined()
+  })
+  test('returns undefined projects, due to non-existing gitlab user ID', async () => {
+    let userProjects = await gitlab.getUserProjects(0)
+    expect(userProjects).toBeUndefined()
+  })
+
+  test('returns a project by ID', async () => {
+    let project = await gitlab.getProjectById(13) // m4lab_landing_page
+    expect(project).toBeDefined()
+  })
+  test('returns undefined, due to invalid project ID', async () => {
+    let project = await gitlab.getProjectById(0)
+    expect(project).toBeUndefined()
+  })
+})
\ No newline at end of file

__tests__/method.unit.test.js

+const methods = require('../routes/methods')
+
+describe("DB methohds test", () => {
+
+    it('returns a user from DB by email', done => {
+        methods.getUserByEmail('rosanny.sihombing@hft-stuttgart.de', function(resp, err){
+            try {
+                expect(resp).not.toBeNull()
+                expect(err).toBeNull()
+                done()
+            } catch (error) {
+                done(error)
+            }
+        })    
+    })
+
+    it("returns a user from DB by ID", done => {
+        methods.getUserById(10, function(resp, err){
+            try {
+                expect(resp).not.toBeNull()
+                expect(err).toBeNull()
+                done()
+            } catch (error) {
+                done(error)
+            }
+        })    
+    })
+
+    it("checks user email", done => {
+        methods.checkUserEmail("test@email.de", function(err, resp){
+            try {
+                expect(resp).not.toBeNull()
+                expect(err).toBeNull()
+                done()
+            } catch (error) {
+                done(error)
+            }
+        })
+    })
+
+    it("returns a user by token", done => { 
+        methods.checkUserEmail("1abc0qwerty", function(err, resp){ // token = any alphanumeric
+            try {
+                expect(resp).not.toBeNull()
+                expect(err).toBeNull()
+                done()
+            } catch (error) {
+                done(error)
+            }
+        })
+    })
+})

app.js

@@ -7,7 +7,7 @@ const cookieParser = require('cookie-parser');
 const bodyParser = require('body-parser');
 const session = require('express-session');
 const errorhandler = require('errorhandler');
-const flash = require('express-flash');
+const flash = require('express-flash-2');
 const fileUpload = require('express-fileupload');
 const helmet = require('helmet');
 const compression = require('compression');
@@ -56,12 +56,6 @@ app.use(session(
   }
 ));
 app.use(flash());
-app.use((req, res, next) => {
-  res.locals.errors = req.flash("error");
-  res.locals.successes = req.flash("success");
-  next();
-});
-
 app.use(passport.initialize());
 app.use(passport.session());
 
@@ -73,11 +67,9 @@ app.use(function(req, res, next) {
 });
 
 require('./routes/routes-account')(app, config, passport, i18n);
-require('./routes/api')(app, config, passport);
 
 // Handle 404
 app.use(function (req, res, next) {
-  //res.status(404).send('404: Page not Found', 404)
   res.status(404).render('./DE/404')
 })
 

classes/project.js

+class Project {
+    constructor(ownerGitlabId, id, name, desc, logo, path) {
+        this.ownerGitlabId = ownerGitlabId
+        this.id = id
+        this.name = name
+        this.desc = desc
+        this.logo = logo
+        this.path = path
+    }
+
+    // getter
+    getOwnerGitlabId() {
+        return this.ownerGitlabId
+    }
+    getId() {
+        return this.id
+    }
+    getName() {
+        return this.name
+    }
+    getDesc() {
+        return this.desc
+    }
+    getLogo() {
+        return this.logo
+    }
+    getPath() {
+        return this.path
+    }
+    // setter
+    setOwnerGitlabId(newOwnerGitlabId){
+        this.ownerGitlabId = newOwnerGitlabId
+    }
+    setId(newId) {
+        this.id = newId
+    }
+    setName(newName) {
+        this.name = newName
+    }
+    setDesc(newDesc) {
+        this.desc = newDesc
+    }
+    setLogo(newLogoUrl) {
+        this.logo = newLogoUrl
+    }
+    setPath(newPath) {
+        this.path = newPath
+    }
+}
+
+module.exports = Project
\ No newline at end of file

classes/repo.js

+const Project = require("./project");
+
+class Repo extends Project {
+    constructor(ownerGitlabId, id, name, desc, logo, path) {
+        super(ownerGitlabId, id, name, desc, logo, path)
+    }
+}
+
+module.exports = Repo
\ No newline at end of file

classes/user.js

+class User {
+    constructor(id, email, salutation, title, firstName, lastName, industry, organisation, speciality, is_m4lab_idp, gitlabUserId, verificationStatus) {
+        this.id = id
+        this.email = email
+        this.salutation = salutation
+        this.title = title
+        this.firstName = firstName
+        this.lastName = lastName
+        this.industry = industry
+        this.organisation = organisation
+        this.speciality = speciality
+        this.is_m4lab_idp = is_m4lab_idp // 1 or 0
+        this.gitlabUserId = gitlabUserId
+        this.verificationStatus = verificationStatus
+    }
+
+    // getter
+    getId() {
+        return this.id
+    }
+    getEmail() {
+        return this.email
+    }
+    getFullName() {
+        return this.firstName+' '+this.lastName
+    }
+    getIdpStatus() {
+        return this.is_m4lab_idp
+    }
+    getGitlabUserId() {
+        return this.gitlabUserId
+    }
+    getVerificationStatus() {
+        return this.verificationStatus
+    }
+    // setter
+    setEmail(email) {
+        this.email = email
+    }
+    setSalutation(salutation) {
+        this.salutation = salutation
+    }
+    setTitle(title) {
+        this.title = title
+    }
+    setFirstName(firstName) {
+        this.firstName = firstName
+    }
+    setLastName(lastName) {
+        this.lastName = lastName
+    }
+    setIndustry(industry) {
+        this.industry = industry
+    }
+    setOrganisation(organisation) {
+        this.organisation = organisation
+    }
+    setSpeciality(speciality) {
+        this.speciality = speciality
+    }
+    setM4lab_idp(m4lab_idp) {
+        this.m4lab_idp = m4lab_idp
+    }
+    setGitlabUserId(newGitlabUserId) {
+        this.gitlabUserId = newGitlabUserId
+    }
+    setVerificationStatus(verificationStatus) {
+        this.verificationStatus = verificationStatus
+    }
+
+    updateProfile(newSalutation, newTitle, newFirstname, newLastname, newEmail, newOrganisation, newIndustry, newSpeciality) {
+        this.salutation = newSalutation
+        this.title = newTitle
+        this.firstName = newFirstname
+        this.lastName = newLastname
+        this.email = newEmail
+        this.organisation = newOrganisation
+        this.industry = newIndustry
+        this.speciality = newSpeciality
+    }
+}
+
+module.exports = User
\ No newline at end of file

classes/website.js

+const Project = require("./project");
+
+class Website extends Project {
+    constructor(ownerGitlabId, id, name, desc, logo, path) {
+        super(ownerGitlabId, id, name, desc, logo, path)
+    }
+}
+
+module.exports = Website
\ No newline at end of file

package.json

@@ -17,10 +17,11 @@
   },
   "scripts": {
     "start": "nodemon app.js",
-    "test": ""
+    "test": "jest"
   },
   "dependencies": {
     "async": "^3.1.0",
+    "axios": "^0.21.1",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
@@ -29,19 +30,20 @@
     "errorhandler": "1.4.3",
     "express": "^4.17.1",
     "express-fileupload": "^1.1.6",
-    "express-flash": "0.0.2",
+    "express-flash-2": "^1.0.1",
     "express-session": "^1.17.0",
+    "form-data": "^3.0.0",
     "fs": "0.0.1-security",
     "helmet": "^3.23.3",
     "i18n": "^0.8.5",
+    "jest": "^26.6.3",
     "morgan": "^1.9.1",
     "mysql": "^2.17.1",
     "nodemailer": "^6.3.1",
     "nodemon": "^2.0.1",
     "passport": "0.3.2",
     "passport-saml": "^1.4.2",
-    "pug": "^2.0.4",
-    "superagent": "^6.1.0"
+    "pug": "^3.0.2"
   },
   "devDependencies": {},
   "engines": {

routes/dbconn.js

@@ -17,13 +17,6 @@ userConnection.connect(function(err) {
     if (err) throw err;
 })
 userConnection.query('USE '+config.database.dbUser)
-    
-// user db connection test
-userConnection.query('SELECT 1 + 5 AS solution', function (err, rows, fields) {
-    if (err) throw err
-    console.log('Solution = ', rows[0].solution)
-})
-//userConnection.end()
 
 // ALTERNATIVE approach: close db connection manually after every query
 /*
@@ -62,13 +55,6 @@ projectConnection.connect(function(err) {
     if (err) throw err;
 })
 projectConnection.query('USE '+config.database.dbProject)
-    
-// projectdb connection test
-projectConnection.query('SELECT 10 + 5 AS project', function (err, rows, fields) {
-    if (err) throw err
-    console.log('Project = ', rows[0].project)
-})
-//projectConnection.end()
 
 var connection = {
     user: userConnection,

routes/gitlab.js

+var env = process.env.NODE_ENV || 'testing'
+const config = require('../config/config')[env]
+const axios = require('axios')
+const fs = require('fs')
+var formData = require('form-data')
+
+var gitlab = {
+    // todo: GraphQL currentUser
+
+    getUserByEmail: async function(email) {
+        return axios({
+            method: 'get',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/users?search='+email,
+            headers: { 
+                'Authorization': 'Bearer '+config.gitlab.token_readWriteProjects}
+        })
+        .then(res => userData = {
+            id: res.data[0].id,
+            username: res.data[0].username
+        })
+        .catch(err => console.error(err))
+    },
+    createNewPages: async function(newPagesData, newLogoFile, template) {
+        let data = new formData()
+        data.append('avatar', fs.createReadStream(newLogoFile))
+
+        return axios({
+            method: 'post',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects/user/'+newPagesData.getOwnerGitlabId()+
+                '?name='+newPagesData.getName()+'&description='+newPagesData.getDesc()+'&tag_list=website'+
+                '&use_custom_template=true&template_name='+template,
+            headers: { 
+                'Authorization': 'Bearer '+config.gitlab.token_readWriteProjects, 
+                ...data.getHeaders()
+            },
+            data: data
+        })
+        .then(res => res = {
+            error: false,
+            data: res.data
+        })
+        .catch(err => res = {
+            error: true,
+            data: err.response.data
+        })
+    },
+    updateProject: async function(updatedProjectData, newLogoFile){
+        let data = new formData()
+        if (newLogoFile) {
+            data.append('avatar', fs.createReadStream(newLogoFile))
+        }
+
+        return axios({
+            method: 'put',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects/'+updatedProjectData.getId()+
+                '?name='+updatedProjectData.getName()+'&description='+updatedProjectData.getDesc(),
+            headers: { 
+                'Authorization': 'Bearer '+config.gitlab.token_readWriteProjects, 
+                ...data.getHeaders()
+            },
+            data : data
+        })
+        .then(res => res = {
+            error: false,
+            data: res.data
+        })
+        .catch(err => res = {
+            error: true,
+            data: err.response.data
+        })
+    },
+    getUserProjects: async function(gitlabUserId) {
+        return axios({
+            method: 'get',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/users/'+gitlabUserId+'/projects?private_token='+
+                config.gitlab.token_readWriteProjects+'&owned=true&simple=true&visibility=public'
+        })
+        .then(res => res.data)
+        .catch(err => console.error(err))
+    },
+    getProjectById: async function(projectId) {
+        return axios({
+            method: 'get',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects/'+projectId+'?private_token='+
+                config.gitlab.token_readWriteProjects
+        })
+        .then(res => res.data)
+        .catch(err => console.error(err))
+    },
+    getProjectPipelineLatestStatus: async function(projectId) {
+        return axios({
+            method: 'get',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects/'+projectId+'/pipelines'
+        })
+        .then(res => res.data[0].status)
+        .catch(err => console.error(err))
+    },
+    // delete peoject: https://docs.gitlab.com/ee/api/projects.html#delete-project
+    //
+    // test GraphQL
+    getGraphqlTest: function(callback) {
+        axios({
+            url: 'https://gitlab.com/api/graphql',
+            method: 'get',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer '+config.gitlab.token_readWriteProjects
+            },
+            data: {
+                query: `{
+                    currentUser {
+                        id
+                        username
+                    }
+                }`
+            /*  query: `{
+                projects {
+                    nodes {
+                        id
+                    }
+                }
+              }` */
+            }
+        }).then((result) => {
+            console.log(JSON.stringify(result.data))
+        });
+    }
+}
+
+module.exports = gitlab
\ No newline at end of file

routes/methods.js

 const dbconn = require('./dbconn');
 
 var methods = {
-    // test method
-	currentDate: function() {
-		console.log('Current Date is: ' + new Date().toISOString().slice(0, 10));
-    },
     // ===================== user db =====================
     registerNewUser: function(data, callback) {
         dbconn.user.beginTransaction(function(err) { // START TRANSACTION
@@ -70,22 +66,20 @@ var methods = {
     },
     getUserByEmail: function(email, callback) {
         dbconn.user.query('SELECT id, verificationStatus, salutation, title, firstname, lastname, industry, organisation, speciality, m4lab_idp FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
-            if (err) {
-                throw err;
-            }
+            let user
+            if (err) { throw err }
             else {
                 if ( rows.length > 0) {
-                    user = rows[0];
+                    user = rows[0]
                 }
             }
-            callback(user, err);
+            callback(user, err)
         });
     },
     getUserById: function(userId, callback) {
         dbconn.user.query('SELECT verificationStatus, email, salutation, title, firstname, lastname, industry, organisation, speciality FROM user WHERE id = ' +userId, function (err, rows, fields) {
-            if (err) {
-                throw err;
-            }
+            let user
+            if (err) { throw err }
             else {
                 if ( rows.length > 0) {
                     user = rows[0];
@@ -96,34 +90,29 @@ var methods = {
     },
 	checkUserEmail: function(email, callback) {
         let user
-        dbconn.user.query('SELECT id, email FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
-            if (err) {
-                throw err;
-            }
+        dbconn.user.query('SELECT id, email FROM user WHERE email = "' +email+'"', function (err, rows) {
+            if (err) { throw err }
             else {
                 if ( rows.length > 0) {
                     user = rows[0];
                 }
             }
-            callback(err, user);
+            callback(err, user)
         });
     },
     getUserByToken: function(token, callback) {
         let user
         dbconn.user.query('SELECT t1.user_id, t2.email FROM userdb.credential AS t1 INNER JOIN userdb.user AS t2 ON t1.user_id = t2.id AND t1.resetPasswordToken = "'
             +token+'" and resetPasswordExpires > '+Date.now(), function (err, rows, fields) {
-                if (err) {
-                    throw err;
-                }
+                if (err) { throw err }
                 else {
                     if ( rows.length > 0) {
                         user = rows[0]
-                        console.log(user)
                     }
                 }
-                callback(err, user);
+                callback(err, user)
             }
-        );
+        )
     },
 	updateUserById: function(userData, callback) {
 		dbconn.user.query('UPDATE user SET ? WHERE id = ' +userData.id, userData, function (err, rows, fields) {

views/DE/account/contact.pug

@@ -17,14 +17,12 @@ html(lang="de")
             div(class="col-md-12" style="margin-bottom: 40px;")
                 img(class="mx-auto" src="/img/Kontakt.jpg" width="100%")
     div(class="contact-clean" style="background-color: rgb(234,234,234);")
-        if successes
-            for success in successes
-                div.alert.alert-success.alert-dismissible #{ success }
-                    a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
-        if errors
-            for error, i in errors
-                div.alert.alert-danger.alert-dismissible.fade.show #{ error }
-                    a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+        if flash.success
+            div.alert.alert-success.alert-dismissible #{flash.success}
+                a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+        if flash.error
+            div.alert.alert-danger.alert-dismissible.fade.show #{flash.error}
+                a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
         form(method="POST")
             h2(class="text_center") Kontaktieren Sie uns
             div(class="form-group")

views/DE/account/forgotPwd.pug

@@ -12,14 +12,12 @@ html(lang="de")
     div(class="container-fluid")
         div(class="row")
             div(class="col-md-6 offset-md-3")
-                if successes
-                    for success in successes
-                        div.alert.alert-success.alert-dismissible #{ success }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
-                if errors
-                    for error, i in errors
-                        div.alert.alert-danger.alert-dismissible.fade.show #{ error }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+                if flash.success
+                    div.alert.alert-success.alert-dismissible #{flash.success}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+                if flash.error
+                    div.alert.alert-danger.alert-dismissible.fade.show #{flash.error}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
                 form#forgotForm(class="form-signin", method="POST")
                     img(src="https://transfer.hft-stuttgart.de/images/demo/m4lab_logo.jpg", class="img-responsive center-block", width="185", height="192")
                     div(class="form-row")

views/DE/account/home.pug

@@ -25,12 +25,12 @@ 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="/account/profile")
                                         i(class="fa fa-user fa-fw")
                                         span(class="d-none d-md-inline") Benutzerprofil
-                                if user.m4lab_idp == 1
+                                if user.is_m4lab_idp
                                     li(class="nav-item")
                                         a(class="nav-link pl-0" href="/account/security")
                                             i(class="fa fa-lock fa-fw")

views/DE/account/newInformation.pug

+doctype html
+html(lang="de")
+  head
+    title= "Setup a new website"
+    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="/css/bootstrap.min.css")
+    link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
+    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="/account/")
+                                    span(class="font-weight-bold" style="color:black;") #{user.firstName} #{user.lastName}
+                            li(class="nav-item")
+                                a(class="nav-link pl-0" href="/account/profile")
+                                    i(class="fa fa-user fa-fw")
+                                    span(class="d-none d-md-inline") Benutzerprofil
+                            if user.is_m4lab_idp
+                                li(class="nav-item")
+                                    a(class="nav-link pl-0" href="/account/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="/account/services")
+                                    i(class="fa fa-tasks fa-fw" style="color:black;")
+                                    span(class="d-none d-md-inline" style="color:black;") 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")
+                nav(aria-label="breadcrumb")
+                    ol(class="breadcrumb")
+                        li(class="breadcrumb-item")
+                            a(href="/account") Konto
+                        li(class="breadcrumb-item")
+                            a(href="/account/services") Projekte und Dienste
+                        li(class="breadcrumb-item active" aria-current="page") Neue Projektinformation
+
+                if flash.success
+                    div.alert.alert-success.alert-dismissible #{flash.success}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+                if flash.error
+                    div.alert.alert-danger.alert-dismissible.fade.show #{flash.error}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+
+                h3(class="pb-2") Neue Projektinformation
+                div(class="mx-4")
+                    h4(class="pb-1") Schritt 1: Setup
+                    p Bitte füllen Sie alle Felder aus
+                    form(method="POST", encType="multipart/form-data")
+                        div(class='form-group row')
+                            label(for="template", class="col-sm-2") Template
+                            div(class="col-sm-8")
+                                select#templateSelector(name="template", class="form-control")
+                                    option(value="generic") generic
+                                    option(value="simple_raw") simple_raw
+                                    option(value="simple_thesis") simple_thesis
+                                | <span id="templateExample" class="font-italic font-weight-light"><small>See the demo: <a href="https://transfer.hft-stuttgart.de/pages/athanasios.koukofikis/mygeneric/home/" target="_blank">generic</a>, <a href="https://transfer.hft-stuttgart.de/pages/athanasios.koukofikis/myraw/home/" target="_blank">simple_raw</a>, <a href="https://transfer.hft-stuttgart.de/pages/athanasios.koukofikis/mythesis/home/" target="_blank">simple_thesis</a></small></span>
+                        div(class='form-group row')
+                            label(for="name", class="col-sm-2") Name
+                            div(class="col-sm-8")
+                                input#name(name="name", type="text", class="form-control", placeholder="Name", maxlength="75" required)
+                                p(id="nameInfo" class="font-italic font-weight-light") <small>Ihre Webseite wird unter folgender URL veröffentlicht: <strong>https://transfer.hft-stuttgart.de/pages/#{gitlabUsername}/<span id="websiteName"></span></strong></small>
+                        div(class="form-group row")
+                            label(for="description", class="col-sm-2") Beschreibung
+                            div(class="col-sm-8")
+                                textarea#description(name="description", type="text", class="form-control", placeholder="Beschreibung", maxlength="500" required)
+                        div(class="form-group row")    
+                            label(for="logo", class="col-sm-2") Projektlogo
+                            div(class="col-sm-8")
+                                input#logo(name="logo", class="form-control-file", type="file" required)
+                        input(type="submit", class="btn btn-primary", value="Senden")
+                hr
+                div(class="mx-4", style="color: gray;")
+                    h4(class="pb-1") Schritt 2: Dateneingabe
+                    p Bitte stellen Sie sicher, dass sie Folgendes abgeschlossen haben, bevor Sie Ihre Webseite veröffentlichen:
+                    ol
+                        li index.html
+                        li Anpassen der Standardwerte in <i>settings.js</i>
+
+    // 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")
+    // jquery-loading-overlay
+    script(src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js")
+    // 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="/js/headfoot.js")
+    script.
+        // website URL
+        function showWebsiteURL() {
+            if ($("#name").val()) {
+                $("#nameInfo").show()
+                let webName = $("#name").val().toLowerCase().replace(/\s/g, '-')
+                document.getElementById("websiteName").innerText = webName+"/home/"
+            }
+            else {
+                $("#nameInfo").hide()
+            }
+        }
+        $('#name').on('input',function(e){
+            showWebsiteURL()
+        })
+        showWebsiteURL()
+
+        $("form").submit(function(){
+            $.LoadingOverlay("show")
+        }); 
\ No newline at end of file

views/DE/account/profile.pug

 doctype html
 html(lang="de")
   head
-    title= "User Profile"
+    title= "Benutzerprofil"
     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="/css/bootstrap.min.css")
@@ -16,12 +16,12 @@ 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="/account/")
-                                    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="/account/profile")
                                     i(class="fa fa-user fa-fw" style="color:black;")
                                     span(class="d-none d-md-inline" style="color:black;") Benutzerprofil
-                            if user.m4lab_idp == 1
+                            if user.is_m4lab_idp
                                 li(class="nav-item")
                                     a(class="nav-link pl-0" href="/account/security")
                                         i(class="fa fa-lock fa-fw")
@@ -35,14 +35,20 @@ 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 successes
-                    for success in successes
-                        div.alert.alert-success.alert-dismissible #{ success }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
-                if errors
-                    for error, i in errors
-                        div.alert.alert-danger.alert-dismissible.fade.show #{ error }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+                nav(aria-label="breadcrumb")
+                    ol(class="breadcrumb")
+                        li(class="breadcrumb-item")
+                            a(href="/account") Konto
+                        li(class="breadcrumb-item active" aria-current="page") Benutzerprofil
+
+                if flash.success
+                    div.alert.alert-success.alert-dismissible #{flash.success}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+                if flash.error
+                    div.alert.alert-danger.alert-dismissible.fade.show #{flash.error}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
+
+                h3(class="pb-2") Mein Profil
                 form#profileForm(method="POST", action="/updateProfile")
                     div(class="form-row")
                         div(class='form-group col-md-2')
@@ -73,14 +79,14 @@ html(lang="de")
                                     }
                         div(class='form-group col-md-2')
                             label(for="firstname") Vorname
-                            input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname", value=user.firstname, maxlength="45" required)
+                            input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname", value=user.firstName, maxlength="45" required)
                         div(class='form-group col-md-2')
                             label(for="lastname") Nachname
-                            input#inputLastname(name="inputLastname", type="text", class="form-control", placeholder="Nachname", value=user.lastname, maxlength="45" required)
+                            input#inputLastname(name="inputLastname", type="text", class="form-control", placeholder="Nachname", value=user.lastName, maxlength="45" required)
                     div(class="form-row")
                         div(class='form-group col-md-8')
                             label(for="email") E-mail Adresse
-                            input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="Email", value=email, maxlength="45" required)
+                            input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="Email", value=user.email, maxlength="45" required)
                     div(class="form-row")
                         div(class='form-group col-md-8')
                             label(for="organisation") Unternehmen

views/DE/account/registration.pug

@@ -21,14 +21,12 @@ html(lang="de")
                 div(class="alert alert-info" role="alert")
                     | Auf dieser Seite können sich Benutzer, die keinen Account an der HFT haben, registrieren.<br/>
                     | Um sich mit ihrem HFT-Account anzumelden, klicken Sie <a class="font-weight-bold" href="https://transfer.hft-stuttgart.de/account/">hier</a>.
-                if successes
-                    for success in successes
-                        div.alert.alert-success.alert-dismissible #{ success }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
-                if errors
-                    for error, i in errors
-                        div.alert.alert-danger.alert-dismissible.fade.show #{ error }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
+                if flash.success
+                    div.alert.alert-success.alert-dismissible #{flash.success}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
+                if flash.error
+                    div.alert.alert-danger.alert-dismissible.fade.show #{flash.error}
+                        a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
                 form(method="POST")
                     h5(class="pt-2 mb-3 font-weight-bold") Anmeldedaten
                     div(class='form-row')