ExternalLoginForm: accept ?server param to redirect the login form to the specified instance

Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1313

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Compatibility: rudimentary support for Takahē.
 - UI: added backdrop blur behind modals.
 - Admin: let admins configure media preview for attachment thumbnails.
+- Login: accept `?server` param in external login, eg `fe.soapbox.pub/login/external?server=gleasonator.com`.
 
 ### Changed
 - Posts: letterbox images to 19:6 again.

app/soapbox/features/external-login/components/external-login-form.tsx

@@ -17,12 +17,14 @@ const messages = defineMessages({
 
 /** Form for logging into a remote instance */
 const ExternalLoginForm: React.FC = () => {
-  const code = new URLSearchParams(window.location.search).get('code');
+  const query = new URLSearchParams(window.location.search);
+  const code = query.get('code');
+  const server = query.get('server');
 
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [host, setHost] = useState('');
+  const [host, setHost] = useState(server || '');
   const [isLoading, setLoading] = useState(false);
 
   const handleHostChange: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
@@ -44,6 +46,12 @@ const ExternalLoginForm: React.FC = () => {
           toast.error(intl.formatMessage(messages.networkFailed));
         }
 
+        // If the server was invalid, clear it from the URL.
+        // https://stackoverflow.com/a/40592892
+        if (server) {
+          window.history.pushState(null, '', window.location.pathname);
+        }
+
         setLoading(false);
       });
   };
@@ -54,7 +62,13 @@ const ExternalLoginForm: React.FC = () => {
     }
   }, [code]);
 
-  if (code) {
+  useEffect(() => {
+    if (server && !code) {
+      handleSubmit();
+    }
+  }, [server]);
+
+  if (code || server) {
     return <Spinner />;
   }