forked from Archives/Athou_commafeed
replace complex eslint config with biome
This commit is contained in:
Athou
@@ -1,89 +1,89 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { type LoginRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { PageTitle } from "pages/PageTitle"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export function LoginPage() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<LoginRequest>({
|
||||
initialValues: {
|
||||
name: "",
|
||||
password: "",
|
||||
},
|
||||
})
|
||||
|
||||
const login = useAsyncCallback(client.user.login, {
|
||||
onSuccess: () => {
|
||||
dispatch(redirectToRootCategory())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container size="xs">
|
||||
<PageTitle />
|
||||
<Paper>
|
||||
<Title order={2} mb="md">
|
||||
<Trans>Log in</Trans>
|
||||
</Title>
|
||||
{login.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(login.error)} />
|
||||
</Box>
|
||||
)}
|
||||
<form onSubmit={form.onSubmit(login.execute)}>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label={<Trans>User Name or E-mail</Trans>}
|
||||
placeholder={t`User Name or E-mail`}
|
||||
{...form.getInputProps("name")}
|
||||
description={
|
||||
serverInfos?.demoAccountEnabled ? <Trans>Try out CommaFeed with the demo account: demo/demo</Trans> : ""
|
||||
}
|
||||
size="md"
|
||||
required
|
||||
autoCapitalize="off"
|
||||
/>
|
||||
<PasswordInput
|
||||
label={<Trans>Password</Trans>}
|
||||
placeholder={t`Password`}
|
||||
{...form.getInputProps("password")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
|
||||
{serverInfos?.smtpEnabled && (
|
||||
<Anchor component={Link} to="/passwordRecovery" c="dimmed">
|
||||
<Trans>Forgot password?</Trans>
|
||||
</Anchor>
|
||||
)}
|
||||
|
||||
<Button type="submit" loading={login.loading}>
|
||||
<Trans>Log in</Trans>
|
||||
</Button>
|
||||
{serverInfos?.allowRegistrations && (
|
||||
<Center>
|
||||
<Group>
|
||||
<Trans>
|
||||
<Box>Need an account?</Box>
|
||||
<Anchor component={Link} to="/register">
|
||||
Sign up!
|
||||
</Anchor>
|
||||
</Trans>
|
||||
</Group>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import type { LoginRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { PageTitle } from "pages/PageTitle"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export function LoginPage() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<LoginRequest>({
|
||||
initialValues: {
|
||||
name: "",
|
||||
password: "",
|
||||
},
|
||||
})
|
||||
|
||||
const login = useAsyncCallback(client.user.login, {
|
||||
onSuccess: () => {
|
||||
dispatch(redirectToRootCategory())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container size="xs">
|
||||
<PageTitle />
|
||||
<Paper>
|
||||
<Title order={2} mb="md">
|
||||
<Trans>Log in</Trans>
|
||||
</Title>
|
||||
{login.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(login.error)} />
|
||||
</Box>
|
||||
)}
|
||||
<form onSubmit={form.onSubmit(login.execute)}>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label={<Trans>User Name or E-mail</Trans>}
|
||||
placeholder={t`User Name or E-mail`}
|
||||
{...form.getInputProps("name")}
|
||||
description={
|
||||
serverInfos?.demoAccountEnabled ? <Trans>Try out CommaFeed with the demo account: demo/demo</Trans> : ""
|
||||
}
|
||||
size="md"
|
||||
required
|
||||
autoCapitalize="off"
|
||||
/>
|
||||
<PasswordInput
|
||||
label={<Trans>Password</Trans>}
|
||||
placeholder={t`Password`}
|
||||
{...form.getInputProps("password")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
|
||||
{serverInfos?.smtpEnabled && (
|
||||
<Anchor component={Link} to="/passwordRecovery" c="dimmed">
|
||||
<Trans>Forgot password?</Trans>
|
||||
</Anchor>
|
||||
)}
|
||||
|
||||
<Button type="submit" loading={login.loading}>
|
||||
<Trans>Log in</Trans>
|
||||
</Button>
|
||||
{serverInfos?.allowRegistrations && (
|
||||
<Center>
|
||||
<Group>
|
||||
<Trans>
|
||||
<Box>Need an account?</Box>
|
||||
<Anchor component={Link} to="/register">
|
||||
Sign up!
|
||||
</Anchor>
|
||||
</Trans>
|
||||
</Group>
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,79 +1,79 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Anchor, Box, Button, Center, Container, Group, Paper, Stack, TextInput, Title } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { type PasswordResetRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { PageTitle } from "pages/PageTitle"
|
||||
import { useState } from "react"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export function PasswordRecoveryPage() {
|
||||
const [message, setMessage] = useState("")
|
||||
|
||||
const form = useForm<PasswordResetRequest>({
|
||||
initialValues: {
|
||||
email: "",
|
||||
},
|
||||
})
|
||||
|
||||
const recoverPassword = useAsyncCallback(client.user.passwordReset, {
|
||||
onSuccess: () => {
|
||||
setMessage(t`An email has been sent if this address was registered. Check your inbox.`)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container size="xs">
|
||||
<PageTitle />
|
||||
<Paper>
|
||||
<Title order={2} mb="md">
|
||||
<Trans>Password Recovery</Trans>
|
||||
</Title>
|
||||
|
||||
{recoverPassword.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(recoverPassword.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{message && (
|
||||
<Box mb="md">
|
||||
<Alert level="success" messages={[message]} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={form.onSubmit(req => {
|
||||
setMessage("")
|
||||
recoverPassword.execute(req)
|
||||
})}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
type="email"
|
||||
label={<Trans>E-mail</Trans>}
|
||||
placeholder={t`E-mail`}
|
||||
{...form.getInputProps("email")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
|
||||
<Button type="submit" loading={recoverPassword.loading}>
|
||||
<Trans>Recover password</Trans>
|
||||
</Button>
|
||||
|
||||
<Center>
|
||||
<Group>
|
||||
<Anchor component={Link} to="/login">
|
||||
<Trans>Back to log in</Trans>
|
||||
</Anchor>
|
||||
</Group>
|
||||
</Center>
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Anchor, Box, Button, Center, Container, Group, Paper, Stack, TextInput, Title } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import type { PasswordResetRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { PageTitle } from "pages/PageTitle"
|
||||
import { useState } from "react"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export function PasswordRecoveryPage() {
|
||||
const [message, setMessage] = useState("")
|
||||
|
||||
const form = useForm<PasswordResetRequest>({
|
||||
initialValues: {
|
||||
email: "",
|
||||
},
|
||||
})
|
||||
|
||||
const recoverPassword = useAsyncCallback(client.user.passwordReset, {
|
||||
onSuccess: () => {
|
||||
setMessage(t`An email has been sent if this address was registered. Check your inbox.`)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container size="xs">
|
||||
<PageTitle />
|
||||
<Paper>
|
||||
<Title order={2} mb="md">
|
||||
<Trans>Password Recovery</Trans>
|
||||
</Title>
|
||||
|
||||
{recoverPassword.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(recoverPassword.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{message && (
|
||||
<Box mb="md">
|
||||
<Alert level="success" messages={[message]} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={form.onSubmit(req => {
|
||||
setMessage("")
|
||||
recoverPassword.execute(req)
|
||||
})}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
type="email"
|
||||
label={<Trans>E-mail</Trans>}
|
||||
placeholder={t`E-mail`}
|
||||
{...form.getInputProps("email")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
|
||||
<Button type="submit" loading={recoverPassword.loading}>
|
||||
<Trans>Recover password</Trans>
|
||||
</Button>
|
||||
|
||||
<Center>
|
||||
<Group>
|
||||
<Anchor component={Link} to="/login">
|
||||
<Trans>Back to log in</Trans>
|
||||
</Anchor>
|
||||
</Group>
|
||||
</Center>
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,89 +1,89 @@
|
||||
import { t, Trans } from "@lingui/macro"
|
||||
import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import { type RegistrationRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { PageTitle } from "pages/PageTitle"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export function RegistrationPage() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<RegistrationRequest>({
|
||||
initialValues: {
|
||||
name: "",
|
||||
password: "",
|
||||
email: "",
|
||||
},
|
||||
})
|
||||
|
||||
const register = useAsyncCallback(client.user.register, {
|
||||
onSuccess: () => {
|
||||
dispatch(redirectToRootCategory())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container size="xs">
|
||||
<PageTitle />
|
||||
<Paper>
|
||||
<Title order={2} mb="md">
|
||||
<Trans>Sign up</Trans>
|
||||
</Title>
|
||||
{serverInfos && !serverInfos.allowRegistrations && (
|
||||
<Box mb="md">
|
||||
<Alert messages={[t`Registrations are closed on this CommaFeed instance`]} />
|
||||
</Box>
|
||||
)}
|
||||
{serverInfos?.allowRegistrations && (
|
||||
<>
|
||||
{register.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(register.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.onSubmit(register.execute)}>
|
||||
<Stack>
|
||||
<TextInput label="User Name" placeholder="User Name" {...form.getInputProps("name")} size="md" required />
|
||||
<TextInput
|
||||
type="email"
|
||||
label={<Trans>E-mail address</Trans>}
|
||||
placeholder={t`E-mail address`}
|
||||
{...form.getInputProps("email")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
<PasswordInput
|
||||
label={<Trans>Password</Trans>}
|
||||
placeholder={t`Password`}
|
||||
{...form.getInputProps("password")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
<Button type="submit" loading={register.loading}>
|
||||
<Trans>Sign up</Trans>
|
||||
</Button>
|
||||
<Center>
|
||||
<Group>
|
||||
<Trans>
|
||||
<Box>Have an account?</Box>
|
||||
<Anchor component={Link} to="/login">
|
||||
Log in!
|
||||
</Anchor>
|
||||
</Trans>
|
||||
</Group>
|
||||
</Center>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
import { Trans, t } from "@lingui/macro"
|
||||
import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { client, errorToStrings } from "app/client"
|
||||
import { redirectToRootCategory } from "app/redirect/thunks"
|
||||
import { useAppDispatch, useAppSelector } from "app/store"
|
||||
import type { RegistrationRequest } from "app/types"
|
||||
import { Alert } from "components/Alert"
|
||||
import { PageTitle } from "pages/PageTitle"
|
||||
import { useAsyncCallback } from "react-async-hook"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export function RegistrationPage() {
|
||||
const serverInfos = useAppSelector(state => state.server.serverInfos)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const form = useForm<RegistrationRequest>({
|
||||
initialValues: {
|
||||
name: "",
|
||||
password: "",
|
||||
email: "",
|
||||
},
|
||||
})
|
||||
|
||||
const register = useAsyncCallback(client.user.register, {
|
||||
onSuccess: () => {
|
||||
dispatch(redirectToRootCategory())
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Container size="xs">
|
||||
<PageTitle />
|
||||
<Paper>
|
||||
<Title order={2} mb="md">
|
||||
<Trans>Sign up</Trans>
|
||||
</Title>
|
||||
{serverInfos && !serverInfos.allowRegistrations && (
|
||||
<Box mb="md">
|
||||
<Alert messages={[t`Registrations are closed on this CommaFeed instance`]} />
|
||||
</Box>
|
||||
)}
|
||||
{serverInfos?.allowRegistrations && (
|
||||
<>
|
||||
{register.error && (
|
||||
<Box mb="md">
|
||||
<Alert messages={errorToStrings(register.error)} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.onSubmit(register.execute)}>
|
||||
<Stack>
|
||||
<TextInput label="User Name" placeholder="User Name" {...form.getInputProps("name")} size="md" required />
|
||||
<TextInput
|
||||
type="email"
|
||||
label={<Trans>E-mail address</Trans>}
|
||||
placeholder={t`E-mail address`}
|
||||
{...form.getInputProps("email")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
<PasswordInput
|
||||
label={<Trans>Password</Trans>}
|
||||
placeholder={t`Password`}
|
||||
{...form.getInputProps("password")}
|
||||
size="md"
|
||||
required
|
||||
/>
|
||||
<Button type="submit" loading={register.loading}>
|
||||
<Trans>Sign up</Trans>
|
||||
</Button>
|
||||
<Center>
|
||||
<Group>
|
||||
<Trans>
|
||||
<Box>Have an account?</Box>
|
||||
<Anchor component={Link} to="/login">
|
||||
Log in!
|
||||
</Anchor>
|
||||
</Trans>
|
||||
</Group>
|
||||
</Center>
|
||||
</Stack>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user