Devel

project page collapsible added

config/config.js

@@ -9,8 +9,8 @@ module.exports = {
       saml: {
         path: process.env.SAML_PATH || '/saml/SSO',
         entryPoint: process.env.SAML_ENTRY_POINT || 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SSOService.php',
-        //issuer: 'sp-account.m4lab.hft-stuttgart.de', //local metadata
-        issuer: 'sp-account-testing.m4lab.hft-stuttgart.de', //testing metadata
+        issuer: 'sp-account.m4lab.hft-stuttgart.de', //local metadata
+        //issuer: 'sp-account-testing.m4lab.hft-stuttgart.de', //testing metadata
         //issuer: 'sp-account-prod.m4lab.hft-stuttgart.de', //production metadata
         logoutUrl: 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SingleLogoutService.php'
       }
@@ -22,6 +22,7 @@ module.exports = {
       port: 3306,                 // MySQL port
       dbUser: 'userdb',           // User DB
       host_project: 'm4lab.hft-stuttgart.de', // DB host project db
+      //host_project: 'localhost', // local
       dbProject: 'projectDB'     // Project DB
     },
     mailer: {

config/config.js

@@ -9,8 +9,8 @@ module.exports = {
       saml: {
         path: process.env.SAML_PATH || '/saml/SSO',
         entryPoint: process.env.SAML_ENTRY_POINT || 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SSOService.php',
-        //issuer: 'sp-account.m4lab.hft-stuttgart.de', //local metadata
-        issuer: 'sp-account-testing.m4lab.hft-stuttgart.de', //testing metadata
+        issuer: 'sp-account.m4lab.hft-stuttgart.de', //local metadata
+        //issuer: 'sp-account-testing.m4lab.hft-stuttgart.de', //testing metadata
         //issuer: 'sp-account-prod.m4lab.hft-stuttgart.de', //production metadata
         logoutUrl: 'https://m4lab.hft-stuttgart.de/idp/saml2/idp/SingleLogoutService.php'
       }
@@ -22,6 +22,7 @@ module.exports = {
       port: 3306,                 // MySQL port
       dbUser: 'userdb',           // User DB
       host_project: 'm4lab.hft-stuttgart.de', // DB host project db
+      //host_project: 'localhost', // local
       dbProject: 'projectDB'     // Project DB
     },
     mailer: {

routes/routes-account.js

@@ -62,12 +62,12 @@ module.exports = function (app, config, passport, i18n) {
         failureFlash: true
       }),
     function (req, res) {
-      res.redirect('/account/');
+      res.redirect('/');
     }
   );
 
   // to generate Service Provider's XML metadata
-  app.get('/saml/metadata', 
+  app.get('/saml/metadata',
     function(req, res) {
       res.type('application/xml');
       var spMetadata = samlStrategy.generateServiceProviderMetadata(fs.readFileSync(__dirname + '/cert/cert.pem', 'utf8'));
@@ -104,8 +104,8 @@ module.exports = function (app, config, passport, i18n) {
         }
       })
     } else {
-      res.redirect('/account/login'); // localhost
-    } 
+      res.redirect('/login'); // localhost
+    }
   });
 
   app.get('/login',
@@ -118,14 +118,14 @@ module.exports = function (app, config, passport, i18n) {
 
   app.get('/logout', function (req, res) {
     if (req.user == null) {
-      return res.redirect('/account/');
+      return res.redirect('/');
     }
 
     req.user.nameID = req.user.id;
     req.user.nameIDFormat = req.user.idFormat;
     return samlStrategy.logout(req, function(err, uri) {
       req.logout();
-      
+
       if ( req.session ) {
         req.session.destroy((err) => {
           if(err) {
@@ -133,7 +133,7 @@ module.exports = function (app, config, passport, i18n) {
           }
         });
       }
-     
+
       return res.redirect(uri);
     });
   });
@@ -149,7 +149,7 @@ module.exports = function (app, config, passport, i18n) {
         }
       })
     } else {
-      res.redirect('/account/login');
+      res.redirect('/login');
     }
   });
 
