put DE and EN pages in different folder

views/DE/forgotPwd.pug

+doctype html
+html(lang="de")
+  head
+    title= "Forgot Password"
+    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")
+    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/custom/login.css")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+  body
+    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") ×
+                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")
+                        input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="E-Mail-Adresse" required)                  
+                    br
+                    input(type="submit", class="btn btn-outline-dark btn-block", value="Passwort zurücksetzen")
+
+    // 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")
+    // 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://transfer.hft-stuttgart.de/js/headfoot.js")

views/DE/home.pug

+doctype html
+html(lang="de")
+  head
+    title= "User Account"
+    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")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+  body
+    div(class="container-fluid")
+        div(class="row")
+            div(class="col-3")
+                h5
+                    span #{user.firstname} #{user.lastname}
+                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                    a(class="nav-link" href="#" aria-selected="true") Benutzerprofil
+                    a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen
+                    a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste
+            div(class="col-sm-9")
+                p content goes here
+                
+    // 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")
+    // 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/headfootLogout.js")
\ No newline at end of file

views/DE/profile.pug

+doctype html
+html(lang="de")
+  head
+    title= "User Profile"
+    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")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+  body
+    div(class="container-fluid")
+        div(class="row")
+            div(class="col-3")
+                h5
+                    span #{user.firstname} #{user.lastname}
+                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                    a(class="nav-link" href="#" aria-selected="true") Benutzerprofil
+                    a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen
+                    a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste
+            div(class="col-sm-9")
+                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") ×
+                form#profileForm(method="POST", action="/updateProfile")
+                    div(class="form-row")
+                        div(class='form-group col-md-2')
+                            label(for="title") Titel
+                            select#inputTitle(name="inputTitle", class="form-control", value=user.title)
+                                option(value="Prof.") Prof.
+                                option(value="Dr.") Dr.
+                                option(value="Dipl.-Ing.") Dipl.-Ing.
+                                option(value="etc.") etc.
+                                script.
+                                    var titleOptions = document.getElementById('inputTitle').options;
+                                    for (i=0; i < titleOptions.length; i++) {
+                                        if (titleOptions[i].value == '#{user.title}')
+                                            titleOptions[i].selected = true;
+                                    }
+                        div(class='form-group col-md-3')
+                            label(for="firstname") Vorname
+                            input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname", value=user.firstname required)
+                        div(class='form-group col-md-3')
+                            label(for="lastname") Nachname
+                            input#inputLastname(name="inputLastname", type="text", class="form-control", placeholder="Nachname", value=user.lastname required)
+                    div(class="form-row")
+                        div(class='form-group col-md-8')
+                            label(for="email") Email
+                            input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="Email", value=email required)
+                    div(class="form-row")
+                        div(class='form-group col-md-8')
+                            label(for="organisation") Unternehmen
+                            input#inputOrganisation(name="inputOrganisation", type="text", class="form-control", placeholder="Unternehmen", value=user.organisation)
+                    div(class="form-row")
+                        div(class='form-group col-md-8')
+                            label(for="industry") Branche
+                            input#inputIndustry(name="inputIndustry", type="text", class="form-control", placeholder="Branche", value=user.industry)
+                    div(class="form-row")
+                        div(class='form-group col-md-8')
+                            label(for="speciality") Fachgebiete
+                            input#inputSpeciality(name="inputSpeciality", type="text", class="form-control", placeholder="Fachgebiete", value=user.speciality)                    
+                    input(type="submit", class="btn btn-primary", value="Update")
+
+    // 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")
+    // 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/headfootLogout.js")
\ No newline at end of file

views/DE/registration.pug

