2019-12-07 13:28:52 +02:00
import React from 'react' ;
2017-12-30 23:38:54 +02:00
import { connect } from 'react-redux' ;
2019-11-11 10:40:05 +02:00
import { FormattedMessage as Message } from 'react-intl' ;
2017-05-25 22:11:57 +03:00
import { Link } from 'react-router-dom' ;
2019-12-30 09:29:39 +02:00
import { Helmet } from 'react-helmet-async' ;
2019-12-07 21:02:00 +02:00
import { ChangeLanguageLink } from 'app/components/languageSwitcher' ;
import { RelativeTime } from 'app/components/ui' ;
import { User } from 'app/components/user' ;
import RulesPage from 'app/pages/rules/RulesPage' ;
import { RootState } from 'app/reducers' ;
2019-11-11 10:40:05 +02:00
2016-03-17 08:01:11 +02:00
import ProfileField from './ProfileField' ;
import styles from './profile.scss' ;
2016-04-17 12:35:04 +03:00
import profileForm from './profileForm.scss' ;
2019-06-30 16:32:50 +03:00
type Props = {
2020-05-24 02:08:24 +03:00
user : User ;
interfaceLocale : string ;
2019-06-30 16:32:50 +03:00
} ;
2019-12-29 13:57:44 +02:00
class Profile extends React . PureComponent < Props > {
2020-05-24 02:08:24 +03:00
UUID : HTMLElement | null ;
render() {
const { user , interfaceLocale } = this . props ;
return (
< div data-testid = "profile-index" >
2020-06-04 19:41:27 +03:00
< Message key = "accountPreferencesTitle" defaultMessage = "Ely.by account preferences" >
2020-05-24 02:08:24 +03:00
{ ( pageTitle : string ) = > (
< h2 className = { styles . indexTitle } >
< Helmet title = { pageTitle } / >
{ pageTitle }
< / h2 >
) }
< / Message >
< div className = { styles . indexContent } >
< div className = { styles . descriptionColumn } >
< div className = { styles . indexDescription } >
2020-06-04 19:41:27 +03:00
< Message
key = "accountDescription"
defaultMessage = "Ely.by account allows you to get access to many Minecraft resources. Please, take care of your account safety. Use secure password and change it regularly."
/ >
2020-05-24 02:08:24 +03:00
< / div >
< / div >
< div className = { styles . formColumn } >
< div className = { profileForm . form } >
< div className = { styles . item } >
< h3 className = { profileForm . title } >
2020-06-04 19:41:27 +03:00
< Message key = "personalData" defaultMessage = "Personal data" / >
2020-05-24 02:08:24 +03:00
< / h3 >
< p className = { profileForm . description } >
2020-06-04 19:41:27 +03:00
< Message
key = "preferencesDescription"
defaultMessage = "Here you can change the key preferences of your account. Please note that all actions must be confirmed by entering a password."
/ >
2020-05-24 02:08:24 +03:00
< / p >
< / div >
< ProfileField
link = "/profile/change-username"
2020-06-04 19:41:27 +03:00
label = { < Message key = "nickname" defaultMessage = "Nickname:" / > }
2020-05-24 02:08:24 +03:00
value = { user . username }
warningMessage = {
user . hasMojangUsernameCollision ? (
< Message
2020-06-04 19:41:27 +03:00
key = "mojangPriorityWarning"
defaultMessage = "A Mojang account with the same nickname was found. According to {rules}, account owner has the right to demand the restoration of control over nickname."
2020-05-24 02:08:24 +03:00
values = { {
rules : (
< Link
to = { {
pathname : '/rules' ,
hash : ` # ${ RulesPage . getRuleHash ( 1 , 4 ) } ` ,
} }
>
2020-06-04 19:41:27 +03:00
< Message key = "projectRules" defaultMessage = "project rules" / >
2020-05-24 02:08:24 +03:00
< / Link >
) ,
} }
/ >
) : (
''
)
}
/ >
< ProfileField
link = "/profile/change-email"
2020-06-04 19:41:27 +03:00
label = { < Message key = "email" defaultMessage = "E‑ mail:" / > }
2020-05-24 02:08:24 +03:00
value = { user . email }
/ >
< ProfileField
link = "/profile/change-password"
2020-06-04 19:41:27 +03:00
label = { < Message key = "password" defaultMessage = "Password:" / > }
2020-05-24 02:08:24 +03:00
value = {
< Message
2020-06-04 19:41:27 +03:00
key = "changedAt"
defaultMessage = "Changed {at}"
2020-05-24 02:08:24 +03:00
values = { {
at : < RelativeTime timestamp = { user . passwordChangedAt * 1000 } / > ,
} }
/ >
}
/ >
< ProfileField
2020-06-04 19:41:27 +03:00
label = { < Message key = "siteLanguage" defaultMessage = "Site language:" / > }
2020-05-24 02:08:24 +03:00
value = { < ChangeLanguageLink / > }
warningMessage = {
user . lang === interfaceLocale ? (
''
) : (
< Message
2020-06-04 19:41:27 +03:00
key = "languageIsUnavailableWarning"
defaultMessage = {
'The locale "{locale}" you\'ve used earlier isn\'t currently translated enough. If you want to continue using the selected language, please {participateInTheTranslation} of the project.'
}
2020-05-24 02:08:24 +03:00
values = { {
locale : user.lang ,
participateInTheTranslation : (
< a href = "http://ely.by/translate" target = "_blank" >
2020-06-04 19:41:27 +03:00
< Message
key = "participateInTheTranslation"
defaultMessage = "participate in the translation"
/ >
2020-05-24 02:08:24 +03:00
< / a >
) ,
} }
/ >
)
}
2016-04-17 12:35:04 +03:00
/ >
2020-05-24 02:08:24 +03:00
< ProfileField
link = "/profile/mfa"
2020-06-04 19:41:27 +03:00
label = { < Message key = "twoFactorAuth" defaultMessage = "Two‑ factor auth:" / > }
2020-05-24 02:08:24 +03:00
value = {
user . isOtpEnabled ? (
2020-06-04 19:41:27 +03:00
< Message key = "enabled" defaultMessage = "Enabled" / >
2020-05-24 02:08:24 +03:00
) : (
2020-06-04 19:41:27 +03:00
< Message key = "disabled" defaultMessage = "Disabled" / >
2020-05-24 02:08:24 +03:00
)
}
/ >
< ProfileField
2020-06-04 19:41:27 +03:00
label = { < Message key = "uuid" defaultMessage = "UUID:" / > }
2020-05-24 02:08:24 +03:00
value = {
< span
className = { styles . uuid }
ref = { this . setUUID . bind ( this ) }
onMouseOver = { this . handleUUIDMouseOver . bind ( this ) }
>
{ user . uuid }
< / span >
}
/ >
< / div >
< / div >
< / div >
2016-03-17 08:01:11 +02:00
< / div >
2020-05-24 02:08:24 +03:00
) ;
2016-03-17 08:01:11 +02:00
}
2016-05-26 18:21:52 +03:00
2020-05-24 02:08:24 +03:00
handleUUIDMouseOver() {
if ( ! this . UUID ) {
return ;
}
const el = this . UUID ;
2016-05-26 18:21:52 +03:00
2020-05-24 02:08:24 +03:00
try {
const selection = window . getSelection ( ) ;
2019-12-07 13:28:52 +02:00
2020-05-24 02:08:24 +03:00
if ( ! selection ) {
return ;
}
2019-12-07 13:28:52 +02:00
2020-05-24 02:08:24 +03:00
const range = document . createRange ( ) ;
range . selectNodeContents ( el ) ;
selection . removeAllRanges ( ) ;
selection . addRange ( range ) ;
} catch ( err ) {
// the browser does not support an API
}
2016-05-26 18:21:52 +03:00
}
2019-11-27 11:03:32 +02:00
2020-05-24 02:08:24 +03:00
setUUID ( el : HTMLElement | null ) {
this . UUID = el ;
}
2016-03-17 08:01:11 +02:00
}
2017-05-25 22:11:57 +03:00
2019-12-07 13:28:52 +02:00
export default connect ( ( { user , i18n } : RootState ) = > ( {
2020-05-24 02:08:24 +03:00
user ,
interfaceLocale : i18n.locale ,
2017-12-30 23:38:54 +02:00
} ) ) ( Profile ) ;