@@ -183,7 +183,7 @@ module.exports = function (app, config, passport, i18n) {
         // 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)
@@ -213,7 +213,7 @@ module.exports = function (app, config, passport, i18n) {
         }
       ])
     } else {
-      res.redirect('/account/login');
+      res.redirect('/login');
     }
   });
 
@@ -223,7 +223,7 @@ module.exports = function (app, config, passport, i18n) {
         user: req.user // useful for view engine, useless for HTML
       });
     } else {
-      res.redirect('/account/login');
+      res.redirect('/login');
     }
   });
 
@@ -238,7 +238,7 @@ module.exports = function (app, config, passport, i18n) {
       industry: req.body.inputIndustry,
       speciality: req.body.inputSpeciality,
     }
-    
+
     if (req.isAuthenticated()) {
       if (userData.email) {
         dbconn.user.query('UPDATE user SET ? WHERE email = "' +userData.email+'"', userData, function (err, rows, fields) {
@@ -250,14 +250,14 @@ module.exports = function (app, config, passport, i18n) {
               //req.flash('success', 'Profile updated!');
               req.flash('success', 'Ihr Benutzerprofil wurde aktualisiert!');
             }
-            res.redirect('/account/profile');
+            res.redirect('/profile');
         })
       }
     } else {
-      res.redirect('/account/login');
+      res.redirect('/login');
     }
   });
-  
+
   app.post('/changePwd', function (req, res) {
     if (req.isAuthenticated()) {
       var currPwd = req.body.inputCurrPwd
@@ -269,27 +269,32 @@ module.exports = function (app, config, passport, i18n) {
           // Load hashed passwd from DB
           dbconn.user.query('SELECT password FROM credential WHERE user_id='+userId, function (err, rows, fields) {
             if (err) {
-              res.redirect('/500')
-              throw err
+              console.error(err)
+              res.status(500).render(lang+'/500', {
+                error: err
+              })
             }
             var userPwd = rows[0].password
 
             // check if the password is correct
             bcrypt.compare(currPwd, userPwd, function(err, isMatch) {
               if (err) {
-                res.redirect('/500')
-                throw err
+                console.error(err)
+                res.status(500).render(lang+'/500', {
+                  error: err
+                })
               }
               else if (!isMatch) {
                 //req.flash('error', "Sorry, your password was incorrect. Please double-check your password.")
                 req.flash('error', "Das Passwort ist leider falsch. Bitte überprüfen Sie Ihre Eingabe.")
                 //res.redirect('/security')
-                res.redirect('/account/security')
+                res.redirect('/security')
               }
               else {
                 if ( newPwd != retypePwd ) {
-                  req.flash('error', "Passwords do no match. Please make sure you re-type your new password correctly.")
-                  res.redirect('/account/security')
+                  //req.flash('error', "Passwords do no match. Please make sure you re-type your new password correctly.")
+                  req.flash('error', 'Passwörter stimmen nicht überein. Bitte stellen Sie sicher, dass Sie das Passwort beide Male genau gleich eingeben.')
+                  res.redirect('/security')
                 }
                 else {
                   // update password
@@ -318,19 +323,19 @@ module.exports = function (app, config, passport, i18n) {
                             }
                           });
                         }
-                        res.redirect('/account/security')
+                        res.redirect('/security')
                       })
                     });
                   });
                 }
               }
-          }) 
+          })
         })
         }
-      })  
+      })
     }
     else {
-      res.redirect('/account/login');
+      res.redirect('/login');
     }
   });
 
