138 lines
4.8 KiB
Vue
138 lines
4.8 KiB
Vue
<template>
|
|
<div style="margin-top:50px;">
|
|
<v-container grid-list-md pa-10 >
|
|
<v-layout row wrap>
|
|
<v-flex md12>
|
|
<h1>Profile</h1>
|
|
<br><br>
|
|
<h2>E-Mail</h2>
|
|
<v-simple-table>
|
|
<template v-slot:default>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">E-Mail</th>
|
|
<th class="text-left">Status</th>
|
|
<th class="text-left">Primary</th>
|
|
<th class="text-right">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in mails" :key="item.name">
|
|
<td>{{ item.mail }}</td>
|
|
<td>{{ item.status }}</td>
|
|
<td>
|
|
<span v-if="item.primary">Yes</span>
|
|
<span v-if="!item.primary">No</span>
|
|
</td>
|
|
<td class="text-right">
|
|
<!--<v-btn depressed x-small :disabled="item.status == 'valide'" color="primary" style="margin-right: 10px;">Resend Validation</v-btn>!-->
|
|
<v-btn depressed x-small :disabled="item.primary" @click="removeMail(item.id)" color="error" style="margin-right: 10px;">Remove Mail</v-btn>
|
|
<v-btn depressed x-small :disabled="item.primary || item.status != 'valide'" color="success">Mark as Primary</v-btn>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
</v-simple-table>
|
|
<h3>Add new Mail</h3>
|
|
<p>If you add a new Mail we will send you a validation mail.</p>
|
|
<v-text-field
|
|
label="E-Mail"
|
|
value=""
|
|
v-model="newmail"
|
|
|
|
></v-text-field>
|
|
<v-btn
|
|
color="success"
|
|
@click="addMail"
|
|
>
|
|
Add Mail
|
|
</v-btn>
|
|
<h2>Password</h2>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ServerService from '../services/Server'
|
|
import UserService from '../services/User'
|
|
import AppService from '../services/Apps'
|
|
import AppCardsComponente from '../components/AppCards'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
nameBig: '',
|
|
nameSmall: '',
|
|
mails: [],
|
|
newmail: ''
|
|
}
|
|
},
|
|
components: {
|
|
"AppCards": AppCardsComponente
|
|
},
|
|
methods: {
|
|
"getMails": function () {
|
|
UserService.mails().then((res) => {
|
|
this.mails = res.data.data;
|
|
})
|
|
},
|
|
"addMail": function () {
|
|
UserService.addMail(this.newmail).then((res) => {
|
|
this.getMails();
|
|
});
|
|
},
|
|
"removeMail": function (id) {
|
|
UserService.removeMail(id).then((res) => {
|
|
this.getMails();
|
|
});
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
|
UserService.mails().then((res) => {
|
|
this.mails = res.data.data;
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.header {
|
|
background-image: url('~@/assets/manhattan-407703_1920.jpg');
|
|
background-repeat: no-repeat;
|
|
margin-top: -100px;
|
|
height: 30vh;
|
|
text-align: center;
|
|
}
|
|
.header h1{
|
|
padding-top: 200px;
|
|
font-size: 56px !important;
|
|
font-weight: 400;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
.header h1 .small{
|
|
font-weight: 300 !important;
|
|
}
|
|
.header h2{
|
|
padding-top: 30px;
|
|
font-size: 34px !important;
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h1{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h2{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
</style>
|