kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Move Login page to UI
rodzic
f5d17fd55d
commit
ffae3f89df
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
interface IBigCard {
|
||||
title: React.ReactNode
|
||||
subtitle?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => {
|
||||
return (
|
||||
<Card variant='rounded' size='xl'>
|
||||
<CardBody>
|
||||
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||
<Stack space={2}>
|
||||
<Text size='2xl' align='center' weight='bold'>{title}</Text>
|
||||
{subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<Stack space={5}>
|
||||
<div className='mx-auto sm:w-2/3 sm:pt-10'>
|
||||
{children}
|
||||
</div>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export { BigCard };
|
|
@ -104,7 +104,6 @@ const SoapboxMount = () => {
|
|||
<Route exact path='/' component={PublicLayout} />
|
||||
)}
|
||||
|
||||
<Route path='/login' component={AuthLayout} />
|
||||
<Route path='/reset-password' component={AuthLayout} />
|
||||
<Route path='/edit-password' component={AuthLayout} />
|
||||
<Route path='/invite/:token' component={AuthLayout} />
|
||||
|
|
|
@ -64,7 +64,6 @@ const AuthLayout = () => {
|
|||
|
||||
<Route exact path='/login/external' component={ExternalLoginForm} />
|
||||
<Route exact path='/login/add' component={LoginPage} />
|
||||
<Route exact path='/login' component={LoginPage} />
|
||||
<Route exact path='/reset-password' component={PasswordReset} />
|
||||
<Route exact path='/edit-password' component={PasswordResetConfirm} />
|
||||
<Route path='/invite/:token' component={RegisterInvite} />
|
||||
|
|
|
@ -2,11 +2,9 @@ import React from 'react';
|
|||
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Button, Form, FormActions, FormGroup, Input, Stack } from 'soapbox/components/ui';
|
||||
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
|
||||
import { useFeatures } from 'soapbox/hooks';
|
||||
|
||||
import ConsumersList from './consumers-list';
|
||||
|
||||
const messages = defineMessages({
|
||||
username: {
|
||||
id: 'login.fields.username_label',
|
||||
|
@ -35,62 +33,52 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
|
|||
const passwordLabel = intl.formatMessage(messages.password);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||
<h1 className='text-center text-2xl font-bold'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
|
||||
</div>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<FormGroup labelText={usernameLabel}>
|
||||
<Input
|
||||
aria-label={usernameLabel}
|
||||
placeholder={usernameLabel}
|
||||
type='text'
|
||||
name='username'
|
||||
autoCorrect='off'
|
||||
autoCapitalize='off'
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<Stack className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2' space={5}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<FormGroup labelText={usernameLabel}>
|
||||
<Input
|
||||
aria-label={usernameLabel}
|
||||
placeholder={usernameLabel}
|
||||
type='text'
|
||||
name='username'
|
||||
autoCorrect='off'
|
||||
autoCapitalize='off'
|
||||
required
|
||||
<FormGroup
|
||||
labelText={passwordLabel}
|
||||
hintText={
|
||||
<Link to='/reset-password' className='hover:underline' tabIndex={-1}>
|
||||
<FormattedMessage
|
||||
id='login.reset_password_hint'
|
||||
defaultMessage='Trouble logging in?'
|
||||
/>
|
||||
</FormGroup>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<Input
|
||||
aria-label={passwordLabel}
|
||||
placeholder={passwordLabel}
|
||||
type='password'
|
||||
name='password'
|
||||
autoComplete='off'
|
||||
autoCorrect='off'
|
||||
autoCapitalize='off'
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
labelText={passwordLabel}
|
||||
hintText={
|
||||
<Link to='/reset-password' className='hover:underline' tabIndex={-1}>
|
||||
<FormattedMessage
|
||||
id='login.reset_password_hint'
|
||||
defaultMessage='Trouble logging in?'
|
||||
/>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<Input
|
||||
aria-label={passwordLabel}
|
||||
placeholder={passwordLabel}
|
||||
type='password'
|
||||
name='password'
|
||||
autoComplete='off'
|
||||
autoCorrect='off'
|
||||
autoCapitalize='off'
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button
|
||||
theme='primary'
|
||||
type='submit'
|
||||
disabled={isLoading}
|
||||
>
|
||||
<FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
|
||||
<ConsumersList />
|
||||
</Stack>
|
||||
</div>
|
||||
<FormActions>
|
||||
<Button
|
||||
theme='primary'
|
||||
type='submit'
|
||||
disabled={isLoading}
|
||||
>
|
||||
<FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
|
||||
import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
|
||||
import { fetchInstance } from 'soapbox/actions/instance';
|
||||
import { closeModal } from 'soapbox/actions/modals';
|
||||
import { BigCard } from 'soapbox/components/big-card';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
import { getRedirectUrl } from 'soapbox/utils/redirect';
|
||||
import { isStandalone } from 'soapbox/utils/state';
|
||||
|
||||
import ConsumersList from './consumers-list';
|
||||
import LoginForm from './login-form';
|
||||
import OtpAuthForm from './otp-auth-form';
|
||||
|
||||
|
@ -68,7 +71,12 @@ const LoginPage = () => {
|
|||
|
||||
if (mfaAuthNeeded) return <OtpAuthForm mfa_token={mfaToken} />;
|
||||
|
||||
return <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />;
|
||||
return (
|
||||
<BigCard title={<FormattedMessage id='login_form.header' defaultMessage='Sign In' />}>
|
||||
<LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />
|
||||
<ConsumersList />
|
||||
</BigCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
|
|
|
@ -134,6 +134,7 @@ import {
|
|||
FollowedTags,
|
||||
AboutPage,
|
||||
RegistrationPage,
|
||||
LoginPage,
|
||||
} from './util/async-components';
|
||||
import GlobalHotkeys from './util/global-hotkeys';
|
||||
import { WrappedRoute } from './util/react-router-helpers';
|
||||
|
@ -357,6 +358,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
|
|||
<WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
|
||||
)}
|
||||
|
||||
<WrappedRoute path='/login' page={DefaultPage} component={LoginPage} publicRoute exact />
|
||||
|
||||
<WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
|
||||
</Switch>
|
||||
);
|
||||
|
|
Ładowanie…
Reference in New Issue