Thomas Citharel
@@ -1,145 +1,159 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Email") }}</h2>
|
||||
</div>
|
||||
<i18n
|
||||
tag="p"
|
||||
class="content"
|
||||
v-if="loggedUser"
|
||||
path="Your current email is {email}. You use it to log in."
|
||||
>
|
||||
<b slot="email">{{ loggedUser.email }}</b>
|
||||
</i18n>
|
||||
<b-notification
|
||||
type="is-danger"
|
||||
has-icon
|
||||
aria-close-label="Close notification"
|
||||
role="alert"
|
||||
:key="error"
|
||||
v-for="error in changeEmailErrors"
|
||||
>{{ error }}</b-notification
|
||||
>
|
||||
<form @submit.prevent="resetEmailAction" ref="emailForm" class="form">
|
||||
<b-field :label="$t('New email')">
|
||||
<b-input aria-required="true" required type="email" v-model="newEmail" />
|
||||
</b-field>
|
||||
<p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
|
||||
<b-field :label="$t('Password')">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="passwordForEmailChange"
|
||||
/>
|
||||
</b-field>
|
||||
<button
|
||||
class="button is-primary"
|
||||
:disabled="!($refs.emailForm && $refs.emailForm.checkValidity())"
|
||||
<div>
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }">{{
|
||||
$t("General")
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Email") }}</h2>
|
||||
</div>
|
||||
<i18n
|
||||
tag="p"
|
||||
class="content"
|
||||
v-if="loggedUser"
|
||||
path="Your current email is {email}. You use it to log in."
|
||||
>
|
||||
{{ $t("Change my email") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Password") }}</h2>
|
||||
</div>
|
||||
<b-notification
|
||||
type="is-danger"
|
||||
has-icon
|
||||
aria-close-label="Close notification"
|
||||
role="alert"
|
||||
:key="error"
|
||||
v-for="error in changePasswordErrors"
|
||||
>{{ error }}</b-notification
|
||||
>
|
||||
<form @submit.prevent="resetPasswordAction" ref="passwordForm" class="form">
|
||||
<b-field :label="$t('Old password')">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="oldPassword"
|
||||
/>
|
||||
</b-field>
|
||||
<b-field :label="$t('New password')">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="newPassword"
|
||||
/>
|
||||
</b-field>
|
||||
<button
|
||||
class="button is-primary"
|
||||
:disabled="!($refs.passwordForm && $refs.passwordForm.checkValidity())"
|
||||
<b slot="email">{{ loggedUser.email }}</b>
|
||||
</i18n>
|
||||
<b-notification
|
||||
type="is-danger"
|
||||
has-icon
|
||||
aria-close-label="Close notification"
|
||||
role="alert"
|
||||
:key="error"
|
||||
v-for="error in changeEmailErrors"
|
||||
>{{ error }}</b-notification
|
||||
>
|
||||
{{ $t("Change my password") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Delete account") }}</h2>
|
||||
</div>
|
||||
<p class="content">{{ $t("Deleting my account will delete all of my identities.") }}</p>
|
||||
<b-button @click="openDeleteAccountModal" type="is-danger">
|
||||
{{ $t("Delete my account") }}
|
||||
</b-button>
|
||||
<form @submit.prevent="resetEmailAction" ref="emailForm" class="form">
|
||||
<b-field :label="$t('New email')">
|
||||
<b-input aria-required="true" required type="email" v-model="newEmail" />
|
||||
</b-field>
|
||||
<p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
|
||||
<b-field :label="$t('Password')">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="passwordForEmailChange"
|
||||
/>
|
||||
</b-field>
|
||||
<button
|
||||
class="button is-primary"
|
||||
:disabled="!($refs.emailForm && $refs.emailForm.checkValidity())"
|
||||
>
|
||||
{{ $t("Change my email") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Password") }}</h2>
|
||||
</div>
|
||||
<b-notification
|
||||
type="is-danger"
|
||||
has-icon
|
||||
aria-close-label="Close notification"
|
||||
role="alert"
|
||||
:key="error"
|
||||
v-for="error in changePasswordErrors"
|
||||
>{{ error }}</b-notification
|
||||
>
|
||||
<form @submit.prevent="resetPasswordAction" ref="passwordForm" class="form">
|
||||
<b-field :label="$t('Old password')">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="oldPassword"
|
||||
/>
|
||||
</b-field>
|
||||
<b-field :label="$t('New password')">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="newPassword"
|
||||
/>
|
||||
</b-field>
|
||||
<button
|
||||
class="button is-primary"
|
||||
:disabled="!($refs.passwordForm && $refs.passwordForm.checkValidity())"
|
||||
>
|
||||
{{ $t("Change my password") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Delete account") }}</h2>
|
||||
</div>
|
||||
<p class="content">{{ $t("Deleting my account will delete all of my identities.") }}</p>
|
||||
<b-button @click="openDeleteAccountModal" type="is-danger">
|
||||
{{ $t("Delete my account") }}
|
||||
</b-button>
|
||||
|
||||
<b-modal
|
||||
:active.sync="isDeleteAccountModalActive"
|
||||
has-modal-card
|
||||
full-screen
|
||||
:can-cancel="false"
|
||||
>
|
||||
<section class="hero is-primary is-fullheight">
|
||||
<div class="hero-body has-text-centered">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third-desktop is-offset-one-third-desktop">
|
||||
<h1 class="title">{{ $t("Deleting your Mobilizon account") }}</h1>
|
||||
<p class="content">
|
||||
{{
|
||||
$t(
|
||||
"Are you really sure you want to delete your whole account? You'll lose everything. Identities, settings, events created, messages and participations will be gone forever."
|
||||
)
|
||||
}}
|
||||
<br />
|
||||
<b>{{ $t("There will be no way to recover your data.") }}</b>
|
||||
</p>
|
||||
<p class="content">
|
||||
{{ $t("Please enter your password to confirm this action.") }}
|
||||
</p>
|
||||
<form @submit.prevent="deleteAccount">
|
||||
<b-field>
|
||||
<b-input
|
||||
type="password"
|
||||
v-model="passwordForAccountDeletion"
|
||||
password-reveal
|
||||
icon="lock"
|
||||
:placeholder="$t('Password')"
|
||||
/>
|
||||
</b-field>
|
||||
<b-button native-type="submit" type="is-danger" size="is-large">
|
||||
{{ $t("Delete everything") }}
|
||||
</b-button>
|
||||
</form>
|
||||
<div class="cancel-button">
|
||||
<b-button type="is-light" @click="isDeleteAccountModalActive = false">
|
||||
{{ $t("Cancel") }}
|
||||
</b-button>
|
||||
<b-modal
|
||||
:active.sync="isDeleteAccountModalActive"
|
||||
has-modal-card
|
||||
full-screen
|
||||
:can-cancel="false"
|
||||
>
|
||||
<section class="hero is-primary is-fullheight">
|
||||
<div class="hero-body has-text-centered">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third-desktop is-offset-one-third-desktop">
|
||||
<h1 class="title">{{ $t("Deleting your Mobilizon account") }}</h1>
|
||||
<p class="content">
|
||||
{{
|
||||
$t(
|
||||
"Are you really sure you want to delete your whole account? You'll lose everything. Identities, settings, events created, messages and participations will be gone forever."
|
||||
)
|
||||
}}
|
||||
<br />
|
||||
<b>{{ $t("There will be no way to recover your data.") }}</b>
|
||||
</p>
|
||||
<p class="content">
|
||||
{{ $t("Please enter your password to confirm this action.") }}
|
||||
</p>
|
||||
<form @submit.prevent="deleteAccount">
|
||||
<b-field>
|
||||
<b-input
|
||||
type="password"
|
||||
v-model="passwordForAccountDeletion"
|
||||
password-reveal
|
||||
icon="lock"
|
||||
:placeholder="$t('Password')"
|
||||
/>
|
||||
</b-field>
|
||||
<b-button native-type="submit" type="is-danger" size="is-large">
|
||||
{{ $t("Delete everything") }}
|
||||
</b-button>
|
||||
</form>
|
||||
<div class="cancel-button">
|
||||
<b-button type="is-light" @click="isDeleteAccountModalActive = false">
|
||||
{{ $t("Cancel") }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</b-modal>
|
||||
</section>
|
||||
</section>
|
||||
</b-modal>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<div v-if="loggedUser">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<router-link :to="{ name: RouteName.NOTIFICATIONS }">{{
|
||||
$t("Email notifications")
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="setting-title">
|
||||
<h2>{{ $t("Participation notifications") }}</h2>
|
||||
|
||||
@@ -1,38 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-field :label="$t('Language')">
|
||||
<b-select
|
||||
:loading="!config || !loggedUser"
|
||||
v-model="$i18n.locale"
|
||||
:placeholder="$t('Select a language')"
|
||||
>
|
||||
<option v-for="(language, lang) in languages" :value="lang" :key="lang">
|
||||
{{ language }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<b-field :label="$t('Timezone')">
|
||||
<b-select
|
||||
:placeholder="$t('Select a timezone')"
|
||||
:loading="!config || !loggedUser"
|
||||
v-model="selectedTimezone"
|
||||
>
|
||||
<optgroup :label="group" v-for="(groupTimezones, group) in timezones" :key="group">
|
||||
<option
|
||||
v-for="timezone in groupTimezones"
|
||||
:value="`${group}/${timezone}`"
|
||||
:key="timezone"
|
||||
>
|
||||
{{ sanitize(timezone) }}
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<router-link :to="{ name: RouteName.PREFERENCES }">{{ $t("Preferences") }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<b-field :label="$t('Language')">
|
||||
<b-select
|
||||
:loading="!config || !loggedUser"
|
||||
v-model="$i18n.locale"
|
||||
:placeholder="$t('Select a language')"
|
||||
>
|
||||
<option v-for="(language, lang) in languages" :value="lang" :key="lang">
|
||||
{{ language }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<em>{{
|
||||
$t("Timezone detected as {timezone}.", {
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
})
|
||||
}}</em>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<b-field :label="$t('Timezone')">
|
||||
<b-select
|
||||
:placeholder="$t('Select a timezone')"
|
||||
:loading="!config || !loggedUser"
|
||||
v-model="selectedTimezone"
|
||||
>
|
||||
<optgroup :label="group" v-for="(groupTimezones, group) in timezones" :key="group">
|
||||
<option
|
||||
v-for="timezone in groupTimezones"
|
||||
:value="`${group}/${timezone}`"
|
||||
:key="timezone"
|
||||
>
|
||||
{{ sanitize(timezone) }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<em>{{
|
||||
$t("Timezone detected as {timezone}.", {
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
})
|
||||
}}</em>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -42,6 +54,7 @@ import { USER_SETTINGS, SET_USER_SETTINGS, UPDATE_USER_LOCALE } from "../../grap
|
||||
import { IConfig } from "../../types/config.model";
|
||||
import { ICurrentUser } from "../../types/current-user.model";
|
||||
import langs from "../../i18n/langs.json";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
@@ -58,6 +71,8 @@ export default class Preferences extends Vue {
|
||||
|
||||
locale: string | null = null;
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
@Watch("loggedUser")
|
||||
setSavedTimezone(loggedUser: ICurrentUser) {
|
||||
if (loggedUser && loggedUser.settings.timezone) {
|
||||
|
||||
Reference in New Issue
Block a user