Vue Rerender function

mong_usr.js

@@ -1,12 +1,10 @@
 db.users.insert([
     // author,OHMNEWS2019
-    {"_id":"author","name":"Test Author","type":"author","roles":["user","author"],"hash":"sha256","salt":"cy5CkPrplcEze6o4psURhw==","pwd":"Gc8ozlxjEGITkS+fW9tz2xLROzws44s04EOCWuP04qE=","abos":["wichtig","th"],"bookmarks":["th"],},
+    {"_id":"author","name":"Test Author","type":"author","roles":{"user":true,"author":true},"hash":"sha256","salt":"cy5CkPrplcEze6o4psURhw==","pwd":"Gc8ozlxjEGITkS+fW9tz2xLROzws44s04EOCWuP04qE=","abos":["wichtig","th"],"bookmarks":["th"],},
     // admin,oZuse1
-    {"_id":"admin","name":"Test Admin","type":"admin","roles":["user","author","admin"],"hash":"sha256","salt":"PoIUHbDp7tP34ji31iQ0zw==","pwd":"mJpIfIksYs6LJJwYRBemFKqR6TacsSl2E0ZtpO1GMuk=","abos":["wichtig","th"],"bookmarks":["wichtig"],},
+    {"_id":"admin","name":"Test Admin","type":"admin","roles":{"user":true,"author":true,"admin":true},"hash":"sha256","salt":"PoIUHbDp7tP34ji31iQ0zw==","pwd":"mJpIfIksYs6LJJwYRBemFKqR6TacsSl2E0ZtpO1GMuk=","abos":["wichtig","th"],"bookmarks":["wichtig"],},
 ])
 
-db.users.insert({"name":"mustermannmax", "roles":["user"],"abos":[],"bookmarks":[]})
-
 //var c = require('./server/crypto.js'),
 //    e = {"_id":"writer","hash":"sha256"};
 //c.fillLocalAuth(e,"pwd");

public/index.html

@@ -95,28 +95,17 @@
         <div class="om-content">
             <div id=xxx></div>
             <nav-router></nav-router>
-            <router-view :key="auth.user"></router-view>
+            <router-view :key="vueRender.key"></router-view>
         </div>
     </div>
 
     <script>
-
         new Vue({
             router,
             el: '#api',
-            components: {
-                // Locally registered components
-            },
             data: {
                 // Locally registered variables
-                auth: auth,
-            },
-
-            computed:{
-                // Methods to change data appearance, does cache results
-            },
-            methods: {
-                // Methods to change data content, run always again
+                vueRender : vueRender,
             },
         });
 	</script>

public/routes/auth.js

