Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Joy] Add sign-in side template #36019

Merged
merged 11 commits into from
Feb 3, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix from code review
  • Loading branch information
siriwatknp committed Feb 1, 2023
commit 0b9fe92ff6ffada213e0e66dd76202a8ebe5b535
86 changes: 20 additions & 66 deletions docs/data/joy/getting-started/templates/sign-in-side/App.tsx
Original file line number Diff line number Diff line change
@@ -6,14 +6,15 @@ import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Checkbox from '@mui/joy/Checkbox';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import FormLabel, { formLabelClasses } from '@mui/joy/FormLabel';
import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
import Link from '@mui/joy/Link';
import Input from '@mui/joy/Input';
import Typography from '@mui/joy/Typography';
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
import customTheme from './theme';
import GoogleIcon from './GoogleIcon';

interface FormElements extends HTMLFormControlsCollection {
email: HTMLInputElement;
@@ -31,7 +32,7 @@ function ColorSchemeToggle({ onClick, ...props }: IconButtonProps) {
setMounted(true);
}, []);
if (!mounted) {
return <IconButton size="sm" variant="outlined" color="primary" />;
return <IconButton size="sm" variant="plain" color="neutral" disabled />;
}
return (
<IconButton
@@ -151,6 +152,9 @@ export default function JoySignInSideTemplate() {
flexDirection: 'column',
gap: 2,
},
[`& .${formLabelClasses.asterisk}`]: {
visibility: 'hidden',
},
}}
>
<div>
@@ -174,15 +178,11 @@ export default function JoySignInSideTemplate() {
}}
>
<FormControl required>
<FormLabel slotProps={{ asterisk: { sx: { display: 'none' } } }}>
Email
</FormLabel>
<FormLabel>Email</FormLabel>
<Input placeholder="Enter your email" type="email" name="email" />
</FormControl>
<FormControl required>
<FormLabel slotProps={{ asterisk: { sx: { display: 'none' } } }}>
Password
</FormLabel>
<FormLabel>Password</FormLabel>
<Input placeholder="•••••••" type="password" name="password" />
</FormControl>
<Box
@@ -197,41 +197,15 @@ export default function JoySignInSideTemplate() {
Forgot password
</Link>
</Box>
<Button type="submit" sx={{ width: '100%' }}>
<Button type="submit" fullWidth>
Sign in
</Button>
</form>
<Button
variant="outlined"
color="neutral"
sx={{ width: '100%' }}
startDecorator={
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
<path
fill="#4285F4"
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
/>
<path
fill="#34A853"
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
/>
<path
fill="#FBBC05"
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
/>
<path
fill="#EA4335"
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
/>
</g>
</svg>
}
fullWidth
startDecorator={<GoogleIcon />}
>
Sign in with Google
</Button>
@@ -254,37 +228,17 @@ export default function JoySignInSideTemplate() {
transition: '0.4s',
transitionDelay: '0.1s',
backgroundColor: 'background.level1',
'& img': {
width: '100%',
height: '100%',
objectFit: 'cover',
'&:last-of-type': {
display: 'none',
},
[theme.getColorSchemeSelector('dark')]: {
'&:first-of-type': {
display: 'none',
},
'&:last-of-type': {
display: 'initial',
},
// In practice, remove the `&:first-of-type`, `&:last-of-type` and use `content` instead.
// content: 'url(https://images.unsplash.com/photo-1572072393749-3ca9c8ea0831)',
},
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundImage:
'url(https://images.unsplash.com/photo-1527181152855-fc03fc7949c8)',
[theme.getColorSchemeSelector('dark')]: {
backgroundImage:
'url(https://images.unsplash.com/photo-1572072393749-3ca9c8ea0831)',
},
})}
>
{/* Note: We need to add two images to take screenshots between modes */}
{/* Using a single image with `content` CSS property to switch images between modes is simpler */}
<img
src="https://images.unsplash.com/photo-1527181152855-fc03fc7949c8"
alt=""
/>
<img
src="https://images.unsplash.com/photo-1572072393749-3ca9c8ea0831"
alt=""
/>
</Box>
/>
</CssVarsProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';
import SvgIcon from '@mui/joy/SvgIcon';

export default function GoogleIcon() {
return (
<SvgIcon fontSize="xl">
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
<path
fill="#4285F4"
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
/>
<path
fill="#34A853"
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
/>
<path
fill="#FBBC05"
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
/>
<path
fill="#EA4335"
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
/>
</g>
</SvgIcon>
);
}
2 changes: 2 additions & 0 deletions docs/pages/_document.js
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import createEmotionCache from 'docs/src/createEmotionCache';
import { getMetaThemeColor } from 'docs/src/modules/brandingTheme';
import GlobalStyles from '@mui/material/GlobalStyles';
import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles';
import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles';

// You can find a benchmark of the available CSS minifiers under
// https://github.com/GoalSmashers/css-minification-benchmark
@@ -146,6 +147,7 @@ export default class MyDocument extends Document {
</Head>
<body>
{getMuiInitColorSchemeScript({ defaultMode: 'system' })}
{getJoyInitColorSchemeScript({ defaultMode: 'system' })}
<Main />
<script
// eslint-disable-next-line react/no-danger
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/scripts/generateTemplateScreenshots.ts
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ const directory = 'docs/public/static/screenshots';
const toggle = await page.$('#toggle-mode');
if (toggle) {
await page.click('#toggle-mode');
await page.waitForLoadState('networkidle');
await page.reload({ waitUntil: 'networkidle' });
await page.screenshot({ path: filePath.replace('.jpg', '-dark.jpg') });

await page.click('#toggle-mode'); // switch back to light