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

register view

Browse Source
This commit is contained in:
Tim Zieger 2020-05-03 11:30:21 +02:00
parent 1f90144c48
commit f824fe3302
3 changed files with 119 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import Info from "../views/Info.vue";
import TimeRecords from "../views/TimeRecords.vue";
import About from "../views/About.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
Vue.use(VueRouter);
const routes = [
@ -25,6 +26,11 @@ const routes = [
name: "Login",
component: Login
},
{
path: "/register",
name: "Register",
component: Register
},
{
path: "/profile/:id",
name: "Profile",

4
frontend/src/views/Login.vue
View File

@ -2,9 +2,9 @@
<div class="login">
<form @submit="login">
<p>Username:</p>
<input type="text" name="username" placeholder="Username" v-model="username">
<input type="text" name="username" placeholder="Username" v-model="username" required="required" oninvalid="this.setCustomValidity('Username cannot be empty.')" >
<p>Password:</p>
<input type="password" name="password" placeholder="Password" v-model="password">
<input type="password" name="password" placeholder="Password" v-model="password" required="required" oninvalid="this.setCustomValidity('Password cannot be empty.')">
<br>
<input type="submit" value="Submit">
<p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>

111
frontend/src/views/Register.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div class="register">
<form @submit="login">
<p>Firstname:</p>
<input type="text" name="firstname" placeholder="Firstname" v-model="firstname" required oninvalid="this.setCustomValidity('Firstname cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Lastname:</p>
<input type="text" name="lastname" placeholder="Lastname" v-model="lastname" required oninvalid="this.setCustomValidity('Lastname cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Username:</p>
<input type="text" name="username" placeholder="Username" v-model="username" required oninvalid="this.setCustomValidity('Username cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Password:</p>
<input type="password" name="password" placeholder="Password" v-model="password" required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Confirm Password:</p>
<input type="password" name="passwordC" placeholder="Password" v-model="passwordC" required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
<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: "Register",
data() {
return {
firstname: '',
lastname: '',
username: '',
password: '',
passwordC: ''
}
},
methods: {
login(e) {
e.preventDefault();
if (this.password == this.passwordC) {
//register
}else {
alert("The password confirmation does not match the password");
}
}
}
}
// var password1 = document.getElementsByName('password');
// var password2 = document.getElementsByName('passwordC');
//
// var checkPasswordValidity = function() {
// if (password1.value != password2.value) {
// password2.setCustomValidity('Passwörter müssen übereinstimmen!');
// } else {
// password2.setCustomValidity('');
// }
// };
//
// password1.addEventListener('change', checkPasswordValidity);
// password2.addEventListener('change', checkPasswordValidity);
</script>
<style scoped>
.register{
color: #EBE7D9;
font-size: 10px;
}
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>