blob: e598fe4856beeccad2e3a1dbf5922554c40fcdfa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import Image from "next/image"
import IndoteknikLogo from "@/images/logo.png"
import Link from "@/core/components/elements/Link/Link"
import { useState } from "react"
import loginApi from "../api/loginApi"
import { useRouter } from "next/router"
import Alert from "@/core/components/elements/Alert/Alert"
import { setAuth } from "@/core/utils/auth"
const Login = () => {
const router = useRouter()
const [ email, setEmail ] = useState('')
const [ password, setPassword ] = useState('')
const [ isLoading, setIsLoading ] = useState(false)
const [ alert, setAlert ] = useState(null)
const handleSubmit = async (e) => {
e.preventDefault()
setIsLoading(true)
const login = await loginApi({ email, password })
setIsLoading(false)
if (login.isAuth) {
setAuth(login.user)
router.push('/')
return
}
switch (login.reason) {
case 'NOT_FOUND':
setAlert({
children: 'Email atau password tidak cocok',
type: 'info'
})
break
case 'NOT_ACTIVE':
setAlert({
children: (
<>
Email belum diaktivasi,
<Link className="text-gray-900" href={`/activate?email=${email}`}>aktivasi sekarang</Link>
</>
),
type: 'info'
})
break
}
}
return (
<div className="p-6 pt-10 flex flex-col items-center">
<Link href="/">
<Image src={IndoteknikLogo} alt="Logo Indoteknik" width={150} height={50} />
</Link>
<h1 className="text-2xl mt-4 font-semibold">Mulai Belanja Sekarang</h1>
<h2 className="text-gray_r-11 font-normal mt-1 mb-4">Masuk ke akun kamu untuk belanja</h2>
{ alert && (
<Alert className="text-center" type={alert.type}>
{ alert.children }
</Alert>
) }
<form className="w-full mt-6 flex flex-col gap-y-4" onSubmit={handleSubmit}>
<div>
<label htmlFor="email">Alamat Email</label>
<input
type="text"
id="email"
className="form-input w-full mt-3"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="contoh@email.com"
/>
</div>
<div>
<label htmlFor="password">Kata Sandi</label>
<input
type="password"
id="password"
className="form-input w-full mt-3"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••••••"
/>
</div>
<button
type="submit"
className="btn-solid-red w-full mt-2"
disabled={!email || !password || isLoading}
>
{ !isLoading ? 'Masuk' : 'Loading...'}
</button>
</form>
<p className="text-gray_r-11 mt-4">Belum punya akun Indoteknik? <Link href="/register" className="inline">Daftar</Link></p>
</div>
)
}
export default Login
|
