feat: add login, and me page

Signed-off-by: hansputera <hanifdwyputrasembiring@gmail.com>
smantriplw · May 30, 2023 · e65b759 · e65b759
1 parent 0bc02e3
commit e65b759
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 25 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,22 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    async rewrites() {
+        return [
+            {
+                source: '/api/:path*',
+                destination: 'https://ppdb.api.sman3palu.sch.id/api/:path*',
+            },
+        ];
+    },
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'ppdb.sman3palu.sch.id',
+                port: '',
+            }
+        ]
+    }
+}
 
 module.exports = nextConfig
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Navbar } from '@/components/navbar'
 import './globals.css'
-import { SessionContextWrap } from '@/components/contexts/sessionContextWrap';
 
 export const metadata = {
   title: 'PPDB Admin SMAN 3 PALU',
@@ -17,9 +16,7 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <Navbar />
-        <SessionContextWrap>
-          {children}
-        </SessionContextWrap>
+        {children}
       </body>
     </html>
   )

diff --git a/src/app/logout/page.tsx b/src/app/logout/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+import React from 'react'
+import Cookies from 'js-cookie'
+import { useRouter } from 'next/navigation'
+
+export default function Logout() {
+  const token = Cookies.get('ppdb_admin');
+  const router = useRouter();
+
+  React.useEffect(() => {
+    if (token) {
+      Cookies.remove('ppdb_admin');
+    }
+
+    router.push('/');
+  }, [token, router]);
+}
diff --git a/src/app/me/page.tsx b/src/app/me/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+import React from 'react'
+import { useSessionStore } from '@/contexts/sessionContext'
+import Image from 'next/image'
+
+export default function MePage() {
+    const session = useSessionStore();
+    return (
+        <main>
+            <div className="hero min-h-screen bg-base-200">
+                <div className="hero-content flex-col lg:flex-row">
+                    <Image height={300} width={250} alt={'Logo SMAN3'} src="https://ppdb.sman3palu.sch.id/logo.png" className="max-w-sm rounded-lg" />
+                    <div>
+                        <h1 className="text-5xl font-bold">Halo, <span className="uppercase">{session.username}</span></h1>
+                        <p className="py-6">
+                            Selamat datang verifikator di website PPDB Admin SMAN 3 Palu Tahun 2023/2024, harap memverifikasi data dengan jujur dan benar ya. Selamat memverifikasi, dan terimakasih!
+                        </p>
+                        <div className="grid grid-cols-2 gap-4">
+                            <button className="btn btn-primary">verifikasi</button>
+                            <button className="btn btn-secondary">status</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    )
+}
diff --git a/src/components/container.tsx b/src/components/container.tsx
@@ -6,4 +6,4 @@ export const Container = ({ children, isCenter = true }:{ children: React.ReactN
             {children}
         </div>
     )
-}
+}
diff --git a/src/components/contexts/sessionContextWrap.tsx b/src/components/contexts/sessionContextWrap.tsx
diff --git a/src/components/forms/login.tsx b/src/components/forms/login.tsx
@@ -5,6 +5,7 @@ import * as Yup from 'yup'
 import Cookies from 'js-cookie'
 import { FormField } from './field';
 import { useRouter } from 'next/navigation'
+import { useSessionStore } from '@/contexts/sessionContext'
 
 type DataProps = {
     isError: boolean;
@@ -21,6 +22,7 @@ const righteous = Righteous({
     subsets: ['latin'],
 });
 export const LoginForm = () => {
+    const session = useSessionStore();
     const [data, setData] = React.useState<DataProps>({
         isError: false,
     });
@@ -30,6 +32,10 @@ export const LoginForm = () => {
     React.useEffect(() => {
         if (savedToken) {
             router.push('/me');
+        } else {
+            if (session.token) {
+                session.reset();
+            }
         }
     }, [savedToken, router]);
 
@@ -47,7 +53,7 @@ export const LoginForm = () => {
                 onSubmit={(values, actions) => {
                     actions.setSubmitting(true);
 
-                    fetch('https://ppdb.api.sman3palu.sch.id/api/auth/login', {
+                    fetch('/api/auth/login', {
                         body: JSON.stringify(values),
                         headers: {
                             'Content-Type': 'application/json',
@@ -71,6 +77,8 @@ export const LoginForm = () => {
                             }
 
                             Cookies.set('ppdb_admin', res.data.token);
+                            session.setToken(res.data.token);
+                            session.loadUserInfo();
                             router.push('/me');
                         }
                     }).catch(e => {
@@ -117,4 +125,4 @@ export const LoginForm = () => {
             </Formik>
         </div>
     )
-}
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -1,4 +1,5 @@
 'use client';
+import React from 'react'
 import { useSessionStore } from '@/contexts/sessionContext';
 import Cookies from 'js-cookie'
 import Link from 'next/link'
@@ -7,9 +8,12 @@ export const Navbar = () => {
     const session = useSessionStore();
     const tokenAdmin = Cookies.get('ppdb_admin');
 
-    if (tokenAdmin) {
-        session.setToken(tokenAdmin);
-    }
+    React.useEffect(() => {
+        if (tokenAdmin) {
+            session.setToken(tokenAdmin);
+            session.loadUserInfo();
+        }
+    }, [tokenAdmin]);
     return (
         <div className="navbar bg-base-100">
             <div className="navbar-start">
@@ -25,7 +29,9 @@ export const Navbar = () => {
                     </>
                     ) : (
                         <>
-                            <li><Link href='/me'>My profile ({session.username})</Link></li>
+                            <li><Link href='/me'>Halaman Profile ({session.username} - {session.status})</Link></li>
+                            <li><Link href='/verifikasi'>Halaman Verifikasi</Link></li>
+                            <li><Link href='/terverifikasi'>Halaman Terverifikasi</Link></li>
                             <li><Link href='/logout'>Logout</Link></li>
                         </>
                     )}
@@ -50,4 +56,4 @@ export const Navbar = () => {
             </div>
         </div>
     )
-}
+}
diff --git a/src/contexts/sessionContext.ts b/src/contexts/sessionContext.ts
@@ -19,6 +19,7 @@ export type UserAction = {
     updateState: (state: UserSession) => void;
     setToken: (token: string) => void;
     loadUserInfo: () => void;
+    reset: () => void;
 }
 
 export const useSessionStore = create<UserSession & UserAction>((set, state) => ({
@@ -30,7 +31,7 @@ export const useSessionStore = create<UserSession & UserAction>((set, state) =>
     setToken: (token) => set((st) => ({ ...st, token })),
     loadUserInfo: () => {
         const st = state();
-        fetch('https://ppdb.api.sman3palu.sch.id/api/auth', {
+        fetch('/api/auth/profile', {
             headers: {
                 'Content-Type': 'application/json',
                 'Authorization': `Bearer ${st.token}`,
@@ -39,4 +40,11 @@ export const useSessionStore = create<UserSession & UserAction>((set, state) =>
             set((st) => ({ ...st, ...res.data }));
         });
     },
+    reset: () => set(() => ({
+        email: '',
+        id: 0,
+        status: UserStatus.NonActive,
+        username: '',
+        token: undefined,
+    })),
 }));
-Original file line number
+Diff line change
@@ Expand Up @@
                 {children}
             </div>
         )
-    }
+    }