@@ -348,7 +353,7 @@ module.exports = function (app, config, passport, i18n) {
       "we've received a request to reset your password. However, this email address is not on our database of registered users.\n\n"+
       "Thanks,\nM4_LAB Team";
     var emailSubject = "Account Access Attempted"; */
-    
+
     async.waterfall([
       function(done) {
         crypto.randomBytes(20, function(err, buf) {
@@ -406,7 +411,7 @@ module.exports = function (app, config, passport, i18n) {
         req.flash('success', 'Wenn Ihre E-Mail-Adresse registriert ist, wurde eine E-Mail mit dem weiteren Vorgehen an ' + emailAddress + ' versendet.');
       }
       //res.redirect('/forgotPwd'); // deployment
-      res.redirect('/account/forgotPwd'); // localhost
+      res.redirect('/forgotPwd'); // localhost
     });
   });
 
@@ -416,7 +421,7 @@ module.exports = function (app, config, passport, i18n) {
         //req.flash('error', 'Password reset token is invalid or has expired.');
         req.flash('error', 'Der Schlüssel zum zurücksetzen des Passworts ist ungültig oder abgelaufen.');
         //res.redirect('/forgotPwd'); // deployment
-        res.redirect('/account/forgotPwd'); // localhost
+        res.redirect('/forgotPwd'); // localhost
       }
       else {
         res.render(lang+'/account/reset');
@@ -455,7 +460,7 @@ module.exports = function (app, config, passport, i18n) {
                   }
                 });
                 // redirect to login page
-                res.redirect('/account/login')
+                res.redirect('/login')
               }
             })
           });
@@ -463,10 +468,10 @@ module.exports = function (app, config, passport, i18n) {
       }
       else {
         req.flash('error', "User not found.")
-        res.redirect('/account/login')
+        res.redirect('/login')
       }
     });
-   
+
   });
 
   // todo: user registration with captcha
@@ -507,9 +512,9 @@ module.exports = function (app, config, passport, i18n) {
           }
           else {
             //req.flash('success', 'Your account has been created. Please log in.')
-            req.flash('success', 'Ihr Benutzerkonto wurde angelegt. Bitte melden Sie sich an.') 
+            req.flash('success', 'Ihr Benutzerkonto wurde angelegt. Bitte melden Sie sich an.')
           }
-          res.redirect('/account/registration');
+          res.redirect('/registration');
         })
       });
     });

routes/routes-project.js

@@ -2,6 +2,8 @@ const methods = require('./methods')
 const async = require('async')
 const helpers = require('./helpers')
 
+const pictSizeLimit = 1000000 // 1 MB
+
 module.exports = function (app) {
  
   // ======== APP ROUTES - PROJECT ====================
@@ -104,7 +106,7 @@ module.exports = function (app) {
       res.render(lang+'/project/addProjectOverview')
     }
     else {
-      res.redirect('/account/login')
+      res.redirect('/login')
     }
   })
   
