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

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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<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)}
+              aria-label={usernameLabel}
-              placeholder={intl.formatMessage(messages.username)}
+              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)}
+              aria-label={passwordLabel}
-              placeholder={intl.formatMessage(messages.password)}
+              placeholder={passwordLabel}
               type='password'
               name='password'
               autoComplete='off'

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

@@ -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'

app/soapbox/features/public-layout/components/header.tsx

@@ -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'

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]'
                   />
 

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/}