mirror of
https://github.com/Cockatrice/Cockatrice.git
synced 2026-07-02 03:23:56 -07:00
Add left nav (#4705)
* Automated translation update ( bf08a04cda )
* Add Layout component wip
* finish layout implementation
* convert header to left nav
* better nav item spacing
* return source files to original glory
* lint fix
* Remove height limit on login screen
* fix top spacing on 3-panel layout
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
Brent Clark
GitHub
parent
cab5f29b57
commit
cef99cba71
18 changed files with 280 additions and 201 deletions
|
|
@ -16,6 +16,7 @@ import { Images } from 'images';
|
|||
import { HostDTO, serverProps } from 'services';
|
||||
import { RouteEnum, WebSocketConnectOptions, getHostPort } from 'types';
|
||||
import { ServerSelectors, ServerTypes } from 'store';
|
||||
import Layout from 'containers/Layout/Layout';
|
||||
|
||||
import './Login.css';
|
||||
import { useToast } from 'components/Toast';
|
||||
|
|
@ -225,120 +226,122 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Root className={'login overflow-scroll ' + classes.root}>
|
||||
{ isConnected && <Navigate to={RouteEnum.SERVER} />}
|
||||
<Layout showNav={false} noHeightLimit={true}>
|
||||
<Root className={'login overflow-scroll ' + classes.root}>
|
||||
{ isConnected && <Navigate to={RouteEnum.SERVER} />}
|
||||
|
||||
<div className="login__wrapper">
|
||||
<Paper className="login-content">
|
||||
<div className="login-content__form">
|
||||
<div className="login-content__header">
|
||||
<img src={Images.Logo} alt="logo" />
|
||||
<span>COCKATRICE</span>
|
||||
</div>
|
||||
<Typography variant="h1">{ t('LoginContainer.header.title') }</Typography>
|
||||
<Typography variant="subtitle1">{ t('LoginContainer.header.subtitle') }</Typography>
|
||||
<div className="login-form">
|
||||
<LoginForm
|
||||
onSubmit={handleLogin}
|
||||
onResetPassword={openRequestPasswordResetDialog}
|
||||
disableSubmitButton={submitButtonDisabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
showDescription() && (
|
||||
<Paper className="login-content__connectionStatus">
|
||||
{description}
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="login-footer">
|
||||
<div className="login-footer__register">
|
||||
<span>{ t('LoginContainer.footer.registerPrompt') }</span>
|
||||
<Button color="primary" onClick={openRegistrationDialog}>{ t('LoginContainer.footer.registerAction') }</Button>
|
||||
<div className="login__wrapper">
|
||||
<Paper className="login-content">
|
||||
<div className="login-content__form">
|
||||
<div className="login-content__header">
|
||||
<img src={Images.Logo} alt="logo" />
|
||||
<span>COCKATRICE</span>
|
||||
</div>
|
||||
<Typography variant="h1">{ t('LoginContainer.header.title') }</Typography>
|
||||
<Typography variant="subtitle1">{ t('LoginContainer.header.subtitle') }</Typography>
|
||||
<div className="login-form">
|
||||
<LoginForm
|
||||
onSubmit={handleLogin}
|
||||
onResetPassword={openRequestPasswordResetDialog}
|
||||
disableSubmitButton={submitButtonDisabled}
|
||||
/>
|
||||
</div>
|
||||
<Typography variant="subtitle2">
|
||||
{ t('LoginContainer.footer.credit') } - { new Date().getUTCFullYear() }
|
||||
</Typography>
|
||||
|
||||
{
|
||||
serverProps.REACT_APP_VERSION && (
|
||||
<Typography variant="subtitle2">
|
||||
{ t('LoginContainer.footer.version') }: { serverProps.REACT_APP_VERSION }
|
||||
</Typography>
|
||||
showDescription() && (
|
||||
<Paper className="login-content__connectionStatus">
|
||||
{description}
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="login-footer__language">
|
||||
<LanguageDropdown />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-content__description">
|
||||
<div className="login-content__description-graphics">
|
||||
<div className="topLeft login-content__description-square" />
|
||||
<div className="topRight login-content__description-square" />
|
||||
<div className="bottomRight login-content__description-square" />
|
||||
<div className="bottomLeft login-content__description-square" />
|
||||
<div className="topBar login-content__description-bar" />
|
||||
<div className="bottomBar login-content__description-bar" />
|
||||
</div>
|
||||
<div className="login-content__description-wrapper">
|
||||
<div className="login-content__description-cards">
|
||||
<div className="login-content__description-cards__card leftCard">
|
||||
<div className="login-content__description-cards__card-wrapper">
|
||||
<img src={Images.Faces.face1} alt='Stock Player' />
|
||||
<span>1mrlee</span>
|
||||
</div>
|
||||
<div className="login-footer">
|
||||
<div className="login-footer__register">
|
||||
<span>{ t('LoginContainer.footer.registerPrompt') }</span>
|
||||
<Button color="primary" onClick={openRegistrationDialog}>{ t('LoginContainer.footer.registerAction') }</Button>
|
||||
</div>
|
||||
<div className="login-content__description-cards__card rightCard">
|
||||
<div className="login-content__description-cards__card-wrapper">
|
||||
<img src={Images.Faces.face2} alt='Stock Player' />
|
||||
<span>CyberX</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-content__description-cards__card topCard">
|
||||
<div className="login-content__description-cards__card-wrapper">
|
||||
<img src={Images.Faces.face3} alt='Stock Player' />
|
||||
<span>Gamer69</span>
|
||||
</div>
|
||||
<Typography variant="subtitle2">
|
||||
{ t('LoginContainer.footer.credit') } - { new Date().getUTCFullYear() }
|
||||
</Typography>
|
||||
|
||||
{
|
||||
serverProps.REACT_APP_VERSION && (
|
||||
<Typography variant="subtitle2">
|
||||
{ t('LoginContainer.footer.version') }: { serverProps.REACT_APP_VERSION }
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="login-footer__language">
|
||||
<LanguageDropdown />
|
||||
</div>
|
||||
</div>
|
||||
{ /*<img src={loginGraphic} className="login-content__description-image"/>*/}
|
||||
<p className="login-content__description-subtitle1">{ t('LoginContainer.content.subtitle1') }</p>
|
||||
<p className="login-content__description-subtitle2">{ t('LoginContainer.content.subtitle2') }</p>
|
||||
</div>
|
||||
</div>
|
||||
</Paper>
|
||||
</div>
|
||||
<div className="login-content__description">
|
||||
<div className="login-content__description-graphics">
|
||||
<div className="topLeft login-content__description-square" />
|
||||
<div className="topRight login-content__description-square" />
|
||||
<div className="bottomRight login-content__description-square" />
|
||||
<div className="bottomLeft login-content__description-square" />
|
||||
<div className="topBar login-content__description-bar" />
|
||||
<div className="bottomBar login-content__description-bar" />
|
||||
</div>
|
||||
<div className="login-content__description-wrapper">
|
||||
<div className="login-content__description-cards">
|
||||
<div className="login-content__description-cards__card leftCard">
|
||||
<div className="login-content__description-cards__card-wrapper">
|
||||
<img src={Images.Faces.face1} alt='Stock Player' />
|
||||
<span>1mrlee</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-content__description-cards__card rightCard">
|
||||
<div className="login-content__description-cards__card-wrapper">
|
||||
<img src={Images.Faces.face2} alt='Stock Player' />
|
||||
<span>CyberX</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-content__description-cards__card topCard">
|
||||
<div className="login-content__description-cards__card-wrapper">
|
||||
<img src={Images.Faces.face3} alt='Stock Player' />
|
||||
<span>Gamer69</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ /*<img src={loginGraphic} className="login-content__description-image"/>*/}
|
||||
<p className="login-content__description-subtitle1">{ t('LoginContainer.content.subtitle1') }</p>
|
||||
<p className="login-content__description-subtitle2">{ t('LoginContainer.content.subtitle2') }</p>
|
||||
</div>
|
||||
</div>
|
||||
</Paper>
|
||||
</div>
|
||||
|
||||
<RegistrationDialog
|
||||
isOpen={dialogState.registrationDialog}
|
||||
onSubmit={handleRegistrationDialogSubmit}
|
||||
handleClose={closeRegistrationDialog}
|
||||
/>
|
||||
<RegistrationDialog
|
||||
isOpen={dialogState.registrationDialog}
|
||||
onSubmit={handleRegistrationDialogSubmit}
|
||||
handleClose={closeRegistrationDialog}
|
||||
/>
|
||||
|
||||
<RequestPasswordResetDialog
|
||||
isOpen={dialogState.passwordResetRequestDialog}
|
||||
onSubmit={handleRequestPasswordResetDialogSubmit}
|
||||
handleClose={closeRequestPasswordResetDialog}
|
||||
skipTokenRequest={skipTokenRequest}
|
||||
/>
|
||||
<RequestPasswordResetDialog
|
||||
isOpen={dialogState.passwordResetRequestDialog}
|
||||
onSubmit={handleRequestPasswordResetDialogSubmit}
|
||||
handleClose={closeRequestPasswordResetDialog}
|
||||
skipTokenRequest={skipTokenRequest}
|
||||
/>
|
||||
|
||||
<ResetPasswordDialog
|
||||
isOpen={dialogState.resetPasswordDialog}
|
||||
onSubmit={handleResetPasswordDialogSubmit}
|
||||
handleClose={closeResetPasswordDialog}
|
||||
userName={userToResetPassword}
|
||||
/>
|
||||
<ResetPasswordDialog
|
||||
isOpen={dialogState.resetPasswordDialog}
|
||||
onSubmit={handleResetPasswordDialogSubmit}
|
||||
handleClose={closeResetPasswordDialog}
|
||||
userName={userToResetPassword}
|
||||
/>
|
||||
|
||||
<AccountActivationDialog
|
||||
isOpen={dialogState.activationDialog}
|
||||
onSubmit={handleAccountActivationDialogSubmit}
|
||||
handleClose={closeActivateAccountDialog}
|
||||
/>
|
||||
</Root>
|
||||
<AccountActivationDialog
|
||||
isOpen={dialogState.activationDialog}
|
||||
onSubmit={handleAccountActivationDialogSubmit}
|
||||
handleClose={closeActivateAccountDialog}
|
||||
/>
|
||||
</Root>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue