@ -0,0 +1,92 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { connect } from 'react-redux'; |
||||
import { Link } from 'react-router-dom'; |
||||
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; |
||||
import { disabledAccountId, movedToAccountId, domain } from 'flavours/glitch/initial_state'; |
||||
import { openModal } from 'flavours/glitch/actions/modal'; |
||||
import { logOut } from 'flavours/glitch/utils/log_out'; |
||||
|
||||
const messages = defineMessages({ |
||||
logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, |
||||
logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, |
||||
}); |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
disabledAcct: state.getIn(['accounts', disabledAccountId, 'acct']), |
||||
movedToAcct: movedToAccountId ? state.getIn(['accounts', movedToAccountId, 'acct']) : undefined, |
||||
}); |
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({ |
||||
onLogout () { |
||||
dispatch(openModal('CONFIRM', { |
||||
message: intl.formatMessage(messages.logoutMessage), |
||||
confirm: intl.formatMessage(messages.logoutConfirm), |
||||
closeWhenConfirm: false, |
||||
onConfirm: () => logOut(), |
||||
})); |
||||
}, |
||||
}); |
||||
|
||||
export default @injectIntl |
||||
@connect(mapStateToProps, mapDispatchToProps) |
||||
class DisabledAccountBanner extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
disabledAcct: PropTypes.string.isRequired, |
||||
movedToAcct: PropTypes.string, |
||||
onLogout: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleLogOutClick = e => { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
this.props.onLogout(); |
||||
|
||||
return false; |
||||
} |
||||
|
||||
render () { |
||||
const { disabledAcct, movedToAcct } = this.props; |
||||
|
||||
const disabledAccountLink = ( |
||||
<Link to={`/@${disabledAcct}`}> |
||||
{disabledAcct}@{domain} |
||||
</Link> |
||||
); |
||||
|
||||
return ( |
||||
<div className='sign-in-banner'> |
||||
<p> |
||||
{movedToAcct ? ( |
||||
<FormattedMessage |
||||
id='moved_to_account_banner.text' |
||||
defaultMessage='Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.' |
||||
values={{ |
||||
disabledAccount: disabledAccountLink, |
||||
movedToAccount: <Link to={`/@${movedToAcct}`}>{movedToAcct.includes('@') ? movedToAcct : `${movedToAcct}@${domain}`}</Link>, |
||||
}} |
||||
/> |
||||
) : ( |
||||
<FormattedMessage |
||||
id='disabled_account_banner.text' |
||||
defaultMessage='Your account {disabledAccount} is currently disabled.' |
||||
values={{ |
||||
disabledAccount: disabledAccountLink, |
||||
}} |
||||
/> |
||||
)} |
||||
</p> |
||||
<a href='/auth/edit' className='button button--block'> |
||||
<FormattedMessage id='disabled_account_banner.account_settings' defaultMessage='Account settings' /> |
||||
</a> |
||||
<button type='button' className='button button--block button-tertiary' onClick={this.handleLogOutClick}> |
||||
<FormattedMessage id='confirmations.logout.confirm' defaultMessage='Log out' /> |
||||
</button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
}; |
@ -1,69 +1,78 @@ |
||||
// components.scss |
||||
.compose-form { |
||||
.compose-form__modifiers { |
||||
.compose-form__upload { |
||||
&-description { |
||||
input { |
||||
&::placeholder { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.status__content a, |
||||
.reply-indicator__content a { |
||||
color: lighten($ui-highlight-color, 12%); |
||||
.link-footer a, |
||||
.reply-indicator__content a, |
||||
.status__content__read-more-button { |
||||
text-decoration: underline; |
||||
|
||||
&.mention { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
&.mention span { |
||||
text-decoration: underline; |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
&.status__content__spoiler-link { |
||||
color: $secondary-text-color; |
||||
&.mention { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
.status__content__read-more-button { |
||||
text-decoration: underline; |
||||
span { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
text-decoration: none; |
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
span { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.getting-started__footer a { |
||||
text-decoration: underline; |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
text-decoration: none; |
||||
} |
||||
.status__content a { |
||||
color: $highlight-text-color; |
||||
} |
||||
|
||||
.nothing-here { |
||||
color: $darker-text-color; |
||||
} |
||||
|
||||
.public-layout .public-account-header__tabs__tabs .counter.active::after { |
||||
border-bottom: 4px solid $ui-highlight-color; |
||||
.compose-form__poll-wrapper .button.button-secondary, |
||||
.compose-form .autosuggest-textarea__textarea::placeholder, |
||||
.compose-form .spoiler-input__input::placeholder, |
||||
.report-dialog-modal__textarea::placeholder, |
||||
.language-dropdown__dropdown__results__item__common-name, |
||||
.compose-form .icon-button { |
||||
color: $inverted-text-color; |
||||
} |
||||
|
||||
.composer { |
||||
.composer--spoiler input, |
||||
.compose-form__autosuggest-wrapper textarea { |
||||
&::placeholder { |
||||
color: $inverted-text-color; |
||||
} |
||||
.text-icon-button.active { |
||||
color: $ui-highlight-color; |
||||
} |
||||
|
||||
.language-dropdown__dropdown__results__item.active { |
||||
background: $ui-highlight-color; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.link-button:disabled { |
||||
cursor: not-allowed; |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
text-decoration: none !important; |
||||
} |
||||
} |
||||
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 950 B |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 639 B After Width: | Height: | Size: 588 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 817 B After Width: | Height: | Size: 477 B |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 813 B After Width: | Height: | Size: 346 B |
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 298 B |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 502 KiB After Width: | Height: | Size: 332 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 174 B After Width: | Height: | Size: 80 B |
@ -1,34 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
|
||||
export default class SettingText extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
settings: ImmutablePropTypes.map.isRequired, |
||||
settingKey: PropTypes.array.isRequired, |
||||
label: PropTypes.string.isRequired, |
||||
onChange: PropTypes.func.isRequired, |
||||
}; |
||||
|
||||
handleChange = (e) => { |
||||
this.props.onChange(this.props.settingKey, e.target.value); |
||||
} |
||||
|
||||
render () { |
||||
const { settings, settingKey, label } = this.props; |
||||
|
||||
return ( |
||||
<label> |
||||
<span style={{ display: 'none' }}>{label}</span> |
||||
<input |
||||
className='setting-text' |
||||
value={settings.getIn(settingKey)} |
||||
onChange={this.handleChange} |
||||
placeholder={label} |
||||
/> |
||||
</label> |
||||
); |
||||
} |
||||
|
||||
} |