Merge remote-tracking branch 'origin/developer' into developer

.gitignore

@@ -18,4 +18,7 @@ latex-files/*.run.xml
 latex-files/*.toc
 
 # config
-mongodb.config.js
+mongodb.config.js
+
+# exclude Mac-File .DS_Store
+*.DS_Store

public/index.html

@@ -51,12 +51,7 @@
 	<!-- CSS_Material Design for Bootstrap fonts and icons -->
 	<link rel="stylesheet" href="lib/bootstrap-font-and-icons.css">
 	<!-- CSS_Material Design for Bootstrap minified CSS -->
-	<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">
+	<!--<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">-->
-	<!-- CSS_vuetify -->
-	<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
-	<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
-    <!-- CSS_Custom Design -->
-	<link rel="stylesheet" type="text/css" href="style/style.css">
 
     <!-- NOTE: Call manifest.json -->
 	<link rel="manifest" href="manifest.json">
@@ -68,15 +63,19 @@
 
 	<!-- Buefy/Vuetify -->
     <script src="lib/buefy-0.7.5.js"></script>
-<!--    <script src="lib/buefy-0.7.5.min.js"></script>-->
+<!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
+	<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
     <link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.css">
-<!--    <link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
+<!--<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
 
 <!--    <script src="lib/vuetify-1.5.14.js"></script>-->
 <!--    <script src="lib/vuetify-1.5.14.min.js"></script>-->
 <!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.css">-->
 <!--    <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.min.css">-->
 
+	<!-- CSS_Custom Design -->
+	<link rel="stylesheet" type="text/css" href="style/style.css">
+
 	<!-- NOTE: JavaScript Libs & Files -->
     <script src="routes/home.js"></script>
     <script src="routes/files.js"></script>
@@ -98,7 +97,12 @@
             <div class="om-header">
                 <a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
                 <form class="om-searchbar">
-                    <input type="search" placeholder="Search...">
+                    <b-field>
+						<b-input placeholder="Suche..."
+                			type="search"
+                			icon="magnify">
+            			</b-input>
+					</b-field>
                 </form>
             </div>
         </div>
@@ -108,13 +112,33 @@
             <router-view></router-view>
         </div>
 
-        <nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
+		<nav class="navbar is-fixed-bottom is-expanded is-light is-hoverable" role="navigation" aria-label="main navigation">
-            <router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
+  			<div class="navbar-brand is-expanded">
-            <router-link to="/files" class="nav-item nav-link"><i class="material-icons">language</i></router-link>
+				<router-link to="/home" class="navbar-item is-expanded has-text-centered is-active">
-            <router-link to="/createMessage" class="nav-item nav-link outlined"><i class="material-icons">add_circle</i></router-link>
+					<i class="material-icons">home</i>
-            <router-link to="/bookmark" class="nav-item nav-link"><i class="material-icons">bookmark</i></router-link>
+				</router-link>
-            <router-link to="/profil" class="nav-item nav-link"><i class="material-icons">person</i></router-link>
+            	<router-link to="/files" class="navbar-item is-expanded">
-        </nav>
+					<i class="material-icons">language</i>
+				</router-link>
+            	<router-link to="/createMessage" class="navbar-item is-expanded">
+					<i class="material-icons">add_circle</i>
+				</router-link>
+            	<router-link to="/bookmark" class="navbar-item  is-expanded">
+					<i class="material-icons">bookmark</i>
+				</router-link>
+				<router-link to="/profil" class="navbar-item is-expanded">
+					<i class="material-icons">person</i>
+				</router-link>
+			</div>
+		</nav>
+
+        <!--<nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
+            <router-link to="/home" class="navbar-item has-text-centered"><i class="material-icons">home</i></router-link>
+            <router-link to="/files" class="navbar-item has-text-centered"><i class="material-icons">language</i></router-link>
+            <router-link to="/createMessage" class="navbar-item has-text-centered outlined"><i class="material-icons">add_circle</i></router-link>
+            <router-link to="/bookmark" class="navbar-item has-text-centered"><i class="material-icons">bookmark</i></router-link>
+            <router-link to="/profil" class="navbar-item has-text-centered"><i class="material-icons">person</i></router-link>
+        </nav>-->
     </div>
 
     <script>

public/lib/buefy-0.7.5.min.css

@@ -1,4 +1,4 @@
 /*! Buefy v0.7.4 | MIT License | github.com/buefy/buefy */
 /*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */@keyframes spinAround{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.breadcrumb,.button,.delete,.file,.is-unselectable,.modal-close,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.tabs{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar-link:not(.is-arrowless):after,.select:not(.is-multiple):not(.is-loading):after{border:3px solid transparent;border-radius:2px;border-right:0;border-top:0;content:" ";display:block;height:.625em;margin-top:-.4375em;pointer-events:none;position:absolute;top:50%;transform:rotate(-45deg);transform-origin:center;width:.625em}.block:not(:last-child),.box:not(:last-child),.breadcrumb:not(:last-child),.content:not(:last-child),.highlight:not(:last-child),.level:not(:last-child),.list:not(:last-child),.message:not(:last-child),.notification:not(:last-child),.progress:not(:last-child),.subtitle:not(:last-child),.table-container:not(:last-child),.table:not(:last-child),.tabs:not(:last-child),.title:not(:last-child){margin-bottom:1.5rem}.delete,.modal-close{-moz-appearance:none;-webkit-appearance:none;background-color:hsla(0,0%,4%,.2);border:none;border-radius:290486px;cursor:pointer;pointer-events:auto;display:inline-block;flex-grow:0;flex-shrink:0;font-size:0;height:20px;max-height:20px;max-width:20px;min-height:20px;min-width:20px;outline:none;position:relative;vertical-align:top;width:20px}.delete:after,.delete:before,.modal-close:after,.modal-close:before{background-color:#fff;content:"";display:block;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg);transform-origin:center center}.delete:before,.modal-close:before{height:2px;width:50%}.delete:after,.modal-close:after{height:50%;width:2px}.delete:focus,.delete:hover,.modal-close:focus,.modal-close:hover{background-color:hsla(0,0%,4%,.3)}.delete:active,.modal-close:active{background-color:hsla(0,0%,4%,.4)}.is-small.delete,.is-small.modal-close{height:16px;max-height:16px;max-width:16px;min-height:16px;min-width:16px;width:16px}.is-medium.delete,.is-medium.modal-close{height:24px;max-height:24px;max-width:24px;min-height:24px;min-width:24px;width:24px}.is-large.delete,.is-large.modal-close{height:32px;max-height:32px;max-width:32px;min-height:32px;min-width:32px;width:32px}.button.is-loading:after,.control.is-loading:after,.loader,.select.is-loading:after{animation:spinAround .5s infinite linear;border:2px solid #dbdbdb;border-radius:290486px;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:1em;position:relative;width:1em}.hero-video,.image.is-1by1 .has-ratio,.image.is-1by1 img,.image.is-1by2 .has-ratio,.image.is-1by2 img,.image.is-1by3 .has-ratio,.image.is-1by3 img,.image.is-2by1 .has-ratio,.image.is-2by1 img,.image.is-2by3 .has-ratio,.image.is-2by3 img,.image.is-3by1 .has-ratio,.image.is-3by1 img,.image.is-3by2 .has-ratio,.image.is-3by2 img,.image.is-3by4 .has-ratio,.image.is-3by4 img,.image.is-3by5 .has-ratio,.image.is-3by5 img,.image.is-4by3 .has-ratio,.image.is-4by3 img,.image.is-4by5 .has-ratio,.image.is-4by5 img,.image.is-5by3 .has-ratio,.image.is-5by3 img,.image.is-5by4 .has-ratio,.image.is-5by4 img,.image.is-9by16 .has-ratio,.image.is-9by16 img,.image.is-16by9 .has-ratio,.image.is-16by9 img,.image.is-square .has-ratio,.image.is-square img,.is-overlay,.modal,.modal-background{bottom:0;left:0;position:absolute;right:0;top:0}.button,.file-cta,.file-name,.input,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.select select,.taginput .taginput-container.is-focusable,.textarea{-moz-appearance:none;-webkit-appearance:none;align-items:center;border:1px solid transparent;border-radius:4px;box-shadow:none;display:inline-flex;font-size:1rem;height:2.25em;justify-content:flex-start;line-height:1.5;padding:calc(.375em - 1px) calc(.625em - 1px);position:relative;vertical-align:top}.button:active,.button:focus,.file-cta:active,.file-cta:focus,.file-name:active,.file-name:focus,.input:active,.input:focus,.is-active.button,.is-active.file-cta,.is-active.file-name,.is-active.input,.is-active.pagination-ellipsis,.is-active.pagination-link,.is-active.pagination-next,.is-active.pagination-previous,.is-active.textarea,.is-focused.button,.is-focused.file-cta,.is-focused.file-name,.is-focused.input,.is-focused.pagination-ellipsis,.is-focused.pagination-link,.is-focused.pagination-next,.is-focused.pagination-previous,.is-focused.textarea,.pagination-ellipsis:active,.pagination-ellipsis:focus,.pagination-link:active,.pagination-link:focus,.pagination-next:active,.pagination-next:focus,.pagination-previous:active,.pagination-previous:focus,.select select.is-active,.select select.is-focused,.select select:active,.select select:focus,.taginput .is-active.taginput-container.is-focusable,.taginput .is-focused.taginput-container.is-focusable,.taginput .taginput-container.is-focuLine truncated
 
-/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}embed,iframe,img,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{background-color:#fff;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility;text-size-adjust:100%}article,aside,figure,footer,header,hgroup,section{display:block}body,button,input,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif}code,pre{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;font-family:monospace}body{color:#4a4a4a;font-size:1rem;font-weight:400;line-height:1.5}a{color:#7957d5;cursor:pointer;text-decoration:none}a strong{color:currentColor}a:hover{color:#363636}code{color:#ff3860;font-size:.875em;font-weight:400;padding:.25em .5em}code,hr{background-color:#f5f5f5}hr{border:none;display:block;height:2px;margin:1.5rem 0}img{height:auto;max-width:100%}input[type=checkbox],input[type=radio]{vertical-align:baseline}small{font-size:.875em}span{font-style:inherit;font-weight:inherit}strong{color:#363636;font-weight:700}fieldset{border:none}pre{-webkit-overflow-scrolling:touch;background-color:#f5f5f5;color:#4a4a4a;font-size:.875em;overflow-x:auto;padding:1.25rem 1.5rem;white-space:pre;word-wrap:normal}pre code{background-color:transparent;color:currentColor;font-size:1em;padding:0}table td,table th{text-align:left;vertical-align:top}table th{color:#363636}.is-clearfix:after{clear:both;content:" ";display:table}.is-pulled-left{float:left!important}.is-pulled-right{float:right!important}.is-clipped{overflow:hidden!important}.is-size-1{font-size:3rem!important}.is-size-2{font-size:2.5rem!important}.is-size-3{font-size:2rem!important}.is-size-4{font-size:1.5rem!important}.is-size-5{font-size:1.25rem!important}.is-size-6{font-size:1rem!important}.is-size-7{font-size:.75rem!important}@media screen and (max-width:768px){.is-size-1-mobile{font-size:3rem!important}.is-size-2-mobile{font-size:2.5rem!important}.is-size-3-mobile{font-size:2rem!important}.is-size-4-mobile{font-size:1.5rem!important}.is-size-5-mobile{font-size:1.25rem!important}.is-size-6-mobile{font-size:1rem!important}.is-size-7-mobile{font-size:.75rem!important}}@media print,screen and (min-width:769px){.is-size-1-tablet{font-size:3rem!important}.is-size-2-tablet{font-size:2.5rem!important}.is-size-3-tablet{font-size:2rem!important}.is-size-4-tablet{font-size:1.5rem!important}.is-size-5-tablet{font-size:1.25rem!important}.is-size-6-tablet{font-size:1rem!important}.is-size-7-tablet{font-size:.75rem!important}}@media screen and (max-width:1087px){.is-size-1-touch{font-size:3rem!important}.is-size-2-touch{font-size:2.5rem!important}.is-size-3-touch{font-size:2rem!important}.is-size-4-touch{font-size:1.5rem!important}.is-size-5-touch{font-size:1.25rem!important}.is-size-6-touch{font-size:1rem!important}.is-size-7-touch{font-size:.75rem!important}}@media screen and (min-width:1088px){.is-size-1-desktop{font-size:3rem!important}.is-size-2-desktop{font-size:2.5rem!important}.is-size-3-desktop{font-size:2rem!important}.is-size-4-desktop{font-size:1.5rem!important}.is-size-5-desktop{font-size:1.25rem!important}.is-size-6-desktop{font-size:1rem!important}.is-size-7-desktop{font-size:.75rem!important}}@media screen and (min-width:1280px){.is-size-1-widescreen{font-size:3rem!important}.is-size-2-widescreen{font-size:2.5rem!important}.is-size-3-widescreen{font-size:2rem!important}.is-size-4-widescreen{font-size:1.5rem!important}.is-size-5-widescreen{font-size:1.25rem!important}.is-size-6-widescreen{font-size:1rem!important}.is-size-7-widescreen{font-size:.75rem!important}}@media screen and (min-width:1472px){.is-size-1-fullhd{font-size:3rem!important}.is-size-2-fullhd{font-size:2.5rem!important}.is-size-3-fullhd{font-size:2rem!important}.is-size-4-fullhd{font-size:1.5rem!important}.is-size-5-fullhd{font-size:1.25rem!important}.is-size-6-fullhd{font-size:1rem!important}.is-size-7-fullhd{font-size:.75rem!important}}.has-text-centered{text-align:center!important}.has-text-justified{text-align:justify!important}.has-text-left{text-align:left!important}.has-text-right{text-align:right!important}@media screen and (max-width:768px){.has-text-centered-mobile{text-align:center!important}}@media print,screen and (min-width:769px){.has-text-centered-tablet{text-align:center!important}}@media screen and (min-width:769px) and (max-width:1087px){.has-text-centered-tablet-only{text-align:center!importanLine truncated
+/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}embed,iframe,img,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{background-color:#fff;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility;text-size-adjust:100%}article,aside,figure,footer,header,hgroup,section{display:block}body,button,input,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif}code,pre{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;font-family:monospace}body{color:#4a4a4a;font-size:1rem;font-weight:400;line-height:1.5}a{color:#0046a0;cursor:pointer;text-decoration:none}a strong{color:currentColor}a:hover{color:#363636}code{color:#ff3860;font-size:.875em;font-weight:400;padding:.25em .5em}code,hr{background-color:#f5f5f5}hr{border:none;display:block;height:2px;margin:1.5rem 0}img{height:auto;max-width:100%}input[type=checkbox],input[type=radio]{vertical-align:baseline}small{font-size:.875em}span{font-style:inherit;font-weight:inherit}strong{color:#363636;font-weight:700}fieldset{border:none}pre{-webkit-overflow-scrolling:touch;background-color:#f5f5f5;color:#4a4a4a;font-size:.875em;overflow-x:auto;padding:1.25rem 1.5rem;white-space:pre;word-wrap:normal}pre code{background-color:transparent;color:currentColor;font-size:1em;padding:0}table td,table th{text-align:left;vertical-align:top}table th{color:#363636}.is-clearfix:after{clear:both;content:" ";display:table}.is-pulled-left{float:left!important}.is-pulled-right{float:right!important}.is-clipped{overflow:hidden!important}.is-size-1{font-size:3rem!important}.is-size-2{font-size:2.5rem!important}.is-size-3{font-size:2rem!important}.is-size-4{font-size:1.5rem!important}.is-size-5{font-size:1.25rem!important}.is-size-6{font-size:1rem!important}.is-size-7{font-size:.75rem!important}@media screen and (max-width:768px){.is-size-1-mobile{font-size:3rem!important}.is-size-2-mobile{font-size:2.5rem!important}.is-size-3-mobile{font-size:2rem!important}.is-size-4-mobile{font-size:1.5rem!important}.is-size-5-mobile{font-size:1.25rem!important}.is-size-6-mobile{font-size:1rem!important}.is-size-7-mobile{font-size:.75rem!important}}@media print,screen and (min-width:769px){.is-size-1-tablet{font-size:3rem!important}.is-size-2-tablet{font-size:2.5rem!important}.is-size-3-tablet{font-size:2rem!important}.is-size-4-tablet{font-size:1.5rem!important}.is-size-5-tablet{font-size:1.25rem!important}.is-size-6-tablet{font-size:1rem!important}.is-size-7-tablet{font-size:.75rem!important}}@media screen and (max-width:1087px){.is-size-1-touch{font-size:3rem!important}.is-size-2-touch{font-size:2.5rem!important}.is-size-3-touch{font-size:2rem!important}.is-size-4-touch{font-size:1.5rem!important}.is-size-5-touch{font-size:1.25rem!important}.is-size-6-touch{font-size:1rem!important}.is-size-7-touch{font-size:.75rem!important}}@media screen and (min-width:1088px){.is-size-1-desktop{font-size:3rem!important}.is-size-2-desktop{font-size:2.5rem!important}.is-size-3-desktop{font-size:2rem!important}.is-size-4-desktop{font-size:1.5rem!important}.is-size-5-desktop{font-size:1.25rem!important}.is-size-6-desktop{font-size:1rem!important}.is-size-7-desktop{font-size:.75rem!important}}@media screen and (min-width:1280px){.is-size-1-widescreen{font-size:3rem!important}.is-size-2-widescreen{font-size:2.5rem!important}.is-size-3-widescreen{font-size:2rem!important}.is-size-4-widescreen{font-size:1.5rem!important}.is-size-5-widescreen{font-size:1.25rem!important}.is-size-6-widescreen{font-size:1rem!important}.is-size-7-widescreen{font-size:.75rem!important}}@media screen and (min-width:1472px){.is-size-1-fullhd{font-size:3rem!important}.is-size-2-fullhd{font-size:2.5rem!important}.is-size-3-fullhd{font-size:2rem!important}.is-size-4-fullhd{font-size:1.5rem!important}.is-size-5-fullhd{font-size:1.25rem!important}.is-size-6-fullhd{font-size:1rem!important}.is-size-7-fullhd{font-size:.75rem!important}}.has-text-centered{text-align:center!important}.has-text-justified{text-align:justify!important}.has-text-left{text-align:left!important}.has-text-right{text-align:right!important}@media screen and (max-width:768px){.has-text-centered-mobile{text-align:center!important}}@media print,screen and (min-width:769px){.has-text-centered-tablet{text-align:center!important}}@media screen and (min-width:769px) and (max-width:1087px){.has-text-centered-tablet-only{text-align:center!importanLine truncated

public/routes/createMessage.js

@@ -1,52 +1,48 @@
+const data=[
+				'#th',
+				'#efi',
+				'#wichtig',
+    		];
 const CreateMsgRouter = {
 	template: `
-<div class="card om-card">
+<div class="content card om-card">
 	<h4>Neue Nachricht erstellen</h4>
-	<form class="new-msg-form" @submit.prevent=createMsg>
-        <div class="form-group">
-			<label class="bmd-label-floating">User*</label>
-			<input type="text" class="form-control" id="user">
-		</div>
-		<div class="form-group bmd-form-group">
-			<label class="bmd-label-floating">Betreff*</label>
-			<input type="text" class="form-control" id="subject">
-		</div>
-		<div class="form-group bmd-form-group">
-			<label class="bmd-label-floating">Tags</label>
-			<input type="text" class="form-control" id="tag">
-		</div>
 
+	<b-field>
+        <b-input placeholder="User" id="user"></b-input>
+    </b-field>
 
+	<b-field>
+        <b-input placeholder="Betreff" id="subject"></b-input>
+    </b-field>
 
-				  <v-combobox
+	<b-field label="Tags">
-					v-model="select"
+		<b-taginput
-					:items="items"
+			v-model="selected"
-					label="I use chips"
+			:data=items
-					multiple
+			autocomplete
-					chips
+			allow-new:false
-				  ></v-combobox>
+			icon="label"
+			placeholder="#"
+			@typing="getFilteredTags" id="tag">
+		</b-taginput>
+	</b-field>
 
+	<b-field>
+        <b-input placeholder="Nachricht" id="message" type="textarea"></b-input>
+    </b-field>
+
+	<b-button @click="$router.go(-1)">ABBRECHEN</b-button>
+	<b-button type="is-primary" @click="$router.push('/home')">SENDEN</b-button>
 
-		<div class="form-group">
-			<label class="bmd-label-floating">Nachricht*</label>
-			<textarea class="form-control" id="message" rows="5"></textarea>
-		</div>
-		<button class="btn btn-default"><a @click="$router.go(-1)">ABBRECHEN </a></button>
-		<button type="submit" class="btn btn-raised om-btn"><a @click="$router.push('/home')">SENDEN</a></button>
-	</form>
 
 
 </div>
 `,
 	data: function () {
 		return {
-			select: ['Design', 'jj'],
+			selected: [],
-			items: [
+			items: data
-				'Programming',
-				'Design',
-				'Vue',
-				'Vuetify'
-      		]
 		};
 	},
 	methods: {
@@ -76,6 +72,14 @@ const CreateMsgRouter = {
 				console.log(err);
 			}
 		},
+		getFilteredTags(text) {
+			this.items = data.filter((option) => {
+				return option
+					.toString()
+					.toLowerCase()
+					.indexOf(text.toLowerCase()) >= 0
+			})
+		},
 	},
 	mounted: function () {
 		if ($(this).bootstrapMaterialDesign)

public/routes/login.js

@@ -1,34 +1,64 @@
 Vue.component('login-panel', {
     template: `
-		<div class="loginModal modal" tabindex="-1" role="dialog">
+		  <form action="">
+            <div class="modal-card" style="width: auto">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Login</p>
+                </header>
+                <section class="modal-card-body">
+
+					<b-field>
+        				<b-input
+							placeholder="User (Ohmportal)"
+							:value="user"
+							v-model=user
+							required>
+						</b-input>
+    				</b-field>
+					<b-field>
+            			<b-input
+							type="password"
+							placeholder="Password"
+							:value="pwd"
+							required>
+						</b-input>
+        			</b-field>
+					<b-checkbox>Eingeloggt bleiben</b-checkbox>
+                </section>
+                <footer class="modal-card-foot">
+                    <button class="button" type="button" @click="$parent.close()">Close</button>
+                    <button class="button is-primary" on:click="logIn(this.Event)">Login</button>
+                </footer>
+            </div>
+        </form>
+
+
+
+		<!--<div class="loginModal modal" tabindex="-1" role="dialog">
 			<div class="modal-dialog" role="document">
     			<div class="modal-content">
     				<div class="modal-header">
         				<h5 class="modal-title">Login</h5>
     				</div>
     				<div class="modal-body">
-						<form>
+						<b-field>
-							<div class="form-group">
+        					<b-input placeholder="User (Ohmportal)" v-model=user></b-input>
-								<label class="bmd-label-floating"> User (Ohmportal)</label>
+    					</b-field>
-								<input type="text" class="form-control" length=20 ref=userField v-model=user>
+						<b-field>
-							</div>
+            				<b-input type="password" placeholder="Password"></b-input>
-							<div class="form-group">
+        				</b-field>
-								<label class="bmd-label-floating">Password</label>
-								<input type=password class="form-control" length=20 v-model=pwd>
-							</div>
-						</form>
 					</div>
 					<div class="modal-footer">
-						<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</button>
+						<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</b-button>
-						<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</button>
+						<b-button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</b-button>
 					</div>
     			</div>
 			</div>
-		</div>`,
+		</div>-->`,
     data: function () {
 		return {
-			user: "",
+			user: "name",
-			pwd:"",
+			pwd:"password",
 		};
     },
     methods: {
@@ -41,6 +71,6 @@ Vue.component('login-panel', {
     	}
     },
 	mounted: function () {
-		$(".loginModal").modal ('show');
+		//$(".loginModal").modal ('show');
 	},
 });

public/routes/profil.js

@@ -7,34 +7,31 @@ const ProfilRouter = {
 			:key="profil.id"
 			:profil="profil"
 		></ProfilCard>
-		<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</button>
+		<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</b-button>
 	</div>
 	<div v-else-if="!isAuthentified">
-		<button v-on:click="showLoginModal=true" @clicked="logIn">Login</button>
+		<button class="button is-primary is-medium" @click="isModalActive = true">
-	 	<v-rating v-model="rating"></v-rating>
+        	Login
-		<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>
+    	</button>
+
+		<!--<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>-->
+
+		<b-modal :active.sync="showLoginModal" has-modal-card>
+			<login-panel v-bind="formProps"></login-panel>
+		</b-modal>
 	</div>
 </div>`,
     data: function () {
         return {
+			isModalActive: false,
 			profilcard: _profilcard,
-			showLoginModal: false,
+
-			isAuthentified: false,
-			rating: 3,
 			};
     },
     methods: {
-		closeModal (value) {
+		checkAuthentication (value) {
 			this.showLoginModal = value;
 			this.isAuthentified = !this.isAuthentified;
-        },
-
-		logIn (value) {
-			this.showLoginModal=false;
-        },
-
-		logOut () {
-			this.isAuthentified=false;
         },
     },
 };

public/style/style.css

@@ -71,6 +71,9 @@
 .om-user-line i {
   margin-right: 2%;
 }
+taginput-container is-focusable:focus {
+  border-color: #0046a0 !important;
+}
 .bookmark-headline {
   margin: 10px;
   padding-bottom: 10px;

public/style/style.less

@@ -89,6 +89,12 @@ a.nav-item.nav-link{
     }
 }
 
+//createMsg
+taginput-container is-focusable:focus {
+	border-color: @color !important;
+	//box-shadow: 0;
+}
+
 // bookmark
 .bookmark-headline{
     margin: 10px;