feat: add go back to site button (#2538)

packages/netlify-cms-ui-default/src/AuthenticationPage.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import Icon from './Icon';
 import { buttons, shadows } from './styles';
+import { GoBackButton } from './GoBackButton';
 
 const StyledAuthenticationPage = styled.section`
   display: flex;
@@ -67,6 +68,7 @@ const AuthenticationPage = ({
   renderButtonContent,
   renderPageContent,
   logoUrl,
+  siteUrl,
 }) => {
   return (
     <StyledAuthenticationPage>
@@ -78,6 +80,7 @@ const AuthenticationPage = ({
           {renderButtonContent()}
         </LoginButton>
       )}
+      {siteUrl && <GoBackButton href={siteUrl} />}
       {logoUrl ? <NetlifyCreditIcon size="100px" type="netlify-cms" /> : null}
     </StyledAuthenticationPage>
   );
@@ -86,6 +89,7 @@ const AuthenticationPage = ({
 AuthenticationPage.propTypes = {
   onLogin: PropTypes.func,
   logoUrl: PropTypes.string,
+  siteUrl: PropTypes.string,
   loginDisabled: PropTypes.bool,
   loginErrorMessage: PropTypes.node,
   renderButtonContent: PropTypes.func,

packages/netlify-cms-ui-default/src/GoBackButton.js

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { colorsRaw } from './styles.js';
+import Icon from './Icon';
+
+const GoBackButtonStyle = styled.a`
+  display: flex;
+  align-items: center;
+
+  margin-top: 50px;
+  padding: 10px;
+
+  font-size: 14px;
+`;
+
+const ButtonText = styled.p`
+  color: ${colorsRaw.gray};
+  margin: 0 10px;
+`;
+
+export default class GoBackButton extends React.Component {
+  render() {
+    return (
+      <GoBackButtonStyle href={this.props.href}>
+        <Icon type="arrow" size="small" />
+        <ButtonText>Go back to site</ButtonText>
+      </GoBackButtonStyle>
+    );
+  }
+}

packages/netlify-cms-ui-default/src/index.js

@@ -6,6 +6,7 @@ import Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggl
 import AuthenticationPage from './AuthenticationPage';
 import WidgetPreviewContainer from './WidgetPreviewContainer';
 import ObjectWidgetTopBar from './ObjectWidgetTopBar';
+import GoBackButton from './GoBackButton';
 import {
   fonts,
   colorsRaw,
@@ -76,4 +77,5 @@ export {
   effects,
   reactSelectStyles,
   GlobalStyles,
+  GoBackButton,
 };