From f2dad674f9096ca2423cbbdc0228576f094f064c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 26 Dec 2022 12:01:19 +0700 Subject: Fitur Logout --- src/components/Header.js | 20 +++++++++++------- src/helpers/apiOdoo.js | 4 +++- src/helpers/greeting.js | 9 ++++++++ src/pages/activate.js | 10 ++++----- src/pages/logout.js | 14 ++++++++++++ src/pages/my/menu.js | 2 +- src/pages/my/profile.js | 55 +++++++++++++++++++++++++++++++++++++++++++----- 7 files changed, 94 insertions(+), 20 deletions(-) create mode 100644 src/helpers/greeting.js create mode 100644 src/pages/logout.js (limited to 'src') diff --git a/src/components/Header.js b/src/components/Header.js index ad706fe9..99972307 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -7,7 +7,8 @@ import { MagnifyingGlassIcon, Bars3Icon, ShoppingCartIcon, - ChevronRightIcon + ChevronRightIcon, + Cog6ToothIcon } from "@heroicons/react/24/outline"; // Helpers @@ -16,6 +17,7 @@ import { getAuth, useAuth } from "../helpers/auth"; import Link from "./Link"; // Images import Logo from "../images/logo.png"; +import greeting from "../helpers/greeting"; export default function Header({ title }) { const router = useRouter(); @@ -25,18 +27,17 @@ export default function Header({ title }) { const searchQueryRef = useRef(); const [isMenuActive, setIsMenuActive] = useState(false); const [auth, setAuth] = useAuth(); - + useEffect(() => { if (q) { searchQueryRef.current.blur(); setSuggestions([]); }; - }, [q]) + }, [q]); const clickSuggestion = (value) => { - console.log(value); router.push(`/shop/search?q=${value}`, undefined, { scroll: false }); - } + }; const getSuggestion = useCallback(async () => { if (searchQuery.trim().length > 0) { @@ -73,10 +74,13 @@ export default function Header({ title }) {
{ auth && ( - -

Hi, {auth.name}

+ +
+

{ greeting() },

+

{auth.name}

+
- +
) } diff --git a/src/helpers/apiOdoo.js b/src/helpers/apiOdoo.js index e58f7fc8..8009a302 100644 --- a/src/helpers/apiOdoo.js +++ b/src/helpers/apiOdoo.js @@ -13,8 +13,10 @@ const getToken = async () => { return token; }; +let connectionTry = 0; const apiOdoo = async (method, url, data = {}, headers = {}) => { try { + connectionTry++; let token = await getToken(); let axiosParameter = { method, @@ -25,7 +27,7 @@ const apiOdoo = async (method, url, data = {}, headers = {}) => { if (Object.keys(data).length > 0) axiosParameter.data = new URLSearchParams(Object.entries(data)).toString(); let res = await axios(axiosParameter); - if (res.data.status.code == 401) { + if (res.data.status.code == 401 && connectionTry <= 3) { await renewToken(); return apiOdoo(method, url, data, headers); } diff --git a/src/helpers/greeting.js b/src/helpers/greeting.js new file mode 100644 index 00000000..7dc19f8f --- /dev/null +++ b/src/helpers/greeting.js @@ -0,0 +1,9 @@ +const greeting = () => { + let hours = new Date().getHours(); + if (hours < 11) return 'Selamat Pagi'; + if (hours < 15) return 'Selamat Siang'; + if (hours < 18) return 'Selamat Sore'; + return 'Selamat Malam'; +} + +export default greeting; \ No newline at end of file diff --git a/src/pages/activate.js b/src/pages/activate.js index 6d534909..c738af81 100644 --- a/src/pages/activate.js +++ b/src/pages/activate.js @@ -29,12 +29,12 @@ export default function Activate() { if (activation.data.activation) { setAuth(activation.data.user); setAlert({ - component: <>Selamat, akun anda berhasil diaktifkan, kembali ke beranda., + component: <>Selamat, akun anda berhasil diaktifkan, kembali ke beranda., type: 'success' }); } else { setAlert({ - component: <>Mohon maaf token sudah tidak aktif, lakukan permintaan aktivasi akun kembali atau masuk jika sudah memiliki akun., + component: <>Mohon maaf token sudah tidak aktif, lakukan permintaan aktivasi akun kembali atau masuk jika sudah memiliki akun., type: 'info' }); } @@ -60,13 +60,13 @@ export default function Activate() { switch (activationRequest.data.reason) { case 'NOT_FOUND': setAlert({ - component: <>Email tersebut belum terdaftar, daftar sekarang., + component: <>Email tersebut belum terdaftar, daftar sekarang., type: 'info' }); break; case 'ACTIVE': setAlert({ - component: <>Email tersebut sudah terdaftar dan sudah aktif, masuk sekarang., + component: <>Email tersebut sudah terdaftar dan sudah aktif, masuk sekarang., type: 'info' }); break; @@ -83,7 +83,7 @@ export default function Activate() { Logo Indoteknik -

Aktivasi Akun Indoteknik Anda

+

Aktivasi Akun Indoteknik Anda

Link aktivasi akan dikirimkan melalui email

{alert ? ( {alert.component} diff --git a/src/pages/logout.js b/src/pages/logout.js new file mode 100644 index 00000000..de749a37 --- /dev/null +++ b/src/pages/logout.js @@ -0,0 +1,14 @@ +import { useRouter } from "next/router"; +import { useEffect } from "react"; +import { deleteAuth } from "../helpers/auth"; + +export default function Logout() { + const router = useRouter(); + + useEffect(() => { + deleteAuth(); + router.replace('/login'); + }, [router]); + + return null; +} \ No newline at end of file diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js index d86febf9..84de3892 100644 --- a/src/pages/my/menu.js +++ b/src/pages/my/menu.js @@ -35,7 +35,7 @@ const serviceMenus = [ const settingMenus = [ { icon: (),name: 'Daftar Alamat', url: '/my/profile' }, - { icon: (),name: 'Keluar Akun', url: '/my/profile' }, + { icon: (),name: 'Keluar Akun', url: '/logout' }, ]; export default function MyMenu() { diff --git a/src/pages/my/profile.js b/src/pages/my/profile.js index ebbd7f2a..f1d0a701 100644 --- a/src/pages/my/profile.js +++ b/src/pages/my/profile.js @@ -1,27 +1,32 @@ import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import AppBar from "../../components/AppBar"; -import Header from "../../components/Header"; import Layout from "../../components/Layout"; import WithAuth from "../../components/WithAuth"; import apiOdoo from "../../helpers/apiOdoo"; import { useAuth, - setAuth as setAuthCookie + setAuth as setAuthCookie, + getAuth } from "../../helpers/auth"; export default function MyProfile() { const [auth, setAuth] = useAuth(); + const [editMode, setEditMode] = useState(false); + const [password, setPassword] = useState(''); const update = async (e) => { e.preventDefault(); - let update = await apiOdoo('PUT', `/api/v1/user/${auth.id}`, { + let dataToUpdate = { name: auth.name, phone: auth.phone, mobile: auth.mobile, token: auth.token - }); + }; + if (password) dataToUpdate.password = password; + let update = await apiOdoo('PUT', `/api/v1/user/${auth.id}`, dataToUpdate); setAuthCookie(update.user); + cancelEdit(); toast.success('Berhasil mengubah profil', { duration: 1500 }); }; @@ -29,6 +34,12 @@ export default function MyProfile() { let authToUpdate = auth; authToUpdate[e.target.name] = e.target.value; setAuth({ ...authToUpdate }); + }; + + const cancelEdit = () => { + setEditMode(false); + setAuth(getAuth()); + setPassword(''); } return ( @@ -58,6 +69,7 @@ export default function MyProfile() { name="name" value={auth.name} onChange={handleInput} + disabled={!editMode} /> @@ -68,6 +80,7 @@ export default function MyProfile() { name="phone" value={auth.phone} onChange={handleInput} + disabled={!editMode} /> @@ -78,11 +91,43 @@ export default function MyProfile() { name="mobile" value={auth.mobile} onChange={handleInput} + disabled={!editMode} + /> + + + setPassword(e.target.value)} + disabled={!editMode} /> ) } - + { editMode && ( +
+ + +
+ ) } + + { !editMode && ( + + ) } -- cgit v1.2.3