primeros avances login
This commit is contained in:
Lizeth Lopez
parent
fbb8138a91
commit
801229c4ab
|
|
@ -0,0 +1,74 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="274.000000pt" height="327.000000pt" viewBox="0 0 274.000000 327.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.16, written by Peter Selinger 2001-2019
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,327.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M1153 3226 c-219 -42 -403 -142 -552 -302 -431 -460 -324 -1213 219
|
||||
-1534 77 -46 174 -84 277 -111 123 -32 329 -32 456 -1 103 26 214 70 283 113
|
||||
30 19 52 28 59 23 74 -57 111 -74 164 -74 130 0 212 103 187 235 -5 22 -23 54
|
||||
-47 80 l-39 42 44 84 c85 161 123 335 113 518 -23 438 -319 800 -746 913 -99
|
||||
26 -316 33 -418 14z m-171 -396 c524 -104 821 -211 951 -342 31 -32 57 -62 57
|
||||
-66 0 -4 -67 -107 -148 -229 l-148 -222 -199 188 -200 188 -69 209 c-37 115
|
||||
-73 214 -78 219 -7 7 -8 3 -5 -10 5 -18 37 -149 72 -299 l14 -59 -62 59 c-61
|
||||
60 -418 395 -426 401 -14 10 63 -2 241 -37z m-47 -240 c125 -132 222 -240 217
|
||||
-240 -5 0 -85 18 -177 41 -92 22 -169 38 -171 36 -3 -2 92 -38 211 -78 l216
|
||||
-74 178 -190 c98 -104 180 -194 181 -200 2 -5 -95 -76 -215 -157 l-218 -147
|
||||
-28 20 c-77 54 -146 163 -210 328 -61 159 -152 513 -194 761 -9 52 -19 105
|
||||
-22 118 -3 12 -3 22 0 22 3 0 107 -108 232 -240z m1103 -257 c36 -79 48 -125
|
||||
58 -209 12 -113 -29 -272 -95 -372 l-29 -44 -113 108 c-63 59 -114 109 -113
|
||||
111 4 16 250 472 255 473 3 0 20 -30 37 -67z m-194 -744 c-22 -24 -130 -76
|
||||
-199 -94 -76 -21 -222 -21 -298 -1 -31 9 -85 30 -119 47 l-61 31 104 56 c57
|
||||
30 165 88 239 129 l135 73 107 -112 c98 -102 106 -114 92 -129z"/>
|
||||
<path d="M24 1137 c-2 -7 -3 -87 -2 -177 l3 -165 227 -3 228 -2 0 -70 0 -70
|
||||
-229 0 c-256 0 -241 5 -241 -75 0 -77 -8 -75 329 -75 222 0 301 3 314 13 16
|
||||
11 17 33 15 212 l-3 200 -232 3 -233 2 0 40 0 40 115 0 115 0 0 70 0 70 -200
|
||||
0 c-155 0 -202 -3 -206 -13z"/>
|
||||
<path d="M707 1143 c-4 -3 -7 -144 -7 -313 0 -225 3 -309 12 -318 9 -9 90 -12
|
||||
303 -12 159 0 300 3 313 6 l22 6 0 319 0 319 -318 0 c-175 0 -322 -3 -325 -7z
|
||||
m463 -313 l0 -180 -145 0 -145 0 0 180 0 180 145 0 145 0 0 -180z"/>
|
||||
<path d="M1390 960 l0 -190 75 0 75 0 0 -124 c0 -94 3 -126 14 -135 9 -7 41
|
||||
-11 83 -9 l68 3 3 128 3 127 59 0 60 0 0 70 0 70 -130 0 -130 0 0 55 0 55 230
|
||||
0 230 0 0 70 0 70 -320 0 -320 0 0 -190z"/>
|
||||
<path d="M2070 1080 l0 -70 115 0 115 0 0 -250 0 -250 24 -6 c14 -3 52 -4 85
|
||||
-2 52 2 60 1 54 -12 -3 -8 -8 -34 -11 -57 -10 -101 88 -165 179 -117 35 18 73
|
||||
90 90 172 15 76 10 84 -53 77 -29 -3 -60 -8 -68 -10 -8 -2 -31 -7 -50 -10 -19
|
||||
-3 -39 -10 -44 -16 -6 -5 -14 -9 -18 -9 -4 0 -8 110 -8 245 l0 245 115 0 115
|
||||
0 0 70 0 70 -320 0 -320 0 0 -70z"/>
|
||||
<path d="M32 373 c2 -23 8 -29 36 -31 l32 -3 0 -130 0 -129 30 0 30 0 0 130 0
|
||||
130 35 0 c32 0 35 2 35 30 l0 30 -101 0 -100 0 3 -27z"/>
|
||||
<path d="M652 243 l3 -158 27 -3 27 -3 3 93 3 93 43 3 42 3 0 -95 c0 -96 0
|
||||
-96 25 -96 l25 0 0 101 c0 131 -4 139 -80 139 l-60 0 0 40 c0 38 -2 40 -30 40
|
||||
l-31 0 3 -157z"/>
|
||||
<path d="M1393 393 c-23 -4 -23 -7 -23 -159 l0 -154 25 0 25 0 0 160 c0 88 -1
|
||||
159 -2 159 -2 -1 -13 -4 -25 -6z"/>
|
||||
<path d="M270 313 c-26 -10 -30 -25 -30 -110 0 -112 10 -123 120 -123 l80 0 0
|
||||
30 0 30 -64 0 c-36 0 -67 4 -70 9 -3 5 26 24 64 42 65 30 70 35 70 64 0 48
|
||||
-26 65 -96 64 -32 0 -66 -3 -74 -6z"/>
|
||||
<path d="M488 309 c-15 -8 -18 -25 -18 -103 0 -116 8 -126 98 -126 l62 0 0 30
|
||||
c0 29 -2 30 -43 30 -53 0 -67 13 -67 61 0 62 7 69 61 69 46 0 49 2 49 25 0 24
|
||||
-2 25 -62 25 -35 0 -71 -5 -80 -11z"/>
|
||||
<path d="M906 304 c-13 -12 -16 -38 -16 -120 l0 -104 30 0 30 0 0 96 0 95 43
|
||||
-3 42 -3 3 -92 c3 -91 3 -93 27 -93 l25 0 0 108 c0 71 -4 112 -12 120 -19 19
|
||||
-153 16 -172 -4z"/>
|
||||
<path d="M1137 302 c-27 -29 -24 -161 4 -196 19 -24 27 -26 89 -26 62 0 70 2
|
||||
89 26 17 22 21 41 21 105 0 98 -11 109 -116 109 -56 0 -74 -4 -87 -18z"/>
|
||||
<path d="M1476 304 c-22 -22 -22 -170 0 -202 13 -19 24 -22 84 -22 91 0 100
|
||||
12 100 132 0 104 -4 108 -104 108 -45 0 -69 -5 -80 -16z"/>
|
||||
<path d="M1716 304 c-12 -12 -16 -36 -16 -99 0 -104 15 -125 92 -125 30 0 47
|
||||
-4 43 -10 -3 -5 -35 -10 -71 -10 -57 0 -64 -2 -64 -20 0 -18 7 -20 88 -20 55
|
||||
0 92 4 100 12 8 8 12 53 12 138 0 85 -4 130 -12 138 -19 19 -153 16 -172 -4z"/>
|
||||
<path d="M2046 304 c-12 -12 -16 -37 -16 -103 0 -114 6 -121 118 -121 l82 0 0
|
||||
30 0 30 -63 0 c-35 0 -67 3 -70 7 -4 3 21 21 56 39 57 30 62 35 65 69 5 54
|
||||
-10 65 -89 65 -48 0 -72 -5 -83 -16z"/>
|
||||
<path d="M2262 308 c-14 -14 -16 -87 -2 -108 5 -8 31 -17 62 -20 38 -3 53 -9
|
||||
53 -20 0 -11 -15 -16 -62 -18 -62 -3 -63 -3 -63 -32 l0 -30 71 0 c99 0 109 7
|
||||
109 80 0 66 -5 72 -69 80 -71 8 -64 30 8 30 58 0 61 1 61 25 0 25 -1 25 -78
|
||||
25 -47 0 -83 -5 -90 -12z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -1,20 +1,36 @@
|
|||
import { Controller, useForm } from 'react-hook-form';
|
||||
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 TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Link } from 'react-router-dom';
|
||||
import _ from '@lodash';
|
||||
import Paper from '@mui/material/Paper';
|
||||
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 { useState } from 'react';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import _ from '@lodash';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Button from '@mui/material/Button';
|
||||
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||
import { useState } from 'react';
|
||||
import JwtLoginTab from './tabs/JwtSignInTab';
|
||||
import FirebaseSignInTab from './tabs/FirebaseSignInTab';
|
||||
|
||||
/**
|
||||
* Form Validation Schema
|
||||
*/
|
||||
const schema = z.object({
|
||||
email: z.string().email('You must enter a valid email').nonempty('You must enter an email'),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, 'Password is too short - must be at least 8 chars.')
|
||||
.nonempty('Please enter your password.')
|
||||
});
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'jwt',
|
||||
|
|
@ -30,49 +46,65 @@ const tabs = [
|
|||
}
|
||||
];
|
||||
|
||||
type FormType = {
|
||||
email: string;
|
||||
password: string;
|
||||
remember?: boolean;
|
||||
};
|
||||
|
||||
const defaultValues = {
|
||||
email: '',
|
||||
password: '',
|
||||
remember: true
|
||||
};
|
||||
|
||||
/**
|
||||
* The sign in page.
|
||||
* The full screen reversed sign in page.
|
||||
*/
|
||||
function SignInPage() {
|
||||
const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);
|
||||
|
||||
function handleSelectTab(id: string) {
|
||||
setSelectedTabId(id);
|
||||
}
|
||||
|
||||
const { control, formState, handleSubmit, reset } = useForm<FormType>({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
resolver: zodResolver(schema)
|
||||
});
|
||||
|
||||
const { isValid, dirtyFields, errors } = formState;
|
||||
|
||||
function onSubmit() {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-w-0 flex-1 flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start">
|
||||
<Paper className="h-full w-full px-16 py-8 ltr:border-r-1 rtl:border-l-1 sm:h-auto sm:w-auto sm:rounded-2xl sm:p-48 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-64 md:shadow-none">
|
||||
<CardContent className="mx-auto w-full max-w-320 sm:mx-0 sm:w-320">
|
||||
<img
|
||||
className="w-48"
|
||||
src="assets/images/logo/logo.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
<div className="flex min-w-0 flex-auto flex-col items-center sm:justify-center md:p-32">
|
||||
<Paper className="flex min-h-full w-full overflow-hidden rounded-0 sm:min-h-auto sm:w-auto sm:rounded-2xl sm:shadow md:w-full md:max-w-6xl">
|
||||
<div className="w-full px-16 py-32 ltr:border-r-1 rtl:border-l-1 sm:w-auto sm:p-48 md:p-64">
|
||||
<div className="mx-auto w-full max-w-320 sm:mx-0 sm:w-320">
|
||||
<img
|
||||
className="w-48"
|
||||
src="assets/images/logo/logo1.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
|
||||
<Typography className="mt-32 text-4xl font-extrabold leading-tight tracking-tight">
|
||||
Sign in
|
||||
</Typography>
|
||||
<div className="mt-2 flex items-baseline font-medium">
|
||||
<Typography>Don't have an account?</Typography>
|
||||
<Link
|
||||
className="ml-4"
|
||||
to="/sign-up"
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
<Typography className="mt-32 text-4xl font-extrabold leading-tight tracking-tight">
|
||||
Iniciar Sesión
|
||||
</Typography>
|
||||
<div className="mt-2 flex items-baseline font-medium">
|
||||
<Typography>Aún no tienes cuenta?</Typography>
|
||||
<Link
|
||||
className="ml-4"
|
||||
to="/sign-up"
|
||||
>
|
||||
Regístrate
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Alert
|
||||
icon={false}
|
||||
severity="info"
|
||||
className="mt-24 px-16 text-13 leading-relaxed"
|
||||
>
|
||||
You are browsing <b>Fuse React Demo</b>. Click on the "Sign in" button to access the Demo and
|
||||
Documentation.
|
||||
</Alert>
|
||||
|
||||
<Tabs
|
||||
<Tabs
|
||||
value={_.findIndex(tabs, { id: selectedTabId })}
|
||||
variant="fullWidth"
|
||||
className="w-full mt-24 mb-32"
|
||||
|
|
@ -94,156 +126,101 @@ function SignInPage() {
|
|||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
{selectedTabId === 'jwt' && <JwtLoginTab />}
|
||||
|
||||
{selectedTabId === 'firebase' && <FirebaseSignInTab />}
|
||||
|
||||
<div className="mt-32 flex items-center">
|
||||
<div className="mt-px flex-auto border-t" />
|
||||
<Typography
|
||||
className="mx-8"
|
||||
color="text.secondary"
|
||||
>
|
||||
Or continue with
|
||||
</Typography>
|
||||
<div className="mt-px flex-auto border-t" />
|
||||
</div>
|
||||
<div className="mt-32 flex items-center">
|
||||
<div className="mt-px flex-auto border-t" />
|
||||
<Typography
|
||||
className="mx-8"
|
||||
color="text.secondary"
|
||||
>
|
||||
Or continue with
|
||||
</Typography>
|
||||
<div className="mt-px flex-auto border-t" />
|
||||
</div>
|
||||
|
||||
<div className="mt-32 flex items-center 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>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Paper>
|
||||
|
||||
<Box
|
||||
className="relative hidden h-full flex-auto items-center justify-center overflow-hidden p-64 md:flex lg:px-112"
|
||||
sx={{ backgroundColor: 'primary.main' }}
|
||||
>
|
||||
<svg
|
||||
className="pointer-events-none absolute inset-0"
|
||||
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 -right-64 -top-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="relative z-10 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 leading-6 tracking-tight 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="mt-32 flex items-center">
|
||||
<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 className="mt-32 flex items-center 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>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
className="relative hidden h-full flex-auto items-center justify-center overflow-hidden p-64 md:flex lg:px-112"
|
||||
sx={{ backgroundColor: 'primary.main' }}
|
||||
>
|
||||
<div className="relative z-10 w-full max-w-2xl">
|
||||
<img
|
||||
className="w-48"
|
||||
src="assets/images/empresa/logoAlphaBC.svg"
|
||||
alt="logo"
|
||||
width="500"
|
||||
/>
|
||||
<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 leading-6 tracking-tight 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="mt-32 flex items-center">
|
||||
<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>
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignInPage;
|
||||
export default SignInPage;
|
||||
Loading…
Reference in New Issue