feat: add login grid

This commit is contained in:
Maël Gangloff 2024-08-05 02:29:42 +02:00
parent 34b0ce7a9b
commit b569083db6
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
3 changed files with 70 additions and 58 deletions

View File

@ -1,13 +1,19 @@
import React, {createContext, useContext, useEffect, useState} from "react"; import React, {createContext, useContext, useEffect, useState} from "react";
import {Alert, Button, Card, Flex, Form, Input} from "antd"; import {Alert, Button, Card, Form, Input} from "antd";
import {getConfiguration, getUser, InstanceConfig, login} from "../utils/api"; import {getConfiguration, getUser, InstanceConfig, login} from "../utils/api";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
import {t} from 'ttag' import {t} from 'ttag'
import TextPage from "./TextPage";
type FieldType = { type FieldType = {
username: string; username: string;
password: string; password: string;
}; }
const gridStyle: React.CSSProperties = {
width: '50%',
textAlign: 'center',
}
export const AuthenticatedContext = createContext<any>(null) export const AuthenticatedContext = createContext<any>(null)
@ -24,7 +30,11 @@ export default function LoginPage() {
navigate('/home') navigate('/home')
}).catch((e) => { }).catch((e) => {
setIsAuthenticated(false) setIsAuthenticated(false)
setError(e.response.data.message) if (e.response.data.message !== undefined) {
setError(e.response.data.message)
} else {
setError(e.response.data['hydra:description'])
}
}) })
} }
@ -36,53 +46,55 @@ export default function LoginPage() {
getConfiguration().then(setConfiguration) getConfiguration().then(setConfiguration)
}, []) }, [])
return <Flex gap="middle" align="center" justify="center" vertical><Card return <Card title={t`Log in`} style={{width: '100%'}}>
title={t`Log in`} <Card.Grid style={gridStyle} hoverable={false}>
> {error &&
{error && <Alert
<Alert type='error'
type='error' message={t`Error`}
message={t`Error`} banner={true}
banner={true} role='role'
role='role' description={error}
description={error} style={{marginBottom: '1em'}}
style={{marginBottom: '1em'}} />}
/>} <Form
<Form name="basic"
name="basic" labelCol={{span: 8}}
labelCol={{span: 8}} wrapperCol={{span: 16}}
wrapperCol={{span: 16}} style={{maxWidth: 600}}
style={{maxWidth: 600}} onFinish={onFinish}
onFinish={onFinish} autoComplete="off"
autoComplete="off"
>
<Form.Item
label={t`Username`}
name="username"
rules={[{required: true, message: t`Required`}]}
> >
<Input autoFocus/> <Form.Item
</Form.Item> label={t`Username`}
name="username"
rules={[{required: true, message: t`Required`}]}
>
<Input autoFocus/>
</Form.Item>
<Form.Item<FieldType> <Form.Item<FieldType>
label={t`Password`} label={t`Password`}
name="password" name="password"
rules={[{required: true, message: t`Required`}]} rules={[{required: true, message: t`Required`}]}
> >
<Input.Password/> <Input.Password/>
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{offset: 8, span: 16}}> <Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button type="primary" htmlType="submit"> <Button block type="primary" htmlType="submit">
{t`Submit`} {t`Submit`}
</Button> </Button>
</Form.Item> </Form.Item>
{configuration?.ssoLogin && <Form.Item wrapperCol={{offset: 8, span: 16}}> {configuration?.ssoLogin && <Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button type="primary" htmlType="button" href="/login/oauth"> <Button type="dashed" htmlType="button" href="/login/oauth" block>
{t`Log in with SSO`} {t`Log in with SSO`}
</Button> </Button>
</Form.Item>} </Form.Item>}
</Form> </Form>
</Card.Grid>
<Card.Grid style={gridStyle} hoverable={false}>
<TextPage resource='ads.md'/>
</Card.Grid>
</Card> </Card>
</Flex>
} }

View File

@ -33,7 +33,7 @@ readonly class JWTAuthenticator implements AuthenticationSuccessHandlerInterface
public function handleAuthenticationSuccess(UserInterface $user, $jwt = null): Response public function handleAuthenticationSuccess(UserInterface $user, $jwt = null): Response
{ {
if (($user instanceof User) && !$user->isVerified()) { if (($user instanceof User) && !$user->isVerified()) {
throw new AccessDeniedHttpException('This user has not yet validated their email address.'); throw new AccessDeniedHttpException('You have not yet validated your email address.');
} }
if (null === $jwt) { if (null === $jwt) {

View File

@ -57,8 +57,8 @@ msgstr ""
#: assets/components/tracking/ConnectorForm.tsx:110 #: assets/components/tracking/ConnectorForm.tsx:110
#: assets/components/tracking/ConnectorForm.tsx:119 #: assets/components/tracking/ConnectorForm.tsx:119
#: assets/components/tracking/WatchlistForm.tsx:103 #: assets/components/tracking/WatchlistForm.tsx:103
#: assets/pages/LoginPage.tsx:62 #: assets/pages/LoginPage.tsx:71
#: assets/pages/LoginPage.tsx:70 #: assets/pages/LoginPage.tsx:79
msgid "Required" msgid "Required"
msgstr "" msgstr ""
@ -326,7 +326,7 @@ msgid "Log out"
msgstr "" msgstr ""
#: assets/components/Sider.tsx:120 #: assets/components/Sider.tsx:120
#: assets/pages/LoginPage.tsx:40 #: assets/pages/LoginPage.tsx:49
msgid "Log in" msgid "Log in"
msgstr "" msgstr ""
@ -434,7 +434,7 @@ msgid ""
"their country of origin." "their country of origin."
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:60 #: assets/pages/LoginPage.tsx:69
#: assets/pages/watchdog/UserPage.tsx:18 #: assets/pages/watchdog/UserPage.tsx:18
msgid "Username" msgid "Username"
msgstr "" msgstr ""
@ -463,19 +463,19 @@ msgstr ""
msgid "Sorry, the page you visited does not exist." msgid "Sorry, the page you visited does not exist."
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:45 #: assets/pages/LoginPage.tsx:54
msgid "Error" msgid "Error"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:68 #: assets/pages/LoginPage.tsx:77
msgid "Password" msgid "Password"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:77 #: assets/pages/LoginPage.tsx:86
msgid "Submit" msgid "Submit"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:82 #: assets/pages/LoginPage.tsx:91
msgid "Log in with SSO" msgid "Log in with SSO"
msgstr "" msgstr ""
@ -531,7 +531,7 @@ msgstr ""
msgid "Documentation" msgid "Documentation"
msgstr "" msgstr ""
#: assets/App.tsx:106 #: assets/App.tsx:107
#, javascript-format #, javascript-format
msgid "" msgid ""
"${ ProjectLink } is an open source project distributed under the ${ " "${ ProjectLink } is an open source project distributed under the ${ "