tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

register page added

Browse Source
This commit is contained in:
rchrist 2019-04-23 16:58:22 +02:00
parent f244cf408b
commit 7a693d51f9
3 changed files with 199 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/layouts/MyLayout.vue
View File

@ -99,6 +99,20 @@
<q-item-label>Login</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
class="text-primary"
v-ripple
tag="a"
to="/Register"
>
<q-item-section avatar>
<q-icon name="assignment"/>
</q-item-section>
<q-item-section>
<q-item-label>Register</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>

180
frontend/src/pages/Register.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<div class="q-pa-md">
<form class="register">
<div class="q-pa-md">
<div class="column q-gutter-lg" style="">
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.name" type="text"
label="Nutzername eingeben (mindestens 2 Zeichen)"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben (gültige Email)"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.checkemail" type="text"
label="Email erneut eingeben" placeholer="Email"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.password" type="password"
label="Passwort eingeben (mindestens 8 Zeichen)"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.checkpassword" type="password"
label="Passwort erneut eingeben"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-btn
label="Sign up"
color="primary"
class="full-width"
type="submit"
@click="register()"
unelevated
/>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return{
user: {
name:"",
email:"",
checkemail:"",
password: "",
checkpassword: "",
},
}
},
methods: {
register: function () {
this.login();
console.log(localStorage.getItem('registerToken'));
if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){
this.login();
const data = {
name: this.user.name,
password: this.user.password,
email: this.user.email,
roles: [
{
role: "CACHER",
domain: "geocaching.de"
}
]
};
console.log("POST /api/register/ - json: " + JSON.stringify(data));
this.$axios.post('http://www.se.hs-heilbronn.de:8090/buga19usermanagement/account/register', data)
.then((response) => {
console.log("POST /api/login/ - response: ");
console.log(response.data);
console.log("TOKEN");
console.log(response.data.token);
})
.catch((error) => {
let message;
let header = "Fehler: ";
if (error.response) {
console.log("ERROR RESPONSE")
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
message = error.response.data.error;
header += error.response.status;
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
message = error.request;
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
message = error.message;
}
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
})
} else {
if(this.user.email!=this.user.checkemail) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Email stimmt nicht überein",
title: "Fehler",
});
} else if (this.user.password!=this.user.checkpassword){
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Passwort stimmt nicht überein",
title: "Fehler",
});
}
}
},
login: function () {
const logindata = {
email: "register@bugageocaching.de",
password: "reguser2019"
};
console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
this.$axios.post('http://www.se.hs-heilbronn.de:8090/buga19usermanagement/account/login', logindata)
.then((response) => {
localStorage.setItem('registerToken', JSON.stringify(response.data));
})
.catch((error) => {
let message;
let header = "Fehler: ";
if (error.response) {
console.log("ERROR RESPONSE")
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
message = error.response.data.error;
header += error.response.status;
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
message = error.request;
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
message = error.message;
}
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
})
},
},
};
</script>

5
frontend/src/router/routes.js
View File

@ -54,6 +54,11 @@ const routes = [
path: "/profile/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Profile.vue") }]
},
{
path: "/register/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Register.vue") }]
}
];