hopfma/om
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Vue Rerender function

Browse Source
This commit is contained in:
Erik Römmelt 2019-07-23 17:22:01 +02:00
parent b1d0a0f095
commit 2d4850520d
10 changed files with 106 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
mong_usr.js
View File

@ -1,12 +1,10 @@
db.users.insert([ db.users.insert([
// author,OHMNEWS2019 // 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 // 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'), //var c = require('./server/crypto.js'),
// e = {"_id":"writer","hash":"sha256"}; // e = {"_id":"writer","hash":"sha256"};
//c.fillLocalAuth(e,"pwd"); //c.fillLocalAuth(e,"pwd");

15
public/index.html
View File

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

8
public/routes/auth.js
View File

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

24
public/routes/home.js
View File

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

13
public/routes/initGlobals.js
View File

@ -16,6 +16,17 @@ var auth = {},
_isSearchActiv = false, _isSearchActiv = false,
_isSubscripeButtonActiv = false, _isSubscripeButtonActiv = false,
data = [], 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++;
}

38
public/routes/msgCard.js
View File

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

18
public/routes/navRoutes.js
View File

@ -11,7 +11,7 @@ Vue.component('nav-router', {
<i class="material-icons">search</i> <i class="material-icons">search</i>
</router-link> </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> <i class="material-icons">add_circle</i>
</router-link> </router-link>
@ -37,7 +37,7 @@ Vue.component('nav-router', {
<i class="material-icons">search</i> Search <i class="material-icons">search</i> Search
</router-link></li> </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 <i class="material-icons">add_circle</i> Create Message
</router-link></li> </router-link></li>
@ -53,6 +53,20 @@ Vue.component('nav-router', {
</div> </div>
</div> </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 = [ const routes = [

30
public/routes/profil.js
View File

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

11
public/routes/profilCard.js
View File

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

24
server/authorization.js
View File

@ -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 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 }; 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 // Fill in session object
function fillSession (req, user, roles, cb) { function fillSession (req, user, roles, cb) {
@ -22,7 +32,7 @@ function fillSession (req, user, roles, cb) {
req.session.regenerate (function (err) { req.session.regenerate (function (err) {
if (user !== undefined && ! err) { if (user !== undefined && ! err) {
common.shallowCopy (user, serverVisibleSession, {roles: true}, req.session); common.shallowCopy (user, serverVisibleSession, {roles: true}, req.session);
console.info(req.session); // console.info(req.session);
if (user._id) { if (user._id) {
req.session.user = 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 // Save found user into DB, if not already exists
function saveFoundToDB(found, cb) { function saveFoundToDB(found, cb) {
console.info(found); // console.info(found);
Users.findById(found.user) Users.findById(found.user)
.exec(function(err, result){ .exec(function(err, result){
if (err) { if (err) {
@ -52,15 +62,15 @@ function saveFoundToDB(found, cb) {
mail: found.mail, mail: found.mail,
type: found.type, type: found.type,
gender: found.gender, gender: found.gender,
// abos: '', abos: '',
// bookmarks: '', bookmarks: '',
roles: 'user', roles: getUserRole(found),
}, function(err, done) { }, function(err, done) {
if (err) { if (err) {
console.error("User creation: Failed"); console.error("User creation: Failed");
console.error(err); console.error(err);
} else { } else {
console.info("New User created!"); console.info("User created: "+ found.user);
} }
if (done == null) { if (done == null) {
console.error("Can not create user."); console.error("Can not create user.");
@ -158,7 +168,7 @@ const authorization = {
console.error(err); console.error(err);
} }
}); });
console.info(req.session); // console.info(req.session);
return res.json ({}); return res.json ({});
}); });
}, },