@@ -144,7 +146,7 @@ module.exports = function (app) {
         if (err) {
           //req.flash('error', "Failed")
           req.flash('error', "Fehlgeschlagen")
-          res.redirect('/account/addProjectOverview');
+          res.redirect('/addProjectOverview');
         }
         else {
           req.flash('success', 'Your project has been created.')
@@ -160,13 +162,45 @@ module.exports = function (app) {
       if (req.body.wiki)
         wiki = 1
 
+      var projectLogo = req.files.logo
+      var projectPicture = req.files.src
+      var projectLogoPath, projectPicturePath
+      
+      if (projectLogo) {
+        // raise error if size limit is exceeded
+        if (projectLogo.size === pictSizeLimit) {
+          req.flash('error', 'Projektlogo exceeds 1 MB');
+          res.redirect('/addprojectoverview');
+        }
+        else {
+          // TEST PATH FOR DEVELOPMENT (LOCALHOST)
+          projectLogoPath = './folder-in-server-to-save-projektlogo/'+req.body.pname+'/'+projectLogo.name
+          // PATH FOR TEST/LIVE SERVER
+          // var projectLogoPath = to-be-defined
+        }
+      }
+      if (projectPicture) {
+        // raise error if size limit is exceeded
+        if (projectPicture.size === pictSizeLimit) {
+          req.flash('error', 'Projektbild exceeds 1 MB');
+          res.redirect('/addprojectoverview');
+        }
+        else {
+          // TEST PATH FOR DEVELOPMENT (LOCALHOST)
+          projectPicturePath = './folder-in-server-to-save-projektbild/'+req.body.pname+'/'+projectPicture.name
+          // PATH FOR TEST/LIVE SERVER
+          // var projectPicturePath = to-be-defined
+        }
+        
+      }
+      
       var projectTerm = req.body.termForm + " - " + req.body.termTo
       var projectOverviewData = {
         pname: req.body.pname,
         title: req.body.title,
         onelinesummary: req.body.summary,
         category: req.body.category,
-        logo: req.body.logo,
+        logo: projectLogoPath,
         gitlab: req.body.gitlabURL,
         wiki: wiki,
         overview: req.body.overview,
@@ -178,7 +212,7 @@ module.exports = function (app) {
         term: projectTerm,
         further_details: req.body.furtherDetails,
         website: req.body.website,
-        src: req.body.src,
+        src: projectPicturePath,
         caption: req.body.caption,
         contact_lastname: req.body.contactName,
         contact_email: req.body.contactEmail,
@@ -186,6 +220,28 @@ module.exports = function (app) {
         leader_email: req.body.leaderEmail
       }
       
+      // save pictures
+      if (projectLogo) {
+        projectLogo.mv(projectLogoPath, function(err) {
+          if (err) {
+            console.error(err)
+            res.status(500).render(lang+'/500', {
+              error: err
+            })
+          }
+        });
+      }
+      if (projectPicture) {
+        projectPicture.mv(projectPicturePath, function(err) {
+          if (err) {
+            console.error(err)
+            res.status(500).render(lang+'/500', {
+              error: err
+            })
+          }
+        });
+      }
+
       /* RS: Temporary solution while Project DB is still in early phase.
               When User DB and Project DB are integrated and quite stabil, this operation should be done in 1 transaction.
       */
@@ -224,7 +280,7 @@ module.exports = function (app) {
             if (err) {
               //req.flash('error', "Failed")
               req.flash('error', "Fehlgeschlagen")
-              res.redirect('/account/addProjectOverview');
+              res.redirect('/addProjectOverview');
             }
             else {
               req.flash('success', 'Your project has been created.')

views/DE/account/home.pug

@@ -34,9 +34,9 @@ html(lang="de")
                 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="/account/services" aria-selected="false") Projekte und Dienste
+                    a(class="nav-link" href="/profile" aria-selected="true") Benutzerprofil
+                    a(class="nav-link" href="/security" aria-selected="false") Sicherheitseinstellungen
+                    a(class="nav-link" href="/services" aria-selected="false") Projekte und Dienste
                     a(class="nav-link" href="/logout" aria-selected="false") Logout
             div(class="col-sm-9")
                 p content goes here

views/DE/account/profile.pug

@@ -35,8 +35,8 @@ html(lang="de")
                     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
+                    a(class="nav-link" href="/security" aria-selected="false") Sicherheitseinstellungen
+                    a(class="nav-link" href="/services" aria-selected="false") Projekte und Dienste
                     a(class="nav-link" href="/logout" aria-selected="false") Logout
             div(class="col-sm-9")
                 if successes
@@ -47,7 +47,7 @@ html(lang="de")
                     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="/account/updateProfile")
+                form#profileForm(method="POST", action="/updateProfile")
                     div(class="form-row")
                         div(class='form-group col-md-2')
                             label(for="title") Anrede

views/DE/account/security.pug

@@ -37,9 +37,9 @@ html(lang="de")
                 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="/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
+                    a(class="nav-link" href="/services" aria-selected="false") Projekte und Dienste
                     a(class="nav-link" href="/logout" aria-selected="false") Logout
             div(class="col-sm-9")
                 if successes
@@ -50,7 +50,7 @@ html(lang="de")
                     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)
+                form(class="needs-validation", method="post", action="/changePwd" novalidate)
                     div(class="form-group row")
                         label(for="currPwd") Aktuelles Passwort
                         input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)

views/DE/account/services.pug

@@ -34,8 +34,8 @@ html(lang="de")
                 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="/profile" aria-selected="true") Benutzerprofil
+                    a(class="nav-link" href="/security" aria-selected="false") Sicherheitseinstellungen
                     a(class="nav-link" href="#" aria-selected="false") Projekte und Dienste
                     a(class="nav-link" href="/logout" aria-selected="false") Logout
             div(class="col-sm-9")

views/DE/project/addProjectOverview.pug

@@ -43,12 +43,12 @@ html(lang="de")
                     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")
+                form(method="POST" encType="multipart/form-data")
                     div(class='form-row')
                         div(class='form-group col-md-12')
-                            input#inputPname(name="pname" class="form-control" type="text" placeholder="Projekttitel*" required)
+                            input#inputPname(name="title" class="form-control" type="text" placeholder="Projekttitel*" required)
                         div(class="form-group col-md-12")
-                            input#inputTitle(name="title" class="form-control" type="text" placeholder="Akronym*" required)
+                            input#inputTitle(name="pname" class="form-control" type="text" placeholder="Akronym*" required)
                         div(class="form-group col-md-12")
                             input#inputSummary(name="summary" class="form-control" type="text" placeholder="Kurzbeschreibung")
                         div(class='form-group col-md-12')
@@ -59,7 +59,10 @@ html(lang="de")
                                 option(value="Lehr Projekt") Lehr Projekt
                                 option(value="Transfer-projekt") Transfer-projekt
                         div(class="form-group col-md-12")
-                            input#inputLogo(name="logo" class="form-control" type="text" placeholder="Projektlogo, to be implemented: upload picture")
+                            div(class='form-group row')
+                                label(for="projectLogo" class="col-sm-3 col-form-label") Projektlogo (max. 1 MB)
+                                div(class="col-md-9")
+                                    input#inputLogo(name="logo" class="form-control" type="file")
                         div(class="form-group col-md-12")
                             div(class="input-group mb-3")
                                 input#inputGitlabURL(name="gitlabURL" type="text" class="form-control" placeholder="M4_LAB GitLab Project URL, z.B. https://transfer.hft-stuttgart.de/gitlab/username/projectname")
@@ -85,12 +88,11 @@ html(lang="de")
                         div(class='form-group col-md-12')
                             input#inputAnnouncement(name="announcement" class="form-control" type="text" rows="5" placeholder="Ausschreibung")
                         div(class="form-group col-md-12")
-                            div(class='form-row')
-                                div(class="form-group col-md-2")
-                                    <p class="font-weight-normal">Laufzeit</p>
-                                div(class="form-group col-md-5")
+                            div(class='form-group row')
+                                label(for="projectLogo" class="col-sm-2 col-form-label") Laufzeit
+                                div(class="col-md-5")
                                     input#inputTermFrom(name="termForm" class="form-control" type="text" placeholder="von (dd.mm.yyyy)")
-                                div(class="form-group col-md-5")
+                                div(class="col-md-5")
                                     input#inputTermTo(name="termTo" class="form-control" type="text" placeholder="bis (dd.mm.yyyy)")
                         div(class='form-group col-md-12')
                             textarea#inputFurtherDetails(name="furtherDetails" class="form-control" type="text" rows="5" placeholder="Weitere Informationen (bspw. Links zu Berichten)")
@@ -99,7 +101,10 @@ html(lang="de")
                     h5(class="mb-3 font-weight-bold") Bilder
                     div(class='form-row')
                         div(class="form-group col-md-12")
-                            input#inputSrc(name="src" class="form-control" type="text" placeholder="To be implemented: upload picture")
+                            div(class='form-group row')
+                                label(for="projectPicture" class="col-sm-3 col-form-label") Projektbild (max. 1 MB)
+                                div(class="col-md-9")
+                                    input#inputSrc(name="src" class="form-control" type="file")
                         div(class="form-group col-md-12")
                             input#inputCaption(name="caption" class="form-control" type="text" placeholder="Bildunterschrift/Bildquelle")
                     h5(class="mb-3 font-weight-bold") Kontakt

views/DE/project/project-simplified.pug

@@ -7,35 +7,39 @@ html(lang="de")
     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;
-        }
+      .help .card-title > a:before {
+        float: right !important;
+        content: "-";
+        padding-right: 5px;
+      }
+      .help .card-title > a.collapsed:before {
+          float: right !important;
+          content: "+";
+      }
+      .help h3 > a {
+        color: #8a348b;
+        text-decoration: none;
+        display: block;
+      }
+      .help a {
+          display: inline;
+      }
+      .help .card > .card-header {
+        color: #fff;
+      }
+      .card-title {
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+      }
+      #infoicon {
+        color: #8a348b;
+      }
   body
     include project.html
 
 
     // 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
