146 lines
3.9 KiB
React
146 lines
3.9 KiB
React
/** @jsx h */
|
|
import { h, Component } from 'preact';
|
|
|
|
import { PROVIDER_NAMES } from 'common/constants';
|
|
import { getHandleClickProps } from 'common/accessibility';
|
|
|
|
export default class AuthPanel extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.toggleUserId = this.toggleUserId.bind(this);
|
|
this.toggleBlockedVisibility = this.toggleBlockedVisibility.bind(this);
|
|
this.onSortChange = this.onSortChange.bind(this);
|
|
}
|
|
|
|
onSortChange(e) {
|
|
if (this.props.onSortChange) {
|
|
this.props.onSortChange(e.target.value);
|
|
}
|
|
}
|
|
|
|
toggleUserId() {
|
|
this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
|
|
}
|
|
|
|
toggleBlockedVisibility() {
|
|
if (!this.state.isBlockedVisible) {
|
|
if (this.props.onBlockedUsersShow) this.props.onBlockedUsersShow();
|
|
} else if (this.props.onBlockedUsersHide) this.props.onBlockedUsersHide();
|
|
|
|
this.setState({ isBlockedVisible: !this.state.isBlockedVisible });
|
|
}
|
|
|
|
render(props, { isUserIdVisible, isBlockedVisible }) {
|
|
const { user, providers = [], sort } = props;
|
|
|
|
const sortArray = getSortArray(sort);
|
|
|
|
let loggedIn = !!user.id;
|
|
return (
|
|
<div className={b('auth-panel', props, { loggedIn })}>
|
|
{loggedIn && (
|
|
<div className="auth-panel__column">
|
|
You signed in as{' '}
|
|
<strong {...getHandleClickProps(this.toggleUserId)} className="auth-panel__username">
|
|
{user.name}
|
|
</strong>
|
|
{isUserIdVisible && <span className="auth-panel__user-id"> ({user.id})</span>}.{' '}
|
|
<span {...getHandleClickProps(props.onSignOut)} className="auth-panel__pseudo-link" role="link">
|
|
Sign out?
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{!loggedIn && (
|
|
<div className="auth-panel__column">
|
|
Sign in to comment using{' '}
|
|
{providers.map((provider, i) => {
|
|
const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', ';
|
|
|
|
return (
|
|
<span>
|
|
{comma}
|
|
<span
|
|
className="auth-panel__pseudo-link"
|
|
{...getHandleClickProps(() => props.onSignIn(provider))}
|
|
role="link"
|
|
>
|
|
{PROVIDER_NAMES[provider]}
|
|
</span>
|
|
</span>
|
|
);
|
|
})}
|
|
{'.'}
|
|
</div>
|
|
)}
|
|
|
|
<div className="auth-panel__column">
|
|
{user.admin && (
|
|
<span
|
|
className="auth-panel__pseudo-link auth-panel__admin-action"
|
|
{...getHandleClickProps(this.toggleBlockedVisibility)}
|
|
role="link"
|
|
>
|
|
{isBlockedVisible ? 'Hide' : 'Show'} blocked
|
|
</span>
|
|
)}
|
|
|
|
{user.admin && ' • '}
|
|
|
|
<span className="auth-panel__sort">
|
|
Sort by{' '}
|
|
<span className="auth-panel__select-label">
|
|
{sortArray.find(x => x.selected).label}
|
|
<select className="auth-panel__select" onChange={this.onSortChange} onBlur={this.onSortChange}>
|
|
{sortArray.map(sort => (
|
|
<option value={sort.value} selected={sort.selected}>
|
|
{sort.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function getSortArray(currentSort) {
|
|
const sortArray = [
|
|
{
|
|
value: '-score',
|
|
label: 'Best',
|
|
},
|
|
{
|
|
value: '+score',
|
|
label: 'Worst',
|
|
},
|
|
{
|
|
value: '-time',
|
|
label: 'Newest',
|
|
},
|
|
{
|
|
value: '+time',
|
|
label: 'Oldest',
|
|
},
|
|
{
|
|
value: '-active',
|
|
label: 'Recently updated',
|
|
},
|
|
{
|
|
value: '+active',
|
|
label: 'Least recently updated',
|
|
},
|
|
];
|
|
|
|
return sortArray.map(sort => {
|
|
if (sort.value === currentSort) {
|
|
sort.selected = true;
|
|
}
|
|
|
|
return sort;
|
|
});
|
|
}
|