+doctype html
+html(lang="de")
+  head
+    title= "Create New Account"
+    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")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+        .warning {
+            color: red;
+            font-size: 11px;
+        }
+  body
+    div(class="container-fluid")
+        div(class="row")
+            div(class="col-md-6 offset-md-2")
+                h3(class="mb-3 font-weight-bold") Neues Benutzerkonto anlegen
+            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") ×
+                form(method="POST")
+                    h5(class="mb-3 font-weight-bold") Anmeldedaten
+                    div(class='form-row')
+                        div(class='form-group col-md-6')
+                            input#inputEmail(name="inputEmail", type="email", class="form-control", placeholder="E-Mail-Adresse*" required)
+                            span#emailWarning(class='warning')
+                        div(class="form-group col-md-6")
+                            input#inputPassword(name="inputPassword", type="password", class="form-control", data-toggle="password", placeholder="Passwort*" required)
+                            span#passwordWarning(class='warning')
+                    h5(class="mb-3 font-weight-bold") Benutzerprofil
+                    div(class="form-row")
+                        div(class='form-group col-md-2')
+                            select#inputSalutation(name="inputSalutation", class="form-control")
+                                option(value="") - Anrede -
+                                option(value="Herr") Herr
+                                option(value="Frau") Frau
+                                option(value="Divers") Divers
+                        div(class='form-group col-md-2')
+                            select#inputTitle(name="inputTitle", class="form-control")
+                                option(value="") - Titel -
+                                option(value="Prof.") Prof.
+                                option(value="Dr.") Dr.
+                                option(value="Dipl.-Ing.") Dipl.-Ing.
+                                option(value="etc.") etc.
+                        div(class='form-group col-md-4')
+                            input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname*" required)
+                        div(class='form-group col-md-4')
+                            input#inputLastname(name="inputLastname", type="text", class="form-control", placeholder="Nachname*" required)
+                    div(class="form-group")
+                        input#inputOrganisation(name="inputOrganisation", type="text", class="form-control", placeholder="Unternehmen")
+                    div(class="form-group")
+                        input#inputIndustry(name="inputIndustry", type="text", class="form-control", placeholder="Branche")
+                    div(class="form-group")
+                        input#inputSpeciality(name="inputSpeciality", type="text", class="form-control", placeholder="Fachgebiete")
+                    p <em><small>* Pflichtfeld</small></em>
+                    input#submitBtn(type="submit", class="btn btn-outline-dark btn-block", value="Senden" disabled)
+                br
+                p(class="text-center") Sie haben bereits ein Benutzerkonto? <a href="/">Melden Sie sich hier an</a>.
+                    
+
+    // 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")
+    // Bootstrap
+    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
+    // toggle password
+    script(src='https://unpkg.com/bootstrap-show-password@1.2.1/dist/bootstrap-show-password.min.js')
+    // M4_LAB
+    script(src="/js/generalFunction.js")
+    script(src="/js/registration.js")
+    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
\ No newline at end of file

views/DE/reset.pug

+doctype html
+html(lang="de")
+  head
+    title= "Reset Password"
+    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")
+    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/custom/login.css")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+  body
+    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") ×
+                form#forgotForm(method="POST", class="form-signin")
+                    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")
+                        input#inputNewPwd(name="inputNewPwd", type="password", class="form-control", placeholder="Neues Passwort" required)
+                        span#recommendation(class='warning')
+                        input#inputConfirm(name="inputConfirm", type="password", class="form-control", placeholder="Passwort bestätigen" required)
+                        span#message(class='warning')
+                    input#updateBtn(type="submit", class="btn btn-outline-dark btn-block", 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")
+    // 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/security.js")
+    script(src="/js/generalFunction.js")
+    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")

views/DE/security.pug

+doctype html
+html(lang="de")
+  head
+    title= "User Profile"
+    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")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+        .warning {
+            font-size: 11px;
+        }
+  body
+    div(class="container-fluid")
+        div(class="row")
+            div(class="col-3")
+                h5
+                    span #{user.firstName} #{user.lastName}
+                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                    a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil
+                    a(class="nav-link" href="#" aria-selected="false") Sicherheitseinstellungen
+                    a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste
+            div(class="col-sm-9")
+                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") ×
+                form(class="needs-validation", method="post", action="/account/changePwd" novalidate)
+                    div(class="form-group row")
+                        label(for="currPwd") Aktuelles Passwort
+                        input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)
+                        div(class="invalid-feedback") Please fill in this field.
+                    div(class="form-group row")
+                        label(for="newPwd") Neues Passwort
+                        input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
+                        span#recommendation
+                        div(class="invalid-feedback") Please fill in this field.
+                    div(class="form-group row")
+                        label(for="confirm") Bestätigen Sie das neue Passwort
+                        input#inputConfirm(name="inputConfirm", type="password", class="form-control" required)
+                        span#message
+                        div(class="invalid-feedback") Please fill in this field.
+                    input#updateBtn(type="submit", class="btn btn-primary", value="Update Password" 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")
+    // 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/security.js")
+    script(src="/js/generalFunction.js")
+    script(src="/js/headfootLogout.js")
+    script.
+        // check input fields
+        'use strict';
+        window.addEventListener('load', function() {
+            // Fetch all the forms we want to apply custom Bootstrap validation styles to
+            var forms = document.getElementsByClassName('needs-validation');
+            // Loop over them and prevent submission
+            var validation = Array.prototype.filter.call(forms, function(form) {
+                form.addEventListener('submit', function(event) {
+                    if (form.checkValidity() === false) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    form.classList.add('was-validated');
+                }, false);
+            });
+        }, false);

