95 lines
1.9 KiB
Vue
95 lines
1.9 KiB
Vue
<script setup>
|
|
import { inject, reactive } from 'vue';
|
|
|
|
import Checkbox from '#/components/form/checkbox.vue';
|
|
|
|
import { patch } from '#/src/api.js';
|
|
|
|
const pageContext = inject('pageContext');
|
|
const { user } = pageContext;
|
|
|
|
const settings = reactive({
|
|
...user.settings,
|
|
});
|
|
|
|
async function updateSettings() {
|
|
await patch('/me/settings', settings);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form
|
|
class="profile-section"
|
|
@submit.prevent
|
|
>
|
|
<div class="setting">
|
|
<span class="setting-label">
|
|
<strong class="setting-title">Enable alert e-mails</strong>
|
|
<span class="setting-description">Whether you receive e-mail alerts</span>
|
|
</span>
|
|
|
|
<span class="setting-value">
|
|
<Checkbox
|
|
:checked="settings.alertEmailEnabled"
|
|
@change="(checked) => { settings.alertEmailEnabled = checked; updateSettings(); }"
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<label class="setting">
|
|
<span class="setting-label">
|
|
<strong class="setting-title">Alert e-mail frequency</strong>
|
|
<span class="setting-description">How often you receive your e-mail alerts</span>
|
|
</span>
|
|
|
|
<span class="setting-value">
|
|
<select
|
|
v-model="settings.alertEmailFrequency"
|
|
class="input"
|
|
@change="updateSettings"
|
|
>
|
|
<option :value="null">Immediately</option>
|
|
<option value="daily">Daily</option>
|
|
<option value="weekly">Weekly</option>
|
|
<option value="monthly">Monthly</option>
|
|
</select>
|
|
</span>
|
|
</label>
|
|
</form>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.input {
|
|
background: var(--background);
|
|
}
|
|
|
|
.setting {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: .75rem 1rem;
|
|
border-bottom: solid 1px var(--glass-weak-30);
|
|
|
|
&:hover {
|
|
border-color: var(--glass-weak-20);
|
|
}
|
|
}
|
|
|
|
.setting-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.setting-title {
|
|
color: var(--glass-strong-20);
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.setting-description {
|
|
color: var(--glass);
|
|
font-size: .9rem;
|
|
}
|
|
</style>
|