Introduce group basic federation, event new page and notifications

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
416 changed files with 32220 additions and 16750 deletions

View File

@@ -1,130 +1,153 @@
<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())">
{{ $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>
<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())"
>
{{ $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>
</div>
</div>
</div>
</div>
<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>
</section>
</b-modal>
</section>
</div>
</div>
</div>
</div>
</section>
</b-modal>
</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from '@/graphql/user';
import { RouteName } from '@/router';
import { Refs } from '@/shims-vue';
import { ICurrentUser } from '@/types/current-user.model';
import { logout } from '@/utils/auth';
import { Component, Vue, Ref } from "vue-property-decorator";
import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from "../../graphql/user";
import RouteName from "../../router/name";
import { ICurrentUser } from "../../types/current-user.model";
import { logout } from "../../utils/auth";
@Component({
apollo: {
@@ -132,21 +155,25 @@ import { logout } from '@/utils/auth';
},
})
export default class AccountSettings extends Vue {
$refs!: Refs<{
passwordForm: HTMLElement,
}>;
@Ref("passwordForm") readonly passwordForm!: HTMLElement;
loggedUser!: ICurrentUser;
passwordForEmailChange: string = '';
newEmail: string = '';
passwordForEmailChange = "";
newEmail = "";
changeEmailErrors: string[] = [];
oldPassword: string = '';
newPassword: string = '';
oldPassword = "";
newPassword = "";
changePasswordErrors: string[] = [];
isDeleteAccountModalActive: boolean = false;
passwordForAccountDeletion: string = '';
isDeleteAccountModalActive = false;
passwordForAccountDeletion = "";
RouteName = RouteName;
@@ -162,11 +189,15 @@ export default class AccountSettings extends Vue {
},
});
this.$notifier.info(this.$t("The account's email address was changed. Check your emails to verify it.") as string);
this.newEmail = '';
this.passwordForEmailChange = '';
this.$notifier.info(
this.$t(
"The account's email address was changed. Check your emails to verify it."
) as string
);
this.newEmail = "";
this.passwordForEmailChange = "";
} catch (err) {
this.handleErrors('email', err);
this.handleErrors("email", err);
}
}
@@ -182,14 +213,14 @@ export default class AccountSettings extends Vue {
},
});
this.$notifier.success(this.$t('The password was successfully changed') as string);
this.$notifier.success(this.$t("The password was successfully changed") as string);
} catch (err) {
this.handleErrors('password', err);
this.handleErrors("password", err);
}
}
protected async openDeleteAccountModal() {
this.passwordForAccountDeletion = '';
this.passwordForAccountDeletion = "";
this.isDeleteAccountModalActive = true;
}
@@ -203,15 +234,15 @@ export default class AccountSettings extends Vue {
});
await logout(this.$apollo.provider.defaultClient);
this.$buefy.notification.open({
message: this.$t('Your account has been successfully deleted') as string,
type: 'is-success',
position: 'is-bottom-right',
message: this.$t("Your account has been successfully deleted") as string,
type: "is-success",
position: "is-bottom-right",
duration: 5000,
});
return await this.$router.push({ name: RouteName.HOME });
} catch (err) {
this.handleErrors('delete', err);
this.handleErrors("delete", err);
}
}
@@ -219,12 +250,12 @@ export default class AccountSettings extends Vue {
console.error(err);
if (err.graphQLErrors !== undefined) {
err.graphQLErrors.forEach(({ message }) => {
err.graphQLErrors.forEach(({ message }: { message: string }) => {
switch (type) {
case 'email':
case "email":
this.changeEmailErrors.push(this.convertMessage(message) as string);
break;
case 'password':
case "password":
this.changePasswordErrors.push(this.convertMessage(message) as string);
break;
}
@@ -234,40 +265,40 @@ export default class AccountSettings extends Vue {
private convertMessage(message: string) {
switch (message) {
case 'The password provided is invalid':
return this.$t('The password provided is invalid');
case 'The new email must be different':
return this.$t('The new email must be different');
case "The password provided is invalid":
return this.$t("The password provided is invalid");
case "The new email must be different":
return this.$t("The new email must be different");
case "The new email doesn't seem to be valid":
return this.$t("The new email doesn't seem to be valid");
case 'The current password is invalid':
return this.$t('The current password is invalid');
case 'The new password must be different':
return this.$t('The new password must be different');
case "The current password is invalid":
return this.$t("The current password is invalid");
case "The new password must be different":
return this.$t("The new password must be different");
}
}
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
@import "@/variables.scss";
.setting-title {
margin-top: 3rem;
.setting-title {
margin-top: 3rem;
h2 {
display: inline;
background: $secondary;
padding: 2px 7.5px;
text-transform: uppercase;
font-size: 1.25rem;
}
}
h2 {
display: inline;
background: $secondary;
padding: 2px 7.5px;
text-transform: uppercase;
font-size: 1.25rem;
}
}
.cancel-button {
margin-top: 2rem;
}
.cancel-button {
margin-top: 2rem;
}
/deep/ .modal .modal-background {
background-color: initial;
}
/deep/ .modal .modal-background {
background-color: initial;
}
</style>

View File

@@ -1,13 +1,81 @@
<template>
<div>
<h2 class="subtitle">{{ $t('No notification settings yet') }}</h2>
<div v-if="loggedUser">
<h2 class="subtitle">{{ $t("No notification settings yet") }}</h2>
<div class="field">
<b-checkbox disabled v-model="notificationEventUpdates">
<strong>{{ $t("Important event updates") }}</strong>
<p>
{{
$t("Like title update, start or end date change, event being confirmed or cancelled.")
}}
</p>
</b-checkbox>
</div>
<div class="field">
<b-checkbox v-model="notificationOnDay" @input="updateSetting({ notificationOnDay })">
<strong>{{ $t("Notification on the day of the event") }}</strong>
<p>
{{ $t("We'll use your timezone settings to send a recap of the morning of the event.") }}
</p>
<span v-if="loggedUser.settings.timezone">{{
$t("Your timezone is currently set to {timezone}.", {
timezone: loggedUser.settings.timezone,
})
}}</span>
<span v-else>{{ $t("You can pick your timezone into your preferences.") }}</span>
</b-checkbox>
</div>
<div class="field">
<b-checkbox v-model="notificationEachWeek" @input="updateSetting({ notificationEachWeek })">
<strong>{{ $t("Recap every week") }}</strong>
<p>
{{ $t("You'll get a weekly recap every Monday for upcoming events, if you have any.") }}
</p>
</b-checkbox>
</div>
<div class="field">
<b-checkbox
v-model="notificationBeforeEvent"
@input="updateSetting({ notificationBeforeEvent })"
>
<strong>{{ $t("Notification before the event") }}</strong>
<p>
{{
$t(
"We'll send you an email one hour before the event begins, to be sure you won't forget about it."
)
}}
</p>
</b-checkbox>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue, Watch } from "vue-property-decorator";
import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
import { ICurrentUser } from "../../types/current-user.model";
@Component
@Component({
apollo: {
loggedUser: USER_SETTINGS,
},
})
export default class Notifications extends Vue {
loggedUser!: ICurrentUser;
notificationEventUpdates = true;
notificationOnDay = true;
notificationEachWeek = false;
notificationBeforeEvent = false;
async updateSetting(variables: object) {
await this.$apollo.mutate<{ setUserSettings: string }>({
mutation: SET_USER_SETTINGS,
variables,
});
}
}
</script>
</script>

View File

@@ -1,13 +1,91 @@
<template>
<div>
<h2 class="subtitle">{{ $t('No preferences yet') }}</h2>
</div>
<div>
<h2 class="subtitle">{{ $t("No preferences yet") }}</h2>
<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>
<span>{{
$t("Timezone detected as {timezone}.", {
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
})
}}</span>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue, Watch } from "vue-property-decorator";
import { TIMEZONES } from "../../graphql/config";
import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
import { IConfig } from "../../types/config.model";
import { ICurrentUser } from "../../types/current-user.model";
@Component
@Component({
apollo: {
config: TIMEZONES,
loggedUser: USER_SETTINGS,
},
})
export default class Preferences extends Vue {
config!: IConfig;
loggedUser!: ICurrentUser;
selectedTimezone: string | null = null;
@Watch("loggedUser")
setSavedTimezone(loggedUser: ICurrentUser) {
if (loggedUser && loggedUser.settings.timezone) {
this.selectedTimezone = loggedUser.settings.timezone;
} else {
this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
}
}
sanitize(timezone: string): string {
return timezone.split("_").join(" ").replace("St ", "St. ").split("/").join(" - ");
}
get timezones() {
if (!this.config || !this.config.timezones) return {};
return this.config.timezones.reduce((acc: { [key: string]: Array<string> }, val: string) => {
const components = val.split("/");
const [prefix, suffix] = [components.shift() as string, components.join("/")];
const pushOrCreate = (
acc: { [key: string]: Array<string> },
prefix: string,
suffix: string
) => {
(acc[prefix] = acc[prefix] || []).push(suffix);
return acc;
};
if (suffix) {
return pushOrCreate(acc, prefix, suffix);
}
return pushOrCreate(acc, this.$t("Other") as string, prefix);
}, {});
}
@Watch("selectedTimezone")
async updateTimezone() {
await this.$apollo.mutate<{ setUserSetting: string }>({
mutation: SET_USER_SETTINGS,
variables: {
timezone: this.selectedTimezone,
},
});
}
}
</script>
</script>