@@ -44,4 +48,5 @@ html(lang="de")
     if isUserAuthenticated
         script(src="/js/headfootLogout.js")
     else
-        script(src="/js/headfoot.js")
\ No newline at end of file
+        script(src="/js/headfoot.js")
+        

views/DE/project/project.html

-        <div class="container">
-            <hr />
-            <!-- text: Zweck dieser Seite / purpose of this page -->
-            <i class="fas fa-info-circle"></i> Diese Seite bietet den Einstieg zu den unterschiedlichen Projekten, die in unserem Portal für die Öffentlichkeit bereitgestellt werden.
-            Für diesen Zweck steht zur Zeit ein Dienst bereit: eine von der HFT selbst verwaltete Gitlab-Instanz.
-            Alle der in diesem Gitlab erfassten Projektinhalte unterliegen einer Open Source bzw. Open Data Lizenz.
-            <p>Hinweis: Die Nutzeroberfläche von GitLab ist in Englisch.</p>
+<div class="container">
+    <hr />
+    <!-- text: Zweck dieser Seite / purpose of this page -->
+    <div>
+        <i id="infoicon" class="fas fa-info-circle fa-lg"></i> 
+        Diese Seite bietet den Einstieg zu den unterschiedlichen Projekten, die in
+        unserem Portal für die Öffentlichkeit bereitgestellt werden.
+        Für diesen Zweck steht zur Zeit ein Dienst bereit: eine von der HFT selbst verwaltete Gitlab-Instanz.
+        Alle der in diesem Gitlab erfassten Projektinhalte unterliegen einer Open Source bzw. Open Data Lizenz.
+        <p class="font-italic"><b>Hinweis: </b>Die Nutzeroberfläche von GitLab ist in Englisch.</p>
+    </div>
 
