RC-2: update signin and signup pages according to the design
This commit is contained in:
@@ -1,32 +1,18 @@
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import _ from '@lodash';
|
||||
import Button from '@mui/material/Button';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import * as yup from 'yup';
|
||||
import _ from '@lodash';
|
||||
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import { useEffect } from 'react';
|
||||
import jwtService from '../../../auth/services/jwtService';
|
||||
|
||||
/**
|
||||
* Form Validation Schema
|
||||
*/
|
||||
const schema = yup.object().shape({
|
||||
email: yup.string().email('You must enter a valid email').required('You must enter a email'),
|
||||
password: yup
|
||||
.string()
|
||||
.required('Please enter your password.')
|
||||
.min(4, 'Password is too short - must be at least 4 chars.'),
|
||||
});
|
||||
import AdditionalSignWays from '../shared-components/AdditionalSignWays';
|
||||
import LeftSideCanvas from '../shared-components/LeftSideCanvas';
|
||||
|
||||
const defaultValues = {
|
||||
email: '',
|
||||
@@ -34,8 +20,13 @@ const defaultValues = {
|
||||
remember: true,
|
||||
};
|
||||
|
||||
function SignInPage() {
|
||||
const { control, formState, handleSubmit, setError, setValue } = useForm({
|
||||
function SignInPage({ t }) {
|
||||
const schema = yup.object().shape({
|
||||
email: yup.string().email(t('email_error')).required(t('email_error')),
|
||||
password: yup.string().required(t('password_error')).min(8, t('password_error')),
|
||||
});
|
||||
|
||||
const { control, formState, handleSubmit, reset } = useForm({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
resolver: yupResolver(schema),
|
||||
@@ -43,47 +34,33 @@ function SignInPage() {
|
||||
|
||||
const { isValid, dirtyFields, errors } = formState;
|
||||
|
||||
useEffect(() => {
|
||||
setValue('email', 'admin@fusetheme.com', { shouldDirty: true, shouldValidate: true });
|
||||
setValue('password', 'admin', { shouldDirty: true, shouldValidate: true });
|
||||
}, [setValue]);
|
||||
|
||||
function onSubmit({ email, password }) {
|
||||
jwtService
|
||||
.signInWithEmailAndPassword(email, password)
|
||||
.then((user) => {
|
||||
// No need to do anything, user data will be set at app/auth/AuthContext
|
||||
})
|
||||
.catch((_errors) => {
|
||||
_errors.forEach((error) => {
|
||||
setError(error.type, {
|
||||
type: 'manual',
|
||||
message: error.message,
|
||||
});
|
||||
});
|
||||
});
|
||||
function onSubmit() {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-1 min-w-0">
|
||||
<Paper className="h-full sm:h-auto md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-16 sm:p-48 md:p-64 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none ltr:border-r-1 rtl:border-l-1">
|
||||
<div className="w-full max-w-320 sm:w-320 mx-auto sm:mx-0">
|
||||
<img className="w-48" src="assets/images/logo/logo.svg" alt="logo" />
|
||||
<div className="h-full flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0">
|
||||
<LeftSideCanvas title={t('title')} subtitle={t('subtitle')} text={t('text')} />
|
||||
|
||||
<Typography className="mt-32 text-4xl font-extrabold tracking-tight leading-tight">
|
||||
<Paper
|
||||
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
||||
sx={{ background: (theme) => theme.palette.background?.authPaper }}
|
||||
>
|
||||
<div className="w-full mx-auto sm:mx-0">
|
||||
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
||||
Sign in
|
||||
</Typography>
|
||||
<div className="flex items-baseline mt-2 font-medium">
|
||||
<Typography>Don't have an account?</Typography>
|
||||
<Link className="ml-4" to="/sign-up">
|
||||
Sign up
|
||||
<div className="flex items-baseline mt-10 font-medium">
|
||||
<Typography>{t('have_account')}</Typography>
|
||||
<Link className="ml-4 text-indigo-400 underline" to="/sign-up">
|
||||
{t('sign_up')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<form
|
||||
name="loginForm"
|
||||
name="signinForm"
|
||||
noValidate
|
||||
className="flex flex-col justify-center w-full mt-32"
|
||||
className="flex flex-col justify-center w-full mt-48"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<Controller
|
||||
@@ -92,8 +69,8 @@ function SignInPage() {
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="mb-24"
|
||||
label="Email"
|
||||
className="mb-28"
|
||||
label={t('email')}
|
||||
autoFocus
|
||||
type="email"
|
||||
error={!!errors.email}
|
||||
@@ -101,6 +78,11 @@ function SignInPage() {
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -111,14 +93,19 @@ function SignInPage() {
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="mb-24"
|
||||
label="Password"
|
||||
className="mb-28"
|
||||
label={t('password')}
|
||||
type="password"
|
||||
error={!!errors.password}
|
||||
helperText={errors?.password?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -130,138 +117,43 @@ function SignInPage() {
|
||||
render={({ field }) => (
|
||||
<FormControl>
|
||||
<FormControlLabel
|
||||
label="Remember me"
|
||||
control={<Checkbox size="small" {...field} />}
|
||||
label={t('remember')}
|
||||
control={
|
||||
<Checkbox
|
||||
{...field}
|
||||
sx={{ color: (theme) => theme.palette.border.light }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Link className="text-md font-medium" to="/pages/auth/forgot-password">
|
||||
Forgot password?
|
||||
<Link className="text-indigo-400 underline font-medium" to="/forgot-password">
|
||||
{t('forgot_password')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className=" w-full mt-16"
|
||||
aria-label="Sign in"
|
||||
disabled={_.isEmpty(dirtyFields) || !isValid}
|
||||
type="submit"
|
||||
size="large"
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center mt-32">
|
||||
<div className="flex-auto mt-px border-t" />
|
||||
<Typography className="mx-8" color="text.secondary">
|
||||
Or continue with
|
||||
</Typography>
|
||||
<div className="flex-auto mt-px border-t" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-32 space-x-16">
|
||||
<Button variant="outlined" className="flex-auto">
|
||||
<FuseSvgIcon size={20} color="action">
|
||||
feather:facebook
|
||||
</FuseSvgIcon>
|
||||
</Button>
|
||||
<Button variant="outlined" className="flex-auto">
|
||||
<FuseSvgIcon size={20} color="action">
|
||||
feather:twitter
|
||||
</FuseSvgIcon>
|
||||
</Button>
|
||||
<Button variant="outlined" className="flex-auto">
|
||||
<FuseSvgIcon size={20} color="action">
|
||||
feather:github
|
||||
</FuseSvgIcon>
|
||||
<div className="flex justify-center w-full">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="w-[220px] mt-32 text-base uppercase rounded-xl"
|
||||
aria-label="Sign in"
|
||||
disabled={_.isEmpty(dirtyFields) || !isValid}
|
||||
type="submit"
|
||||
size="large"
|
||||
>
|
||||
{t('sign_in_btn')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<AdditionalSignWays divider text={t('additional_ways')} />
|
||||
</form>
|
||||
</div>
|
||||
</Paper>
|
||||
|
||||
<Box
|
||||
className="relative hidden md:flex flex-auto items-center justify-center h-full p-64 lg:px-112 overflow-hidden"
|
||||
sx={{ backgroundColor: 'primary.main' }}
|
||||
>
|
||||
<svg
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<Box
|
||||
component="g"
|
||||
sx={{ color: 'primary.light' }}
|
||||
className="opacity-20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23" />
|
||||
<circle r="234" cx="790" cy="491" />
|
||||
</Box>
|
||||
</svg>
|
||||
<Box
|
||||
component="svg"
|
||||
className="absolute -top-64 -right-64 opacity-20"
|
||||
sx={{ color: 'primary.light' }}
|
||||
viewBox="0 0 220 192"
|
||||
width="220px"
|
||||
height="192px"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
|
||||
</Box>
|
||||
|
||||
<div className="z-10 relative w-full max-w-2xl">
|
||||
<div className="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full of beautiful and
|
||||
rich modules. Join us and start building your application today.
|
||||
</div>
|
||||
<div className="flex items-center mt-32">
|
||||
<AvatarGroup
|
||||
sx={{
|
||||
'& .MuiAvatar-root': {
|
||||
borderColor: 'primary.main',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Avatar src="assets/images/avatars/female-18.jpg" />
|
||||
<Avatar src="assets/images/avatars/female-11.jpg" />
|
||||
<Avatar src="assets/images/avatars/male-09.jpg" />
|
||||
<Avatar src="assets/images/avatars/male-16.jpg" />
|
||||
</AvatarGroup>
|
||||
|
||||
<div className="ml-16 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignInPage;
|
||||
export default withTranslation('signInPage')(SignInPage);
|
||||
|
||||
@@ -1,109 +1,94 @@
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import _ from '@lodash';
|
||||
import Button from '@mui/material/Button';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import * as yup from 'yup';
|
||||
import _ from '@lodash';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import jwtService from '../../../auth/services/jwtService';
|
||||
|
||||
/**
|
||||
* Form Validation Schema
|
||||
*/
|
||||
const schema = yup.object().shape({
|
||||
displayName: yup.string().required('You must enter display name'),
|
||||
email: yup.string().email('You must enter a valid email').required('You must enter a email'),
|
||||
password: yup
|
||||
.string()
|
||||
.required('Please enter your password.')
|
||||
.min(8, 'Password is too short - should be 8 chars minimum.'),
|
||||
passwordConfirm: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match'),
|
||||
acceptTermsConditions: yup.boolean().oneOf([true], 'The terms and conditions must be accepted.'),
|
||||
});
|
||||
import AdditionalSignWays from '../shared-components/AdditionalSignWays';
|
||||
import LeftSideCanvas from '../shared-components/LeftSideCanvas';
|
||||
|
||||
const defaultValues = {
|
||||
displayName: '',
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
passwordConfirm: '',
|
||||
acceptTermsConditions: false,
|
||||
};
|
||||
|
||||
function SignUpPage() {
|
||||
function SignUpPage({ t }) {
|
||||
const schema = yup.object().shape({
|
||||
name: yup.string().required(t('name_error')),
|
||||
email: yup.string().email(t('email_error')).required(t('email_error')),
|
||||
password: yup.string().required(t('password_error')).min(8, t('password_error')),
|
||||
passwordConfirm: yup.string().oneOf([yup.ref('password'), null], t('password_confirm_error')),
|
||||
acceptTermsConditions: yup.boolean().oneOf([true], t('accept_terms_error')),
|
||||
});
|
||||
|
||||
const { control, formState, handleSubmit, reset } = useForm({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
resolver: yupResolver(schema),
|
||||
});
|
||||
|
||||
const { isValid, dirtyFields, errors, setError } = formState;
|
||||
const { isValid, dirtyFields, errors } = formState;
|
||||
|
||||
function onSubmit({ displayName, password, email }) {
|
||||
jwtService
|
||||
.createUser({
|
||||
displayName,
|
||||
password,
|
||||
email,
|
||||
})
|
||||
.then((user) => {
|
||||
// No need to do anything, registered user data will be set at app/auth/AuthContext
|
||||
})
|
||||
.catch((_errors) => {
|
||||
_errors.forEach((error) => {
|
||||
setError(error.type, {
|
||||
type: 'manual',
|
||||
message: error.message,
|
||||
});
|
||||
});
|
||||
});
|
||||
function onSubmit() {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-1 min-w-0">
|
||||
<Paper className="h-full sm:h-auto md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-16 sm:p-48 md:p-64 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none ltr:border-r-1 rtl:border-l-1">
|
||||
<div className="w-full max-w-320 sm:w-320 mx-auto sm:mx-0">
|
||||
<img className="w-48" src="assets/images/logo/logo.svg" alt="logo" />
|
||||
<div className="h-full flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0">
|
||||
<LeftSideCanvas title={t('title')} subtitle={t('subtitle')} text={t('text')} />
|
||||
|
||||
<Typography className="mt-32 text-4xl font-extrabold tracking-tight leading-tight">
|
||||
Sign up
|
||||
<Paper
|
||||
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
|
||||
sx={{ background: (theme) => theme.palette.background?.authPaper }}
|
||||
>
|
||||
<div className="w-full mx-auto sm:mx-0">
|
||||
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
|
||||
{t('sign_up')}
|
||||
</Typography>
|
||||
<div className="flex items-baseline mt-2 font-medium">
|
||||
<Typography>Already have an account?</Typography>
|
||||
<Link className="ml-4" to="/sign-in">
|
||||
Sign in
|
||||
<div className="flex items-baseline mt-10 font-medium">
|
||||
<Typography>{t('have_account')}</Typography>
|
||||
<Link className="ml-4 text-indigo-400 underline" to="/sign-in">
|
||||
{t('sign_in')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<form
|
||||
name="registerForm"
|
||||
name="signupForm"
|
||||
noValidate
|
||||
className="flex flex-col justify-center w-full mt-32"
|
||||
className="flex flex-col justify-center w-full mt-48"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<Controller
|
||||
name="displayName"
|
||||
name="name"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="mb-24"
|
||||
label="Display name"
|
||||
className="mb-28"
|
||||
label={t('name')}
|
||||
autoFocus
|
||||
type="name"
|
||||
error={!!errors.displayName}
|
||||
helperText={errors?.displayName?.message}
|
||||
error={!!errors.name}
|
||||
helperText={errors?.name?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -114,14 +99,19 @@ function SignUpPage() {
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="mb-24"
|
||||
label="Email"
|
||||
className="mb-28"
|
||||
label={t('email')}
|
||||
type="email"
|
||||
error={!!errors.email}
|
||||
helperText={errors?.email?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -132,14 +122,19 @@ function SignUpPage() {
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="mb-24"
|
||||
label="Password"
|
||||
className="mb-28"
|
||||
label={t('password')}
|
||||
type="password"
|
||||
error={!!errors.password}
|
||||
helperText={errors?.password?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -150,14 +145,19 @@ function SignUpPage() {
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
className="mb-24"
|
||||
label="Password (Confirm)"
|
||||
className="mb-28"
|
||||
label={t('password_confirm')}
|
||||
type="password"
|
||||
error={!!errors.passwordConfirm}
|
||||
helperText={errors?.passwordConfirm?.message}
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
InputProps={{
|
||||
sx: {
|
||||
background: (theme) => theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@@ -166,110 +166,38 @@ function SignUpPage() {
|
||||
name="acceptTermsConditions"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControl className="items-center" error={!!errors.acceptTermsConditions}>
|
||||
<FormControl className="items-start" error={!!errors.acceptTermsConditions}>
|
||||
<FormControlLabel
|
||||
label="I agree to the Terms of Service and Privacy Policy"
|
||||
control={<Checkbox size="small" {...field} />}
|
||||
label={t('accept_terms')}
|
||||
control={
|
||||
<Checkbox {...field} sx={{ color: (theme) => theme.palette.border.light }} />
|
||||
}
|
||||
/>
|
||||
<FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="w-full mt-24"
|
||||
aria-label="Register"
|
||||
disabled={_.isEmpty(dirtyFields) || !isValid}
|
||||
type="submit"
|
||||
size="large"
|
||||
>
|
||||
Create your free account
|
||||
</Button>
|
||||
<div className="flex justify-center w-full">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className="max-w-320 mt-32 text-base uppercase rounded-xl"
|
||||
aria-label={t('sign_up_btn')}
|
||||
disabled={_.isEmpty(dirtyFields) || !isValid}
|
||||
type="submit"
|
||||
size="large"
|
||||
>
|
||||
{t('sign_up_btn')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<AdditionalSignWays divider text={t('additional_ways')} />
|
||||
</form>
|
||||
</div>
|
||||
</Paper>
|
||||
|
||||
<Box
|
||||
className="relative hidden md:flex flex-auto items-center justify-center h-full p-64 lg:px-112 overflow-hidden"
|
||||
sx={{ backgroundColor: 'primary.main' }}
|
||||
>
|
||||
<svg
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
viewBox="0 0 960 540"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMax slice"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<Box
|
||||
component="g"
|
||||
sx={{ color: 'primary.light' }}
|
||||
className="opacity-20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="100"
|
||||
>
|
||||
<circle r="234" cx="196" cy="23" />
|
||||
<circle r="234" cx="790" cy="491" />
|
||||
</Box>
|
||||
</svg>
|
||||
<Box
|
||||
component="svg"
|
||||
className="absolute -top-64 -right-64 opacity-20"
|
||||
sx={{ color: 'primary.light' }}
|
||||
viewBox="0 0 220 192"
|
||||
width="220px"
|
||||
height="192px"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
|
||||
</Box>
|
||||
|
||||
<div className="z-10 relative w-full max-w-2xl">
|
||||
<div className="text-7xl font-bold leading-none text-gray-100">
|
||||
<div>Welcome to</div>
|
||||
<div>our community</div>
|
||||
</div>
|
||||
<div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">
|
||||
Fuse helps developers to build organized and well coded dashboards full of beautiful and
|
||||
rich modules. Join us and start building your application today.
|
||||
</div>
|
||||
<div className="flex items-center mt-32">
|
||||
<AvatarGroup
|
||||
sx={{
|
||||
'& .MuiAvatar-root': {
|
||||
borderColor: 'primary.main',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Avatar src="assets/images/avatars/female-18.jpg" />
|
||||
<Avatar src="assets/images/avatars/female-11.jpg" />
|
||||
<Avatar src="assets/images/avatars/male-09.jpg" />
|
||||
<Avatar src="assets/images/avatars/male-16.jpg" />
|
||||
</AvatarGroup>
|
||||
|
||||
<div className="ml-16 font-medium tracking-tight text-gray-400">
|
||||
More than 17k people joined us, it's your turn
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignUpPage;
|
||||
export default withTranslation('signUpPage')(SignUpPage);
|
||||
|
||||
Reference in New Issue
Block a user