Fix SMTP delivery, add password reset and user deletion
SMTP: - Add connection/greeting/socket timeouts so a stalled Gmail connection no longer hangs sign-up - Wrap sendMail in try/catch and fall back to logging the code - Derive secure from port (465 implicit TLS vs 587 STARTTLS) - Strip whitespace from the Gmail app password - Document SMTP_HOST/SMTP_PORT in .env.example and environment.d.ts Password reset (new): - POST /(api)/auth/forgot-password emails a 6-digit code and does not reveal whether the address is registered - POST /(api)/auth/reset-password validates the code, sets the new password, verifies the email, and signs the user in - password_reset_codes table added to seed-db.mjs - "Forgot password?" flow on the mobile sign-in screen User deletion (new): - DELETE /(api)/admin/users/[id], owner-only, blocks self-deletion - Delete button with confirmation on the dashboard Users page Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Krikorios
co-authored by
Claude Fable 5
Claude Fable 5
parent
a0b297285a
commit
eceb6b45d5
+217
-2
@@ -1,6 +1,16 @@
|
||||
import { Link, useRouter } from "expo-router";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Alert, Image, ScrollView, Text, View } from "react-native";
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import ReactNativeModal from "react-native-modal";
|
||||
|
||||
import { CustomButton } from "@/components/custom-button";
|
||||
import { InputField } from "@/components/input-field";
|
||||
@@ -17,6 +27,101 @@ const SignIn = () => {
|
||||
password: "",
|
||||
});
|
||||
|
||||
// Forgot-password flow: "request" collects the email, "reset" collects the
|
||||
// emailed code and a new password.
|
||||
const [reset, setReset] = useState({
|
||||
state: "closed" as "closed" | "request" | "reset",
|
||||
email: "",
|
||||
code: "",
|
||||
password: "",
|
||||
devCode: "",
|
||||
error: "",
|
||||
busy: false,
|
||||
});
|
||||
|
||||
const openReset = () =>
|
||||
setReset({
|
||||
state: "request",
|
||||
email: form.email,
|
||||
code: "",
|
||||
password: "",
|
||||
devCode: "",
|
||||
error: "",
|
||||
busy: false,
|
||||
});
|
||||
|
||||
const closeReset = () =>
|
||||
setReset((prev) => ({ ...prev, state: "closed" }));
|
||||
|
||||
const onRequestReset = async () => {
|
||||
if (!reset.email.trim()) {
|
||||
setReset((prev) => ({ ...prev, error: "Enter your email address." }));
|
||||
return;
|
||||
}
|
||||
|
||||
setReset((prev) => ({ ...prev, busy: true, error: "" }));
|
||||
|
||||
try {
|
||||
const response = await fetchAPI("/(api)/auth/forgot-password", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: reset.email.trim() }),
|
||||
});
|
||||
|
||||
setReset((prev) => ({
|
||||
...prev,
|
||||
state: "reset",
|
||||
busy: false,
|
||||
devCode:
|
||||
(response as { data?: { devCode?: string } })?.data?.devCode ?? "",
|
||||
}));
|
||||
} catch {
|
||||
// The endpoint hides whether the email exists, so move on regardless.
|
||||
setReset((prev) => ({ ...prev, state: "reset", busy: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmitReset = async () => {
|
||||
if (!/^\d{6}$/.test(reset.code)) {
|
||||
setReset((prev) => ({ ...prev, error: "Enter the 6-digit code." }));
|
||||
return;
|
||||
}
|
||||
|
||||
if (reset.password.length < 8) {
|
||||
setReset((prev) => ({
|
||||
...prev,
|
||||
error: "Password must be at least 8 characters.",
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
setReset((prev) => ({ ...prev, busy: true, error: "" }));
|
||||
|
||||
try {
|
||||
const response = await fetchAPI("/(api)/auth/reset-password", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
email: reset.email.trim(),
|
||||
code: reset.code,
|
||||
password: reset.password,
|
||||
}),
|
||||
});
|
||||
|
||||
await setSession(response.data);
|
||||
setReset((prev) => ({ ...prev, state: "closed", busy: false }));
|
||||
router.replace("/");
|
||||
} catch (err: any) {
|
||||
setReset((prev) => ({
|
||||
...prev,
|
||||
busy: false,
|
||||
error: String(err?.message ?? "").includes("400")
|
||||
? "Invalid or expired reset code."
|
||||
: "Could not reset your password. Please try again.",
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const onSignInPress = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetchAPI("/(api)/auth/login", {
|
||||
@@ -47,7 +152,17 @@ const SignIn = () => {
|
||||
}, [isLoaded, form.email, form.password, setSession, router]);
|
||||
|
||||
return (
|
||||
<ScrollView className="flex-1 bg-white">
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
|
||||
>
|
||||
<ScrollView
|
||||
className="flex-1 bg-white"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View className="flex-1 bg-white">
|
||||
<View className="relative w-full h-[250px]">
|
||||
<Image
|
||||
@@ -97,6 +212,12 @@ const SignIn = () => {
|
||||
className="mt-6"
|
||||
/>
|
||||
|
||||
<TouchableOpacity onPress={openReset} className="mt-4">
|
||||
<Text className="text-primary-500 text-center font-JakartaMedium">
|
||||
Forgot password?
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<OAuth title="Sign in with Google" />
|
||||
|
||||
<Link
|
||||
@@ -107,8 +228,102 @@ const SignIn = () => {
|
||||
<Text className="text-primary-500">Sign up</Text>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
<ReactNativeModal
|
||||
isVisible={reset.state === "request"}
|
||||
onBackdropPress={closeReset}
|
||||
>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[280px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2">
|
||||
Reset password
|
||||
</Text>
|
||||
|
||||
<Text className="font-Jakarta mb-5">
|
||||
Enter your email and we'll send you a 6-digit reset code.
|
||||
</Text>
|
||||
|
||||
<InputField
|
||||
label="Email"
|
||||
placeholder="karim@email.com"
|
||||
icon={icons.email}
|
||||
value={reset.email}
|
||||
keyboardType="email-address"
|
||||
onChangeText={(email) =>
|
||||
setReset((prev) => ({ ...prev, email }))
|
||||
}
|
||||
/>
|
||||
|
||||
{reset.error ? (
|
||||
<Text className="text-rose-500 text-sm mt-1">{reset.error}</Text>
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title={reset.busy ? "Sending…" : "Send Code"}
|
||||
onPress={onRequestReset}
|
||||
disabled={reset.busy}
|
||||
className="mt-5"
|
||||
/>
|
||||
</View>
|
||||
</ReactNativeModal>
|
||||
|
||||
<ReactNativeModal
|
||||
isVisible={reset.state === "reset"}
|
||||
onBackdropPress={closeReset}
|
||||
>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2">
|
||||
Enter new password
|
||||
</Text>
|
||||
|
||||
<Text className="font-Jakarta mb-5">
|
||||
We've sent a reset code to {reset.email}
|
||||
</Text>
|
||||
|
||||
{reset.devCode ? (
|
||||
<View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 font-Jakarta">
|
||||
Email delivery is not configured on this server. Your reset
|
||||
code is <Text className="font-JakartaBold">{reset.devCode}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<InputField
|
||||
label="Code"
|
||||
icon={icons.lock}
|
||||
placeholder="••••••"
|
||||
value={reset.code}
|
||||
maxLength={6}
|
||||
keyboardType="numeric"
|
||||
onChangeText={(code) => setReset((prev) => ({ ...prev, code }))}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="New password"
|
||||
icon={icons.lock}
|
||||
placeholder="••••••••"
|
||||
secureTextEntry
|
||||
value={reset.password}
|
||||
onChangeText={(password) =>
|
||||
setReset((prev) => ({ ...prev, password }))
|
||||
}
|
||||
/>
|
||||
|
||||
{reset.error ? (
|
||||
<Text className="text-rose-500 text-sm mt-1">{reset.error}</Text>
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title={reset.busy ? "Resetting…" : "Reset Password"}
|
||||
onPress={onSubmitReset}
|
||||
disabled={reset.busy}
|
||||
className="mt-5 bg-emerald-500"
|
||||
/>
|
||||
</View>
|
||||
</ReactNativeModal>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+91
-3
@@ -1,6 +1,15 @@
|
||||
import { Link, router } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { Alert, Image, ScrollView, Text, View } from "react-native";
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import ReactNativeModal from "react-native-modal";
|
||||
|
||||
import { CustomButton } from "@/components/custom-button";
|
||||
@@ -10,9 +19,25 @@ import { icons, images } from "@/constants";
|
||||
import { fetchAPI } from "@/lib/fetch";
|
||||
import { useSession } from "@/lib/session";
|
||||
|
||||
const ROLES = [
|
||||
{
|
||||
value: "rider",
|
||||
title: "I need a ride",
|
||||
description: "Book rides and get where you're going",
|
||||
},
|
||||
{
|
||||
value: "driver",
|
||||
title: "I want to drive",
|
||||
description: "Offer rides and earn money with your car",
|
||||
},
|
||||
] as const;
|
||||
|
||||
type Role = (typeof ROLES)[number]["value"];
|
||||
|
||||
const SignUp = () => {
|
||||
const { setSession } = useSession();
|
||||
|
||||
const [role, setRole] = useState<Role>("rider");
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
@@ -24,6 +49,7 @@ const SignUp = () => {
|
||||
state: "default",
|
||||
error: "",
|
||||
code: "",
|
||||
devCode: "",
|
||||
});
|
||||
|
||||
const onSignUpPress = async () => {
|
||||
@@ -44,7 +70,7 @@ const SignUp = () => {
|
||||
}
|
||||
|
||||
try {
|
||||
await fetchAPI("/(api)/auth/register", {
|
||||
const response = await fetchAPI("/(api)/auth/register", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
@@ -52,12 +78,15 @@ const SignUp = () => {
|
||||
email: form.email,
|
||||
phone: form.phone.trim(),
|
||||
password: form.password,
|
||||
role,
|
||||
}),
|
||||
});
|
||||
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
state: "pending",
|
||||
devCode:
|
||||
(response as { data?: { devCode?: string } })?.data?.devCode ?? "",
|
||||
}));
|
||||
|
||||
setForm((prevForm) => ({
|
||||
@@ -98,7 +127,17 @@ const SignUp = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView className="flex-1 bg-white">
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
|
||||
>
|
||||
<ScrollView
|
||||
className="flex-1 bg-white"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View className="flex-1 bg-white">
|
||||
<View className="relative w-full h-[250px]">
|
||||
<Image
|
||||
@@ -114,6 +153,44 @@ const SignUp = () => {
|
||||
</View>
|
||||
|
||||
<View className="p-5">
|
||||
<Text className="text-lg font-JakartaSemiBold mb-3">
|
||||
How will you use Waseel?
|
||||
</Text>
|
||||
<View className="flex-row gap-3 mb-4">
|
||||
{ROLES.map((option) => {
|
||||
const selected = role === option.value;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={option.value}
|
||||
onPress={() => setRole(option.value)}
|
||||
activeOpacity={0.8}
|
||||
className={`flex-1 justify-center rounded-2xl border p-4 ${
|
||||
selected
|
||||
? "border-primary-500 bg-primary-500/10"
|
||||
: "border-neutral-100 bg-neutral-100"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
source={option.value === "driver" ? icons.dollar : icons.map}
|
||||
alt={`${option.title} icon`}
|
||||
className="h-7 w-7 mb-2"
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text
|
||||
className={`text-[15px] font-JakartaBold ${
|
||||
selected ? "text-primary-500" : "text-black"
|
||||
}`}
|
||||
>
|
||||
{option.title}
|
||||
</Text>
|
||||
<Text className="text-xs text-neutral-400 font-Jakarta mt-1">
|
||||
{option.description}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<InputField
|
||||
label="Name"
|
||||
placeholder="Karim Haddad"
|
||||
@@ -205,6 +282,16 @@ const SignUp = () => {
|
||||
We've sent a verification code to {form.email}
|
||||
</Text>
|
||||
|
||||
{verification.devCode ? (
|
||||
<View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 font-Jakarta">
|
||||
Email delivery is not configured on this server. Your
|
||||
verification code is{" "}
|
||||
<Text className="font-JakartaBold">{verification.devCode}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<InputField
|
||||
label="Code"
|
||||
icon={icons.lock}
|
||||
@@ -259,6 +346,7 @@ const SignUp = () => {
|
||||
</ReactNativeModal>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user