leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1"use client";
2import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
3import { ButtonPrimary } from "components/Buttons";
4
5import { Input } from "components/Input";
6import { Modal } from "components/Modal";
7import { useState } from "react";
8import { HandleInputandOAuth, UniversalHandleInfo } from "./HandleSubscribe";
9import { EmailSubscribeSuccess } from "./EmailSubscribeSuccess";
10
11export const EmailSubscribe = (props: {
12 link?: boolean;
13 autoFocus?: boolean;
14 user: {
15 loggedIn: boolean;
16 email: string | undefined;
17 handle: string | undefined;
18 };
19}) => {
20 let [value, setValue] = useState(
21 props.user.loggedIn && props.user.email ? props.user.email : "",
22 );
23 let [state, setState] = useState<"confirm" | "success">(
24 props.user.loggedIn && props.user.email ? "success" : "confirm",
25 );
26 return (
27 <div className="relative input-with-border flex gap-2 w-full items-center mx-auto">
28 <Input
29 autoFocus={props.autoFocus}
30 className={`appearance-none! outline-none! w-full pr-22 `}
31 disabled={props.user.loggedIn}
32 placeholder="email@example.com"
33 size={0}
34 value={value}
35 onChange={(e) => setValue(e.target.value)}
36 />
37 <Modal
38 asChild
39 trigger={
40 <div className="absolute top-0 bottom-0 right-[4px] flex items-center">
41 <ButtonPrimary
42 compact
43 className="leading-tight! outline-none! text-sm!"
44 >
45 {props.link ? "Link" : "Subscribe"}
46 </ButtonPrimary>
47 </div>
48 }
49 >
50 {state === "success" ? (
51 <EmailSubscribeSuccess
52 email={props.user.email}
53 handle={props.user.handle}
54 />
55 ) : (
56 <EmailSubscribeConfirm
57 emailInputValue={value}
58 onSubmit={() => {
59 setState("success");
60 }}
61 />
62 )}
63 </Modal>
64 </div>
65 );
66};
67
68const EmailSubscribeConfirm = (props: {
69 emailInputValue: string;
70 onSubmit: () => void;
71}) => {
72 let inputClassName = "input-with-border text-2xl w-8 h-12 text-center";
73 return (
74 <div className="flex flex-col text-center max-w-sm pb-2">
75 <h3>Confirm your email</h3>
76 Enter the confirmation code sent to <br />
77 <div className="italic min-w-0 truncate">{props.emailInputValue}</div>
78 <OneTimePasswordField.Root
79 autoSubmit
80 validationType="alphanumeric"
81 onAutoSubmit={() => {
82 props.onSubmit();
83 console.log("hello?");
84 }}
85 >
86 <div className="flex gap-1 pt-4 w-full justify-center">
87 <OneTimePasswordField.Input className={inputClassName} />
88 <OneTimePasswordField.Input className={inputClassName} />
89 <OneTimePasswordField.Input className={inputClassName} />
90 <OneTimePasswordField.Input className={inputClassName} />
91 <OneTimePasswordField.Input className={inputClassName} />
92 <OneTimePasswordField.Input className={inputClassName} />
93 </div>
94 <OneTimePasswordField.HiddenInput />
95 </OneTimePasswordField.Root>
96 </div>
97 );
98};