-            <!-- link: Gitlab Projekte / Gitlab project list -->
-            <h2> Direkteinstieg </h2>
-            <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> <i class="fas fa-chevron-right">Gitlab Projects</i></a>
-            
-            <!-- text: Hilfestellung zu Gitlab / short help about Gitlab -->
-            <hr />
-            <h2> Hilfestellung zu GitLab </h2>
 
-            <h3> <i class="fas fa-question-circle"></i> Möchten Sie die Projektinhalte ansehen oder herunterladen? </h3>
-            <p>
-                Dann klicken Sie auf diesen <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a> um die Liste aller im Gitlab erfassten Projekte zu sehen.
-                Vor dort können Sie dann auf die einzelnen Projekte zugreifen.
-                Ein Anmelden am Portal ist dazu nicht nötig.
-            </p>
-            
-            <h3> <i class="fas fa-question-circle"></i> Möchten Sie zu einem Projekt beitragen? </h3>	
-            <p>
-            Wenn Sie dem Projekteigentümer eine Rückmeldung bzw. einen Fehler melden wollen, navigieren Sie im Gitlab zunächst zum entsprechenden Projekt.
-            Anschließend können Sie dann dort die Möglichkeit nutzen, ein neues "Issues" einzureichen.
-            Ein Anmelden am Portal ist dazu nicht nötig.
-            </p>
-            <p>
-            Wenn Sie darüberhinaus beitragen wollen, befolgen Sie bitte folgende Schritte:
-            </p>
-            <ol>
-                <li>
-                    Melden Sie sich bitte im Portal an. <br>
-                    Sofern Sie noch nicht als Nutzer im Portal eingetragen sind, wird das System Sie durch die Registrierung leiten. <br>
-                    Zur Anmeldung bzw. Registrierung gelangen Sie entweder über das Menü am oberen Seitenrand oder durch Klicken auf diesen <a href="https://m4lab.hft-stuttgart.de/account/"> <i class="fas fa-chevron-right">Link zum Benutzerkonto</i></a>.
-                </li>
-                <li>
-                    Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu gelangen.
-                </li>
-                <li>
-                    Fragen Sie beim Projekteigentümer um Zugang, indem Sie im Gitlab bei der entsprechende Projektseite auf den Link <em>Request Access</em> klicken. Solbald dieser ihre Anfrage bestätigt hat, können Sie loslegen.
-                </li>
-            </ol>
+    <!-- link: Gitlab Projekte / Gitlab project list -->
+    <h2> Direkteinstieg </h2>
+    <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> <i class="fas fa-chevron-right">Gitlab
+            Projects</i></a>
 
