Log-in/Log-out prototyp

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;
+        },
     },
 };