Remove redundant files
This commit is contained in:
Simon Gruber
@@ -1,69 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { UserOutlined } from "@ant-design/icons";
|
||||
import { Button, Card, Flex, Popover, Space, Tooltip, Typography } from "antd";
|
||||
import AccountSettingsPopoverContent from "./AccountSettingsPopoverContent";
|
||||
import ThemeModeToggle from "./utils/ThemeModeToggle";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export default function TopNav({
|
||||
themeMode,
|
||||
onThemeChange,
|
||||
onHome,
|
||||
userEmail,
|
||||
onUserEmailChange,
|
||||
}: {
|
||||
themeMode: "light" | "dark";
|
||||
onThemeChange: (mode: "light" | "dark") => void;
|
||||
onHome: () => void;
|
||||
userEmail: string;
|
||||
onUserEmailChange: (nextUserEmail: string) => void | Promise<string>;
|
||||
}) {
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Card size="small">
|
||||
<Flex justify="space-between" align="center" wrap="wrap" gap={12}>
|
||||
<Button
|
||||
type="text"
|
||||
onClick={onHome}
|
||||
aria-label="Go to home"
|
||||
style={{ paddingInline: 0 }}
|
||||
>
|
||||
<Text style={{ fontSize: 18 }} strong>
|
||||
Lunchtime
|
||||
</Text>
|
||||
</Button>
|
||||
|
||||
<Space size={8} align="center">
|
||||
<ThemeModeToggle
|
||||
themeMode={themeMode}
|
||||
onThemeChange={onThemeChange}
|
||||
/>
|
||||
|
||||
<Popover
|
||||
trigger="click"
|
||||
placement="bottomRight"
|
||||
open={isPopoverOpen}
|
||||
onOpenChange={setIsPopoverOpen}
|
||||
content={
|
||||
<AccountSettingsPopoverContent
|
||||
userEmail={userEmail}
|
||||
onUserEmailChange={onUserEmailChange}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Tooltip title="Account settings">
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
icon={<UserOutlined />}
|
||||
aria-label="User settings"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Alert, Button, Flex, Form, Input, Modal, Space, Typography } from "antd";
|
||||
import ThemeModeToggle from "./utils/ThemeModeToggle";
|
||||
|
||||
type ThemeMode = "light" | "dark";
|
||||
type EmailLookupState = "idle" | "checking" | "exists" | "new";
|
||||
|
||||
export default function WelcomeOnboardingModal({
|
||||
open,
|
||||
themeMode,
|
||||
onThemeChange,
|
||||
onCheckAccountExists,
|
||||
onCreateAccount,
|
||||
onMigrateAccount,
|
||||
}: {
|
||||
open: boolean;
|
||||
themeMode: ThemeMode;
|
||||
onThemeChange: (mode: ThemeMode) => void;
|
||||
onCheckAccountExists: (email: string) => Promise<boolean>;
|
||||
onCreateAccount: (email: string) => void | Promise<void>;
|
||||
onMigrateAccount: (email: string) => void | Promise<void>;
|
||||
}) {
|
||||
const [form] = Form.useForm<{ email: string }>();
|
||||
const [lookupState, setLookupState] = useState<EmailLookupState>("idle");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [hasSentEmail, setHasSentEmail] = useState(false);
|
||||
const lookupTimerRef = useRef<number | null>(null);
|
||||
const lookupRequestIdRef = useRef(0);
|
||||
|
||||
const normalizeEmail = (email: string) => email.trim().toLowerCase();
|
||||
|
||||
const isValidEmail = (email: string) =>
|
||||
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
|
||||
const resolveAccountExists = async (email: string) => {
|
||||
const normalized = normalizeEmail(email);
|
||||
if (!normalized || !isValidEmail(normalized)) {
|
||||
setLookupState("idle");
|
||||
return null;
|
||||
}
|
||||
|
||||
const requestId = ++lookupRequestIdRef.current;
|
||||
setLookupState("checking");
|
||||
|
||||
try {
|
||||
const exists = await onCheckAccountExists(normalized);
|
||||
if (requestId !== lookupRequestIdRef.current) {
|
||||
return null;
|
||||
}
|
||||
|
||||
setLookupState(exists ? "exists" : "new");
|
||||
return exists;
|
||||
} catch {
|
||||
if (requestId === lookupRequestIdRef.current) {
|
||||
setLookupState("idle");
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
form.resetFields();
|
||||
setLookupState("idle");
|
||||
setIsSubmitting(false);
|
||||
setHasSentEmail(false);
|
||||
lookupRequestIdRef.current += 1;
|
||||
if (lookupTimerRef.current) {
|
||||
window.clearTimeout(lookupTimerRef.current);
|
||||
lookupTimerRef.current = null;
|
||||
}
|
||||
}
|
||||
}, [form, open]);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (lookupTimerRef.current) {
|
||||
window.clearTimeout(lookupTimerRef.current);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const buttonLabel = useMemo(() => {
|
||||
if (hasSentEmail) {
|
||||
return "Email sent";
|
||||
}
|
||||
if (lookupState === "exists") {
|
||||
return "Migrate account";
|
||||
}
|
||||
if (lookupState === "checking") {
|
||||
return "Checking account...";
|
||||
}
|
||||
if (lookupState === "new") {
|
||||
return "Create new account";
|
||||
}
|
||||
return "Continue";
|
||||
}, [hasSentEmail, lookupState]);
|
||||
|
||||
const isLookupResolved = lookupState === "exists" || lookupState === "new";
|
||||
|
||||
const helperText = useMemo(() => {
|
||||
if (lookupState === "exists") {
|
||||
return "Log in using this email.";
|
||||
}
|
||||
if (lookupState === "new") {
|
||||
return "Register using this email.";
|
||||
}
|
||||
return "";
|
||||
}, [lookupState]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
closable={false}
|
||||
footer={null}
|
||||
centered
|
||||
>
|
||||
<Space direction="vertical" size={14} style={{ width: "100%" }}>
|
||||
<Flex align="center" justify="space-between" style={{ width: "100%" }}>
|
||||
<Typography.Title level={4} style={{ margin: 0 }}>
|
||||
Welcome to Lunchtime
|
||||
</Typography.Title>
|
||||
<ThemeModeToggle themeMode={themeMode} onThemeChange={onThemeChange} />
|
||||
</Flex>
|
||||
|
||||
<Typography.Paragraph style={{ marginBottom: 6 }}>
|
||||
Enter your account email to continue. We'll automatically detect whether to create a new account or migrate an existing one.
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onValuesChange={(_changedValues, values) => {
|
||||
if (hasSentEmail) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentEmail = String(values.email || "");
|
||||
if (lookupTimerRef.current) {
|
||||
window.clearTimeout(lookupTimerRef.current);
|
||||
lookupTimerRef.current = null;
|
||||
}
|
||||
|
||||
lookupTimerRef.current = window.setTimeout(() => {
|
||||
void resolveAccountExists(currentEmail);
|
||||
}, 350);
|
||||
}}
|
||||
onFinish={async (values) => {
|
||||
if (hasSentEmail) {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedEmail = normalizeEmail(values.email);
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
let exists = lookupState === "exists";
|
||||
if (lookupState !== "exists" && lookupState !== "new") {
|
||||
const checked = await resolveAccountExists(normalizedEmail);
|
||||
exists = checked === true;
|
||||
}
|
||||
|
||||
if (exists) {
|
||||
await onMigrateAccount(normalizedEmail);
|
||||
} else {
|
||||
await onCreateAccount(normalizedEmail);
|
||||
}
|
||||
|
||||
setHasSentEmail(true);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="Email"
|
||||
name="email"
|
||||
rules={[
|
||||
{ required: true, message: "Email cannot be empty." },
|
||||
{ type: "email", message: "Enter a valid email address." },
|
||||
]}
|
||||
extra={helperText || undefined}
|
||||
>
|
||||
<Input
|
||||
placeholder="alex@example.com"
|
||||
autoFocus
|
||||
maxLength={320}
|
||||
disabled={hasSentEmail}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{hasSentEmail ? (
|
||||
<Alert
|
||||
type="info"
|
||||
showIcon
|
||||
description="Email sent! Please check your inbox and spam folder for the confirmation email."
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{hasSentEmail ? (
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
setHasSentEmail(false);
|
||||
setLookupState("idle");
|
||||
}}
|
||||
style={{ paddingInline: 0 }}
|
||||
>
|
||||
Change email
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
block
|
||||
loading={!hasSentEmail && (isSubmitting || lookupState === "checking")}
|
||||
disabled={hasSentEmail || !isLookupResolved}
|
||||
>
|
||||
{buttonLabel}
|
||||
</Button>
|
||||
</Form>
|
||||
</Space>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user