feat: enhance password validation across forms and improve button styling. Update password requirements to include uppercase, lowercase, and numeric characters in sign-up and account settings. Adjust button styles in sign-in and sign-up forms for a consistent look.

apps/web/src/components/TourGuide.tsx

@@ -32,7 +32,7 @@ const globalSteps: Step[] = [
   { target: "[data-tour='nav-bank']", title: "Bank Soal — Buat Paket", content: "Atur soal-soal kamu jadi paket latihan dari bank soal.", spotlightPadding: 4 },
   { target: "[data-tour='nav-packages']", title: "Paket Soal — Mulai Latihan", content: "Temukan paket soal dari komunitas atau buatan sendiri.", spotlightPadding: 4 },
   { target: "[data-tour='nav-analytics']", title: "Analytics — Evaluasi", content: "Lihat analitik mendalam: skor, tren, dan rekomendasi belajar.", spotlightPadding: 4 },
-  { target: "body" as any, placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol <strong>?</strong> di pojok kanan bawah halaman!", hideOverlay: true },
+  { target: "body" as any, placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol ? di pojok kanan bawah halaman!", hideOverlay: true },
 ];
 
 export function TourGuide() {

apps/web/src/components/settings/AccountSettings.tsx

@@ -20,8 +20,8 @@ export function AccountSettings() {
 
   const handleChangePassword = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (newPassword.length < 8) {
-      toast.error("Password minimal 8 karakter");
+    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(newPassword)) {
+      toast.error("Password minimal 8 karakter, mengandung huruf besar, huruf kecil, dan angka");
       return;
     }
     if (newPassword !== confirmPassword) {
@@ -123,6 +123,7 @@ export function AccountSettings() {
             </div>
             <Button
               type="submit"
+              className="rounded-[var(--radius-lg)]"
               disabled={isChangingPassword || !currentPassword || !newPassword || !confirmPassword}
             >
               {isChangingPassword ? "Menyimpan..." : "Ubah Password"}
@@ -150,7 +151,7 @@ export function AccountSettings() {
                 placeholder="nama@email.com"
               />
             </div>
-            <Button type="submit" disabled={isChangingEmail || !newEmail}>
+            <Button type="submit" className="rounded-[var(--radius-lg)]" disabled={isChangingEmail || !newEmail}>
               {isChangingEmail ? "Menyimpan..." : "Ubah Email"}
             </Button>
           </form>

apps/web/src/components/sign-in-form.tsx

@@ -130,7 +130,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
             selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}
           >
             {({ canSubmit, isSubmitting }) => (
-              <Button type="submit" className="w-full" disabled={!canSubmit || isSubmitting}>
+              <Button type="submit" className="w-full rounded-[var(--radius-lg)]" disabled={!canSubmit || isSubmitting}>
                 {isSubmitting ? "Submitting..." : "Sign In"}
               </Button>
             )}

apps/web/src/components/sign-up-form.tsx

@@ -54,7 +54,7 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
       onSubmit: z.object({
         name: z.string().min(2, "Name must be at least 2 characters"),
         email: z.email("Invalid email address"),
-        password: z.string().min(8, "Password must be at least 8 characters"),
+        password: z.string().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/, "Password must be at least 8 characters with uppercase, lowercase, and number"),
       }),
     },
   });
@@ -150,7 +150,7 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
             selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}
           >
             {({ canSubmit, isSubmitting }) => (
-              <Button type="submit" className="w-full" disabled={!canSubmit || isSubmitting}>
+              <Button type="submit" className="w-full rounded-[var(--radius-lg)]" disabled={!canSubmit || isSubmitting}>
                 {isSubmitting ? "Submitting..." : "Sign Up"}
               </Button>
             )}

apps/web/src/routes/__root.tsx

@@ -8,7 +8,6 @@ import { Sidebar } from "@/components/sidebar";
 import { ThemeProvider } from "@/components/theme-provider";
 import { useSidebar } from "@/hooks/use-sidebar";
 import { GlobalGenerationProgress } from "@/components/generate/GlobalGenerationProgress";
-import { TourGuide } from "@/components/TourGuide";
 import type { trpc } from "@/utils/trpc";
 
 import "../index.css";
@@ -75,7 +74,6 @@ function RootComponent() {
           </div>
         )}
         <GlobalGenerationProgress />
-        <TourGuide />
         <Toaster richColors />
       </ThemeProvider>
       <TanStackRouterDevtools position="bottom-left" />

apps/web/src/routes/forgot-password.tsx

@@ -133,8 +133,8 @@ function StepReset({ email }: { email: string }) {
       toast.error("Masukkan 6 digit kode OTP");
       return;
     }
-    if (newPassword.length < 8) {
-      toast.error("Password minimal 8 karakter");
+    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(newPassword)) {
+      toast.error("Password minimal 8 karakter, mengandung huruf besar, huruf kecil, dan angka");
       return;
     }
     if (newPassword !== confirmPassword) {

apps/web/src/routes/index.tsx

@@ -5,6 +5,7 @@ import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { TourGuide } from "@/components/TourGuide";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -384,6 +385,8 @@ function HomeComponent() {
           </Link>
         </div>
       )}
+
+      <TourGuide />
     </div>
   );
 }

apps/web/src/routes/me.tsx

@@ -222,6 +222,19 @@ function MeComponent() {
             </CardContent>
           </Card>
         </Link>
+        <Link to="/settings" search={{ tab: "account" }} className="block">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+            <CardContent className="p-5 flex items-center gap-4">
+              <div className="w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--clay-black)] flex items-center justify-center">
+                <MaterialIcon name="settings" className="text-[var(--pure-white)]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[var(--clay-black)]">Pengaturan Akun</h3>
+                <p className="text-xs text-[var(--warm-charcoal)]">Ubah password, email, dan lainnya</p>
+              </div>
+            </CardContent>
+          </Card>
+        </Link>
       </div>
     </div>
   );

packages/api/src/routers/verification.ts

@@ -122,7 +122,7 @@ export const verificationRouter = router({
       z.object({
         email: z.string().email(),
         otp: z.string().length(6),
-        newPassword: z.string().min(8),
+        newPassword: z.string().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/, "Password must be at least 8 characters with uppercase, lowercase, and number"),
       }),
     )
     .mutation(async ({ input }) => {