Log-in/Log-out prototyp

public/index.html

@@ -86,13 +86,11 @@
         <div class="om-header-container">
             <div class="om-header">
                 <a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
-				<button v-on:click="showLoginModal=true">Login</button>
                 <form class="om-searchbar">
                     <input type="search" placeholder="Search...">
                 </form>
             </div>
         </div>
-		<login-panel v-if="showLoginModal" @clicked="onClickChild" ></login-panel>
 
         <div class="om-content">
 			<div id=xxx></div>
@@ -125,12 +123,8 @@
             router,
             el: '#api',
 			data: {
-        		showLoginModal: false,
     		},
             methods: {
-				onClickChild (value) {
-					this.showLoginModal= value;
-            	},
 			}
         });
 

public/routes/login.js

@@ -8,14 +8,18 @@ Vue.component('login-panel', {
     				</div>
     				<div class="modal-body">
 						<form>
-							User (Ohmportal):<br>
-							<input type=text length=20 ref=userField v-model=user><br>
-							Password:<br>
-							<input type=password length=20 v-model=pwd><br>
+							<div class="form-group">
+								<label class="bmd-label-floating"> User (Ohmportal)</label>
+								<input type="text" class="form-control" length=20 ref=userField v-model=user>
+							</div>
+							<div class="form-group">
+								<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">Login</button>
+						<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</button>
 						<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</button>
 					</div>
     			</div>
@@ -28,6 +32,10 @@ Vue.component('login-panel', {
 		};
     },
     methods: {
+		logIn(event){
+			this.$emit('clicked', true)
+		},
+
     	closeLogin (event) {
     		this.$emit('clicked', false)
     	}

public/routes/profil.js

@@ -1,17 +1,41 @@
 const ProfilRouter = {
     template: `
 <div>
-    <ProfilCard
-        v-for="(profil, index) in profilcard"
-        :key="profil.id"
-        :profil="profil"
-    ></ProfilCard>
+	<div v-if="isAuthentified">
+		<ProfilCard
+			v-for="(profil, index) in profilcard"
+			:key="profil.id"
+			:profil="profil"
+		></ProfilCard>
+		<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</button>
+	</div>
+	<div v-else-if="!isAuthentified">
+		<button v-on:click="showLoginModal=true" @clicked="logIn">Login</button>
+		<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>
+	</div>
 </div>`,
     data: function () {
-        return { profilcard: _profilcard };
+        return {
+			profilcard: _profilcard,
+			showLoginModal: false,
+			isAuthentified: false,
+			};
     },
     methods: {
+		closeModal (value) {
+			this.showLoginModal = value;
+			this.isAuthentified = !this.isAuthentified;
+        },
 
+		logIn (value) {
+
+			this.showLoginModal=false;
+        },
+
+		logOut () {
+
+			this.isAuthentified=false;
+        },
     },
 };