Browse Source

Erster Code für die Login UI

master
Xenia Gruenzinger 5 years ago
parent
commit
e471a76377
3 changed files with 50 additions and 4 deletions
  1. 11
    3
      public/index.html
  2. 38
    0
      public/routes/login.js
  3. 1
    1
      public/style/style.css

+ 11
- 3
public/index.html View File

@@ -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>

+ 38
- 0
public/routes/login.js View File

@@ -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');
},
});

+ 1
- 1
public/style/style.css View File

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

Loading…
Cancel
Save