tanweer919/lynkeduppro-crm
1
0
Fork 0
forked from Goutam/lynkeduppro-crm
Code Pull Requests Activity

Show real flag image in registration phone field

Browse Source 
Flag emojis don't render on Windows, so derive an ISO code from the
emoji's regional indicators and load a flagcdn image in front of the
country-code selector (Account + Verify steps).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Goutam Patidar
2026-06-30 20:00:37 +05:30
parent 0b76c97445
commit b79d925552
3 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/portal/register-flow.tsx
+23 -4
View File
@@ -191,9 +191,13 @@ function StepAccount(p: {
<div className="field" style={{ marginTop: 14 }}>
<label className="label">Mobile number</label>
<div className="phone-row">
<select className="input cc-select" value={p.cc} onChange={(e) => p.setCc(e.target.value)}>
{countryCodes.map((c) => <option key={c.code} value={c.code}>{c.flag} {c.code}</option>)}
</select>
<div className="cc-field">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="cc-flag-img" src={flagUrl(p.country.flag)} alt={p.country.name} width={22} height={16} />
<select className="input cc-select" value={p.cc} onChange={(e) => p.setCc(e.target.value)}>
{countryCodes.map((c) => <option key={c.code} value={c.code}>{c.code}</option>)}
</select>
</div>
<input className="input grow" inputMode="numeric" value={p.phone} onChange={(e) => p.setPhone(e.target.value.replace(/\D/g, ""))} placeholder={p.country.example} />
</div>
{p.phone && !p.phoneOk && <span style={{ fontSize: 12, color: "#fca5a5" }}>Enter a valid {p.country.digits}-digit number.</span>}
@@ -398,7 +402,11 @@ function VerifyChannel({ kind, initial, country, cc, initialPhone, verified, onV
<input className="input" value={value} onChange={(e) => { setValue(e.target.value); setState("idle"); }} placeholder="you@example.com" />
) : (
<div className="phone-row">
<span className="input cc-select" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>{country.flag} {cc}</span>
<span className="input cc-select" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7 }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="cc-flag-img static" src={flagUrl(country.flag)} alt={country.name} width={22} height={16} />
{cc}
</span>
<input className="input grow" inputMode="numeric" value={value} onChange={(e) => { setValue(e.target.value.replace(/\D/g, "")); setState("idle"); }} placeholder={country.example} />
</div>
)}
@@ -618,3 +626,14 @@ function Stepper({ current }: { current: number }) {
}
function cap(s: string) { return s.charAt(0).toUpperCase() + s.slice(1); }
// Flag emojis don't render on Windows, so map the emoji's regional-indicator
// code points to an ISO-2 code and use a flag image instead.
function flagUrl(flag: string): string {
const iso = Array.from(flag)
.map((ch) => ch.codePointAt(0))
.filter((cp): cp is number => cp != null && cp >= 0x1f1e6 && cp <= 0x1f1ff)
.map((cp) => String.fromCharCode(cp - 0x1f1e6 + 97))
.join("");
return `https://flagcdn.com/w40/${iso}.png`;
}