feat: add login grid

assets/pages/LoginPage.tsx

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