From 8d832856b159ea0b2d31198069080b98110fb33b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 16 Apr 2023 00:03:06 +0200 Subject: [PATCH] Only use 'username or e-mail' if can log in with username MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../auth-login/components/login-form.tsx | 23 +++++++++++++------ .../auth-login/components/password-reset.tsx | 8 ++++--- .../public-layout/components/header.tsx | 8 ++++--- app/soapbox/features/ui/components/navbar.tsx | 8 ++++--- app/soapbox/utils/features.ts | 5 ++++ 5 files changed, 36 insertions(+), 16 deletions(-) diff --git a/app/soapbox/features/auth-login/components/login-form.tsx b/app/soapbox/features/auth-login/components/login-form.tsx index a91998671..f526548d8 100644 --- a/app/soapbox/features/auth-login/components/login-form.tsx +++ b/app/soapbox/features/auth-login/components/login-form.tsx @@ -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 = ({ 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 (
@@ -33,10 +42,10 @@ const LoginForm: React.FC = ({ isLoading, handleSubmit }) => {
- + = ({ isLoading, handleSubmit }) => { = ({ isLoading, handleSubmit }) => { } > { 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 = () => {
- + { 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' diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index 6cfb28728..422d22561 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/app/soapbox/features/ui/components/navbar.tsx @@ -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]' /> diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts index afbece3b4..9aff34a90 100644 --- a/app/soapbox/utils/features.ts +++ b/app/soapbox/utils/features.ts @@ -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/}