Skip to content

Commit f628631

Browse files
quiteboringquiteboring
authored
Merge pull request #2 from CobaltScripts/verify
2 parents ef0860b + d638dc7 commit f628631

3 files changed

Lines changed: 229 additions & 0 deletions

File tree

‎app/verify/page.tsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
"use client";
2+
3+
import {
4+
useState,
5+
ChangeEvent,
6+
FormEvent,
7+
MouseEvent,
8+
} from "react";
9+
import { verifyPeople } from "@/data/verify-data";
10+
11+
export default function VerifyPage() {
12+
const [inputValue, setInputValue] = useState("");
13+
const [result, setResult] = useState<string | null>(null);
14+
const [status, setStatus] = useState<StatusType>(null);
15+
const [showHowModal, setShowHowModal] = useState(false);
16+
17+
type StatusType = "success" | "error" | "warning" | null;
18+
19+
20+
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
21+
setInputValue(e.target.value);
22+
setResult(null);
23+
};
24+
25+
const handleSubmit = (e: FormEvent) => {
26+
e.preventDefault();
27+
const trimmed = inputValue.trim();
28+
29+
if (!trimmed) {
30+
setResult("Please enter a Discord user ID.");
31+
setStatus("warning");
32+
return;
33+
}
34+
35+
const person = verifyPeople.find((p) => p.ids.includes(trimmed));
36+
37+
if (person) {
38+
setResult(`This Discord ID belongs to ${person.name}.`);
39+
setStatus("success");
40+
} else {
41+
setResult(
42+
"Unknown ID. If this is an impersonator, please report this in the Discord server!"
43+
);
44+
setStatus("error");
45+
}
46+
};
47+
48+
const statusColor =
49+
status === "success"
50+
? "text-emerald-400"
51+
: status === "warning"
52+
? "text-amber-300"
53+
: status === "error"
54+
? "text-red-400"
55+
: "";
56+
57+
const openModal = (e: MouseEvent<HTMLButtonElement>) => {
58+
e.preventDefault();
59+
setShowHowModal(true);
60+
};
61+
62+
const closeModal = () => setShowHowModal(false);
63+
64+
return (
65+
<main className="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4">
66+
<div className="max-w-md w-full">
67+
<div className="mb-6 text-center space-y-2">
68+
<p className="text-xs uppercase tracking-[0.25em] text-muted-foreground">
69+
Cobalt
70+
</p>
71+
<h1 className="text-2xl font-semibold">Discord ID Verification</h1>
72+
</div>
73+
74+
<form
75+
onSubmit={handleSubmit}
76+
className="rounded-xl border border-border/60 bg-card/60 backdrop-blur-sm p-4 space-y-4"
77+
>
78+
<div className="space-y-2">
79+
<div className="flex items-center justify-between gap-3">
80+
<label
81+
htmlFor="verify-id"
82+
className="text-xs font-medium text-muted-foreground uppercase tracking-[0.2em]"
83+
>
84+
Discord user ID
85+
</label>
86+
<button
87+
onClick={openModal}
88+
className="text-[11px] text-muted-foreground hover:text-foreground underline-offset-4 hover:underline"
89+
type="button"
90+
>
91+
How do I find this?
92+
</button>
93+
</div>
94+
95+
<input
96+
id="verify-id"
97+
type="text"
98+
autoComplete="off"
99+
value={inputValue}
100+
onChange={handleChange}
101+
className="w-full rounded-lg border border-input bg-background/60 px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring transition"
102+
placeholder="e.g. 855798460593733652"
103+
/>
104+
</div>
105+
106+
<div className="flex items-center justify-between gap-3">
107+
<button
108+
type="submit"
109+
className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg bg-foreground text-background hover:bg-foreground/90 transition-colors"
110+
>
111+
Verify
112+
</button>
113+
114+
{result !== null && (
115+
<p className={`text-xs font-medium tracking-wide ${statusColor}`}>
116+
{result}
117+
</p>
118+
)}
119+
</div>
120+
</form>
121+
122+
<p className="mt-3 text-[11px] text-muted-foreground text-center">
123+
Always use common sense.
124+
</p>
125+
<p className="text-[11px] text-muted-foreground text-center">
126+
Only use Discord IDs you obtain by yourself.
127+
</p>
128+
129+
{showHowModal && (
130+
<div
131+
className="fixed inset-0 z-40 flex items-center justify-center bg-black/60"
132+
onClick={closeModal}
133+
>
134+
<div
135+
className="w-full max-w-md rounded-xl border border-border bg-card p-4 space-y-3"
136+
onClick={(e) => e.stopPropagation()}
137+
>
138+
<div className="flex items-center justify-between">
139+
<h2 className="text-sm font-semibold">
140+
Getting a Discord user ID
141+
</h2>
142+
<button
143+
type="button"
144+
onClick={closeModal}
145+
className="text-xs text-muted-foreground hover:text-foreground"
146+
>
147+
Close
148+
</button>
149+
</div>
150+
151+
<div className="space-y-2 text-sm text-muted-foreground">
152+
<ol className="list-decimal list-inside space-y-1">
153+
<li>
154+
Open Discord settings &gt; Advanced and enable
155+
<span className="font-medium"> Developer Mode</span>.
156+
</li>
157+
<li>
158+
Right‑click the user&apos;s name or avatar (or long‑press on
159+
mobile) and choose
160+
<span className="font-medium"> Copy User ID</span>.
161+
</li>
162+
<li>
163+
Paste that numeric ID here to verify you are talking to the
164+
correct account.
165+
</li>
166+
</ol>
167+
</div>
168+
</div>
169+
</div>
170+
)}
171+
</div>
172+
</main>
173+
);
174+
}

‎components/Navbar.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@ export default function Navbar() {
3838
>
3939
About
4040
</Link>
41+
<Link
42+
href="/verify"
43+
className="text-sm font-semibold transition-colors hover:text-[#347BB2]"
44+
>
45+
Verify
46+
</Link>
4147
</div>
4248
</div>
4349

@@ -89,6 +95,12 @@ export default function Navbar() {
8995
>
9096
About
9197
</Link>
98+
<Link
99+
href="/verify"
100+
className="text-sm font-semibold transition-colors hover:text-[#347BB2]"
101+
>
102+
Verify
103+
</Link>
92104
</div>
93105
<div className="flex flex-col gap-3">
94106
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">

‎data/verify-data.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export type VerifyPerson = {
2+
name: string;
3+
ids: string[];
4+
};
5+
6+
export const verifyPeople: VerifyPerson[] = [
7+
{
8+
name: "quiteboring",
9+
ids: ["1441859003708866601", "1367543367277219840"]
10+
},
11+
{
12+
name: "Twiston",
13+
ids: ["855798460593733652"]
14+
},
15+
{
16+
name: "oblongboot",
17+
ids: ["768481984242253904"]
18+
},
19+
{
20+
name: "EpsilonPhoenix",
21+
ids: ["899647076370092042"]
22+
},
23+
{
24+
name: "Duck",
25+
ids: ["578318043143340042"]
26+
},
27+
{
28+
name: "Hidrate",
29+
ids: ["923188049314189343"]
30+
},
31+
{
32+
name: "Osama",
33+
ids: ["1198974310040211528"]
34+
},
35+
{
36+
name: "pyro",
37+
ids: ["1382022366040686763", "753636591544565832"]
38+
},
39+
{
40+
name: "the Cobalt discord bot",
41+
ids: ["1441864552936636519"]
42+
}
43+
];

0 commit comments

Comments
 (0)