Skip to content

Commit e4e8e36

Browse files
PytalPytal
committed
[WIP] Vuetiful email section
Signed-off-by: Christopher Ng <chrng8@gmail.com>
1 parent 8235d90 commit e4e8e36

File tree

4 files changed

+152
-0
lines changed

4 files changed

+152
-0
lines changed

‎apps/settings/src/components/PersonalInfo/EmailSection.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!--
2+
- @copyright 2021 Christopher Ng <chrng8@gmail.com>
3+
-
4+
- @author 2021 Christopher Ng <chrng8@gmail.com>
5+
-
6+
- @license GNU AGPL version 3 or any later version
7+
-
8+
- This program is free software: you can redistribute it and/or modify
9+
- it under the terms of the GNU Affero General Public License as
10+
- published by the Free Software Foundation, either version 3 of the
11+
- License, or (at your option) any later version.
12+
-
13+
- This program is distributed in the hope that it will be useful,
14+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
- GNU Affero General Public License for more details.
17+
-
18+
- You should have received a copy of the GNU Affero General Public License
19+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
-->
21+
22+
<template>
23+
<form id="emailform" class="section">
24+
<h3>
25+
<label for="email">{{ t('settings', 'Emails') }}</label>
26+
<a href="#" class="federation-menu" :aria-label="t('settings', 'Change privacy level of email')">
27+
<span class="icon-federation-menu icon-password">
28+
<span class="icon-triangle-s"></span>
29+
</span>
30+
</a>
31+
<Actions>
32+
<ActionButton icon="icon-add" @click.stop.prevent="addEmails(email, additionalEmails)">
33+
{{ t('settings', 'Add email address') }}
34+
</ActionButton>
35+
</Actions>
36+
</h3>
37+
<input
38+
type="email"
39+
name="email"
40+
id="email"
41+
v-model="email"
42+
:placeholder="t('settings', 'Your email address')" />
43+
<input
44+
v-for="(email, index) in additionalEmails"
45+
type="email"
46+
name="additionalEmail[]"
47+
:id="`additionalEmail-${index}`"
48+
v-model="email.value"
49+
:placeholder="t('settings', `Additional email address ${index+1}`)"
50+
:key="index" />
51+
<input type="hidden" id="emailscope" value="emailScope">
52+
</form>
53+
</template>
54+
55+
<script>
56+
import { Actions, ActionButton } from '@nextcloud/vue'
57+
import axios from '@nextcloud/axios'
58+
import * as auth from '@nextcloud/auth'
59+
import * as router from '@nextcloud/router'
60+
61+
export default {
62+
name: 'EmailSection',
63+
components: {
64+
Actions,
65+
ActionButton,
66+
},
67+
props: {
68+
initialEmails: {
69+
type: Array,
70+
required: true,
71+
},
72+
},
73+
data() {
74+
/* eslint-disable */
75+
console.log(this.initialEmails)
76+
return {
77+
email: this.initialEmails[0],
78+
additionalEmails: this.initialEmails.slice(1).map(email => ({ value: email })),
79+
}
80+
},
81+
methods: {
82+
async addEmails(email, additionalEmails) {
83+
const userId = auth.getCurrentUser().uid
84+
// TODO upgrade @nextcloud/router to v2.0 so we can remove the .slice() trailing slash hack
85+
const url = router.generateOcsUrl(`cloud/users/${userId}`, 2).slice(0, -1)
86+
87+
// Set the primary email
88+
const res = await axios.put(url, {
89+
key: 'email',
90+
value: email,
91+
})
92+
// console.log(res.data)
93+
94+
// Set additional emails
95+
const resp = await axios.put(url, {
96+
key: 'additional_mail',
97+
value: additionalEmails.map(({ value }) => value),
98+
})
99+
// console.log(res.data)
100+
101+
additionalEmails.push({ value: '' })
102+
}
103+
}
104+
}
105+
</script>
106+
107+
<style scoped>
108+
</style>

‎apps/settings/src/main-personal-info.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @copyright 2021, Christopher Ng <chrng8@gmail.com>
3+
*
4+
* @author Christopher Ng <chrng8@gmail.com>
5+
*
6+
* @license GNU AGPL version 3 or any later version
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
import Vue from 'vue'
24+
import { loadState } from '@nextcloud/initial-state'
25+
26+
import EmailSection from './components/PersonalInfo/EmailSection'
27+
28+
// eslint-disable-next-line camelcase
29+
__webpack_nonce__ = btoa(OC.requestToken)
30+
31+
Vue.prototype.t = t
32+
33+
const View = Vue.extend(EmailSection)
34+
new View({
35+
propsData: {
36+
initialEmails: loadState('settings', 'emails'),
37+
// ...more initial props
38+
},
39+
}).$mount('#vue-emailform')

‎apps/settings/templates/settings/personal/personal.info.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
'federationsettingsview',
3232
'federationscopemenu',
3333
'settings/personalInfo',
34+
'vue-settings-personal-info',
3435
]);
3536
?>
3637

@@ -125,6 +126,9 @@
125126
<input type="hidden" id="displaynamescope" value="<?php p($_['displayNameScope']) ?>">
126127
</form>
127128
</div>
129+
<div class="personal-settings-setting-box">
130+
<div id="vue-emailform" class="section"></div>
131+
</div>
128132
<div class="personal-settings-setting-box">
129133
<form id="emailform" class="section">
130134
<h3>

‎apps/settings/webpack.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ module.exports = {
3232
'settings-personal-security': path.join(__dirname, 'src', 'main-personal-security'),
3333
'settings-personal-webauthn': path.join(__dirname, 'src', 'main-personal-webauth'),
3434
'settings-nextcloud-pdf': path.join(__dirname, 'src', 'main-nextcloud-pdf'),
35+
'settings-personal-info': path.join(__dirname, 'src', 'main-personal-info'),
3536
},
3637
output: {
3738
path: path.resolve(__dirname, './js'),

0 commit comments

Comments
 (0)