feat(frontend): add french language file

also expanded translation coverage (still lots to do!)

src/components/Setup/LoginWithPlex.tsx

@@ -2,6 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { useUser } from '../../hooks/useUser';
 import PlexLoginButton from '../PlexLoginButton';
 import axios from 'axios';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  welcome: 'Welcome to Overseerr',
+  signinMessage: 'Get started by logging in with your Plex account',
+});
 
 interface LoginWithPlexProps {
   onComplete: () => void;
@@ -39,10 +45,10 @@ const LoginWithPlex: React.FC<LoginWithPlexProps> = ({ onComplete }) => {
   return (
     <form>
       <div className="flex justify-center font-bold text-xl mb-2">
-        Welcome to Overseerr
+        <FormattedMessage {...messages.welcome} />
       </div>
       <div className="flex justify-center text-sm pb-6 mb-2">
-        Get started by logging in with your Plex account
+        <FormattedMessage {...messages.signinMessage} />
       </div>
       <div className="flex items-center justify-center">
         <PlexLoginButton onAuthToken={(authToken) => setAuthToken(authToken)} />

src/components/Setup/index.tsx

@@ -7,15 +7,19 @@ import SettingsServices from '../Settings/SettingsServices';
 import LoginWithPlex from './LoginWithPlex';
 import SetupSteps from './SetupSteps';
 import axios from 'axios';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   finish: 'Finish Setup',
   finishing: 'Finishing...',
   continue: 'Continue',
+  loginwithplex: 'Login with Plex',
+  configureplex: 'Configure Plex',
+  configureservices: 'Configure Services',
 });
 
 const Setup: React.FC = () => {
+  const intl = useIntl();
   const [isUpdating, setIsUpdating] = useState(false);
   const [currentStep, setCurrentStep] = useState(1);
   const [plexSettingsComplete, setPlexSettingsComplete] = useState(false);
@@ -43,7 +47,7 @@ const Setup: React.FC = () => {
           '/images/rotate4.jpg',
         ]}
       />
-      <div className="px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-2xl relative z-50">
+      <div className="px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-4xl relative z-50">
         <img
           src="/logo.png"
           className="mx-auto max-h-32 w-auto mb-10"
@@ -56,19 +60,19 @@ const Setup: React.FC = () => {
           >
             <SetupSteps
               stepNumber={1}
-              description={'Login with Plex'}
+              description={intl.formatMessage(messages.loginwithplex)}
               active={currentStep === 1}
               completed={currentStep > 1}
             />
             <SetupSteps
               stepNumber={2}
-              description={'Configure Plex'}
+              description={intl.formatMessage(messages.configureplex)}
               active={currentStep === 2}
               completed={currentStep > 2}
             />
             <SetupSteps
               stepNumber={3}
-              description={'Configure Services'}
+              description={intl.formatMessage(messages.configureservices)}
               active={currentStep === 3}
               isLastStep
             />