feat: add go back to site button (#2538)
This commit is contained in:
parent
ab5860f58e
commit
f206e7e5a1
@ -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" />
|
||||
|
@ -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>}
|
||||
|
@ -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()}
|
||||
/>
|
||||
);
|
||||
|
@ -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'}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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,
|
||||
|
31
packages/netlify-cms-ui-default/src/GoBackButton.js
Normal file
31
packages/netlify-cms-ui-default/src/GoBackButton.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
@ -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,
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user