Skip to content

Commit

Permalink
[FIX] Fix Login with Show default form disabled (#27475)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggazzo
ggazzo committed Dec 16, 2022
1 parent f4ad966 commit 7c227aa
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 103 deletions.
203 changes: 105 additions & 98 deletions packages/web-ui-registration/src/LoginForm.tsx
View file
Expand Up @@ -43,6 +43,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
const [errorOnSubmit, setErrorOnSubmit] = useState<LoginErrors | undefined>(undefined);
const isResetPasswordAllowed = useSetting('Accounts_PasswordReset');
const login = useLoginWithPassword();
const showFormLogin = useSetting('Accounts_ShowFormLogin');

const loginMutation: UseMutationResult<
void,
Expand Down Expand Up @@ -95,104 +96,110 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
<Form.Header>
<Form.Title id={formLabelId}>{t('registration.component.login')}</Form.Title>
</Form.Header>
<Form.Container>
<FieldGroup disabled={loginMutation.isLoading}>
<Field>
<Field.Label htmlFor='username'>{t('registration.component.form.emailOrUsername')}</Field.Label>
<Field.Row>
<TextInput
{...register('username', {
required: true,
onChange: () => {
clearErrors(['username', 'password']);
},
})}
placeholder={t('registration.component.form.emailPlaceholder')}
error={
errors.username?.message ||
(errors.username?.type === 'required' ? t('registration.component.form.requiredField') : undefined)
}
aria-invalid={errors.username ? 'true' : 'false'}
id='username'
/>
</Field.Row>
{errors.username && errors.username.type === 'required' && (
<Field.Error>{t('registration.component.form.requiredField')}</Field.Error>
)}
</Field>

<Field>
<Field.Label htmlFor='password'>{t('registration.component.form.password')}</Field.Label>
<Field.Row>
<PasswordInput
{...register('password', {
required: true,
onChange: () => {
clearErrors(['username', 'password']);
},
})}
error={
errors.password?.message ||
(errors.password?.type === 'required' ? t('registration.component.form.requiredField') : undefined)
}
aria-invalid={errors.password ? 'true' : 'false'}
id='password'
/>
</Field.Row>
{errors.password && errors.password.type === 'required' && (
<Field.Error>{t('registration.component.form.requiredField')}</Field.Error>
)}
{isResetPasswordAllowed && (
<Field.Row justifyContent='end'>
<Field.Link
href='#'
onClick={(e): void => {
e.preventDefault();
setLoginRoute('reset-password');
}}
>
<Trans i18nKey='registration.page.login.forgot'>Forgot your password?</Trans>
</Field.Link>
</Field.Row>
)}
</Field>
</FieldGroup>
<FieldGroup disabled={loginMutation.isLoading}>
{errorOnSubmit === 'error-user-is-not-activated' && (
<Callout type='warning'>{t('registration.page.registration.waitActivationWarning')}</Callout>
)}

{errorOnSubmit === 'error-app-user-is-not-allowed-to-login' && (
<Callout type='danger'>{t('registration.page.login.errors.AppUserNotAllowedToLogin')}</Callout>
)}

{errorOnSubmit === 'user-not-found' && <Callout type='danger'>{t('registration.page.login.errors.wrongCredentials')}</Callout>}

{errorOnSubmit === 'error-login-blocked-for-ip' && (
<Callout type='danger'>{t('registration.page.login.errors.loginBlockedForIp')}</Callout>
)}

{errorOnSubmit === 'error-login-blocked-for-user' && (
<Callout type='danger'>{t('registration.page.login.errors.loginBlockedForUser')}</Callout>
)}

{errorOnSubmit === 'error-license-user-limit-reached' && (
<Callout type='warning'>{t('registration.page.login.errors.licenseUserLimitReached')}</Callout>
)}
</FieldGroup>
</Form.Container>
<Form.Footer>
<ButtonGroup stretch>
<Button disabled={loginMutation.isLoading} type='submit' primary>
{t('registration.component.login')}
</Button>
</ButtonGroup>
<p>
<Trans i18nKey='registration.page.login.register'>
New here? <ActionLink onClick={(): void => setLoginRoute('register')}>Create an account</ActionLink>
</Trans>
</p>
</Form.Footer>
{showFormLogin && (
<>
<Form.Container>
<FieldGroup disabled={loginMutation.isLoading}>
<Field>
<Field.Label htmlFor='username'>{t('registration.component.form.emailOrUsername')}</Field.Label>
<Field.Row>
<TextInput
{...register('username', {
required: true,
onChange: () => {
clearErrors(['username', 'password']);
},
})}
placeholder={t('registration.component.form.emailPlaceholder')}
error={
errors.username?.message ||
(errors.username?.type === 'required' ? t('registration.component.form.requiredField') : undefined)
}
aria-invalid={errors.username ? 'true' : 'false'}
id='username'
/>
</Field.Row>
{errors.username && errors.username.type === 'required' && (
<Field.Error>{t('registration.component.form.requiredField')}</Field.Error>
)}
</Field>

<Field>
<Field.Label htmlFor='password'>{t('registration.component.form.password')}</Field.Label>
<Field.Row>
<PasswordInput
{...register('password', {
required: true,
onChange: () => {
clearErrors(['username', 'password']);
},
})}
error={
errors.password?.message ||
(errors.password?.type === 'required' ? t('registration.component.form.requiredField') : undefined)
}
aria-invalid={errors.password ? 'true' : 'false'}
id='password'
/>
</Field.Row>
{errors.password && errors.password.type === 'required' && (
<Field.Error>{t('registration.component.form.requiredField')}</Field.Error>
)}
{isResetPasswordAllowed && (
<Field.Row justifyContent='end'>
<Field.Link
href='#'
onClick={(e): void => {
e.preventDefault();
setLoginRoute('reset-password');
}}
>
<Trans i18nKey='registration.page.login.forgot'>Forgot your password?</Trans>
</Field.Link>
</Field.Row>
)}
</Field>
</FieldGroup>
<FieldGroup disabled={loginMutation.isLoading}>
{errorOnSubmit === 'error-user-is-not-activated' && (
<Callout type='warning'>{t('registration.page.registration.waitActivationWarning')}</Callout>
)}

{errorOnSubmit === 'error-app-user-is-not-allowed-to-login' && (
<Callout type='danger'>{t('registration.page.login.errors.AppUserNotAllowedToLogin')}</Callout>
)}

{errorOnSubmit === 'user-not-found' && (
<Callout type='danger'>{t('registration.page.login.errors.wrongCredentials')}</Callout>
)}

{errorOnSubmit === 'error-login-blocked-for-ip' && (
<Callout type='danger'>{t('registration.page.login.errors.loginBlockedForIp')}</Callout>
)}

{errorOnSubmit === 'error-login-blocked-for-user' && (
<Callout type='danger'>{t('registration.page.login.errors.loginBlockedForUser')}</Callout>
)}

{errorOnSubmit === 'error-license-user-limit-reached' && (
<Callout type='warning'>{t('registration.page.login.errors.licenseUserLimitReached')}</Callout>
)}
</FieldGroup>
</Form.Container>
<Form.Footer>
<ButtonGroup stretch>
<Button disabled={loginMutation.isLoading} type='submit' primary>
{t('registration.component.login')}
</Button>
</ButtonGroup>
<p>
<Trans i18nKey='registration.page.login.register'>
New here? <ActionLink onClick={(): void => setLoginRoute('register')}>Create an account</ActionLink>
</Trans>
</p>
</Form.Footer>
</>
)}
<LoginServices disabled={loginMutation.isLoading} />
</Form>
);
Expand Down
5 changes: 3 additions & 2 deletions packages/web-ui-registration/src/LoginServices.tsx
View file
@@ -1,5 +1,5 @@
import { ButtonGroup, Divider } from '@rocket.chat/fuselage';
import { useLoginServices } from '@rocket.chat/ui-contexts';
import { useLoginServices, useSetting } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';

