2020-02-13 15:48:12 +01:00
< template >
2020-06-27 19:12:45 +02:00
< div v-if ="loggedUser" >
2022-01-10 15:19:16 +01:00
< breadcrumbs -nav
: links = " [
{
name : RouteName . ACCOUNT _SETTINGS ,
2022-07-12 10:55:28 +02:00
text : t ( 'Account' ) ,
2022-01-10 15:19:16 +01:00
} ,
{
name : RouteName . ACCOUNT _SETTINGS _GENERAL ,
2022-07-12 10:55:28 +02:00
text : t ( 'General' ) ,
2022-01-10 15:19:16 +01:00
} ,
] "
/ >
2020-06-25 11:36:35 +02:00
< section >
2022-07-12 10:55:28 +02:00
< h2 > { { t ( "Email" ) } } < / h2 >
< i18n -t
2020-06-25 11:36:35 +02:00
tag = "p"
2022-07-12 10:55:28 +02:00
class = "prose dark:prose-invert"
2020-06-25 11:36:35 +02:00
v - if = "loggedUser"
2022-07-12 10:55:28 +02:00
keypath = "Your current email is {email}. You use it to log in."
>
< template # email >
< b > { { loggedUser . email } } < / b >
< / template >
< / i 1 8 n - t >
< o -notification
v - if = "!canChangeEmail && loggedUser.provider"
variant = "warning"
: closable = "false"
2020-02-18 08:57:00 +01:00
>
2020-06-27 19:12:45 +02:00
{ {
2022-07-12 10:55:28 +02:00
t (
2020-11-30 10:24:11 +01:00
"Your email address was automatically set based on your {provider} account." ,
{
provider : providerName ( loggedUser . provider ) ,
}
)
2020-06-27 19:12:45 +02:00
} }
2022-07-12 10:55:28 +02:00
< / o - n o t i f i c a t i o n >
< o -notification
variant = "danger"
2020-06-25 11:36:35 +02:00
has - icon
aria - close - label = "Close notification"
role = "alert"
: key = "error"
v - for = "error in changeEmailErrors"
2022-07-12 10:55:28 +02:00
> { { error } } < / o - n o t i f i c a t i o n
2020-02-18 08:57:00 +01:00
>
2020-11-30 10:24:11 +01:00
< form
@ submit . prevent = "resetEmailAction"
ref = "emailForm"
class = "form"
v - if = "canChangeEmail"
>
2022-07-12 10:55:28 +02:00
< o -field : label = "t('New email')" label -for = " account -email " >
< o -input
2020-11-30 10:24:11 +01:00
aria - required = "true"
required
type = "email"
2021-08-23 10:20:55 +02:00
id = "account-email"
2020-11-30 10:24:11 +01:00
v - model = "newEmail"
/ >
2022-07-12 10:55:28 +02:00
< / o - f i e l d >
< p class = "help" > { { t ( "You'll receive a confirmation email." ) } } < / p >
< o -field :label ="t('Password')" label -for = " account -password " >
< o -input
2020-06-25 11:36:35 +02:00
aria - required = "true"
required
type = "password"
2021-08-23 10:20:55 +02:00
id = "account-password"
2020-06-25 11:36:35 +02:00
password - reveal
minlength = "6"
v - model = "passwordForEmailChange"
/ >
2022-07-12 10:55:28 +02:00
< / o - f i e l d >
< o -button
class = "mt-2"
variant = "primary"
: disabled = "!(emailForm && emailForm.checkValidity())"
2020-06-25 11:36:35 +02:00
>
2022-07-12 10:55:28 +02:00
{ { t ( "Change my email" ) } }
< / o - b u t t o n >
2020-06-25 11:36:35 +02:00
< / form >
2022-07-12 10:55:28 +02:00
< h2 class = "mt-2" > { { t ( "Password" ) } } < / h2 >
< o -notification
v - if = "!canChangePassword"
variant = "warning"
: closable = "false"
>
2020-06-27 19:12:45 +02:00
{ {
2022-07-12 10:55:28 +02:00
t (
2020-11-30 10:24:11 +01:00
"You can't change your password because you are registered through {provider}." ,
{
provider : providerName ( loggedUser . provider ) ,
}
)
2020-06-27 19:12:45 +02:00
} }
2022-07-12 10:55:28 +02:00
< / o - n o t i f i c a t i o n >
< o -notification
variant = "danger"
2020-06-25 11:36:35 +02:00
has - icon
aria - close - label = "Close notification"
role = "alert"
: key = "error"
v - for = "error in changePasswordErrors"
2022-07-12 10:55:28 +02:00
> { { error } } < / o - n o t i f i c a t i o n
2020-06-25 11:36:35 +02:00
>
2020-06-27 19:12:45 +02:00
< form
@ submit . prevent = "resetPasswordAction"
ref = "passwordForm"
class = "form"
v - if = "canChangePassword"
>
2022-07-12 10:55:28 +02:00
< o -field : label = "t('Old password')" label -for = " account -old -password " >
< o -input
2020-06-25 11:36:35 +02:00
aria - required = "true"
required
type = "password"
password - reveal
minlength = "6"
2021-08-23 10:20:55 +02:00
id = "account-old-password"
2020-06-25 11:36:35 +02:00
v - model = "oldPassword"
/ >
2022-07-12 10:55:28 +02:00
< / o - f i e l d >
< o -field : label = "t('New password')" label -for = " account -new -password " >
< o -input
2020-06-25 11:36:35 +02:00
aria - required = "true"
required
type = "password"
password - reveal
minlength = "6"
2021-08-23 10:20:55 +02:00
id = "account-new-password"
2020-06-25 11:36:35 +02:00
v - model = "newPassword"
/ >
2022-07-12 10:55:28 +02:00
< / o - f i e l d >
< o -button
class = "mt-2"
variant = "primary"
: disabled = "!(passwordForm && passwordForm.checkValidity())"
2020-06-25 11:36:35 +02:00
>
2022-07-12 10:55:28 +02:00
{ { t ( "Change my password" ) } }
< / o - b u t t o n >
2020-06-25 11:36:35 +02:00
< / form >
2022-07-12 10:55:28 +02:00
< h2 class = "mt-2" > { { t ( "Delete account" ) } } < / h2 >
< p class = "prose dark:prose-invert" >
{ { t ( "Deleting my account will delete all of my identities." ) } }
2020-11-30 10:24:11 +01:00
< / p >
2022-07-12 10:55:28 +02:00
< o -button @click ="openDeleteAccountModal" variant = "danger" class = "mb-4" >
{ { t ( "Delete my account" ) } }
< / o - b u t t o n >
2020-02-13 15:48:12 +01:00
2022-07-12 10:55:28 +02:00
< o -modal
: close - button - aria - label = "t('Close')"
v - model : active = "isDeleteAccountModalActive"
2020-06-25 11:36:35 +02:00
has - modal - card
full - screen
: can - cancel = "false"
>
2022-07-12 10:55:28 +02:00
< section class = "" >
< div class = "" >
< div class = "container mx-auto max-w-md" >
< div class = "" >
< div class = "" >
2020-11-30 10:24:11 +01:00
< h1 class = "title" >
2022-07-12 10:55:28 +02:00
{ { t ( "Deleting your Mobilizon account" ) } }
2020-11-30 10:24:11 +01:00
< / h1 >
2022-07-12 10:55:28 +02:00
< p class = "prose dark:prose-invert" >
2020-06-25 11:36:35 +02:00
{ {
2022-07-12 10:55:28 +02:00
t (
2020-06-25 11:36:35 +02:00
"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 / >
2022-07-12 10:55:28 +02:00
< b > { { t ( "There will be no way to recover your data." ) } } < / b >
2020-06-25 11:36:35 +02:00
< / p >
2022-07-12 10:55:28 +02:00
< p class = "prose dark:prose-invert" v-if ="hasUserGotAPassword" >
2020-11-30 10:24:11 +01:00
{ {
2022-07-12 10:55:28 +02:00
t ( "Please enter your password to confirm this action." )
2020-11-30 10:24:11 +01:00
} }
2020-06-25 11:36:35 +02:00
< / p >
< form @submit.prevent ="deleteAccount" >
2022-07-12 10:55:28 +02:00
< o -field
2021-08-23 10:20:31 +02:00
: type = "deleteAccountPasswordFieldType"
v - if = "hasUserGotAPassword"
label - for = "account-deletion-password"
>
2022-07-12 10:55:28 +02:00
< o -input
2020-06-25 11:36:35 +02:00
type = "password"
v - model = "passwordForAccountDeletion"
password - reveal
2021-08-23 10:20:31 +02:00
id = "account-deletion-password"
2022-07-12 10:55:28 +02:00
: aria - label = "t('Password')"
2020-06-25 11:36:35 +02:00
icon = "lock"
2022-07-12 10:55:28 +02:00
: placeholder = "t('Password')"
2020-06-25 11:36:35 +02:00
/ >
2021-08-23 10:20:31 +02:00
< template # message >
2022-07-12 10:55:28 +02:00
< o -notification
variant = "danger"
2021-08-23 10:20:31 +02:00
v - for = "message in deletePasswordErrors"
: key = "message"
>
{ { message } }
2022-07-12 10:55:28 +02:00
< / o - n o t i f i c a t i o n >
2021-08-23 10:20:31 +02:00
< / template >
2022-07-12 10:55:28 +02:00
< / o - f i e l d >
< o -button
class = "mt-2"
2020-11-30 10:24:11 +01:00
native - type = "submit"
2022-07-12 10:55:28 +02:00
variant = "danger"
size = "large"
2020-11-30 10:24:11 +01:00
>
2022-07-12 10:55:28 +02:00
{ { t ( "Delete everything" ) } }
< / o - b u t t o n >
2020-06-25 11:36:35 +02:00
< / form >
2022-07-12 10:55:28 +02:00
< div class = "mt-4" >
< o -button
variant = "light"
2020-11-30 10:24:11 +01:00
@ click = "isDeleteAccountModalActive = false"
>
2022-07-12 10:55:28 +02:00
{ { t ( "Cancel" ) } }
< / o - b u t t o n >
2020-06-25 11:36:35 +02:00
< / div >
2020-02-13 15:48:12 +01:00
< / div >
2020-02-18 08:57:00 +01:00
< / div >
< / div >
< / div >
2020-06-25 11:36:35 +02:00
< / section >
2022-07-12 10:55:28 +02:00
< / o - m o d a l >
2020-06-25 11:36:35 +02:00
< / section >
< / div >
2020-02-13 15:48:12 +01:00
< / template >
2022-07-12 10:55:28 +02:00
< script lang = "ts" setup >
import { useLoggedUser } from "@/composition/apollo/user" ;
import { Notifier } from "@/plugins/notifier" ;
2020-11-27 19:27:44 +01:00
import { IAuthProvider } from "@/types/enums" ;
2022-07-12 10:55:28 +02:00
import { useMutation } from "@vue/apollo-composable" ;
import { useHead } from "@vueuse/head" ;
2021-08-23 10:20:31 +02:00
import { GraphQLError } from "graphql/error/GraphQLError" ;
2022-07-12 10:55:28 +02:00
import { computed , inject , ref } from "vue" ;
import { useI18n } from "vue-i18n" ;
import { useRouter } from "vue-router" ;
2020-11-30 10:24:11 +01:00
import {
CHANGE _EMAIL ,
CHANGE _PASSWORD ,
DELETE _ACCOUNT ,
} from "../../graphql/user" ;
2020-02-18 08:57:00 +01:00
import RouteName from "../../router/name" ;
2020-06-27 19:12:45 +02:00
import { logout , SELECTED _PROVIDERS } from "../../utils/auth" ;
2022-07-12 10:55:28 +02:00
import { useProgrammatic } from "@oruga-ui/oruga-next" ;
const { t } = useI18n ( { useScope : "global" } ) ;
2022-07-12 10:55:28 +02:00
const { loggedUser } = useLoggedUser ( ) ;
2022-07-12 10:55:28 +02:00
useHead ( {
title : computed ( ( ) => t ( "General settings" ) ) ,
} ) ;
const passwordForm = ref < HTMLElement > ( ) ;
const emailForm = ref < HTMLElement > ( ) ;
const passwordForEmailChange = ref ( "" ) ;
const newEmail = ref ( "" ) ;
const changeEmailErrors = ref < string [ ] > ( [ ] ) ;
const oldPassword = ref ( "" ) ;
const newPassword = ref ( "" ) ;
const changePasswordErrors = ref < string [ ] > ( [ ] ) ;
const deletePasswordErrors = ref < string [ ] > ( [ ] ) ;
const isDeleteAccountModalActive = ref ( false ) ;
const passwordForAccountDeletion = ref ( "" ) ;
const notifier = inject < Notifier > ( "notifier" ) ;
const {
mutate : changeEmailMutation ,
onDone : changeEmailMutationDone ,
onError : changeEmailMutationError ,
} = useMutation ( CHANGE _EMAIL ) ;
changeEmailMutationDone ( ( ) => {
notifier ? . info (
t (
"The account's email address was changed. Check your emails to verify it."
)
) ;
newEmail . value = "" ;
passwordForEmailChange . value = "" ;
} ) ;
changeEmailMutationError ( ( err ) => {
handleErrors ( "email" , err ) ;
} ) ;
const resetEmailAction = async ( ) : Promise < void > => {
changeEmailErrors . value = [ ] ;
changeEmailMutation ( {
email : newEmail . value ,
password : passwordForEmailChange . value ,
} ) ;
} ;
const {
mutate : changePasswordMutation ,
onDone : onChangePasswordMutationDone ,
onError : onChangePasswordMutationError ,
} = useMutation ( CHANGE _PASSWORD ) ;
onChangePasswordMutationDone ( ( ) => {
oldPassword . value = "" ;
newPassword . value = "" ;
notifier ? . success ( t ( "The password was successfully changed" ) ) ;
} ) ;
onChangePasswordMutationError ( ( err ) => {
handleErrors ( "password" , err ) ;
} ) ;
const resetPasswordAction = async ( ) : Promise < void > => {
changePasswordErrors . value = [ ] ;
changePasswordMutation ( {
oldPassword : oldPassword . value ,
newPassword : newPassword . value ,
} ) ;
} ;
const openDeleteAccountModal = ( ) : void => {
passwordForAccountDeletion . value = "" ;
isDeleteAccountModalActive . value = true ;
} ;
const router = useRouter ( ) ;
const {
mutate : deleteAccountMutation ,
onDone : deleteAccountMutationDone ,
onError : deleteAccountMutationError ,
} = useMutation < { deleteAccount : { id : string } } , { password ? : string } > (
DELETE _ACCOUNT
) ;
const { oruga } = useProgrammatic ( ) ;
deleteAccountMutationDone ( async ( ) => {
console . debug ( "Deleted account, logging out client..." ) ;
await logout ( false ) ;
oruga . notification . open ( {
message : t ( "Your account has been successfully deleted" ) ,
variant : "success" ,
position : "bottom-right" ,
duration : 5000 ,
} ) ;
return router . push ( { name : RouteName . HOME } ) ;
} ) ;
deleteAccountMutationError ( ( err ) => {
deletePasswordErrors . value = err . graphQLErrors . map (
( { message } : GraphQLError ) => message
) ;
} ) ;
const deleteAccount = ( ) => {
deletePasswordErrors . value = [ ] ;
console . debug ( "Asking to delete account..." ) ;
deleteAccountMutation ( {
password : hasUserGotAPassword . value
? passwordForAccountDeletion . value
: undefined ,
} ) ;
} ;
const canChangePassword = computed ( ( ) : boolean => {
return ! loggedUser . value ? . provider ;
} ) ;
const canChangeEmail = computed ( ( ) : boolean => {
return ! loggedUser . value ? . provider ;
} ) ;
const providerName = ( id : string ) : string => {
if ( SELECTED _PROVIDERS [ id ] ) {
return SELECTED _PROVIDERS [ id ] ;
2020-02-13 15:48:12 +01:00
}
2022-07-12 10:55:28 +02:00
return id ;
} ;
const hasUserGotAPassword = computed ( ( ) : boolean => {
return (
loggedUser . value ? . provider == null ||
loggedUser . value ? . provider === IAuthProvider . LDAP
) ;
} ) ;
const deleteAccountPasswordFieldType = computed ( ( ) : string | null => {
return deletePasswordErrors . value . length > 0 ? "is-danger" : null ;
} ) ;
const handleErrors = ( type : string , err : any ) => {
console . error ( err ) ;
if ( err . graphQLErrors !== undefined ) {
err . graphQLErrors . forEach ( ( { message } : { message : string } ) => {
switch ( type ) {
case "password" :
changePasswordErrors . value . push ( message ) ;
break ;
case "email" :
default :
changeEmailErrors . value . push ( message ) ;
break ;
}
} ) ;
2020-02-13 15:48:12 +01:00
}
2022-07-12 10:55:28 +02:00
} ;
2020-02-13 15:48:12 +01:00
< / script >