Erster Code für die Login UI

public/index.html

@@ -10,7 +10,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <<<<<<< HEAD
     <!--for demonstration:-->
-    <meta http-equiv="refresh" content="10">
+   <!-- <meta http-equiv="refresh" content="10">
 =======
 	<!-- <meta http-equiv="refresh" content="30"> -->
 
@@ -76,6 +76,7 @@
     <script src="routes/messageData.js"></script>
 	<script src="routes/profilCard.js"></script>
 	<script src="routes/profilData.js"></script>
+	<script src="routes/login.js"></script>
 
 	<title>OHM News</title>
 </head>
@@ -85,11 +86,13 @@
         <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>
@@ -121,9 +124,14 @@
         var app = new Vue({
             router,
             el: '#api',
+			data: {
+        		showLoginModal: false,
+    		},
             methods: {
-
-            },
+				onClickChild (value) {
+					this.showLoginModal= value;
+            	},
+			}
         });
 
     </script>

public/routes/login.js

@@ -0,0 +1,38 @@
+Vue.component('login-panel', {
+    template: `
+		<div class="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>
+							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>
+						</form>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-primary">Login</button>
+						<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</button>
+					</div>
+    			</div>
+			</div>
+		</div>`,
+    data: function () {
+		return {
+			user: "",
+			pwd:"",
+		};
+    },
+    methods: {
+    	closeLogin (event) {
+    		this.$emit('clicked', false)
+    	}
+    },
+	mounted: function () {
+		$(".modal").modal ('show');
+	},
+});

public/style/style.css

@@ -24,7 +24,7 @@
 }
 .om-content {
   margin: 10px;
-  margin-top: 80px;
+  margin-top: 40px;
   margin-bottom: 80px;
 }
 .om-content a {