diff --git a/app/javascript/components/rooms/room/join/RequireAuthentication.jsx b/app/javascript/components/rooms/room/join/RequireAuthentication.jsx index 88908ddcf0eb1f3470bed6b5f7be07cc0a7ff256..7e16a351aa7116bf232970f21926b56c0822a39b 100644 --- a/app/javascript/components/rooms/room/join/RequireAuthentication.jsx +++ b/app/javascript/components/rooms/room/join/RequireAuthentication.jsx @@ -19,7 +19,6 @@ import { Button, Form } from 'react-bootstrap'; import Card from 'react-bootstrap/Card'; import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; -import Logo from '../../../shared_components/Logo'; import useEnv from '../../../../hooks/queries/env/useEnv'; import ButtonLink from '../../../shared_components/utilities/ButtonLink'; @@ -28,34 +27,29 @@ export default function RequireAuthentication({ path }) { const { data: env } = useEnv(); return ( - <div className="vertical-center"> - <div className="text-center pb-4"> - <Logo /> - </div> - <Card className="col-xl-6 col-lg-7 col-md-9 col-10 mx-auto p-0 border-0 card-shadow text-center"> - <Card.Body className="pt-4 px-5"> - <p className="mb-0">{ t('room.settings.require_signed_in_message') }</p> - </Card.Body> - <Card.Footer className="bg-white"> - { - env?.EXTERNAL_AUTH ? ( - <Form action={process.env.OMNIAUTH_PATH} method="POST" data-turbo="false"> - <input type="hidden" name="authenticity_token" value={document.querySelector('meta[name="csrf-token"]').content} /> - <Button variant="brand-outline-color" className="btn btn-lg m-2" type="submit">{t('authentication.sign_up')}</Button> - <Button variant="brand" className="btn btn-lg m-2" type="submit">{t('authentication.sign_in')}</Button> - </Form> - ) : ( - <> - <ButtonLink to={`/signup?location=${path}`} variant="brand-outline-color" className="btn btn-lg m-2"> - {t('authentication.sign_up')} - </ButtonLink> - <ButtonLink to={`/signin?location=${path}`} variant="brand" className="btn btn-lg m-2">{t('authentication.sign_in')}</ButtonLink> - </> - ) - } - </Card.Footer> - </Card> - </div> + <Card className="col-xl-6 col-lg-7 col-md-9 col-10 mx-auto p-0 border-0 card-shadow text-center"> + <Card.Body className="pt-4 px-5"> + <p className="mb-0">{ t('room.settings.require_signed_in_message') }</p> + </Card.Body> + <Card.Footer className="bg-white"> + { + env?.EXTERNAL_AUTH ? ( + <Form action={process.env.OMNIAUTH_PATH} method="POST" data-turbo="false"> + <input type="hidden" name="authenticity_token" value={document.querySelector('meta[name="csrf-token"]').content} /> + <Button variant="brand-outline-color" className="btn btn-lg m-2" type="submit">{t('authentication.sign_up')}</Button> + <Button variant="brand" className="btn btn-lg m-2" type="submit">{t('authentication.sign_in')}</Button> + </Form> + ) : ( + <> + <ButtonLink to={`/signup?location=${path}`} variant="brand-outline-color" className="btn btn-lg m-2"> + {t('authentication.sign_up')} + </ButtonLink> + <ButtonLink to={`/signin?location=${path}`} variant="brand" className="btn btn-lg m-2">{t('authentication.sign_in')}</ButtonLink> + </> + ) + } + </Card.Footer> + </Card> ); }