wirabasalamah/InaTrading-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine seller onboarding and product review flows

Browse Source
This commit is contained in:
Wira Irawan
2026-05-25 10:34:57 +07:00
parent b266047a11
commit 7e6446b4c2
24 changed files with 2238 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(auth)/account-not-found/page.tsx
View File

@ -41,7 +41,7 @@ function AccountNotFoundContent() {
<div className="flex items-center gap-3">
<LanguageToggle />
<Link
href="/login"
href="/help"
className="hidden sm:flex text-secondary font-semibold hover:text-primary transition-colors items-center gap-2"
>
<span className="material-symbols-outlined text-lg">help_outline</span>
@ -104,12 +104,12 @@ function AccountNotFoundContent() {
<footer className="mt-auto pt-12">
<div className="flex flex-col gap-6">
<div className="flex gap-4">
<a href="#" className="text-outline text-xs font-semibold hover:text-on-surface uppercase tracking-widest transition-colors">
<Link href="/privacy" className="text-outline text-xs font-semibold hover:text-on-surface uppercase tracking-widest transition-colors">
{t.common.privacy}
</a>
<a href="#" className="text-outline text-xs font-semibold hover:text-on-surface uppercase tracking-widest transition-colors">
</Link>
<Link href="/terms" className="text-outline text-xs font-semibold hover:text-on-surface uppercase tracking-widest transition-colors">
{t.common.terms}
</a>
</Link>
</div>
<p className="text-[10px] leading-relaxed text-outline/60 max-w-sm">{a.disclaimer}</p>
</div>

58
src/app/(auth)/forgot-password/page.tsx
View File

@ -6,9 +6,13 @@ import { FormEvent, useState } from "react";
import { LanguageToggle } from "@/components/language-toggle";
import { useLanguage } from "@/lib/i18n-context";
const recoveryFieldWrapperClass =
"group flex items-center rounded-2xl border border-outline-variant/50 bg-white px-5 py-4 shadow-[0_14px_30px_rgba(95,9,13,0.06)] transition-all duration-200 focus-within:border-primary focus-within:shadow-[0_18px_36px_rgba(183,19,26,0.12)]";
export default function ForgotPasswordPage() {
const { t } = useLanguage();
const f = t.auth.forgotPassword;
const supportEmail = "admin@inatrading.co.id";
const [contact, setContact] = useState("");
const [submitted, setSubmitted] = useState(false);
@ -86,23 +90,30 @@ export default function ForgotPasswordPage() {
>
{f.emailOrPhone}
</label>
<div className="flex items-center rounded-xl border border-outline-variant/60 bg-surface-container-low px-4 py-4 transition-all group-focus-within:border-primary group-focus-within:bg-surface-container-lowest">
<span className="material-symbols-outlined text-outline group-focus-within:text-primary mr-3">
alternate_email
</span>
<input
id="recovery-contact"
name="recovery-contact"
type="text"
value={contact}
onChange={(e) => setContact(e.target.value)}
placeholder="name@company.com"
required
className="w-full bg-transparent border-none p-0 text-lg font-medium text-on-surface placeholder:text-outline/50 focus:ring-0"
/>
<div className={recoveryFieldWrapperClass}>
<div className="mr-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/8 text-primary transition-colors group-focus-within:bg-primary/12">
<span className="material-symbols-outlined text-[28px]">
alternate_email
</span>
</div>
<div className="min-w-0 flex-1">
<p className="mb-1 text-[10px] font-black uppercase tracking-[0.22em] text-outline/80">
Recovery Contact
</p>
<input
id="recovery-contact"
name="recovery-contact"
type="text"
value={contact}
onChange={(e) => setContact(e.target.value)}
placeholder="name@company.com"
required
className="w-full border-none bg-transparent p-0 text-xl font-semibold tracking-tight text-on-surface placeholder:text-outline/45 focus:outline-none focus:ring-0"
/>
</div>
</div>
<p className="mt-3 text-sm text-on-surface-variant/70 italic">
{/* privacy note kept short */}
<p className="mt-3 text-sm text-on-surface-variant/70">
Gunakan email bisnis atau nomor HP yang terdaftar di akun Anda.
</p>
</div>
@ -132,7 +143,12 @@ export default function ForgotPasswordPage() {
<span className="material-symbols-outlined text-tertiary">contact_support</span>
<p className="text-sm text-on-surface-variant">
{f.havingTrouble}{" "}
<a href="#" className="text-tertiary font-bold hover:underline">{f.supportLink}</a>
<a
href={`mailto:${supportEmail}?subject=${encodeURIComponent("Bantuan lupa password Ina Trading")}`}
className="text-tertiary font-bold hover:underline"
>
{f.supportLink}
</a>
</p>
</div>
</footer>
@ -143,9 +159,13 @@ export default function ForgotPasswordPage() {
</main>
<div className="fixed bottom-8 right-8 z-50">
<button className="bg-surface-container-lowest text-secondary p-4 rounded-full magazine-shadow border border-outline-variant/20 hover:bg-secondary hover:text-on-secondary transition-all active:scale-95 flex items-center justify-center">
<Link
href="/help"
aria-label="Open help center"
className="bg-surface-container-lowest text-secondary p-4 rounded-full magazine-shadow border border-outline-variant/20 hover:bg-secondary hover:text-on-secondary transition-all active:scale-95 flex items-center justify-center"
>
<span className="material-symbols-outlined">help_center</span>
</button>
</Link>
</div>
</>
);

62
src/app/(auth)/login/page.tsx
View File

@ -2,13 +2,14 @@
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { LanguageToggle } from "@/components/language-toggle";
import { useLanguage } from "@/lib/i18n-context";
const authFieldWrapperClass =
"relative rounded-xl border border-outline-variant/60 bg-surface-container-high px-0 transition-all duration-300 focus-within:border-primary focus-within:bg-surface-container-lowest";
const rememberedCredentialsKey = "rememberedLoginCredentials";
export default function LoginPage() {
const router = useRouter();
@ -22,6 +23,29 @@ export default function LoginPage() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
const rawRememberedCredentials = localStorage.getItem(rememberedCredentialsKey);
if (!rawRememberedCredentials) {
return;
}
try {
const rememberedCredentials = JSON.parse(rawRememberedCredentials) as {
email?: string;
password?: string;
};
if (rememberedCredentials.email && rememberedCredentials.password) {
setEmail(rememberedCredentials.email);
setPassword(rememberedCredentials.password);
setRemember(true);
}
} catch {
localStorage.removeItem(rememberedCredentialsKey);
}
}, []);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError("");
@ -46,9 +70,14 @@ export default function LoginPage() {
}
if (remember) {
localStorage.setItem(
rememberedCredentialsKey,
JSON.stringify({ email, password })
);
localStorage.setItem("token", data.token);
localStorage.setItem("role", data.role);
} else {
localStorage.removeItem(rememberedCredentialsKey);
sessionStorage.setItem("token", data.token);
sessionStorage.setItem("role", data.role);
}
@ -59,6 +88,26 @@ export default function LoginPage() {
}
if (data.role === "seller") {
try {
const profileRes = await fetch("/api/seller/profile", {
headers: { "x-auth-token": data.token },
});
const profileData = await profileRes.json();
const profile = profileData?.data || profileData;
const isIncomplete =
!profile?.storeName ||
!profile?.biography ||
!profile?.sellerImageUrl;
if (isIncomplete || data.onboardingRequired) {
router.push("/onboarding/business");
return;
}
} catch {
// Fall back to dashboard if the profile check fails.
}
router.push("/dashboard");
return;
}
@ -175,11 +224,18 @@ export default function LoginPage() {
type="checkbox"
id="remember"
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
onChange={(e) => {
const nextRemember = e.target.checked;
setRemember(nextRemember);
if (!nextRemember) {
localStorage.removeItem(rememberedCredentialsKey);
}
}}
className="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary"
/>
<label htmlFor="remember" className="text-sm font-medium text-on-surface-variant">
{l.rememberDevice}
{l.rememberMe}
</label>
</div>

2
src/app/(auth)/register/verify/page.tsx
View File

@ -125,7 +125,7 @@ function VerifyContent() {
sessionStorage.removeItem("otpVerified");
sessionStorage.removeItem("otpVerifiedEmail");
setSuccess(v.successSeller);
setTimeout(() => { router.push("/dashboard"); }, 1000);
setTimeout(() => { router.push("/onboarding/business"); }, 1000);
return;
}