116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
import { X } from 'lucide-react';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
|
|
import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
|
|
|
|
type RegistrationInviteModalProps = {
|
|
isOpen: boolean;
|
|
platformTheme: PlatformTheme;
|
|
initialInviteCode: string;
|
|
submitting: boolean;
|
|
error: string;
|
|
onClose: () => void;
|
|
onSubmit: (inviteCode: string) => Promise<void>;
|
|
};
|
|
|
|
export function RegistrationInviteModal({
|
|
isOpen,
|
|
platformTheme,
|
|
initialInviteCode,
|
|
submitting,
|
|
error,
|
|
onClose,
|
|
onSubmit,
|
|
}: RegistrationInviteModalProps) {
|
|
const [inviteCode, setInviteCode] = useState(initialInviteCode);
|
|
const normalizedInviteCode = useMemo(
|
|
() =>
|
|
inviteCode
|
|
.trim()
|
|
.replace(/[^0-9a-z]/gi, '')
|
|
.toUpperCase(),
|
|
[inviteCode],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
return;
|
|
}
|
|
|
|
setInviteCode(initialInviteCode);
|
|
}, [initialInviteCode, isOpen]);
|
|
|
|
if (!isOpen) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[130] flex items-end justify-center px-3 py-4 text-[var(--platform-text-strong)] backdrop-blur-sm sm:items-center sm:p-4`}
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="registration-invite-dialog-title"
|
|
className="platform-auth-card w-full max-w-sm overflow-hidden rounded-[2rem]"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
|
|
<div
|
|
id="registration-invite-dialog-title"
|
|
className="text-lg font-semibold text-[var(--platform-text-strong)]"
|
|
>
|
|
请填写邀请码
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="platform-icon-button p-2"
|
|
aria-label="取消填写邀请码"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<form
|
|
className="flex flex-col gap-4 px-5 py-5"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
if (!normalizedInviteCode) {
|
|
onClose();
|
|
return;
|
|
}
|
|
|
|
void onSubmit(normalizedInviteCode);
|
|
}}
|
|
>
|
|
<label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
|
|
<span>邀请码</span>
|
|
<input
|
|
className="platform-input"
|
|
autoComplete="off"
|
|
value={inviteCode}
|
|
onChange={(event) => setInviteCode(event.target.value)}
|
|
placeholder="邀请码"
|
|
/>
|
|
</label>
|
|
|
|
{error ? (
|
|
<div className="platform-banner platform-banner--danger text-sm">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={submitting}
|
|
className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{submitting ? '提交中' : normalizedInviteCode ? '提交' : '跳过'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|