Expand All @@ -8,14 +8,15 @@ import LoginServicesButton from './LoginServicesButton';
const Services = ({ disabled }: { disabled?: boolean }): ReactElement | null => {
const { t } = useTranslation();
const services = useLoginServices();
const showFormLogin = useSetting('Accounts_ShowFormLogin');

if (services.length === 0) {
return null;
}

return (
<>
<Divider mb={24} p={0} children={t('registration.component.form.divider')} />
{showFormLogin && <Divider mb={24} p={0} children={t('registration.component.form.divider')} />}
<ButtonGroup vertical stretch small>
{services.map((service) => (
<LoginServicesButton disabled={disabled} key={service.service} {...service} />
Expand Down
4 changes: 1 addition & 3 deletions packages/web-ui-registration/src/RegistrationPageRouter.tsx
View file
@@ -1,4 +1,3 @@
import { useSetting } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';

import { LoginForm } from './LoginForm';
Expand All @@ -13,9 +12,8 @@ export const RegistrationPageRouter = ({
defaultRoute?: 'login' | 'register' | 'reset-password' | 'secret-register';
}): ReactElement | null => {
const [route, setLoginRoute] = useLoginRouter(defaultRoute);
const showFormLogin = useSetting('Accounts_ShowFormLogin');

if (route === 'login' && showFormLogin) {
if (route === 'login') {
return (
<HorizontalTemplate>
<LoginForm setLoginRoute={setLoginRoute} />
Expand Down

0 comments on commit 7c227aa

Please sign in to comment.