@@ -122,6 +122,8 @@ Vue.component('login-panel', {
             function successful_login(resData) {
                 fillAuthState(resData);
 //                updateUserInDB();
+                auth.abos = [];
+                auth.bookmarks = [];
 				console.info("Correct credentials");
                 this.closeLoginPanel;
 
@@ -150,6 +152,7 @@ Vue.component('login-panel', {
             function successful_login(res) {
 				console.info("Re-Auth: Correct credentials");
                 this.closeLoginPanel;
+                vueForceRender();
 
 				//console.log(res);
                 router.push('/home')
@@ -163,10 +166,5 @@ Vue.component('login-panel', {
 				console.log(err);
 			}
 		},
-        logout: function() {
-            clearAuthState();
-            $.ajax({ url: "api/logout", method: "POST" });
-            this.closeLoginPanel;
-        },
     },
 });

public/routes/home.js

@@ -1,17 +1,17 @@
 const HomeRouter = {
     template: `
-<div>
-<div id="om-msg-cards" class="column pull-right-sm is-four-fifths-desktop">
-	<a v-if="isSearchActiv" @click="goBackToDashboard">< zurück zu allen Einträgen</a>
-	<b-button class="subscribe-btn" v-if="isSubscripeButtonActiv" type="is-primary" @click="">#IPSUM ABONNIEREN</b-button>
-    <MsgCard
-        v-for="id in messagelist.slice().reverse()"
-        :key="id"
-        :msg="messages[id] || {}"
-        :isBookmark="bookmarkArray[id]"
-    ></MsgCard>
-</div>
-</div>`,
+        <div>
+            <div id="om-msg-cards" class="column pull-right-sm is-four-fifths-desktop">
+                <a v-if="isSearchActiv" @click="goBackToDashboard">< zurück zu allen Einträgen</a>
+                <b-button class="subscribe-btn" v-if="isSubscripeButtonActiv" type="is-primary" @click="">#IPSUM ABONNIEREN</b-button>
+                <MsgCard
+                    v-for="id in messagelist.slice().reverse()"
+                    :key="id"
+                    :msg="messages[id] || {}"
+                    :isBookmark="bookmarkArray[id]">
+                </MsgCard>
+            </div>
+        </div>`,
     data: function () {
         return {
             messagelist: _messagelist,

public/routes/initGlobals.js

@@ -16,6 +16,17 @@ var auth = {},
     _isSearchActiv = false,
 	_isSubscripeButtonActiv = false,
     data = [],
-    search_data = []
+    search_data = [],
 
+    // Vue Rerender Key
+    vueRender = { key:0 };
 
+const authorRole = 'author';
+
+// Global Functions
+function vueForceRender() {
+    if (vueRender.key >= 10) {
+        vueRender.key = 0;
+    }
+    vueRender.key++;
+}

public/routes/msgCard.js

@@ -1,27 +1,31 @@
 Vue.component('MsgCard', {
-    template: `<div class="om-card card">
-                <h6 class="msg-head">
+    template: `
+        <div class="om-card card">
+            <h6 class="msg-head">
                 <b>{{ msg.subject }}</b>
                 <div id="msgid" >{{msg._id}}</div>
                 <img src="favicon.ico" width=20px height=20px>
-                </h6>
-                {{ msg.message }}<br>
-                <a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
-				<br>
-				</p>
-                <div class="om-card-footer"> <div class="om-user-line">
-                <i class="material-icons">account_circle</i>
-                Erstellt von {{ msg.user }}</div>
+            </h6>
+            {{ msg.message }}<br>
+            <a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
+            <br>
+            <div class="om-card-footer">
+                <div class="om-user-line">
+                    <i class="material-icons">account_circle</i>
+                    Erstellt von {{ msg.user }}
+                </div>
                 <i id="bockmark-not-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-if="!isActive">bookmark_border</i>
                 <i id="bockmark-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-else>bookmark</i>
-                </div></div>`,
+            </div>
+        </div>`,
     props: ['msg', 'isBookmark'],
 
     data: function () {
         return {
             isActive: this.isBookmark,
             isActive_: 0,
-            msgid: this.msg._id
+            msgid: this.msg._id,
+            bookmarkArray: auth.bookmarks,
         };
     },
 
@@ -29,15 +33,15 @@ Vue.component('MsgCard', {
         myFilter: function (_messageid) {
             //var _messageid = $("#msgid").text();
             if (this.isActive == true) {
-                var index = auth.bookmarks.indexOf(_messageid);
+                var index = this.bookmarkArray.indexOf(_messageid);
 
                 if (index > -1) {
-                    auth.bookmarks.splice(index, 1);
+                    this.bookmarkArray.splice(index, 1);
                 }
                 this.isActive = false;
             } else {
-                console.log("_messsageid: "+_messageid+" bookmarks: "+auth.bookmarks);
-                auth.bookmarks.push(_messageid);
+                console.log("_messsageid: "+_messageid+" bookmarks: "+this.bookmarkArray);
+                this.bookmarkArray.push(_messageid);
                 this.isActive =true;
             }
             /*console.log("msgid"+_bookmark);
@@ -69,7 +73,7 @@ Vue.component('MsgCard', {
         },
         isBookmarkActive: function (msgid) {
             //console.log("isBookmarkActive(): " + msgid);
-            if (auth.bookmarks.indexOf(msgid) > -1) {
+            if (this.bookmarkArray.indexOf(msgid) > -1) {
                 // $("#bockmark-not-active").css("visibility","hidden");
                 // $("#bockmark-active").css("visibility","visible");
                 this.isActive = true;

public/routes/navRoutes.js

@@ -11,7 +11,7 @@ Vue.component('nav-router', {
                                 <i class="material-icons">search</i>
                             </router-link>
 
-                            <router-link to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
+                            <router-link v-if="isAuthor" to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                 <i class="material-icons">add_circle</i>
                             </router-link>
 
@@ -37,7 +37,7 @@ Vue.component('nav-router', {
                                         <i class="material-icons">search</i> Search
                                     </router-link></li>
 
-                                    <li><router-link to="/createMessage">
+                                    <li><router-link v-if="isAuthor" to="/createMessage">
                                         <i class="material-icons">add_circle</i> Create Message
                                     </router-link></li>
 
@@ -53,6 +53,20 @@ Vue.component('nav-router', {
                         </div>
                     </div>
                 </div>`,
+    data: function() {
+        return {
+            isAuthor: this.isAuthorCheck(),
+        };
+    },
+    methods: {
+        isAuthorCheck: function() {
+            console.info(auth.roles.author === authorRole);
+            return (auth.roles.author === authorRole);
+        },
+    },
+    updated: function() {
+        this.isAuthorChecked();
+    }
 });
 
 const routes = [

public/routes/profil.js

@@ -2,22 +2,22 @@ const ProfilRouter = {
     template: `
         <div>
             <div class="column pull-right-sm is-four-fifths-desktop">
-            <div v-if="isAuth">
-                <profil-card></profil-card>
-            </div>
-            <div v-else>
-                <button class="button is-primary is-medium"
-                    @click="isLPVisible = true">
-                    Login
-                </button>
+                <div v-if="isAuth">
+                    <profil-card></profil-card>
+                </div>
+                <div v-else>
+                    <button class="button is-primary is-medium"
+                        @click="isLPVisible = true">
+                        Login
+                    </button>
 
-                <b-modal :active.sync="isLPVisible"
-                    @close-login-panel="closeLoginPanel"
-                    @show-login-panel="showLoginPanel"
-                    has-modal-card>
-                    <login-panel></login-panel>
-                </b-modal>
-            </div>
+                    <b-modal :active.sync="isLPVisible"
+                        @close-login-panel="closeLoginPanel"
+                        @show-login-panel="showLoginPanel"
+                        has-modal-card>
+                        <login-panel></login-panel>
+                    </b-modal>
+                </div>
             </div>
         </div>`,
     data: function () {

public/routes/profilCard.js

@@ -18,15 +18,15 @@ Vue.component('profil-card', {
             <hr class="first">
 
             <div class="btnprofil">
-                <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abo }}</b> <br/></button>
-                <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ saved }}</b><br/></button>
+                <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abos }}</b> <br/></button>
+                <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ bookmarks }}</b><br/></button>
             </div>
 
             <section>
                 <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
                     <div class="card">
                         <header class="modal-card-head">
