implement phone login

manifest.json

@@ -30,4 +30,4 @@
         "email": "michio.haiyaku@gmail.com"
     },
     "homepage_url": "https://github.com/michioxd/luckit"
-}
+}

package.json

@@ -14,8 +14,10 @@
     "@fontsource/manrope": "^5.1.1",
     "@szhsin/react-menu": "^4.2.4",
     "clsx": "^2.1.1",
+    "country-flag-icons": "^1.5.14",
     "events": "^3.3.0",
     "js-md5": "^0.8.3",
+    "libphonenumber-js": "^1.11.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0"

src/components/PhoneNumber.tsx

@@ -0,0 +1,170 @@
+import { CountryCode } from "libphonenumber-js";
+import { createElement, useEffect, useMemo, useRef, useState } from "react";
+import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu";
+import clsx from "clsx";
+
+export default function PhoneNumberInput(props: {
+    defaultCountry?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onE164ValueChange?: (value: string) => void;
+    onSuccessChange?: (success: boolean) => void;
+    className?: string;
+}) {
+    const [libPhoneNumber, setLibPhoneNumber] = useState<typeof import("../modules/phone/phone") | null>(null);
+    const [flagsHandler, setFlagsHandler] = useState<typeof import("../modules/phone/flags") | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        import("../modules/phone/phone").then(setLibPhoneNumber);
+        import("../modules/phone/flags").then(setFlagsHandler);
+    }, []);
+
+    const oldCursorPos = useRef<number>(0);
+    const setCursorPos = useRef<number>(NaN);
+
+    const [internalValue, setInternalValue] = useState<string>(props.defaultValue || "");
+    const [country, setCountry] = useState(props.defaultCountry || "ZZ");
+
+    useEffect(() => {
+        if (props.defaultCountry) {
+            setCountry(props.defaultCountry);
+        }
+    }, [props.defaultCountry]);
+
+    const formatter = useMemo(() => {
+        if (libPhoneNumber) {
+            const ayt = new libPhoneNumber.AsYouType(country as CountryCode);
+            setInternalValue(ayt.input(internalValue));
+            if (ayt.isValid()) {
+                const international = (["800", "808", "870", "870", "878", "881", "882", "883", "888", "979"] as string[]).includes(ayt.getCallingCode() ?? "");
+                if (ayt.getCountry() || international) {
+                    setCountry(ayt.getCountry() || "ZZ");
+                }
+            }
+            return ayt;
+        } else return null;
+    }, [country, internalValue, libPhoneNumber]);
+
+    useEffect(() => {
+        if (typeof props.value === "string")
+            setInternalValue(props.value);
+    }, [props.value]);
+
+    useEffect(() => {
+        if (libPhoneNumber) {
+            props.onValueChange?.(internalValue);
+            props.onE164ValueChange?.(formatter!.getNumberValue() ?? "");
+            props.onSuccessChange?.(formatter!.isValid() === true);
+        }
+    }, [formatter, internalValue, libPhoneNumber, props]);
+
+    useEffect(() => {
+        if (inputRef.current && !isNaN(setCursorPos.current)) {
+            inputRef.current.selectionStart = setCursorPos.current;
+            inputRef.current.selectionEnd = setCursorPos.current;
+
+            setCursorPos.current = NaN;
+        }
+    }, [internalValue]);
+
+    const selectFlagList = useMemo(() => {
+        if (!libPhoneNumber) return [];
+
+        return libPhoneNumber?.getCountries().map(country => {
+            const FlagEl = flagsHandler?.hasFlag(country) ? flagsHandler!.Flags[country as any as keyof typeof flagsHandler.Flags] : null;
+
+            return [(
+                <MenuItem key={country} value={country} onClick={() => {
+                    setCountry(country);
+                    if (formatter) {
+                        formatter.reset();
+                        setInternalValue(formatter.input(internalValue));
+                    }
+                }}>
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                        <div style={{ height: 23, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                            {FlagEl ? <FlagEl height={18} /> : country}
+                        </div>
+                        <div className="HideText" style={{ marginLeft: 8 }}>
+                            +{libPhoneNumber.getCountryCallingCode(country as CountryCode)} <span style={{ color: 'gray' }}>{(new Intl.DisplayNames([navigator.language], { type: 'region' })).of(country)}</span>
+                        </div>
+                    </div>
+                </MenuItem>
+            ), country] as const;
+        }).sort((a, b) => a[1].localeCompare(b[1])).map(x => x[0]);
+    }, [flagsHandler, formatter, internalValue, libPhoneNumber]);
+
+    return (
+        <>
+            <div style={{ display: "flex", alignItems: "center", gap: '0.5rem', width: '100%', maxWidth: '350px' }}>
+                <Menu menuStyle={{
+                    overflowY: "auto",
+                    maxHeight: "280px",
+                }}
+                    menuButton={<MenuButton className={clsx("input")} style={{ display: "flex", alignItems: "center", borderRadius: '10px', height: '100%', cursor: 'pointer' }}
+                    >
+                        {flagsHandler?.hasFlag(country) ? createElement(flagsHandler.Flags[country as any as keyof typeof flagsHandler.Flags], { height: 18 }) : <div style={{ height: '18px', width: '27px' }}></div>}
+                    </MenuButton>}
+                    transition
+                >
+                    {selectFlagList}
+                </Menu>
+                <input
+                    value={internalValue}
+                    className={clsx("input", props.className)}
+                    style={{ flex: 1 }}
+                    placeholder="phone number"
+                    onKeyDown={e => {
+                        oldCursorPos.current = e.currentTarget.selectionEnd ?? e.currentTarget.selectionStart ?? 0;
+                    }}
+                    onChange={e => {
+                        if (!formatter) return; // do not allow any input if libPhoneNumber is not loaded
+
+                        const oldValue = internalValue;
+                        let newValue = e.target.value;
+
+                        const oldValueNumber = oldValue.match(/\d|\+/g)?.join("") ?? "";
+                        const newValueNumber = newValue.match(/\d|\+/g)?.join("") ?? "";
+
+                        formatter.reset();
+                        newValue = formatter.input(newValue);
+                        if ((formatter.getCountry() !== country)) {
+                            const international = (["800", "808", "870", "870", "878", "881", "882", "883", "888", "979"] as string[]).includes(formatter.getCallingCode() ?? "");
+                            if (formatter.getCountry() || international) {
+                                setCountry(formatter.getCountry() || "ZZ");
+                            }
+                        }
+                        setInternalValue(newValue);
+
+                        // retain cursor position to correct number position
+                        const cursorPos = oldCursorPos.current;
+                        const cursorNumberPos = oldValue.slice(0, cursorPos).match(/\d|\+/g)?.length ?? 0;
+                        let newCursorNumberPos = cursorNumberPos;
+
+                        // set new cursor position
+                        newCursorNumberPos += newValueNumber.length - oldValueNumber.length;
+
+                        let tmpCursorNumberPos = newCursorNumberPos;
+                        let newCursorPos = 0;
+                        for (const char of newValue) {
+                            if (tmpCursorNumberPos === 0) {
+                                break;
+                            }
+
+                            newCursorPos++;
+
+                            if (char.match(/\d|\+/)) {
+                                tmpCursorNumberPos--;
+                            }
+                        }
+
+                        setCursorPos.current = newCursorPos;
+                    }}
+                    ref={inputRef}
+                />
+            </div>
+        </>
+    )
+}

src/index.scss

@@ -185,4 +185,23 @@ a {
         align-items: center;
         justify-content: center;
     }
+}
+
+.szh-menu {
+    background: #000000bb;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0px 0px 10px 0px #0000002c;
+    border: 1px solid #333333b0;
+    border-radius: 5px;
+
+    .szh-menu__item {
+        color: var(--color);
+        padding: 0.3rem 0.5rem;
+
+        &:hover,
+        &.szh-menu__item--hover {
+            background: #222222bb;
+        }
+    }
 }

src/modules/phone/flags.ts

@@ -0,0 +1,3 @@
+export * from "country-flag-icons";
+import * as Flags from "country-flag-icons/react/3x2";
+export { Flags };

src/modules/phone/phone.ts

@@ -0,0 +1 @@
+export * from "libphonenumber-js/max";

src/screens/Login.module.scss

@@ -42,8 +42,11 @@
             .Input {
                 width: 100%;
                 max-width: 350px;
+                transition: 0.2s;
+                border-radius: 10px;
+                border-color: #000;
 
-                &[type="text"] {
+                &[name="email"] {
                     border-radius: 15px 15px 0px 0px;
                     border-bottom: 1px solid #000;
                 }
@@ -65,6 +68,14 @@
                     gap: 0.5rem;
                 }
             }
+
+            .anotherMethod {
+                font-size: 12px;
+                margin-top: 0.6rem;
+                font-weight: 600;
+                color: var(--accent);
+                cursor: pointer;
+            }
         }
 
         .forkMe {