Implement token autentication, Implement account views
This commit is contained in:
Michael Götz
parent
669ca7c52b
commit
997c2e9b12
56
basta/src/authentication.js
Normal file
56
basta/src/authentication.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import router from '@/router'
|
||||||
|
import {API_ROOT} from '@/config.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
user: {
|
||||||
|
authenticated: false
|
||||||
|
},
|
||||||
|
|
||||||
|
// authentication status
|
||||||
|
authenticated() {
|
||||||
|
return (localStorage.getItem('user') !== null && JSON.parse(localStorage.getItem('user')).data.token !== '')
|
||||||
|
},
|
||||||
|
|
||||||
|
// Send a request to the login URL and save the returned JWT
|
||||||
|
login(creds) {
|
||||||
|
console.log('LOGIN');
|
||||||
|
window.axios.post(API_ROOT.concat('/token-auth/token/create/'), creds)
|
||||||
|
.then((response) => {
|
||||||
|
this.user.authenticated = true;
|
||||||
|
console.log(response);
|
||||||
|
localStorage.setItem('user', JSON.stringify(response));
|
||||||
|
// Redirect to a specified route
|
||||||
|
window.axios.defaults.headers.common = {
|
||||||
|
'Authorization': ('Token ' + JSON.parse(localStorage.getItem('user')).data.auth_token)
|
||||||
|
};
|
||||||
|
location.reload();
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
console.log(error);
|
||||||
|
alert(error.response.data.non_field_errors[0]);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// To log out
|
||||||
|
logout: function (redirect) {
|
||||||
|
window.axios.post(API_ROOT.concat('/token-auth/token/destroy/'),)
|
||||||
|
.then((response) => {
|
||||||
|
this.user.authenticated = false;
|
||||||
|
localStorage.removeItem('user');
|
||||||
|
console.log(response);
|
||||||
|
// Redirect to a specified route
|
||||||
|
window.axios.defaults.headers.common = {
|
||||||
|
'Authorization': '',
|
||||||
|
};
|
||||||
|
location.reload();
|
||||||
|
if (redirect) {
|
||||||
|
router.push({name: 'home'});
|
||||||
|
// router.go(redirect)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
console.log(error);
|
||||||
|
alert(error.response.data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
41
basta/src/components/account/AccountOverview.vue
Normal file
41
basta/src/components/account/AccountOverview.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<b-tabs>
|
||||||
|
<b-tab title="Account Details" active>
|
||||||
|
<account-details :user="user"></account-details>
|
||||||
|
</b-tab>
|
||||||
|
<b-tab title="Food App">
|
||||||
|
<food></food>
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from '../../config.js';
|
||||||
|
import AccountDetails from '@/components/account/utils/AccountDetails';
|
||||||
|
import Food from '@/components/account/utils/Food';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AccountOverview",
|
||||||
|
components: {AccountDetails, Food,},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
user: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.axios
|
||||||
|
.get(CONFIG.API_ROOT_ACCOUNT.concat('/'))
|
||||||
|
.then((response) => {
|
||||||
|
console.log(response.data);
|
||||||
|
this.user = response.data[0];
|
||||||
|
})
|
||||||
|
.catch(e => console.error(e));
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
51
basta/src/components/account/Activation.vue
Normal file
51
basta/src/components/account/Activation.vue
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<b-row>
|
||||||
|
<b-col class="justify-content-md-center text-center">
|
||||||
|
<div v-if="activated">
|
||||||
|
<p>Dein Account ist nun aktiviert.</p>
|
||||||
|
<router-link :to="{name: 'home'}">Home</router-link>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<p v-if="!error">Account wird aktiviert.</p>
|
||||||
|
<p v-if="error">Leider konnte der Account nicht aktiviert werden.</p>
|
||||||
|
<router-link :to="{name: 'home'}">Home</router-link>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from '../../config'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Activation",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activated: false,
|
||||||
|
error: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
let url = CONFIG.API_ROOT.concat('/token-auth/users/activate/');
|
||||||
|
let post_data = {
|
||||||
|
"uid": this.$route.params.uuid,
|
||||||
|
"token": this.$route.params.token,
|
||||||
|
};
|
||||||
|
window.axios
|
||||||
|
.post(url, post_data)
|
||||||
|
.then(response => {
|
||||||
|
this.activated = true;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(
|
||||||
|
e => {
|
||||||
|
this.error = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
84
basta/src/components/account/Login.vue
Normal file
84
basta/src/components/account/Login.vue
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="!isAuthenticated()">
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2">
|
||||||
|
<h2>Login</h2>
|
||||||
|
<b-form @submit="onSubmit" v-if="show">
|
||||||
|
<b-form-group id="username"
|
||||||
|
label="User Name:"
|
||||||
|
label-for="username">
|
||||||
|
<b-form-input id="username"
|
||||||
|
type="text"
|
||||||
|
v-model="form.username"
|
||||||
|
required
|
||||||
|
placeholder="Enter username">
|
||||||
|
</b-form-input>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group id="password"
|
||||||
|
label="Password:"
|
||||||
|
label-for="password">
|
||||||
|
<b-form-input id="password"
|
||||||
|
type="password"
|
||||||
|
v-model="form.password"
|
||||||
|
required
|
||||||
|
placeholder="Enter password">
|
||||||
|
</b-form-input>
|
||||||
|
</b-form-group>
|
||||||
|
<b-button type="submit" variant="primary">Submit</b-button>
|
||||||
|
</b-form>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="12" class="">
|
||||||
|
<br/>
|
||||||
|
<p>
|
||||||
|
<router-link :to="{name: 'password-reset-mail'}">Passwort vergessen?</router-link>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<router-link :to="{name: 'registration'}">Noch keinen Account?</router-link>
|
||||||
|
</p>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2">
|
||||||
|
Du wurdest erfolgreich eingeloggt.
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import authentication from "../../authentication";
|
||||||
|
import router from '../../router'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Login",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
},
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
authentication.login({"username": this.form.username, "password": this.form.password}, -1);
|
||||||
|
},
|
||||||
|
isAuthenticated: function () {
|
||||||
|
if (authentication.authenticated()) {
|
||||||
|
router.go(-1);
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
28
basta/src/components/account/Logout.vue
Normal file
28
basta/src/components/account/Logout.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2">
|
||||||
|
Du wurdest erfolgreich ausgeloggt.
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Auth from '../../authentication'
|
||||||
|
import router from '../../router'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Logout",
|
||||||
|
created() {
|
||||||
|
if (Auth.authenticated()) {
|
||||||
|
Auth.logout();
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
router.go(-1);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
101
basta/src/components/account/PasswordResetConfirmation.vue
Normal file
101
basta/src/components/account/PasswordResetConfirmation.vue
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2">
|
||||||
|
<h2>Passwort Reset</h2>
|
||||||
|
<p v-if="error">Das Passwort konnte nicht zurück gesetzt werden.</p>
|
||||||
|
<b-form @submit="onSubmit" v-if="show">
|
||||||
|
<b-form-group id="password"
|
||||||
|
label="Password:"
|
||||||
|
label-for="password">
|
||||||
|
<b-form-input id="password"
|
||||||
|
type="password"
|
||||||
|
v-model="form.password"
|
||||||
|
required
|
||||||
|
placeholder="Enter password">
|
||||||
|
</b-form-input>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group id="passwordSafety"
|
||||||
|
label-for="passwordSafety">
|
||||||
|
<b-form-input id="passwordSafety"
|
||||||
|
type="password"
|
||||||
|
v-model="form.passwordSafety"
|
||||||
|
required
|
||||||
|
placeholder="Enter password again">
|
||||||
|
</b-form-input>
|
||||||
|
</b-form-group>
|
||||||
|
<div v-if="error" class="error">
|
||||||
|
<p v-for="error in errorMsgs">{{error}}</p>
|
||||||
|
</div>
|
||||||
|
<b-button type="submit" variant="primary">Submit</b-button>
|
||||||
|
</b-form>
|
||||||
|
<div v-if="!show">
|
||||||
|
<p>Passwort wurde erfolgreich zurückgesetzt.</p>
|
||||||
|
<p>Zurück zum
|
||||||
|
<router-link :to="{name: 'login'}">Login</router-link>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from "../../config";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PasswordResetMail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
password: '',
|
||||||
|
passwordSafety: ''
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
error: false,
|
||||||
|
errorMsgs: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
this.errorMsgs = [];
|
||||||
|
let url = CONFIG.API_ROOT.concat('/token-auth/password/reset/confirm/');
|
||||||
|
let post_data = {
|
||||||
|
"new_password": this.form.password,
|
||||||
|
"re_new_password": this.form.passwordSafety,
|
||||||
|
"uid": this.$route.params.uuid,
|
||||||
|
"token": this.$route.params.token,
|
||||||
|
};
|
||||||
|
window.axios
|
||||||
|
.post(url, post_data)
|
||||||
|
.then(response => {
|
||||||
|
this.show = false;
|
||||||
|
this.error = false;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(
|
||||||
|
e => {
|
||||||
|
this.error = true;
|
||||||
|
console.log(e);
|
||||||
|
if (e.response.data.new_password) {
|
||||||
|
for (const error of e.response.data.new_password) {
|
||||||
|
this.errorMsgs.push(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.response.data.non_field_errors) {
|
||||||
|
this.errorMsgs.push(e.response.data.non_field_errors[0]);
|
||||||
|
}
|
||||||
|
console.log(this.errorMsgs)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.error {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ff253a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
77
basta/src/components/account/PasswordResetMail.vue
Normal file
77
basta/src/components/account/PasswordResetMail.vue
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2">
|
||||||
|
<h2>Passwort Reset</h2>
|
||||||
|
<b-form @submit="onSubmit" v-if="show">
|
||||||
|
<b-form-group id="email"
|
||||||
|
label="Email-Adresse"
|
||||||
|
label-for="email"
|
||||||
|
>
|
||||||
|
<b-form-input id="email"
|
||||||
|
type="email"
|
||||||
|
v-model="form.email"
|
||||||
|
:state="!form.emailErrorVal"
|
||||||
|
required
|
||||||
|
placeholder="Enter email">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-invalid-feedback id="input1LiveFeedback">
|
||||||
|
<p v-for="error in form.emailError">{{error}}</p>
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
<b-button type="submit" variant="primary">Submit</b-button>
|
||||||
|
</b-form>
|
||||||
|
<div v-if="!show">
|
||||||
|
Die E-Mail wurde erfolgreich versandt.
|
||||||
|
<p>Zurück zu
|
||||||
|
<router-link :to="{name: 'home'}">Home</router-link>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from "../../config";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PasswordResetMail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
email: '',
|
||||||
|
emailError: '',
|
||||||
|
emailErrorVal: false,
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
error: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
this.form.emailErrorVal = false;
|
||||||
|
let url = CONFIG.API_ROOT.concat('/token-auth/password/reset/');
|
||||||
|
let post_data = {
|
||||||
|
"email": this.form.email,
|
||||||
|
};
|
||||||
|
window.axios
|
||||||
|
.post(url, post_data)
|
||||||
|
.then(response => {
|
||||||
|
this.show = false;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(
|
||||||
|
e => {
|
||||||
|
this.form.emailError = e.response.data.email;
|
||||||
|
this.form.emailErrorVal = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
155
basta/src/components/account/Registration.vue
Normal file
155
basta/src/components/account/Registration.vue
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2">
|
||||||
|
<h2>Registrierung</h2>
|
||||||
|
<p v-if="error">Der Nutzer konnte nicht registriert werden, bitte versuche es erneut.</p>
|
||||||
|
<ul>
|
||||||
|
<li v-for="error in form.passwordError">{{error}}</li>
|
||||||
|
</ul>
|
||||||
|
<b-form @submit="onSubmit" v-if="show">
|
||||||
|
<b-form-group id="username"
|
||||||
|
label="Nutzername"
|
||||||
|
label-for="username">
|
||||||
|
<b-form-input id="username"
|
||||||
|
type="text"
|
||||||
|
v-model="form.username"
|
||||||
|
required
|
||||||
|
placeholder="Enter username">
|
||||||
|
</b-form-input>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group id="email"
|
||||||
|
label="Email Adresse"
|
||||||
|
label-for="email"
|
||||||
|
>
|
||||||
|
<b-form-input id="email"
|
||||||
|
type="email"
|
||||||
|
v-model="form.email"
|
||||||
|
:state="!$v.form.email.$invalid"
|
||||||
|
required
|
||||||
|
placeholder="Enter email">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-invalid-feedback id="input1LiveFeedback">
|
||||||
|
Bitte gebe eine valide E-Mail an.
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group id="password"
|
||||||
|
label="Passwort"
|
||||||
|
label-for="password">
|
||||||
|
<b-form-input id="password"
|
||||||
|
type="password"
|
||||||
|
:state="!$v.form.password"
|
||||||
|
v-model="form.password"
|
||||||
|
required
|
||||||
|
placeholder="Enter password">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-invalid-feedback id="input1LiveFeedback">
|
||||||
|
<ul>
|
||||||
|
<li v-for="error in form.passwordError.$invalid">{{error}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
<b-form-group id="passwordSafety"
|
||||||
|
label-for="passwordSafety">
|
||||||
|
<b-form-input id="passwordSafety"
|
||||||
|
type="password"
|
||||||
|
v-model="form.passwordSafety"
|
||||||
|
:state="!$v.form.passwordSafety.$invalid"
|
||||||
|
required
|
||||||
|
placeholder="Enter password again">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-invalid-feedback id="input1LiveFeedback">
|
||||||
|
Die Passwörter müssen identisch sein
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
|
||||||
|
</b-form>
|
||||||
|
<div v-if="!show && response">
|
||||||
|
Dein Account wurde erfolgreich angelegt.
|
||||||
|
Bitte bestätige deinen Account über die Aktivierungsmail.
|
||||||
|
</div>
|
||||||
|
<div v-if="!show && !response">
|
||||||
|
Die Account daten werden übermittelt.
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from '../../config'
|
||||||
|
import {validationMixin} from "vuelidate"
|
||||||
|
import {required, minLength, sameAs, email} from "vuelidate/lib/validators"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Registration",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
username: '',
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
passwordError: ['Ein Passwort darf nicht zu ähnlich zum Benutzernamen sein.', ' Ein Passwort muss mindestens 8 Zeichen enthalten.'],
|
||||||
|
passwordSafety: '',
|
||||||
|
},
|
||||||
|
response: false,
|
||||||
|
show: true,
|
||||||
|
error: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [validationMixin],
|
||||||
|
validations: {
|
||||||
|
form: {
|
||||||
|
username: {
|
||||||
|
required,
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required,
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required,
|
||||||
|
minLength: minLength(8),
|
||||||
|
},
|
||||||
|
passwordSafety: {
|
||||||
|
required,
|
||||||
|
sameAsPassword: sameAs('password'),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
this.show = false;
|
||||||
|
this.error = false;
|
||||||
|
let url = CONFIG.API_ROOT.concat('/token-auth/users/create/');
|
||||||
|
let post_data = {
|
||||||
|
"username": this.form.username,
|
||||||
|
"email": this.form.email,
|
||||||
|
"password": this.form.password,
|
||||||
|
// "re_new_password": this.form.passwordSafety,
|
||||||
|
};
|
||||||
|
window.axios
|
||||||
|
.post(url, post_data)
|
||||||
|
.then(response => {
|
||||||
|
this.error = false;
|
||||||
|
this.response = true;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(
|
||||||
|
e => {
|
||||||
|
if (e.response.data.password) {
|
||||||
|
this.form.passwordError = e.response.data.password;
|
||||||
|
}
|
||||||
|
this.error = true;
|
||||||
|
this.show = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
58
basta/src/components/account/utils/AccountDetails.vue
Normal file
58
basta/src/components/account/utils/AccountDetails.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div v-if="!showFormular">
|
||||||
|
<b-row class="p-1">
|
||||||
|
<b-col cols="12" sm="12" md="12" lg="8" xl="8" class="p-3 bg-light text-dark">
|
||||||
|
<h3>{{user.username}}</h3>
|
||||||
|
<p><strong>Vorname:</strong> {{ user.first_name }}</p>
|
||||||
|
<p><strong>Nachname:</strong> {{ user.last_name }}</p>
|
||||||
|
<p><strong>E-Mail:</strong> {{ user.email }}</p>
|
||||||
|
<!--<a href="{{ url('change-account') }}">Bearbeiten</a>-->
|
||||||
|
<b-button :pressed.sync="showFormular" variant="primary">{{this.formularButtonLabel}}</b-button>
|
||||||
|
</b-col>
|
||||||
|
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center p-3">
|
||||||
|
<div class="p-3 bg-light text-dark">
|
||||||
|
<p>Date joined: {{ user.date_joined | formatDate}}</p>
|
||||||
|
<p>Last Login: {{ user.last_login | formatDate}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
<div v-if="showFormular">
|
||||||
|
<account-formular :user="user"></account-formular>
|
||||||
|
<b-button :pressed.sync="showFormular" variant="primary">{{this.formularButtonLabel}}</b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from '../../../config.js';
|
||||||
|
import AccountFormular from '@/components/account/utils/AccountFormular';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AccountDetails",
|
||||||
|
components: {AccountFormular},
|
||||||
|
props: ['user'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
account: {},
|
||||||
|
showFormular: false,
|
||||||
|
formularButtonLabel: 'Bearbeiten',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
showFormular: function (newShowFormular) {
|
||||||
|
if (newShowFormular) {
|
||||||
|
this.formularButtonLabel = 'Fertig'
|
||||||
|
} else {
|
||||||
|
this.formularButtonLabel = 'Bearbeiten'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
159
basta/src/components/account/utils/AccountFormular.vue
Normal file
159
basta/src/components/account/utils/AccountFormular.vue
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<b-row class="justify-content-center text-center ml-md-auto mt-2">
|
||||||
|
<b-col cols="11" sm="10" md="7" lg="5" xl="4" class="border pb-2 pt-2 text-left">
|
||||||
|
<b-form @submit="onSubmit">
|
||||||
|
<b-form-input id="username"
|
||||||
|
type="text"
|
||||||
|
v-model="form.username"
|
||||||
|
required
|
||||||
|
placeholder="Nutzername">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-input id="firstName"
|
||||||
|
type="text"
|
||||||
|
v-model="form.firstName"
|
||||||
|
placeholder="Vorname">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-input id="lastName"
|
||||||
|
type="text"
|
||||||
|
v-model="form.lastName"
|
||||||
|
placeholder="Nachname">
|
||||||
|
</b-form-input>
|
||||||
|
<b-form-input id="email"
|
||||||
|
type="email"
|
||||||
|
v-model="form.email"
|
||||||
|
:state="!$v.form.email.$invalid"
|
||||||
|
placeholder="Email Adresse">
|
||||||
|
</b-form-input>
|
||||||
|
<multiselect
|
||||||
|
v-model="form.fakultaet"
|
||||||
|
:options="fakultaetOptions"
|
||||||
|
:multiple="false"
|
||||||
|
:custom-label="optionLabel"
|
||||||
|
track-by="text"
|
||||||
|
placeholder="Fakultät"
|
||||||
|
>
|
||||||
|
</multiselect>
|
||||||
|
<b-form-checkbox id="fakultaetsNews"
|
||||||
|
v-model="form.fakultaetsNews"
|
||||||
|
value=true
|
||||||
|
unchecked-value=false>
|
||||||
|
Fakultätsnachrichten
|
||||||
|
</b-form-checkbox>
|
||||||
|
<multiselect
|
||||||
|
v-model="form.allergens"
|
||||||
|
:options="allergensOptions"
|
||||||
|
:multiple="true"
|
||||||
|
:custom-label="optionLabel"
|
||||||
|
track-by="text"
|
||||||
|
placeholder="Allergene"
|
||||||
|
>
|
||||||
|
</multiselect>
|
||||||
|
<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
|
||||||
|
</b-form>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from '../../../config';
|
||||||
|
import {validationMixin} from "vuelidate";
|
||||||
|
import {required, minLength, sameAs, email} from "vuelidate/lib/validators";
|
||||||
|
import Multiselect from 'vue-multiselect';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AccountFormular",
|
||||||
|
props: ['user'],
|
||||||
|
components: {Multiselect,},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
username: '',
|
||||||
|
firstName: '',
|
||||||
|
lastName: '',
|
||||||
|
email: '',
|
||||||
|
fakultaet: '',
|
||||||
|
fakultaetsNews: false,
|
||||||
|
allergens: '',
|
||||||
|
},
|
||||||
|
fakultaetOptions: [
|
||||||
|
{value: 1, text: 'SoWi'},
|
||||||
|
{value: 2, text: 'GuK'},
|
||||||
|
{value: 3, text: 'HuWi'},
|
||||||
|
{value: 4, text: 'WIAI'},
|
||||||
|
],
|
||||||
|
allergensOptions: [
|
||||||
|
{value: 1, text: 'Gluten'},
|
||||||
|
{value: 2, text: 'Schwein'},
|
||||||
|
{value: 3, text: 'Rind'},
|
||||||
|
{value: 4, text: 'KA'},
|
||||||
|
],
|
||||||
|
response: false,
|
||||||
|
show: true,
|
||||||
|
error: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [validationMixin],
|
||||||
|
validations: {
|
||||||
|
form: {
|
||||||
|
username: {
|
||||||
|
required,
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required,
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.updateFormular();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
user: function (newUser) {
|
||||||
|
this.updateFormular();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateFormular() {
|
||||||
|
this.form.username = this.user.username;
|
||||||
|
this.form.firstName = this.user.firstName;
|
||||||
|
this.form.lastName = this.user.lastName;
|
||||||
|
this.form.email = this.user.email;
|
||||||
|
},
|
||||||
|
optionLabel(option) {
|
||||||
|
return option.text;
|
||||||
|
},
|
||||||
|
onSubmit(evt) {
|
||||||
|
this.show = false;
|
||||||
|
this.error = false;
|
||||||
|
let url = CONFIG.API_ROOT.concat('/token-auth/users/create/');
|
||||||
|
let post_data = {
|
||||||
|
"username": this.form.username,
|
||||||
|
"email": this.form.email,
|
||||||
|
"password": this.form.password,
|
||||||
|
// "re_new_password": this.form.passwordSafety,
|
||||||
|
};
|
||||||
|
window.axios
|
||||||
|
.post(url, post_data)
|
||||||
|
.then(response => {
|
||||||
|
this.error = false;
|
||||||
|
this.response = true;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(
|
||||||
|
e => {
|
||||||
|
if (e.response.data.password) {
|
||||||
|
this.form.passwordError = e.response.data.password;
|
||||||
|
}
|
||||||
|
this.error = true;
|
||||||
|
this.show = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
139
basta/src/components/account/utils/Food.vue
Normal file
139
basta/src/components/account/utils/Food.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h4>Essen</h4>
|
||||||
|
<div class="row p-1">
|
||||||
|
<div v-for="food in foods" class="col col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 p-2">
|
||||||
|
<b-row class="food border p-2">
|
||||||
|
<b-col cols="4" class="image">
|
||||||
|
<a v-if="food.image" :href="food.image.thumb">
|
||||||
|
<img :src="food.image.thumb" class="media-object" alt="Bild" width="100%">
|
||||||
|
</a>
|
||||||
|
<a v-else :href="defaultImageUrl">
|
||||||
|
<img :src="defaultImageUrl" class="media-object"
|
||||||
|
alt="Bild" width="100%">
|
||||||
|
</a>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="4" class="title-rating">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12">
|
||||||
|
<h5>{{food.name}}</h5>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12">
|
||||||
|
<div v-if="food.rating">
|
||||||
|
Rating: {{food.rating}}
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="4" class="comment">
|
||||||
|
<div v-if="food.comment">
|
||||||
|
<h5>{{food.comment.title}}</h5>
|
||||||
|
<div class="">
|
||||||
|
<p>{{food.comment.description}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as CONFIG from '../../../config.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Food",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
images: [],
|
||||||
|
ratings: [],
|
||||||
|
comments: [],
|
||||||
|
foods: [],
|
||||||
|
defaultImageUrl: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.axios
|
||||||
|
.get(CONFIG.API_ROOT_ACCOUNT.concat('/food/ratings/'))
|
||||||
|
.then((response) => {
|
||||||
|
this.ratings = response.data;
|
||||||
|
this.mergeArrays();
|
||||||
|
})
|
||||||
|
.catch(e => console.error(e));
|
||||||
|
|
||||||
|
window.axios
|
||||||
|
.get(CONFIG.API_ROOT_ACCOUNT.concat('/food/images/'))
|
||||||
|
.then((response) => {
|
||||||
|
this.images = response.data;
|
||||||
|
this.mergeArrays();
|
||||||
|
})
|
||||||
|
.catch(e => console.error(e));
|
||||||
|
|
||||||
|
window.axios
|
||||||
|
.get(CONFIG.API_ROOT_ACCOUNT.concat('/food/comments/'))
|
||||||
|
.then((response) => {
|
||||||
|
this.comments = response.data;
|
||||||
|
this.mergeArrays();
|
||||||
|
})
|
||||||
|
.catch(e => console.error(e));
|
||||||
|
axios.get(CONFIG.API_ROOT_FOOD.concat('/meals/images/default'))
|
||||||
|
.then(response => {
|
||||||
|
this.defaultImageUrl = response.data.image;
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
console.error(e)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
mergeArrays: function () {
|
||||||
|
this.foods = [];
|
||||||
|
let food_ids = [];
|
||||||
|
let foods = {};
|
||||||
|
|
||||||
|
if (this.images.length > 0) {
|
||||||
|
for (const image of this.images) {
|
||||||
|
food_ids.push(image.food.id);
|
||||||
|
foods[image.food.id] = {};
|
||||||
|
foods[image.food.id]['name'] = image.food.name;
|
||||||
|
foods[image.food.id]['image'] = image.image;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.ratings.length > 0) {
|
||||||
|
for (const rating of this.ratings) {
|
||||||
|
food_ids.push(rating.food.id);
|
||||||
|
if (!foods[rating.food.id]) {
|
||||||
|
foods[rating.food.id] = {};
|
||||||
|
}
|
||||||
|
foods[rating.food.id]['name'] = rating.food.name;
|
||||||
|
foods[rating.food.id]['rating'] = rating.rating;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.comments.length > 0) {
|
||||||
|
for (const comment of this.comments) {
|
||||||
|
food_ids.push(comment.food.id);
|
||||||
|
if (!foods[comment.food.id]) {
|
||||||
|
foods[comment.food.id] = {};
|
||||||
|
}
|
||||||
|
foods[comment.food.id]['name'] = comment.food.name;
|
||||||
|
foods[comment.food.id]['comment'] = {};
|
||||||
|
foods[comment.food.id]['comment']['title'] = comment.title;
|
||||||
|
foods[comment.food.id]['comment']['description'] = comment.description;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (const key in foods) {
|
||||||
|
this.foods.push(foods[key]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.food {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user