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>

app/(auth)/sign-up.tsx

@@ -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&apos;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>
   );
 };