Merge branch 'auth-form-improvements' into 'develop'

Auth form improvements, fixes #454 #373 #67 #177

Closes #177, #67, #373, and #454

See merge request soapbox-pub/soapbox-fe!280
config-ui-updates
Alex Gleason 2020-09-30 04:54:28 +00:00
commit 9b99bdcd4f
8 zmienionych plików z 83 dodań i 16 usunięć

Wyświetl plik

@ -135,8 +135,10 @@ export function logIn(username, password) {
}).catch(error => {
if (error.response.data.error === 'mfa_required') {
throw error;
} else if(error.response.data.error) {
dispatch(snackbar.error(error.response.data.error));
} else {
dispatch(snackbar.error('Invalid username or password.'));
dispatch(snackbar.error('Wrong username or password'));
}
throw error;
});
@ -174,7 +176,7 @@ export function register(params) {
if (needsConfirmation) {
return dispatch(snackbar.info('You must confirm your email.'));
} else if (needsApproval) {
return dispatch(snackbar.info('Your account is being reviewed.'));
return dispatch(snackbar.info('Your account is pending review by an admin.'));
} else {
return dispatch(fetchMe());
}

Wyświetl plik

@ -10,24 +10,28 @@ exports[`<LoginForm /> renders correctly 1`] = `
className="fields-group"
>
<div
className="input email optional user_email"
className="input email user_email"
>
<input
aria-label="Username"
className="string email optional"
autoComplete="off"
className="string email"
name="username"
placeholder="Username"
required={true}
type="text"
/>
</div>
<div
className="input password optional user_password"
className="input password user_password"
>
<input
aria-label="Password"
className="password optional"
autoComplete="off"
className="password"
name="password"
placeholder="Password"
required={true}
type="password"
/>
</div>

Wyświetl plik

@ -13,24 +13,28 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
className="fields-group"
>
<div
className="input email optional user_email"
className="input email user_email"
>
<input
aria-label="Username"
className="string email optional"
autoComplete="off"
className="string email"
name="username"
placeholder="Username"
required={true}
type="text"
/>
</div>
<div
className="input password optional user_password"
className="input password user_password"
>
<input
aria-label="Password"
className="password optional"
autoComplete="off"
className="password"
name="password"
placeholder="Password"
required={true}
type="password"
/>
</div>

Wyświetl plik

@ -20,11 +20,27 @@ class LoginForm extends ImmutablePureComponent {
<form className='simple_form new_user' method='post' onSubmit={handleSubmit}>
<fieldset disabled={isLoading}>
<div className='fields-group'>
<div className='input email optional user_email'>
<input aria-label={intl.formatMessage(messages.username)} className='string email optional' placeholder={intl.formatMessage(messages.username)} type='text' name='username' />
<div className='input email user_email'>
<input
aria-label={intl.formatMessage(messages.username)}
className='string email'
placeholder={intl.formatMessage(messages.username)}
type='text'
name='username'
autoComplete='off'
required
/>
</div>
<div className='input password optional user_password'>
<input aria-label={intl.formatMessage(messages.password)} className='password optional' placeholder={intl.formatMessage(messages.password)} type='password' name='password' />
<div className='input password user_password'>
<input
aria-label={intl.formatMessage(messages.password)}
className='password'
placeholder={intl.formatMessage(messages.password)}
type='password'
name='password'
autoComplete='off'
required
/>
</div>
<p className='hint subtle-hint'>
<Link to='/auth/reset_password'>

Wyświetl plik

@ -37,6 +37,7 @@ class PasswordReset extends ImmutablePureComponent {
name='nickname_or_email'
label='Email or username'
placeholder='me@example.com'
required
/>
</FieldsGroup>
</fieldset>

Wyświetl plik

@ -20,6 +20,7 @@ import { getSettings } from 'soapbox/actions/settings';
const messages = defineMessages({
username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
username_hint: { id: 'registration.fields.username_hint', defaultMessage: 'Only letters, numbers, and underscores are allowed.' },
email: { id: 'registration.fields.email_placeholder', defaultMessage: 'E-Mail address' },
password: { id: 'registration.fields.password_placeholder', defaultMessage: 'Password' },
confirm: { id: 'registration.fields.confirm_placeholder', defaultMessage: 'Password (again)' },
@ -92,11 +93,32 @@ class RegistrationForm extends ImmutablePureComponent {
render() {
const { instance, intl } = this.props;
const isOpen = instance.get('registrations');
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
if (isOpen === false) {
return (
<div className='registrations-closed'>
<h2>
<FormattedMessage
id='registration.closed_title'
defaultMessage='Registrations Closed'
/>
</h2>
<div className='registrations-closed__message'>
<FormattedMessage
id='registration.closed_message'
defaultMessage='{instance} is not accepting new members'
values={{ instance: <strong>{instance.get('title')}</strong> }}
/>
</div>
</div>
);
}
return (
<SimpleForm onSubmit={this.onSubmit}>
<fieldset disabled={isLoading}>
<fieldset disabled={isLoading || !isOpen}>
<div className='simple_form__overlay-area'>
<p className='lead'>
<FormattedMessage
@ -109,7 +131,9 @@ class RegistrationForm extends ImmutablePureComponent {
<TextInput
placeholder={intl.formatMessage(messages.username)}
name='username'
hint={intl.formatMessage(messages.username_hint)}
autoComplete='off'
pattern='^[a-zA-Z\d_-]+'
onChange={this.onInputChange}
required
/>

Wyświetl plik

@ -126,7 +126,7 @@ export const getAlerts = createSelector([getAlertsBase], (base) => {
key: item.get('key'),
className: `snackbar snackbar--${item.get('severity', 'info')}`,
activeClassName: 'snackbar--active',
dismissAfter: 5000,
dismissAfter: 6000,
});
});

Wyświetl plik

@ -443,6 +443,22 @@ $fluid-breakpoint: $maximum-width + 20px;
}
}
.registrations-closed {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
h2 {
font-weight: bold;
font-size: 24px;
margin-bottom: 10px;
}
}
@media (min-width: 767px) and (max-width: 1024px) {
padding: 40px 20px 20px;