views/DE/services.pug

+doctype html
+html(lang="de")
+  head
+    title= "User Profile"
+    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")
+    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
+    style.
+        .collapse {
+            display: none;
+        }
+        .collapse.in {
+            display: block;
+        }
+        .collapsing {
+            position: relative;
+            height: 0;
+            overflow: hidden;
+            -webkit-transition-timing-function: ease;
+            -o-transition-timing-function: ease;
+            transition-timing-function: ease;
+            -webkit-transition-duration: .35s;
+            -o-transition-duration: .35s;
+            transition-duration: .35s;
+            -webkit-transition-property: height,visibility;
+            -o-transition-property: height,visibility;
+            transition-property: height,visibility;
+        }
+  body
+    div(class="container-fluid")
+        div(class="row")
+            div(class="col-3")
+                h5
+                    span #{user.firstName} #{user.lastName}
+                div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
+                    a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil
+                    a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen
+                    a(class="nav-link" href="#" aria-selected="false") Projekte und Dienste
+            div(class="col-sm-9")
+                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") ×
+                table
+                    for item in project
+                        tr
+                            td <strong>#{item.title}</strong>
+                            if item.userStatus
+                                td
+                                    button(type="button", class="btn btn-secondary", onclick="unsubscribe()") Projektbeteiligung beenden
+                            else
+                                td
+                                    button(type="button", class="btn btn-success", onclick="subscribe()") Am Projekt beteiligen
+                        tr
+                            td(colspan="2") #{item.summary}
+                        tr
+                            td(colspan="2") <i>Ansprechpartner: #{item.cp}</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")
+    // 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/headfootLogout.js")
+    script.
+        function subscribe() {
+            alert("To be implemented: Ihre Anfrage wird an den zuständigen Projektleiter gesendet.")
+        }
+        function unsubscribe() {
+            alert("To be implemented: Ihre Projektbeteiligung wurde beendet und der zuständige Projektleiter in Kenntnis gesetzt.")
+        }
\ No newline at end of file

views/EN/404.pug

+extends error
+
+block content
+  h2 Cannot find #{url}
\ No newline at end of file

views/EN/500.pug

+extends error
+
+block content
+  h1 Error: #{error.message}
+  if settings['verbose errors']
+    pre= error.stack
+  else
+    p An error ocurred!
\ No newline at end of file

views/EN/error.pug

+html
+  head 
+    title Error
+  body
+    h1 An error occurred!
+    block content
\ No newline at end of file

views/home.pug → views/EN/home.pug

@@ -34,7 +34,7 @@ html(lang="en")
                 h5
                     span #{greeting}
                 div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
-                    a(class="nav-link" href="#" aria-selected="true") Profile
+                    a(class="nav-link" href="#" aria-selected="true") #{i18n.__(Profile)}
                     a(class="nav-link" href="/account/security" aria-selected="false") Security
                     a(class="nav-link" href="/account/services" aria-selected="false") Services
             div(class="col-sm-9")

views/EN/layout.pug

+doctype html
+html
+    head
+        title PassportJS SAML example
+        block links
+            link(rel='stylesheet', href='bower_components/bootstrap/dist/css/bootstrap.css')
+    body
+        div.container
+            block content
+        script(src='bower_components/jquery/dist/jquery.min.js')
+        script(src='bower_components/bootstrap/dist/js/bootstrap.min.js')
+        block scripts