2019-01-21 15:08:22 +01:00
< template >
2019-12-20 13:04:34 +01:00
< section class = "section container" >
2019-10-10 14:20:09 +02:00
< div class = "columns is-mobile is-centered" >
< div class = "column is-half-desktop" >
2020-02-18 08:57:00 +01:00
< h1 class = "title" > { { $t ( "Register an account on Mobilizon!" ) } } < / h1 >
< b -message v-if ="userAlreadyActivated" > {{
$t ( "To achieve your registration, please create a first identity profile." )
} } < / b - m e s s a g e >
2019-10-12 13:16:36 +02:00
< form v-if ="!validationSent" @submit.prevent="submit" >
2019-11-18 17:37:38 +01:00
< b -field : label = "$t('Display name')" >
2020-02-18 08:57:00 +01:00
< b -input
aria - required = "true"
required
v - model = "identity.name"
@ input = "autoUpdateUsername($event)"
/ >
2019-11-18 17:37:38 +01:00
< / b - f i e l d >
2019-10-10 14:20:09 +02:00
< b -field
: label = "$t('Username')"
: type = "errors.preferred_username ? 'is-danger' : null"
: message = "errors.preferred_username"
>
< b -field >
< b -input
aria - required = "true"
required
expanded
2019-11-18 17:37:38 +01:00
v - model = "identity.preferredUsername"
2019-10-10 14:20:09 +02:00
/ >
< p class = "control" >
< span class = "button is-static" > @ { { host } } < / span >
< / p >
< / b - f i e l d >
< / b - f i e l d >
2020-08-31 12:40:30 +02:00
< p class = "description" >
{ {
$t (
"The username is a unique identifier of your account on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it."
)
} }
< / p >
2019-10-10 14:20:09 +02:00
2020-08-31 12:40:30 +02:00
< b -field :label ="$t('Bio')" >
< b -input type = "textarea" maxlength = "100" rows = "2" v -model = " identity.summary " / >
2019-10-10 14:20:09 +02:00
< / b - f i e l d >
< p class = "control has-text-centered" >
2020-06-15 11:01:49 +02:00
< b -button
type = "is-primary"
size = "is-large"
native - type = "submit"
: disabled = "sendingValidation"
> { { $t ( "Create my profile" ) } } < / b - b u t t o n
>
2019-10-10 14:20:09 +02:00
< / p >
< / form >
< div v-if ="validationSent && !userAlreadyActivated" >
2020-08-27 11:53:24 +02:00
< b -message type = "is-success" closable = "false" >
2019-10-10 14:20:09 +02:00
< h2 class = "title" >
2020-02-18 08:57:00 +01:00
{ {
$t ( "Your account is nearly ready, {username}" , {
2020-08-27 11:53:24 +02:00
username : identity . name || identity . preferredUsername ,
2020-02-18 08:57:00 +01:00
} )
} }
2019-10-10 14:20:09 +02:00
< / h2 >
2020-06-15 11:01:49 +02:00
< i18n path = "A validation email was sent to {email}" tag = "p" >
< code slot = "email" > { { email } } < / code >
< / i18n >
2019-10-10 14:20:09 +02:00
< p >
2020-02-18 08:57:00 +01:00
{ {
$t (
2020-06-15 11:01:49 +02:00
"Before you can login, you need to click on the link inside it to validate your account."
2020-02-18 08:57:00 +01:00
)
} }
2019-10-10 14:20:09 +02:00
< / p >
< / b - m e s s a g e >
2019-01-21 15:08:22 +01:00
< / div >
< / div >
2019-10-10 14:20:09 +02:00
< / div >
< / section >
2019-01-21 15:08:22 +01:00
< / template >
< script lang = "ts" >
2020-02-18 08:57:00 +01:00
import { Component , Prop } from "vue-property-decorator" ;
import { mixins } from "vue-class-component" ;
import { IPerson } from "../../types/actor" ;
import { IDENTITIES , REGISTER _PERSON } from "../../graphql/actor" ;
import { MOBILIZON _INSTANCE _HOST } from "../../api/_entrypoint" ;
import RouteName from "../../router/name" ;
import { changeIdentity } from "../../utils/auth" ;
import identityEditionMixin from "../../mixins/identityEdition" ;
2019-01-21 15:08:22 +01:00
2019-02-22 14:55:47 +01:00
@ Component
2019-11-18 17:37:38 +01:00
export default class Register extends mixins ( identityEditionMixin ) {
2019-01-30 15:54:21 +01:00
@ Prop ( { type : String , required : true } ) email ! : string ;
2020-02-18 08:57:00 +01:00
@ Prop ( { type : Boolean , required : false , default : false } )
userAlreadyActivated ! : boolean ;
2019-01-30 15:54:21 +01:00
2019-05-22 14:12:11 +02:00
host ? : string = MOBILIZON _INSTANCE _HOST ;
2019-01-21 15:08:22 +01:00
2020-08-31 12:40:30 +02:00
errors : Record < string , unknown > = { } ;
2020-02-18 08:57:00 +01:00
validationSent = false ;
sendingValidation = false ;
2019-01-21 15:08:22 +01:00
2020-08-31 12:40:30 +02:00
async created ( ) : Promise < void > {
2019-10-04 18:33:38 +02:00
// Make sure no one goes to this page if we don't want to
if ( ! this . email ) {
await this . $router . replace ( { name : RouteName . PAGE _NOT _FOUND } ) ;
}
}
2020-08-31 12:40:30 +02:00
async submit ( ) : Promise < void > {
2019-01-21 15:08:22 +01:00
try {
2019-01-29 11:02:32 +01:00
this . sendingValidation = true ;
this . errors = { } ;
2019-10-04 18:28:25 +02:00
const { data } = await this . $apollo . mutate < { registerPerson : IPerson } > ( {
2019-01-29 11:02:32 +01:00
mutation : REGISTER _PERSON ,
2020-02-18 08:57:00 +01:00
variables : { email : this . email , ... this . identity } ,
update : ( store , { data : localData } ) => {
2019-10-07 13:47:46 +02:00
if ( this . userAlreadyActivated ) {
2020-02-18 08:57:00 +01:00
const identitiesData = store . readQuery < { identities : IPerson [ ] } > ( {
query : IDENTITIES ,
} ) ;
2019-10-04 18:28:25 +02:00
2020-02-18 08:57:00 +01:00
if ( identitiesData && localData ) {
identitiesData . identities . push ( localData . registerPerson ) ;
2019-10-07 13:47:46 +02:00
store . writeQuery ( { query : IDENTITIES , data : identitiesData } ) ;
}
2019-10-04 18:28:25 +02:00
}
} ,
2019-01-21 15:08:22 +01:00
} ) ;
2019-10-04 18:28:25 +02:00
if ( data ) {
this . validationSent = true ;
2020-02-18 08:57:00 +01:00
window . localStorage . setItem ( "new-registered-user" , "yes" ) ;
2019-10-04 18:28:25 +02:00
if ( this . userAlreadyActivated ) {
await changeIdentity ( this . $apollo . provider . defaultClient , data . registerPerson ) ;
2019-01-30 15:54:21 +01:00
2019-10-04 18:28:25 +02:00
await this . $router . push ( { name : RouteName . HOME } ) ;
}
2019-01-30 15:54:21 +01:00
}
2020-02-18 08:57:00 +01:00
} catch ( errorCatched ) {
this . errors = errorCatched . graphQLErrors . reduce (
( acc : { [ key : string ] : string } , error : any ) => {
acc [ error . details ] = error . message ;
return acc ;
} ,
{ }
) ;
console . error ( "Error while registering person" , errorCatched ) ;
console . error ( "Errors while registering person" , this . errors ) ;
2020-06-15 11:01:49 +02:00
this . sendingValidation = false ;
2019-01-21 15:08:22 +01:00
}
}
}
< / script >
2019-10-10 14:20:09 +02:00
< style lang = "scss" scoped >
2019-01-21 15:08:22 +01:00
. avatar - enter - active {
transition : opacity 1 s ease ;
}
. avatar - enter ,
. avatar - leave - to {
opacity : 0 ;
}
. avatar - leave {
display : none ;
}
2019-10-10 14:20:09 +02:00
2020-02-18 08:57:00 +01:00
. container . columns {
margin : 1 rem auto 3 rem ;
}
2020-08-31 12:40:30 +02:00
p . description {
font - size : 0.9 rem ;
margin - bottom : 10 px ;
}
2019-01-21 15:08:22 +01:00
< / style >