moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Only use 'username or e-mail' if can log in with username 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-04-16 00:03:06 +02:00
parent decc709b34
commit 8d832856b1
5 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/soapbox/features/auth-login/components/login-form.tsx
View File

@ -5,11 +5,16 @@ import { Link } from 'react-router-dom';
import { Button, Form, FormActions, FormGroup, Input, Stack } from 'soapbox/components/ui';
import ConsumersList from './consumers-list';
import { useFeatures } from 'soapbox/hooks';
const messages = defineMessages({
username: {
id: 'login.fields.username_label',
defaultMessage: 'Email or username',
defaultMessage: 'E-mail or username',
},
email: {
id: 'login.fields.email_label',
defaultMessage: 'E-mail address',
},
password: {
id: 'login.fields.password_placeholder',
@ -24,6 +29,10 @@ interface ILoginForm {
const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
const intl = useIntl();
const features = useFeatures();
const usernameLabel = intl.formatMessage(features.logInWithUsername ? messages.username : messages.email);
const passwordLabel = intl.formatMessage(messages.password);
return (
<div>
@ -33,10 +42,10 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
<Stack className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2' space={5}>
<Form onSubmit={handleSubmit}>
<FormGroup labelText={intl.formatMessage(messages.username)}>
<FormGroup labelText={usernameLabel}>
<Input
aria-label={intl.formatMessage(messages.username)}
placeholder={intl.formatMessage(messages.username)}
aria-label={usernameLabel}
placeholder={usernameLabel}
type='text'
name='username'
autoCorrect='off'
@ -46,7 +55,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
</FormGroup>
<FormGroup
labelText={intl.formatMessage(messages.password)}
labelText={passwordLabel}
hintText={
<Link to='/reset-password' className='hover:underline'>
<FormattedMessage
@ -57,8 +66,8 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
}
>
<Input
aria-label={intl.formatMessage(messages.password)}
placeholder={intl.formatMessage(messages.password)}
aria-label={passwordLabel}
placeholder={passwordLabel}
type='password'
name='password'
autoComplete='off'

8
app/soapbox/features/auth-login/components/password-reset.tsx
View File

@ -4,17 +4,19 @@ import { Redirect } from 'react-router-dom';
import { resetPassword } from 'soapbox/actions/security';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
import { useAppDispatch, useFeatures } from 'soapbox/hooks';
import toast from 'soapbox/toast';
const messages = defineMessages({
nicknameOrEmail: { id: 'password_reset.fields.username_placeholder', defaultMessage: 'Email or username' },
nicknameOrEmail: { id: 'password_reset.fields.username_placeholder', defaultMessage: 'E-mail or username' },
email: { id: 'password_reset.fields.email_placeholder', defaultMessage: 'E-mail address' },
confirmation: { id: 'password_reset.confirmation', defaultMessage: 'Check your email for confirmation.' },
});
const PasswordReset = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const features = useFeatures();
const [isLoading, setIsLoading] = useState(false);
const [success, setSuccess] = useState(false);
@ -43,7 +45,7 @@ const PasswordReset = () => {
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<Form onSubmit={handleSubmit}>
<FormGroup labelText={intl.formatMessage(messages.nicknameOrEmail)}>
<FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
<Input
type='text'
name='nickname_or_email'

8
app/soapbox/features/public-layout/components/header.tsx
View File

@ -7,7 +7,7 @@ import { fetchInstance } from 'soapbox/actions/instance';
import { openModal } from 'soapbox/actions/modals';
import SiteLogo from 'soapbox/components/site-logo';
import { Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
import { useSoapboxConfig, useOwnAccount, useAppDispatch, useRegistrationStatus } from 'soapbox/hooks';
import { useSoapboxConfig, useOwnAccount, useAppDispatch, useRegistrationStatus, useFeatures } from 'soapbox/hooks';
import Sonar from './sonar';
@ -18,7 +18,8 @@ const messages = defineMessages({
home: { id: 'header.home.label', defaultMessage: 'Home' },
login: { id: 'header.login.label', defaultMessage: 'Log in' },
register: { id: 'header.register.label', defaultMessage: 'Register' },
username: { id: 'header.login.username.placeholder', defaultMessage: 'Email or username' },
username: { id: 'header.login.username.placeholder', defaultMessage: 'E-mail or username' },
email: { id: 'header.login.email.placeholder', defaultMessage: 'E-mail address' },
password: { id: 'header.login.password.label', defaultMessage: 'Password' },
forgotPassword: { id: 'header.login.forgot_password', defaultMessage: 'Forgot password?' },
});
@ -26,6 +27,7 @@ const messages = defineMessages({
const Header = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const features = useFeatures();
const account = useOwnAccount();
const soapboxConfig = useSoapboxConfig();
@ -123,7 +125,7 @@ const Header = () => {
value={username}
onChange={(event) => setUsername(event.target.value.trim())}
type='text'
placeholder={intl.formatMessage(messages.username)}
placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
className='max-w-[200px]'
autoCorrect='off'
autoCapitalize='off'

8
app/soapbox/features/ui/components/navbar.tsx
View File

@ -9,7 +9,7 @@ import { openSidebar } from 'soapbox/actions/sidebar';
import SiteLogo from 'soapbox/components/site-logo';
import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
import Search from 'soapbox/features/compose/components/search';
import { useAppDispatch, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
import { useAppDispatch, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
import ProfileDropdown from './profile-dropdown';
@ -17,7 +17,8 @@ import type { AxiosError } from 'axios';
const messages = defineMessages({
login: { id: 'navbar.login.action', defaultMessage: 'Log in' },
username: { id: 'navbar.login.username.placeholder', defaultMessage: 'Email or username' },
username: { id: 'navbar.login.username.placeholder', defaultMessage: 'E-mail or username' },
email: { id: 'navbar.login.email.placeholder', defaultMessage: 'E-mail address' },
password: { id: 'navbar.login.password.label', defaultMessage: 'Password' },
forgotPassword: { id: 'navbar.login.forgot_password', defaultMessage: 'Forgot password?' },
});
@ -25,6 +26,7 @@ const messages = defineMessages({
const Navbar = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const features = useFeatures();
const { isOpen } = useRegistrationStatus();
const account = useOwnAccount();
const node = useRef(null);
@ -111,7 +113,7 @@ const Navbar = () => {
value={username}
onChange={(event) => setUsername(event.target.value)}
type='text'
placeholder={intl.formatMessage(messages.username)}
placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
className='max-w-[200px]'
/>

5
app/soapbox/utils/features.ts
View File

@ -597,6 +597,11 @@ const getInstanceFeatures = (instance: Instance) => {
v.software === PLEROMA && gte(v.version, '0.9.9'),
]),
/**
* Can sign in using username instead of e-mail address.
*/
logInWithUsername: v.software === PLEROMA,
/**
* Can perform moderation actions with account and reports.
* @see {@link https://docs.joinmastodon.org/methods/admin/}