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

register communication

Browse Source
This commit is contained in:
Tim Zieger 2020-05-18 09:12:41 +02:00
parent af3d5686d7
commit 5085cd45ce
3 changed files with 85 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/App.vue
View File

@ -46,7 +46,7 @@
<v-toolbar-title>Geo Timetracking</v-toolbar-title>
<v-spacer></v-spacer>
<!-- Modal -->
<v-row justify="center" >
<v-row justify="center">
<v-dialog v-model="dialog" width="70%" persistent>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Login</v-btn>
@ -54,10 +54,12 @@
<v-card class="main">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon @click="dialog = false"><v-icon>mdi-window-close</v-icon></v-btn>
<v-btn icon @click="dialog = false">
<v-icon>mdi-window-close</v-icon>
</v-btn>
</v-card-actions>
<SignIn v-on:signIn="signIn"/>
<p id="loginError" ></p>
<SignIn v-on:signIn="signIn" v-on:signUp="signUp" />
<p id="loginError"></p>
</v-card>
</v-dialog>
</v-row>
@ -81,9 +83,7 @@
<v-list-item-subtitle>Admin</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
</v-list-item-action>
<v-list-item-action></v-list-item-action>
</v-list-item>
</v-list>
@ -92,12 +92,7 @@
<v-list>
<v-list-item>
<v-list-item-action>
<v-switch
color="primary"
:input-value="login"
@change="login= !login"
></v-switch>
<v-switch color="primary" :input-value="login" @change="login= !login"></v-switch>
</v-list-item-action>
<v-list-item-title>View as Guest</v-list-item-title>
</v-list-item>
@ -127,9 +122,9 @@
</template>
<script>
import SignIn from "./views/SignIn.vue";
var baseUri = "http://plesk.icaotix.de:5000";
//var baseUri = "http://plesk.icaotix.de:5000";
import { baseUri } from './variables.js'
export default {
components: {
SignIn
@ -142,31 +137,60 @@ export default {
login: true,
dialog: false,
menu: false
}),
methods: {
signIn (loginData) {
signIn(loginData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.status == 200 & this.readyState ==4) {
sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
xhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) {
sessionStorage.setItem(
"jwt",
this.getResponseHeader("Authorization")
);
location.reload();
}else if(this.status != 200 && this.status !=0) {
document.getElementById("loginError").innerHTML="Login not successfull";
} else if (this.status != 200 && this.status != 0) {
document.getElementById("loginError").innerHTML =
"Login not successfull";
}
};
};
xhttp.open("POST", baseUri + "/login", true);
xhttp.send('{"username": "' + loginData.username +'", "password": "'+ loginData.password +'"}');
}
xhttp.send(
'{"username": "' +
loginData.username +
'", "password": "' +
loginData.password +
'"}'
);
},
signUp(signupData) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if ((this.status == 201) & (this.readyState == 4)) {
location.reload();
} else if (this.status != 201 && this.status != 0) {
document.getElementById("loginError").innerHTML =
"The username already exist";
}
};
xhttp.open("POST", baseUri + "/sign-up", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(
'{'+
'"firstname": "' +
signupData.firstname +
'", "lastname": "' +
signupData.lastname +
'", "username": "' +
signupData.username +
'", "password": "' +
signupData.password +
'"}'
);
}
},
created() {
this.$vuetify.theme.dark = true;
}

1
frontend/src/variables.js Normal file
View File

@ -0,0 +1 @@
export const baseUri = 'http://plesk.icaotix.de:5000'

25
frontend/src/views/SignIn.vue
View File

@ -79,6 +79,7 @@
<v-text-field
label="Firstname"
name="FirstnameR"
v-model="firstname"
prepend-icon="mdi-account-box"
type="text"
color="primary "
@ -86,6 +87,7 @@
<v-text-field
label="Lastname"
name="LastnameR"
v-model="lastname"
prepend-icon="mdi-account-box"
type="text"
color="primary"
@ -93,6 +95,7 @@
<v-text-field
label="Username"
name="UsernameR"
v-model="usernameR"
prepend-icon="mdi-account"
type="text"
color="primary"
@ -100,14 +103,16 @@
<v-text-field
label="Password"
name="PasswordR"
v-model="passwordR"
prepend-icon="mdi-key"
type="password"
color="primary"
/>
</v-form>
<p id="missingR"></p>
</v-card-text>
<div class="text-center mt-n5">
<v-btn color="logowhite" rounded outlined >Sign Up</v-btn>
<v-btn color="logowhite" rounded outlined v-on:click="signup()">Sign Up</v-btn>
</div>
</v-col>
</v-row>
@ -125,6 +130,10 @@ export default {
step: 1,
username: "",
password: "",
firstname: "",
lastname: "",
usernameR: "",
passwordR: ""
}),
props: {
@ -144,6 +153,20 @@ export default {
}
},
signup(){
if (this.usernameR != "" && this.passwordR != "") {
document.getElementById("missingR").innerHTML= "";
const signupData = {
firstname: this.firstname,
lastname: this.lastname,
username: this.usernameR,
password: this. passwordR
}
this.$emit('signUp', signupData);
}else {
document.getElementById("missingR").innerHTML= "Please fill out all fields";
}
}
}
};