fix signin banner

app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx

@@ -1,40 +1,56 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
+
 import { FormattedMessage } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import { registrationsOpen } from 'flavours/glitch/initial_state';
+
+
 import { openModal } from 'flavours/glitch/actions/modal';
+import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';
+import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
 
 const SignInBanner = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const openClosedRegistrationsModal = useCallback(
-    () => dispatch(openModal('CLOSED_REGISTRATIONS')),
-    [dispatch],
+  () => dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' })),
+  [dispatch],
   );
 
   let signupButton;
 
+  const signupUrl = useAppSelector((state) => state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up');
+
+  if (sso_redirect) {
+  return (
+    <div className='sign-in-banner'>
+    <p><strong><FormattedMessage id='sign_in_banner.mastodon_is' defaultMessage="Mastodon is the best way to keep up with what's happening." /></strong></p>
+    <p><FormattedMessage id='sign_in_banner.follow_anyone' defaultMessage='Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.' /></p>
+    <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+    </div>
+  );
+  }
+
   if (registrationsOpen) {
-    signupButton = (
-      <a href='/auth/sign_up' className='button button--block button-tertiary'>
-        <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-      </a>
-    );
+  signupButton = (
+    <a href={signupUrl} className='button button--block'>
+    <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+    </a>
+  );
   } else {
-    signupButton = (
-      <button className='button button--block button-tertiary' onClick={openClosedRegistrationsModal}>
-        <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-      </button>
-    );
+  signupButton = (
+    <button className='button button--block' onClick={openClosedRegistrationsModal}>
+    <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+    </button>
+  );
   }
 
   return (
-    <div className='sign-in-banner'>
-      <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Sign in to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.' /></p>
-      <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
-      {signupButton}
-	<p>If you signed up for an account have not received a verification email, check your SPAM folder. If you do not get it in an hour, send an email on the about page to the owner to have your account manually approved.</p>
-    </div>
+  <div className='sign-in-banner'>
+    <p><strong><FormattedMessage id='sign_in_banner.mastodon_is' defaultMessage="Mastodon is the best way to keep up with what's happening." /></strong></p>
+    <p><FormattedMessage id='sign_in_banner.follow_anyone' defaultMessage='Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.' /></p>
+    {signupButton}
+    <a href='/auth/sign_in' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
+    <p>If you signed up for an account have not received a verification email, check your SPAM folder. If you do not get it in an hour, send an email on the about page to the owner to have your account manually approved.</p>
+  </div>
   );
 };