keksAccountGUI/src/views/UserProfile.vue

101 lines
2.3 KiB
Vue

<template>
<div style="margin-top:50px;">
<v-container grid-list-md pa-10 >
<v-layout row wrap>
<v-flex md12>
<h1>Profil von: {{$store.getters.getMe["username"]}}</h1>
<br>
<h4>
Benutzername
<v-tooltip top>
<template v-slot:activator="{ on }">
<span v-on="on">
<v-icon>info</v-icon>
</span>
</template>
<span>
Den Benutzernamen kannst du nachträglich nicht verändern.
</span>
</v-tooltip>
</h4>
<span>{{user.username}}</span>
<v-form
ref="form"
v-model="valid"
:lazy-validation="lazy"
>
<v-row>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="user.primaryMail"
:rules="emailRules"
label="Primäre E-Mail Adresse"
required
></v-text-field>
</v-col>
</v-row>
</v-form>
<v-btn
:disabled="!valid"
color="success"
class="mr-4"
@click="validate()"
>
Speichern
</v-btn>
<hr/>
<pre>
{{user}}
</pre>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import ServerService from '../services/Server'
import UserService from '../services/User'
import AppService from '../services/Apps'
export default {
data () {
return {
nameBig: '',
nameSmall: '',
user: this.$store.getters.getMe,
emailRules: [
v => !!v || 'Primäre E-Mail muss Angegeben werden',
v => /.+@.+/.test(v) || 'E-Mail ist ungültig',
],
valid: true,
lazy: true,
}
},
components: {
},
methods: {
validate () {
if (this.$refs.form.validate()) {
console.log('lets go and save this information')
}
},
},
mounted: function() {
this.nameBig = this.$store.getters.getSettingValue("name_big");
this.nameSmall = this.$store.getters.getSettingValue("name_small");
}
}
</script>
<style>
</style>