API Auth
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconForms, IconUser } from '@tabler/icons-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
@@ -50,6 +51,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
User & Role
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
|
||||
@@ -88,12 +88,13 @@ function ListRole({ search }: { search: string }) {
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.name}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
|
||||
<Button variant="light" color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color='red'
|
||||
disabled={listDataState.delete.loading}
|
||||
onClick={() => {
|
||||
|
||||
@@ -85,11 +85,11 @@ function ListUser({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={{ width: '25%', }}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.username}</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '20%', }}>
|
||||
<Text truncate fz="sm" c="dimmed">
|
||||
{item.email}
|
||||
{item.nomor}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '20%', }}>
|
||||
|
||||
15
src/app/admin/auth/_lib/api_fetch_auth.ts
Normal file
15
src/app/admin/auth/_lib/api_fetch_auth.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export {
|
||||
apiFetchLogin
|
||||
};
|
||||
|
||||
const apiFetchLogin = async ({ nomor }: { nomor: string }) => {
|
||||
const respone = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ nomor: nomor }),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
return await respone.json().catch(() => null);
|
||||
};
|
||||
81
src/app/admin/auth/login/page.tsx
Normal file
81
src/app/admin/auth/login/page.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Flex, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconUserFilled } from '@tabler/icons-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
|
||||
function Page() {
|
||||
// const router = useRouter()
|
||||
// const snap = useSnapshot(userState.userState)
|
||||
// const handleSubmit = async () => {
|
||||
// router.push("/darmasaba/pendidikan/perpustakaan-digital")
|
||||
// await snap.login.submit()
|
||||
// }
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Center>
|
||||
<Image src={"/darmasaba-icon.png"} alt="" w={80} />
|
||||
</Center>
|
||||
<Box>
|
||||
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
|
||||
E-Book Desa Darmasaba
|
||||
</Title>
|
||||
<Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
|
||||
Silahkan masukkan akun anda untuk menjelajahi berbagai macam buku di perpustakaan digital
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={50}>
|
||||
<Group justify='center'>
|
||||
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
|
||||
<Stack align='center'>
|
||||
<Title order={2} fw={'bold'} c={colors['blue-button']}>
|
||||
Login
|
||||
</Title>
|
||||
<IconUserFilled size={80} color={colors['blue-button']} />
|
||||
<Box>
|
||||
<Text c={colors['blue-button']} fw={'bold'}>Masuk Untuk Akses Lebih Banyak Buku</Text>
|
||||
<TextInput
|
||||
type='email'
|
||||
label='Email'
|
||||
placeholder='Email'
|
||||
// value={snap.login.form.email}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.login.form.email = e.target.value
|
||||
// }}
|
||||
required
|
||||
/>
|
||||
<TextInput py={20}
|
||||
type='password'
|
||||
label='Password'
|
||||
placeholder='Password'
|
||||
// value={snap.login.form.password}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.login.form.password = e.target.value
|
||||
// }}
|
||||
/>
|
||||
<Box pb={20} >
|
||||
<Button fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
|
||||
</Box>
|
||||
<Flex justify={'center'} align={'center'}>
|
||||
<Text>Belum punya akun? </Text>
|
||||
<Button variant='transparent' component={Link} href={'/registrasi'}>
|
||||
<Text c={colors['blue-button']} fw={'bold'}>Registrasi</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
85
src/app/admin/auth/registrasi/page.tsx
Normal file
85
src/app/admin/auth/registrasi/page.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
|
||||
|
||||
|
||||
|
||||
function Page() {
|
||||
// const router = useRouter()
|
||||
// const registrerState = useSnapshot(userState.userState)
|
||||
// const handleSubmit = async () => {
|
||||
// router.push("/login")
|
||||
// await registrerState.register.submit()
|
||||
// }
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} >
|
||||
<Center>
|
||||
<Image src={"/darmasaba-icon.png"} alt="" w={80} />
|
||||
</Center>
|
||||
<Box>
|
||||
<Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
|
||||
E-Book Desa Darmasaba
|
||||
</Title>
|
||||
<Text ta={'center'} fz={'h4'} fw={'bold'} c={colors['blue-button']}>
|
||||
Silahkan lengkapi data diri anda untuk mengakses e-book desa
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }} pb={50}>
|
||||
<Group justify='center'>
|
||||
<Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
|
||||
<Stack align='center'>
|
||||
<Title order={2} fw={'bold'} c={colors['blue-button']}>
|
||||
Registrasi
|
||||
</Title>
|
||||
<Box>
|
||||
<TextInput placeholder='Nama Lengkap'
|
||||
label='Nama Lengkap'
|
||||
// value={registrerState.register.form.nama}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.register.form.nama = e.target.value
|
||||
// }}
|
||||
required
|
||||
|
||||
/>
|
||||
<TextInput py={10} placeholder='Email'
|
||||
label='Email'
|
||||
// value={registrerState.register.form.email}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.register.form.email = e.target.value
|
||||
// }}
|
||||
required
|
||||
/>
|
||||
<TextInput pb={10} placeholder='Password'
|
||||
type='password'
|
||||
label='Password'
|
||||
// value={registrerState.register.form.password}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.register.form.password = e.target.value
|
||||
// }}
|
||||
required
|
||||
/>
|
||||
<Box pb={10}>
|
||||
<Checkbox
|
||||
label="Saya menyetujui syarat dan ketentuan yang berlaku"
|
||||
/>
|
||||
</Box>
|
||||
<Box pb={20} >
|
||||
<Button fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
Reference in New Issue
Block a user