-            <h3> <i class="fas fa-question-circle"></i> Möchten Sie selbst ein Projekt anlegen, um es der Öffentlichkeit bereitzustellen? </h3>
-            
-            </p>
-            Vorraussetzung dazu ist, dass Sie aktives oder ehemaliges Mitglied der Hochschule für Technik sind, d.h. eine (noch) gültige HFT-Emailadresse haben.
-            Dann befolgen Sie bitte folgende Schritte:
-            </p>
-            
-            <ol>
-                <li>
-                    Melden Sie sich bitte im Portal an. <br>
-                    Sofern Sie noch nicht als Nutzer im Portal eingetragen sind, wird das System Sie durch die Registrierung leiten. <br>
-                    Zur Anmeldung bzw. Registrierung gelangen Sie entweder über das Menü am oberen Seitenrand oder durch Klicken auf diesen <a href="https://m4lab.hft-stuttgart.de/account/"> <i class="fas fa-chevron-right">Link zum Benutzerkonto</i></a>.
-                </li>
-                <li>
-                    Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu gelangen.
-                </li>
-                <li>
-                    Erstellen Sie dann in Gitlab ein neues Projekt durch Klicken auf den grünen <em>New Project</em>-Knopf und anschließendem Befolgen der Eingabemaske von Gitlab. <br>
-                    Weitere Hilfestellung zum Anlegen von Projekten in Gitlab finden Sie in der <a href="https://docs.gitlab.com/ee/gitlab-basics/create-project.html"> <i class="fas fa-chevron-right">Gitlab-Dokumentation</i></a>.
-                </li>
-            </ol>
-            
-            <!-- / content body -->
-        </div>
\ No newline at end of file
+    <!-- text: Hilfestellung zu Gitlab / short help about Gitlab -->
+    <hr />
+    
+    <h2>Hilfestellung zu GitLab</h2>
+
+    <br />
+    
+    <div class="help">
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">
+                    <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
+                        Möchten Sie die Projektinhalte ansehen oder herunterladen?</a>
+                </h3>
+            </div>
+            <div id="collapse1" class="card-body collapse">
+                <p>
+                    Dann klicken Sie auf diesen
+                    <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>
+                    die Liste aller im Gitlab erfassten Projekte zu sehen. Vor dort können Sie dann auf die einzelnen Projekte zugreifen. 
+                    Ein Anmelden am Portal ist dazu nicht nötig.
+                </p>
+            </div>
+        </div>
+
+        <br />
+        
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">
+                    <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
+                        Möchten Sie zu einem Projekt beitragen?</a>
+                </h3>
+            </div>
+            <div id="collapse2" class="card-body collapse">
+                <p>
+                    Wenn Sie dem Projekteigentümer eine Rückmeldung bzw. einen Fehler melden wollen, navigieren Sie im Gitlab zunächst zum entsprechenden Projekt.
+                    Anschließend können Sie dann dort die Möglichkeit nutzen, ein neues "Issues" einzureichen.
+                    Ein Anmelden am Portal ist dazu nicht nötig.
+                </p>
+                <p>
+                    Wenn Sie darüberhinaus beitragen wollen, befolgen Sie bitte folgende Schritte:
+                </p>
+                <ol>
+                    <li>
+                        Melden Sie sich bitte im Portal an. 
+                        <br />
+                        Sofern Sie noch nicht als Nutzer im Portal eingetragen sind, wird das System Sie durch die Registrierung leiten. 
+                        <br />
+                        Zur Anmeldung bzw. Registrierung gelangen Sie entweder über das Menü am oberen Seitenrand oder durch Klicken auf diesen
+                        <a href="https://m4lab.hft-stuttgart.de/account/"> <i class="fas fa-chevron-right">Link zum Benutzerkonto</i></a>.
+                    </li>
+                    <li>
+                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> 
+                            <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu gelangen.
+                    </li>
+                    <li>
+                        Fragen Sie beim Projekteigentümer um Zugang, indem Sie im Gitlab bei der entsprechende
+                        Projektseite auf den
+                        Link <em>Request Access</em> klicken. Solbald dieser ihre Anfrage bestätigt hat, können
+                        Sie loslegen.
+                    </li>
+                </ol>
+            </div>
+        </div>
+
+        <br />
+
+        <div class="card">
+            <div class="card-header">
+                <h3 class="card-title">
+                    <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+                        Möchten Sie selbst ein Projekt anlegen, um es der Öffentlichkeit bereitzustellen?</a>
+                </h3>
+            </div>
+            <div id="collapse3" class="card-body collapse">
+                <p>
+                    Vorraussetzung dazu ist, dass Sie aktives oder ehemaliges Mitglied der Hochschule für Technik sind,
+                    d.h. eine (noch) gültige HFT-Emailadresse haben. Dann befolgen Sie bitte folgende Schritte:
+                </p>
+                <ol>
+                    <li>
+                        <p>
+                            Melden Sie sich bitte im Portal an. 
+                            <br />
+                            Sofern Sie noch nicht als Nutzer im Portal eingetragen sind, wird das System Sie durch die Registrierung leiten. 
+                            <br />
+                            Zur Anmeldung bzw. Registrierung gelangen Sie entweder über das Menü am oberen Seitenrand oder durch Klicken auf diesen 
+                            <a href="https://m4lab.hft-stuttgart.de/account/"> <i class="fas fa-chevron-right">Link zum Benutzerkonto</i></a>.
+                        </p>
+                    </li>
+                    <li>
+                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"> 
+                            <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu gelangen.
+                    </li>
+                    <li>
+                        Erstellen Sie dann in Gitlab ein neues Projekt durch Klicken auf den grünen <em>New Project</em>-Knopf und
+                        anschließendem Befolgen der Eingabemaske von Gitlab. 
+                        <br />
+                        Weitere Hilfestellung zum Anlegen von Projekten in Gitlab finden Sie in der 
+                        <a href="https://docs.gitlab.com/ee/gitlab-basics/create-project.html"> <i class="fas fa-chevron-right">Gitlab-Dokumentation</i></a>.
+                    </li>
+                </ol>
+            </div>
+        </div>
+    </div>
+
+    <hr />
+    <!-- / content body -->
+</div>
\ No newline at end of file

app.js

@@ -8,6 +8,8 @@ const bodyParser = require('body-parser');
 const session = require('express-session');
 const errorhandler = require('errorhandler');
 const flash = require('express-flash');
+const fileUpload = require('express-fileupload');
+
 const i18n = require('i18n'); // internationalization
 i18n.configure({
   locales:['de', 'en'],
@@ -22,12 +24,20 @@ var app = express();
 app.set('port', config.app.port);
 app.set('views', __dirname + '/views');
 app.set('view engine', 'pug');
+
+// enable files upload
+app.use(fileUpload({
+  createParentPath: true,
+  limits: { 
+    fileSize: 1000000 // 1 MB max. file size
+  }
+}));
+
 app.use(morgan('combined'));
 app.use(cookieParser());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended: false}));
 app.use(express.static(path.join(__dirname, 'public')));
-
 app.use(i18n.init);
 app.use((req, res, next) => {
   res.setLocale('de');