feat: register an account

maelgangloff · Aug 5, 2024 · 322ae44 · 322ae44
1 parent b569083
commit 322ae44
Show file tree

Hide file tree

Showing 9 changed files with 255 additions and 108 deletions.
diff --git a/assets/components/LoginForm.tsx b/assets/components/LoginForm.tsx
@@ -0,0 +1,91 @@
+import {Alert, Button, Form, Input, Space} from "antd";
+import {t} from "ttag";
+import React, {useContext, useEffect, useState} from "react";
+import {getUser, login} from "../utils/api";
+import {AuthenticatedContext} from "../pages/LoginPage";
+import {useNavigate} from "react-router-dom";
+
+
+type FieldType = {
+    username: string;
+    password: string;
+}
+
+export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
+
+    const [error, setError] = useState<string>()
+    const navigate = useNavigate()
+    const {setIsAuthenticated} = useContext(AuthenticatedContext)
+
+
+    useEffect(() => {
+        getUser().then(() => {
+            setIsAuthenticated(true)
+            navigate('/home')
+        })
+
+    }, [])
+
+
+    const onFinish = (data: FieldType) => {
+        login(data.username, data.password).then(() => {
+            setIsAuthenticated(true)
+            navigate('/home')
+        }).catch((e) => {
+            setIsAuthenticated(false)
+            if (e.response.data.message !== undefined) {
+                setError(e.response.data.message)
+            } else {
+                setError(e.response.data['hydra:description'])
+            }
+        })
+    }
+    return <>
+        {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`E-mail`}
+                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>
+
+            <Space>
+                <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                    <Button type="primary" htmlType="submit">
+                        {t`Submit`}
+                    </Button>
+                </Form.Item>
+                {ssoLogin && <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                    <Button type="dashed" htmlType="button" href="/login/oauth">
+                        {t`Log in with SSO`}
+                    </Button>
+                </Form.Item>}
+            </Space>
+        </Form>
+    </>
+}
diff --git a/assets/components/RegisterForm.tsx b/assets/components/RegisterForm.tsx
@@ -0,0 +1,70 @@
+import {Alert, Button, Form, Input} from "antd";
+import {t} from "ttag";
+import React, {useState} from "react";
+import {register} from "../utils/api";
+import {useNavigate} from "react-router-dom";
+
+
+type FieldType = {
+    username: string;
+    password: string;
+}
+
+export function RegisterForm() {
+
+    const [error, setError] = useState<string>()
+    const navigate = useNavigate()
+
+    const onFinish = (data: FieldType) => {
+        register(data.username, data.password).then(() => {
+            navigate('/home')
+        }).catch((e) => {
+            if (e.response.data.message !== undefined) {
+                setError(e.response.data.message)
+            } else {
+                setError(e.response.data['hydra:description'])
+            }
+        })
+    }
+    return <>
+        {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`E-mail`}
+                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 wrapperCol={{offset: 8, span: 16}}>
+                <Button block type="primary" htmlType="submit">
+                    {t`Register`}
+                </Button>
+            </Form.Item>
+        </Form>
+    </>
+}
diff --git a/assets/pages/LoginPage.tsx b/assets/pages/LoginPage.tsx
@@ -1,14 +1,11 @@
-import React, {createContext, useContext, useEffect, useState} from "react";
-import {Alert, Button, Card, Form, Input} from "antd";
-import {getConfiguration, getUser, InstanceConfig, login} from "../utils/api";
-import {useNavigate} from "react-router-dom";
+import React, {createContext, useEffect, useState} from "react";
+import {Button, Card} from "antd";
 import {t} from 'ttag'
 import TextPage from "./TextPage";
+import {LoginForm} from "../components/LoginForm";
+import {getConfiguration, InstanceConfig} from "../utils/api";
+import {RegisterForm} from "../components/RegisterForm";
 
