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

packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js

@@ -76,6 +76,7 @@ export default class BitbucketAuthenticationPage extends React.Component {
         loginDisabled={inProgress}
         loginErrorMessage={this.state.loginError}
         logoUrl={config.get('logo_url')}
+        siteUrl={config.get('site_url')}
         renderButtonContent={() => (
           <React.Fragment>
             <LoginButtonIcon type="bitbucket" />

packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js

@@ -157,6 +157,7 @@ export default class GitGatewayAuthenticationPage extends React.Component {
     return (
       <AuthenticationPage
         logoUrl={config.get('logo_url')}
+        siteUrl={config.get('site_url')}
         renderPageContent={() => (
           <AuthForm onSubmit={this.handleLogin}>
             {!error ? null : <ErrorMessage>{error}</ErrorMessage>}

packages/netlify-cms-backend-github/src/AuthenticationPage.js

@@ -133,6 +133,7 @@ export default class GitHubAuthenticationPage extends React.Component {
         loginDisabled={inProgress || findingFork || requestingFork}
         loginErrorMessage={loginError}
         logoUrl={config.get('logo_url')}
+        siteUrl={config.get('site_url')}
         {...this.getAuthenticationPageRenderArgs()}
       />
     );

packages/netlify-cms-backend-gitlab/src/AuthenticationPage.js

@@ -70,6 +70,7 @@ export default class GitLabAuthenticationPage extends React.Component {
         loginDisabled={inProgress}
         loginErrorMessage={this.state.loginError}
         logoUrl={config.get('logo_url')}
+        siteUrl={config.get('site_url')}
         renderButtonContent={() => (
           <React.Fragment>
             <LoginButtonIcon type="gitlab" /> {inProgress ? 'Logging in...' : 'Login with GitLab'}

packages/netlify-cms-backend-test/src/AuthenticationPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { Icon, buttons, shadows } from 'netlify-cms-ui-default';
+import { Icon, buttons, shadows, GoBackButton } from 'netlify-cms-ui-default';
 
 const StyledAuthenticationPage = styled.section`
   display: flex;
@@ -57,7 +57,7 @@ export default class AuthenticationPage extends React.Component {
   };
 
   render() {
-    const { inProgress } = this.props;
+    const { config, inProgress } = this.props;
 
     return (
       <StyledAuthenticationPage>
@@ -65,6 +65,7 @@ export default class AuthenticationPage extends React.Component {
         <LoginButton disabled={inProgress} onClick={this.handleLogin}>
           {inProgress ? 'Logging in...' : 'Login'}
         </LoginButton>
+        {config.get('site_url') && <GoBackButton href={config.get('site_url')}></GoBackButton>}
       </StyledAuthenticationPage>
     );
   }

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,
 };