updates

public/js/account.js

-/*
-TODO:
-    Show list of registered services?
-*/
-
-// Profile Initialization
-$.get( "/api/v1/profile", function(data) {
-    var title = data.title
-    var firstname = data.firstname
-    var lastname = data.lastname
-    var email = data.email
-    var industry = data.industry
-    var organisation = data.organisation
-    var speciality = data.speciality
-
-    // asign to HTML
-    $("#fullname").text(firstname+' '+lastname);
-    //document.getElementById('inputFirstname').value = firstname; //JS
-    $("#inputTitle").val(title); // jQuery
-    $("#inputFirstname").val(firstname);
-    $("#inputLastname").val(lastname);
-    $("#inputEmail").val(email);
-    $("#inputIndustry").val(industry);
-    $("#inputOrganisation").val(organisation);
-    $("#inputSpeciality").val(speciality);
-})
-.done(function() {
-    console.log("done");
-})
-.fail(function() {
-    console.log( "error" );
-})
-/*.always(function() {
-    alert( "finished" );
-}) */
\ No newline at end of file

public/js/generalFunction.js

-// check password and password confirmation input fields
-$('#inputNewPwd, #inputConfirm').on('keyup', function () {
-    var isBest = false;
-    var isMatch = false;
-
-    // password best practice
-    if ($('#inputNewPwd').val().length < 8) {
-        $('#recommendation').html('Must be at least 8 characters').css('color', 'red');
+// password requirement
+function checkPasswordReq(pwd) {
+    if (pwd.length < 8) {
         isBest = false;
     } else {
-        $('#recommendation').html('').css('color', 'red');
         isBest = true;
     }
-
-    // match or not?
-    if ($('#inputNewPwd').val() == $('#inputConfirm').val()) {
+    return isBest
+}
\ No newline at end of file
-        $('#message').html('Matching').css('color', 'green');
-        isMatch = true;
-    } else {
-        $('#message').html('Not Matching').css('color', 'red');
-        isMatch = false;
-    }
-    
-    // enable/disable update button
-    if (isBest && isMatch) {
-        $('#updateBtn').prop('disabled', false);
-    } else {
-        $('#updateBtn').prop('disabled', true);
-    }
-});
\ No newline at end of file

public/js/security.js

+// check password and password confirmation input fields
+$('#inputNewPwd, #inputConfirm').on('keyup', function () {
+    var isBest, isMatch;
+
+    isBest = checkPasswordReq($('#inputNewPwd').val())
+    $('#recommendation').empty();
+    if (!isBest) {
+        $('#recommendation').html('Must be at least 8 characters').css('color', 'red');
+    }
+
+    // match or not?
+    if ($('#inputNewPwd').val() == $('#inputConfirm').val()) {
+        $('#message').html('Matching').css('color', 'green');
+        isMatch = true;
+    } else {
+        $('#message').html('Not Matching').css('color', 'red');
+        isMatch = false;
+    }
+    
+    // enable/disable update button
+    if (isBest && isMatch) {
+        $('#updateBtn').prop('disabled', false);
+    } else {
+        $('#updateBtn').prop('disabled', true);
+    }
+});
\ No newline at end of file

views/profile.pug

@@ -32,12 +32,12 @@ html(lang="en")
         div(class="row")
             div(class="col-3")
                 h5
-                    span#fullname
+                    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") Profile
                     a(class="nav-link" href="/security" aria-selected="false") Security
                     a(class="nav-link" href="/services" aria-selected="false") Services
-            div(class="col-sm-9")
+            div(class="col-sm-8")
                 if successes
                     for success in successes
                         div.alert.alert-success.alert-dismissible #{ success }
@@ -47,32 +47,38 @@ html(lang="en")
                         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-group row")
+                    div(class="form-row")
+                        div(class='form-group col-md-2')
                             label(for="title") Title
-                        select#inputTitle(name="inputTitle", class="form-control")
+                            // to read: https://stackoverflow.com/questions/39997579/pug-templates-how-to-mark-option-in-dropdown-list-as-selected
+                            select#inputTitle(name="inputTitle", class="form-control", value=user.title)
+                                option(value="Frau/Herr") Frau/Herr
                                 option(value="Frau") Frau
                                 option(value="Herr") Herr
-                            option(value="Frau/Herr") Frau/Herr
                                 option(value="Dr.") Dr.
                                 option(value="Prof. Dr.") Prof. Dr.
-                    div(class="form-group row")
+                        div(class='form-group col-md-3')
                             label(for="firstname") Vorname
-                        input#inputFirstname(name="inputFirstname", type="text", class="form-control", placeholder="Vorname" required)
-                    div(class="form-group row")
+                            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" required)
-                    div(class="form-group row")
+                            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" required)
-                    div(class="form-group row")
+                            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")
-                    div(class="form-group row")
+                            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")
-                    div(class="form-group row")
+                            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")                    
+                            input#inputSpeciality(name="inputSpeciality", type="text", class="form-control", placeholder="Fachgebiete", value=user.speciality)                    
                     input(type="submit", class="btn btn-primary", value="Update")
 
     // jQuery
@@ -81,5 +87,5 @@ html(lang="en")
     // 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/account.js")
+    //script(src="/js/account.js")
     script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
\ No newline at end of file

views/security.pug

@@ -27,12 +27,15 @@ html(lang="en")
             -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#fullname
+                    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="/profile" aria-selected="true") Profile
                     a(class="nav-link" href="#" aria-selected="false") Security
@@ -47,19 +50,22 @@ html(lang="en")
                         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="/changePwd" novalidate)
-                    div(class="form-group row")
+                    div(class="form-row")
+                        div(class='form-group col-md-6')
                             label(for="currPwd") Current Password
                             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")
+                    div(class="form-row")
+                        div(class='form-group col-md-6')
                             label(for="newPwd") New Password
                             input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
-                        span#recommendation
+                            span#recommendation(class='warning')
                             div(class="invalid-feedback") Please fill in this field.
-                    div(class="form-group row")
+                    div(class="form-row")
+                        div(class='form-group col-md-6')
                             label(for="confirm") Confirm New Password
                             input#inputConfirm(name="inputConfirm", type="password", class="form-control" required)
-                        span#message
+                            span#message(class='warning')
                             div(class="invalid-feedback") Please fill in this field.
                     input#updateBtn(type="submit", class="btn btn-primary", value="Update Password" disabled)
                     
@@ -69,8 +75,8 @@ html(lang="en")
     // 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/account.js")
     script(src="/js/generalFunction.js")
+    script(src="/js/security.js")
     script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
     script.
         // check input fields