hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch '27-create-login-view' into 'master'

Browse Source 
Resolve "Create Login view"

Closes #27

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!23
This commit is contained in:
Tim Zieger 2020-04-29 10:02:04 +00:00
commit 1f90144c48
2 changed files with 89 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/router/index.js
View File

@ -5,6 +5,8 @@ import Profile from "../views/profile.vue";
import missing from "../views/missing.vue";
import Info from "../views/Info.vue";
import TimeRecords from "../views/TimeRecords.vue";
import About from "../views/About.vue";
import Login from "../views/Login.vue";
Vue.use(VueRouter);
const routes = [
@ -18,6 +20,11 @@ const routes = [
name: "TimeRecords",
component: TimeRecords
},
{
path: "/login",
name: "Login",
component: Login
},
{
path: "/profile/:id",
name: "Profile",
@ -38,11 +45,7 @@ const routes = [
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
component: About
},
{
path: '*',

81
frontend/src/views/Login.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="login">
<form @submit="login">
<p>Username:</p>
<input type="text" name="username" placeholder="Username" v-model="username">
<p>Password:</p>
<input type="password" name="password" placeholder="Password" v-model="password">
<br>
<input type="submit" value="Submit">
<p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>
</form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username: '',
password: ''
}
},
methods: {
login(e) {
e.preventDefault();
}
}
}
</script>
<style scoped>
.login{
color: #EBE7D9;
}
form {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
input[type="text"], input[type=password] {
justify-content: center;
width: 40vw;
height: 20px;
background-color: #131313;
border: 2px solid #0096ff;
color: #EBE7D9;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
box-sizing: content-box;
}
input[type="submit"] {
justify-content: center;
width: 40vw;
height: 20px;
border: 2px solid #0096ff ;
color: #EBE7D9;
background-color: #131313;
border-radius: 3px;
box-sizing: content-box;
padding: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}input[type="submit"]:hover {
justify-content: center;
width: 40vw;
height: 20px;
border: 2px solid #0096ff ;
color: #EBE7D9;
background-color: #272727;
border-radius: 3px;
box-sizing: content-box;
padding: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
</style>