gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ui overhaul (#676)

Browse Source
This commit is contained in:
Daniel Lautzenheiser
2023-03-30 13:29:09 -04:00
committed by GitHub
parent 5c86462859
commit 66b81e9228
385 changed files with 20607 additions and 16493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/core/src/backends/bitbucket/AuthenticationPage.tsx
View File

@ -1,16 +1,11 @@
import { styled } from '@mui/material/styles';
import { Bitbucket as BitbucketIcon } from '@styled-icons/fa-brands/Bitbucket';
import React, { useCallback, useMemo, useState } from 'react';
import AuthenticationPage from '@staticcms/core/components/UI/AuthenticationPage';
import Icon from '@staticcms/core/components/UI/Icon';
import Login from '@staticcms/core/components/login/Login';
import { ImplicitAuthenticator, NetlifyAuthenticator } from '@staticcms/core/lib/auth';
import type { MouseEvent } from 'react';
import type { AuthenticationPageProps, TranslatedProps } from '@staticcms/core/interface';
const LoginButtonIcon = styled(Icon)`
margin-right: 18px;
`;
import type { MouseEvent } from 'react';
const BitbucketAuthenticationPage = ({
inProgress = false,
@ -80,15 +75,12 @@ const BitbucketAuthenticationPage = ({
);
return (
<AuthenticationPage
onLogin={handleLogin}
loginDisabled={inProgress}
loginErrorMessage={loginError}
logoUrl={config.logo_url}
siteUrl={config.site_url}
icon={<LoginButtonIcon type="bitbucket" />}
buttonContent={inProgress ? t('auth.loggingIn') : t('auth.loginWithBitbucket')}
t={t}
<Login
login={handleLogin}
label={t('auth.loginWithBitbucket')}
icon={BitbucketIcon}
inProgress={inProgress}
error={loginError}
/>
);
};

24
packages/core/src/backends/git-gateway/AuthenticationPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import AuthenticationPage from '@staticcms/core/components/UI/AuthenticationPage';
import Login from '@staticcms/core/components/login/Login';
import type { AuthenticationPageProps, TranslatedProps, User } from '@staticcms/core/interface';
@ -22,11 +22,7 @@ export interface GitGatewayAuthenticationPageProps
handleAuth: (email: string, password: string) => Promise<User | string>;
}
const GitGatewayAuthenticationPage = ({
config,
onLogin,
t,
}: GitGatewayAuthenticationPageProps) => {
const GitGatewayAuthenticationPage = ({ onLogin, t }: GitGatewayAuthenticationPageProps) => {
const [loggingIn, setLoggingIn] = useState(false);
const [loggedIn, setLoggedIn] = useState(false);
const [errors, setErrors] = useState<{
@ -97,7 +93,7 @@ const GitGatewayAuthenticationPage = ({
}
}, [onLogin]);
const pageContent = useMemo(() => {
const errorContent = useMemo(() => {
if (!window.netlifyIdentity) {
return t('auth.errors.netlifyIdentityNotFound');
}
@ -118,15 +114,11 @@ const GitGatewayAuthenticationPage = ({
}, [errors.identity, t]);
return (
<AuthenticationPage
key="git-gateway-auth"
logoUrl={config.logo_url}
siteUrl={config.site_url}
onLogin={handleIdentity}
buttonContent={t('auth.loginWithNetlifyIdentity')}
pageContent={pageContent}
loginDisabled={loggingIn}
t={t}
<Login
login={handleIdentity}
label={t('auth.loginWithNetlifyIdentity')}
inProgress={loggingIn}
error={errorContent}
/>
);
};

26
packages/core/src/backends/gitea/AuthenticationPage.tsx
View File

@ -1,16 +1,11 @@
import { styled } from '@mui/material/styles';
import { Gitea as GiteaIcon } from '@styled-icons/simple-icons/Gitea';
import React, { useCallback, useState } from 'react';
import AuthenticationPage from '@staticcms/core/components/UI/AuthenticationPage';
import Icon from '@staticcms/core/components/UI/Icon';
import Login from '@staticcms/core/components/login/Login';
import { NetlifyAuthenticator } from '@staticcms/core/lib/auth';
import type { MouseEvent } from 'react';
import type { AuthenticationPageProps, TranslatedProps } from '@staticcms/core/interface';
const LoginButtonIcon = styled(Icon)`
margin-right: 18px;
`;
import type { MouseEvent } from 'react';
const GiteaAuthenticationPage = ({
inProgress = false,
@ -48,15 +43,12 @@ const GiteaAuthenticationPage = ({
);
return (
<AuthenticationPage
onLogin={handleLogin}
loginDisabled={inProgress}
loginErrorMessage={loginError}
logoUrl={config.logo_url}
siteUrl={config.site_url}
icon={<LoginButtonIcon type="gitea" />}
buttonContent={t('auth.loginWithGitea')}
t={t}
<Login
login={handleLogin}
label={t('auth.loginWithGitea')}
icon={GiteaIcon}
inProgress={inProgress}
error={loginError}
/>
);
};

26
packages/core/src/backends/github/AuthenticationPage.tsx
View File

@ -1,16 +1,11 @@
import { styled } from '@mui/material/styles';
import { Github as GithubIcon } from '@styled-icons/simple-icons/Github';
import React, { useCallback, useState } from 'react';
import AuthenticationPage from '@staticcms/core/components/UI/AuthenticationPage';
import Icon from '@staticcms/core/components/UI/Icon';
import Login from '@staticcms/core/components/login/Login';
import { NetlifyAuthenticator } from '@staticcms/core/lib/auth';
import type { MouseEvent } from 'react';
import type { AuthenticationPageProps, TranslatedProps } from '@staticcms/core/interface';
const LoginButtonIcon = styled(Icon)`
margin-right: 18px;
`;
import type { MouseEvent } from 'react';
const GitHubAuthenticationPage = ({
inProgress = false,
@ -48,15 +43,12 @@ const GitHubAuthenticationPage = ({
);
return (
<AuthenticationPage
onLogin={handleLogin}
loginDisabled={inProgress}
loginErrorMessage={loginError}
logoUrl={config.logo_url}
siteUrl={config.site_url}
icon={<LoginButtonIcon type="github" />}
buttonContent={t('auth.loginWithGitHub')}
t={t}
<Login
login={handleLogin}
label={t('auth.loginWithGitHub')}
icon={GithubIcon}
inProgress={inProgress}
error={loginError}
/>
);
};

26
packages/core/src/backends/gitlab/AuthenticationPage.tsx
View File

@ -1,21 +1,16 @@
import { styled } from '@mui/material/styles';
import { Gitlab as GitlabIcon } from '@styled-icons/simple-icons/Gitlab';
import React, { useCallback, useMemo, useState } from 'react';
import AuthenticationPage from '@staticcms/core/components/UI/AuthenticationPage';
import Icon from '@staticcms/core/components/UI/Icon';
import Login from '@staticcms/core/components/login/Login';
import { NetlifyAuthenticator, PkceAuthenticator } from '@staticcms/core/lib/auth';
import { isNotEmpty } from '@staticcms/core/lib/util/string.util';
import type { MouseEvent } from 'react';
import type {
AuthenticationPageProps,
AuthenticatorConfig,
TranslatedProps,
} from '@staticcms/core/interface';
const LoginButtonIcon = styled(Icon)`
margin-right: 18px;
`;
import type { MouseEvent } from 'react';
const clientSideAuthenticators = {
pkce: (config: AuthenticatorConfig) => new PkceAuthenticator(config),
@ -83,15 +78,12 @@ const GitLabAuthenticationPage = ({
);
return (
<AuthenticationPage
onLogin={handleLogin}
loginDisabled={inProgress}
loginErrorMessage={loginError}
logoUrl={config.logo_url}
siteUrl={config.site_url}
icon={<LoginButtonIcon type="gitlab" />}
buttonContent={inProgress ? t('auth.loggingIn') : t('auth.loginWithGitLab')}
t={t}
<Login
login={handleLogin}
label={t('auth.loginWithGitLab')}
icon={GitlabIcon}
inProgress={inProgress}
error={loginError}
/>
);
};

0
packages/core/src/backends/index.tsx → packages/core/src/backends/index.ts
View File

31
packages/core/src/backends/proxy/AuthenticationPage.tsx
View File

@ -1,30 +1,13 @@
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import React, { useCallback } from 'react';
import GoBackButton from '@staticcms/core/components/UI/GoBackButton';
import Icon from '@staticcms/core/components/UI/Icon';
import Login from '@staticcms/core/components/login/Login';
import type { MouseEvent } from 'react';
import type { AuthenticationPageProps, TranslatedProps } from '@staticcms/core/interface';
const StyledAuthenticationPage = styled('section')`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
`;
const PageLogoIcon = styled(Icon)`
color: #c4c6d2;
`;
import type { MouseEvent } from 'react';
const AuthenticationPage = ({
inProgress = false,
config,
onLogin,
t,
}: TranslatedProps<AuthenticationPageProps>) => {
const handleLogin = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
@ -34,15 +17,7 @@ const AuthenticationPage = ({
[onLogin],
);
return (
<StyledAuthenticationPage>
<PageLogoIcon width={300} height={150} type="static-cms" />
<Button variant="contained" disabled={inProgress} onClick={handleLogin}>
{inProgress ? t('auth.loggingIn') : t('auth.login')}
</Button>
{config.site_url && <GoBackButton href={config.site_url} t={t}></GoBackButton>}
</StyledAuthenticationPage>
);
return <Login login={handleLogin} inProgress={inProgress} />;
};
export default AuthenticationPage;

35
packages/core/src/backends/test/AuthenticationPage.tsx
View File

@ -1,30 +1,14 @@
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import React, { useCallback, useEffect } from 'react';
import GoBackButton from '@staticcms/core/components/UI/GoBackButton';
import Icon from '@staticcms/core/components/UI/Icon';
import Login from '@staticcms/core/components/login/Login';
import type { MouseEvent } from 'react';
import type { AuthenticationPageProps, TranslatedProps } from '@staticcms/core/interface';
const StyledAuthenticationPage = styled('section')`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
`;
const PageLogoIcon = styled(Icon)`
color: #c4c6d2;
`;
import type { MouseEvent } from 'react';
const AuthenticationPage = ({
inProgress = false,
config,
onLogin,
t,
}: TranslatedProps<AuthenticationPageProps>) => {
useEffect(() => {
/**
@ -44,20 +28,7 @@ const AuthenticationPage = ({
[onLogin],
);
return (
<StyledAuthenticationPage>
<PageLogoIcon width={300} height={150} type="static-cms" />
<Button
disabled={inProgress}
onClick={handleLogin}
variant="contained"
sx={{ marginBottom: '32px' }}
>
{inProgress ? t('auth.loggingIn') : t('auth.login')}
</Button>
{config.site_url && <GoBackButton href={config.site_url} t={t}></GoBackButton>}
</StyledAuthenticationPage>
);
return <Login login={handleLogin} inProgress={inProgress} />;
};
export default AuthenticationPage;

35
packages/core/src/backends/test/implementation.ts
View File

@ -5,16 +5,17 @@ import unset from 'lodash/unset';
import { extname } from 'path';
import { v4 as uuid } from 'uuid';
import { basename, Cursor, CURSOR_COMPATIBILITY_SYMBOL } from '@staticcms/core/lib/util';
import { Cursor, CURSOR_COMPATIBILITY_SYMBOL } from '@staticcms/core/lib/util';
import AuthenticationPage from './AuthenticationPage';
import type {
BackendEntry,
BackendClass,
BackendEntry,
Config,
DisplayURL,
ImplementationEntry,
ImplementationFile,
ImplementationMediaFile,
User,
} from '@staticcms/core/interface';
import type AssetProxy from '@staticcms/core/valueObjects/AssetProxy';
@ -215,37 +216,35 @@ export default class TestBackend implements BackendClass {
return Promise.resolve();
}
async getMedia(mediaFolder = this.mediaFolder) {
async getMedia(mediaFolder = this.mediaFolder): Promise<ImplementationMediaFile[]> {
if (!mediaFolder) {
return [];
}
const files = getFolderFiles(window.repoFiles, mediaFolder.split('/')[0], '', 100).filter(f =>
f.path.startsWith(mediaFolder),
);
return files.map(f => this.normalizeAsset(f.content as AssetProxy));
return files.map(f => ({
name: f.path,
id: f.path,
path: f.path,
displayURL: f.path,
}));
}
async getMediaFile(path: string) {
const asset = getFile(path, window.repoFiles).content as AssetProxy;
const url = asset?.toString() ?? '';
const name = basename(path);
const blob = await fetch(url).then(res => res.blob());
const fileObj = new File([blob], name);
return {
id: url,
displayURL: url,
id: path,
displayURL: path,
path,
name,
size: fileObj.size,
file: fileObj,
url,
name: path,
size: 1,
url: path,
};
}
normalizeAsset(assetProxy: AssetProxy) {
normalizeAsset(assetProxy: AssetProxy): ImplementationMediaFile {
const fileObj = assetProxy.fileObj as File;
const { name, size } = fileObj;
const objectUrl = attempt(window.URL.createObjectURL, fileObj);
const url = isError(objectUrl) ? '' : objectUrl;