tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

client portal login api

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-11 08:35:43 +07:00
parent 174f065191
commit 3e30ce6e90
11 changed files with 226 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
frontend/client-portal/src/pages/auth/Login.tsx
View File

@@ -1,19 +1,17 @@
import { capitalCase } from 'change-case';
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Card, Stack, Link, Alert, Tooltip, Container, Typography } from '@mui/material';
// routes
import { PATH_AUTH } from '../../routes/paths';
import { Box, Card, Divider, Grid, Link, Stack, Tooltip, Typography } from '@mui/material';
// hooks
import useAuth from '../../hooks/useAuth';
import useResponsive from '../../hooks/useResponsive';
// components
import Page from '../../components/Page';
import Logo from '../../components/Logo';
import Image from '../../components/Image';
// sections
import { LoginForm } from '../../sections/auth/login';
import { LoginEmailForm, LoginPhoneForm } from '../../sections/auth/login';
import Logo from '../../components/Logo';
// react
import { useState } from 'react';
// ----------------------------------------------------------------------
@@ -21,117 +19,82 @@ const RootStyle = styled('div')(({ theme }) => ({
[theme.breakpoints.up('md')]: {
display: 'flex',
},
}));
const HeaderStyle = styled('header')(({ theme }) => ({
top: 0,
zIndex: 9,
lineHeight: 0,
width: '100%',
display: 'flex',
alignItems: 'center',
position: 'absolute',
padding: theme.spacing(3),
justifyContent: 'space-between',
[theme.breakpoints.up('md')]: {
alignItems: 'flex-start',
padding: theme.spacing(7, 5, 0, 7),
},
}));
const SectionStyle = styled(Card)(({ theme }) => ({
width: '100%',
maxWidth: 464,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
margin: theme.spacing(2, 0, 2, 2),
}));
const ContentStyle = styled('div')(({ theme }) => ({
maxWidth: 480,
margin: 'auto',
display: 'flex',
minHeight: '100vh',
flexDirection: 'column',
justifyContent: 'center',
padding: theme.spacing(12, 0),
alignItems: 'center',
}));
const ContentStyle = styled(Card)(({ theme }) => ({
[theme.breakpoints.up('md')]: {
maxHeight: '600px',
maxWidth: '1000px',
},
}));
// ----------------------------------------------------------------------
export default function Login() {
const { method } = useAuth();
const [formPhone, setFormPhone] = useState(false);
const smUp = useResponsive('up', 'sm');
const mdUp = useResponsive('up', 'md');
const handlerChange = (event: any, setForm: boolean) => {
event.preventDefault();
setFormPhone(setForm);
};
return (
<Page title="Login">
<RootStyle>
<HeaderStyle>
<Logo sx={{ width: 150, height: 150 }} />
{smUp && (
<Typography variant="body2" sx={{ mt: { md: -2 } }}>
Has problem with your account? {''}
<Link variant="subtitle2" component={RouterLink} to="#" onClick={(e) => {
window.location.href = "mailto:admin@linksehat.com";
e.preventDefault();
}}>
Contact Us
</Link>
</Typography>
)}
</HeaderStyle>
<ContentStyle>
<Grid container>
<Grid item xs={6}>
<Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
</Grid>
<Grid item xs={6} sx={{ padding: 3 }}>
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
<Tooltip title={capitalCase(method)} placement="left">
<Logo sx={{ width: 90, height: 90 }} />
</Tooltip>
{/* {mdUp && (
<SectionStyle>
<Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
Hi, Welcome Back
</Typography>
<Image
visibleByDefault
disabledEffect
src="https://minimal-assets-api.vercel.app/assets/illustrations/illustration_login.png"
alt="login"
/>
</SectionStyle>
)} */}
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h4" gutterBottom>
Sign in to LinkSehat
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
Enter your details below.
</Typography>
</Box>
</Stack>
<Container maxWidth="sm">
<ContentStyle>
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h4" gutterBottom>
Sign in to LinkSehat
</Typography>
<Typography sx={{ color: 'text.secondary' }}>Enter your details below.</Typography>
</Box>
{formPhone === false ? <LoginEmailForm /> : <LoginPhoneForm />}
<Tooltip title={capitalCase(method)} placement="right">
<>
<Image
disabledEffect
src={`https://minimal-assets-api.vercel.app/assets/icons/auth/ic_${method}.png`}
sx={{ width: 32, height: 32 }}
/>
</>
</Tooltip>
</Stack>
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
<LoginForm />
{false && !smUp && (
<Typography variant="body2" align="center" sx={{ mt: 3 }}>
Don’t have an account?{' '}
<Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>
Get started
</Link>
</Typography>
)}
</ContentStyle>
</Container>
<Stack sx={{ marginTop: 5 }}>
{formPhone === false ? (
<Link
href=""
align="center"
underline="hover"
onClick={(event) => handlerChange(event, true)}
>
Masuk menggunakan nomor handphone
</Link>
) : (
<Link
href=""
align="center"
underline="hover"
onClick={(event) => handlerChange(event, false)}
>
Masuk menggunakan email
</Link>
)}
</Stack>
</Grid>
</Grid>
</ContentStyle>
</RootStyle>
</Page>
);