-type FieldType = {
-    username: string;
-    password: string;
-}
 
 const gridStyle: React.CSSProperties = {
     width: '50%',
@@ -19,79 +16,27 @@ export const AuthenticatedContext = createContext<any>(null)
 
 export default function LoginPage() {
 
-    const [error, setError] = useState<string>()
+    const [wantRegister, setWantRegister] = useState<boolean>(false)
     const [configuration, setConfiguration] = useState<InstanceConfig>()
-    const navigate = useNavigate()
-    const {setIsAuthenticated} = useContext(AuthenticatedContext)
 
-    const onFinish = (data: FieldType) => {
-        login(data.username, data.password).then(() => {
-            setIsAuthenticated(true)
-            navigate('/home')
-        }).catch((e) => {
-            setIsAuthenticated(false)
-            if (e.response.data.message !== undefined) {
-                setError(e.response.data.message)
-            } else {
-                setError(e.response.data['hydra:description'])
-            }
-        })
+    const toggleWantRegister = () => {
+        setWantRegister(!wantRegister)
     }
 
     useEffect(() => {
-        getUser().then(() => {
-            setIsAuthenticated(true)
-            navigate('/home')
-        })
         getConfiguration().then(setConfiguration)
     }, [])
 
-    return <Card title={t`Log in`} style={{width: '100%'}}>
+    return <Card title={wantRegister ? t`Register` : 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"
-            >
-                <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 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>
+            {wantRegister ? <RegisterForm/> : <LoginForm ssoLogin={configuration?.ssoLogin}/>}
+            {
+                configuration?.registerEnabled &&
+                <Button type='link'
+                        block
+                        style={{marginTop: '1em'}}
+                        onClick={toggleWantRegister}>{wantRegister ? 'Login' : 'Create an account'}</Button>
+            }
         </Card.Grid>
         <Card.Grid style={gridStyle} hoverable={false}>
             <TextPage resource='ads.md'/>

diff --git a/assets/utils/api/index.ts b/assets/utils/api/index.ts
@@ -74,6 +74,7 @@ export interface Watchlist {
 export interface InstanceConfig {
     ssoLogin: boolean
     limtedFeatures: boolean
+    registerEnabled: boolean
 }
 
 export async function request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig): Promise<R> {

diff --git a/assets/utils/api/user.ts b/assets/utils/api/user.ts
@@ -10,6 +10,16 @@ export async function login(email: string, password: string): Promise<boolean> {
     return response.status === 200
 }
 
+export async function register(email: string, password: string): Promise<boolean> {
+    const response = await request({
+        method: 'POST',
+        url: 'register',
+        data: {email, password}
+    })
+    return response.status === 201
+}
+
+
 export async function getUser(): Promise<User> {
     const response = await request<User>({
         url: 'me'

diff --git a/src/Controller/InstanceController.php b/src/Controller/InstanceController.php
@@ -13,7 +13,8 @@ public function __invoke(): Instance
 
         $instance
             ->setLimitedFeatures($this->getParameter('limited_features') ?? false)
-            ->setOauthEnabled($this->getParameter('oauth_enabled'));
+            ->setOauthEnabled($this->getParameter('oauth_enabled') ?? false)
+            ->setRegisterEnabled($this->getParameter('registration_enabled') ?? false);
 
         return $instance;
     }

diff --git a/src/Controller/RegistrationController.php b/src/Controller/RegistrationController.php
@@ -14,6 +14,7 @@
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
 use Symfony\Component\HttpKernel\Exception\TooManyRequestsHttpException;
 use Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException;
+use Symfony\Component\HttpKernel\KernelInterface;
 use Symfony\Component\Mailer\Exception\TransportExceptionInterface;
 use Symfony\Component\Mime\Address;
 use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
@@ -31,6 +32,7 @@ public function __construct(
         private readonly EntityManagerInterface $em,
         private readonly SerializerInterface $serializer,
         private readonly LoggerInterface $logger,
+        private readonly KernelInterface $kernel
     ) {
     }
 
@@ -54,7 +56,7 @@ public function register(Request $request, UserPasswordHasherInterface $userPass
 
         $limiter = $this->userRegisterLimiter->create($request->getClientIp());
 
-        if (false === $limiter->consume()->isAccepted()) {
+        if (false === $this->kernel->isDebug() && false === $limiter->consume()->isAccepted()) {
             $this->logger->warning('IP address {ip} was rate limited by the Registration API.', [
                 'ip' => $request->getClientIp(),
             ]);
@@ -90,7 +92,7 @@ public function register(Request $request, UserPasswordHasherInterface $userPass
                 ->htmlTemplate('emails/success/confirmation_email.html.twig')
         );
 
-        return $this->redirectToRoute('index');
+        return new Response(null, 201);
     }
 
     #[Route('/verify/email', name: 'app_verify_email')]

diff --git a/src/Entity/Instance.php b/src/Entity/Instance.php
@@ -20,6 +20,8 @@ class Instance
 {
     private ?bool $oauthEnabled = null;
 
+    private ?bool $registerEnabled = null;
+
     private ?bool $limitedFeatures = null;
 
     public function isSsoLogin(): ?bool
@@ -45,4 +47,16 @@ public function setLimitedFeatures(bool $limitedFeatures): static
 
         return $this;
     }
+
+    public function getRegisterEnabled(): ?bool
+    {
+        return $this->registerEnabled;
+    }
+
+    public function setRegisterEnabled(?bool $registerEnabled): static
+    {
+        $this->registerEnabled = $registerEnabled;
+
+        return $this;
+    }
 }