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

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<<<<<<< HEAD <<<<<<< HEAD
<!--for demonstration:--> <!--for demonstration:-->
<meta http-equiv="refresh" content="10">
<!-- <meta http-equiv="refresh" content="10">
======= =======
<!-- <meta http-equiv="refresh" content="30"> --> <!-- <meta http-equiv="refresh" content="30"> -->


<script src="routes/messageData.js"></script> <script src="routes/messageData.js"></script>
<script src="routes/profilCard.js"></script> <script src="routes/profilCard.js"></script>
<script src="routes/profilData.js"></script> <script src="routes/profilData.js"></script>
<script src="routes/login.js"></script>


<title>OHM News</title> <title>OHM News</title>
</head> </head>
<div class="om-header-container"> <div class="om-header-container">
<div class="om-header"> <div class="om-header">
<a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a> <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"> <form class="om-searchbar">
<input type="search" placeholder="Search..."> <input type="search" placeholder="Search...">
</form> </form>
</div> </div>
</div> </div>
<login-panel v-if="showLoginModal" @clicked="onClickChild" ></login-panel>


<div class="om-content"> <div class="om-content">
<div id=xxx></div> <div id=xxx></div>
var app = new Vue({ var app = new Vue({
router, router,
el: '#api', el: '#api',
data: {
showLoginModal: false,
},
methods: { methods: {

},
onClickChild (value) {
this.showLoginModal= value;
},
}
}); });


</script> </script>

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

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

} }
.om-content { .om-content {
margin: 10px; margin: 10px;
margin-top: 80px;
margin-top: 40px;
margin-bottom: 80px; margin-bottom: 80px;
} }
.om-content a { .om-content a {

Loading…
Cancel
Save