-                            <p class="modal-card-title">Abonnierte Kanäle</p>
+                            <p class="modal-card-title">Abonnierte Tags</p>
                         </header>
                         <div class="card-content">
                             <div class="content">
@@ -51,8 +51,8 @@ Vue.component('profil-card', {
     data: function () {
         return {
             auth: auth,
-            abo: 7,
-            saved: 3,
+            abos: auth.abos ? auth.abos.length : '-',
+            bookmarks: auth.bookmarks ? auth.bookmarks.length : '-',
             isCardModalActive: false,
         };
     },
@@ -75,6 +75,7 @@ Vue.component('profil-card', {
         logout: function() {
             clearAuthState();
             $.ajax({ url: "api/logout", method: "POST" });
+            vueForceRender();
             router.push('/profil');
         },
     }

server/authorization.js

@@ -12,6 +12,16 @@ const ldap   = require ('./ldap_ohm'),
 const serverVisibleSession = { user: true, name: true, type: true, mail: true, roles: true, gender: true, deactivated: true, host: true };
 const clientVisibleSession = { user: true, name: true, type: true, mail: true, roles: true, gender: true };
 
+// Return user role, query from found.mail
+function getUserRole(found) {
+    var roles = "user";
+    var mail = found.mail;
+    if (!/\d/.test(mail)) {
+        // Mail contains no number
+        roles += ',"author"';
+    }
+    return roles;
+}
 
 // Fill in session object
 function fillSession (req, user, roles, cb) {
@@ -22,7 +32,7 @@ function fillSession (req, user, roles, cb) {
         req.session.regenerate (function (err) {
             if (user !== undefined && ! err) {
                 common.shallowCopy (user, serverVisibleSession, {roles: true}, req.session);
-                console.info(req.session);
+//                console.info(req.session);
                 if (user._id) {
                     req.session.user = user._id;
                 }
@@ -37,7 +47,7 @@ function fillSession (req, user, roles, cb) {
 
 // Save found user into DB, if not already exists
 function saveFoundToDB(found, cb) {
-    console.info(found);
+//    console.info(found);
     Users.findById(found.user)
         .exec(function(err, result){
         if (err) {
@@ -52,15 +62,15 @@ function saveFoundToDB(found, cb) {
                 mail: found.mail,
                 type: found.type,
                 gender: found.gender,
-//                abos: '',
-//                bookmarks: '',
-                roles: 'user',
+                abos: '',
+                bookmarks: '',
+                roles: getUserRole(found),
             }, function(err, done) {
                 if (err) {
                     console.error("User creation: Failed");
                     console.error(err);
                 } else {
-                    console.info("New User created!");
+                    console.info("User created: "+ found.user);
                 }
                 if (done == null) {
                     console.error("Can not create user.");
@@ -158,7 +168,7 @@ const authorization = {
                     console.error(err);
                 }
             });
-            console.info(req.session);
+//            console.info(req.session);
             return res.json ({});
         });
     },