mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 00:52:50 +00:00
refactor login page to simplify identifier normalization and remove unused login methods
This commit is contained in:
Marshal
@@ -1,11 +1,7 @@
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { parsePhoneNumberFromString } from "libphonenumber-js";
|
||||
import {
|
||||
Eye,
|
||||
EyeOff,
|
||||
Mail,
|
||||
Smartphone,
|
||||
UserRound,
|
||||
ArrowUpRight,
|
||||
Globe,
|
||||
ChevronDown,
|
||||
@@ -14,65 +10,15 @@ import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useAuth } from "@/auth/useAuth";
|
||||
|
||||
type LoginMode = "email" | "phone" | "username";
|
||||
|
||||
const loginModes: Array<{
|
||||
value: LoginMode;
|
||||
label: string;
|
||||
icon: typeof Mail;
|
||||
placeholder: string;
|
||||
}> = [
|
||||
{
|
||||
value: "email",
|
||||
label: "Email",
|
||||
icon: Mail,
|
||||
placeholder: "name@company.com",
|
||||
},
|
||||
{
|
||||
value: "phone",
|
||||
label: "Phone",
|
||||
icon: Smartphone,
|
||||
placeholder: "09XXXXXXXX",
|
||||
},
|
||||
{
|
||||
value: "username",
|
||||
label: "Username",
|
||||
icon: UserRound,
|
||||
placeholder: "username",
|
||||
},
|
||||
];
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const usernamePattern = /^[a-zA-Z0-9._-]{3,32}$/;
|
||||
|
||||
const normalizeIdentifier = (mode: LoginMode, value: string) => {
|
||||
const trimmed = value.trim();
|
||||
|
||||
if (mode === "email") {
|
||||
if (!emailPattern.test(trimmed.toLowerCase())) {
|
||||
throw new Error("Enter a valid email address.");
|
||||
}
|
||||
|
||||
return trimmed.toLowerCase();
|
||||
/** Normalise Ethiopian local phone (09…/07…) to E.164; pass email through unchanged. */
|
||||
const normaliseIdentifier = (raw: string): string => {
|
||||
const v = raw.trim();
|
||||
const digits = v.replace(/\D/g, "");
|
||||
if (digits.length >= 9 && (v.startsWith("0") || v.startsWith("+251"))) {
|
||||
const local = digits.startsWith("251") ? digits.slice(3) : digits.replace(/^0/, "");
|
||||
return `+251${local}`;
|
||||
}
|
||||
|
||||
if (mode === "phone") {
|
||||
const parsed = parsePhoneNumberFromString(trimmed, "ET");
|
||||
|
||||
if (!parsed?.isValid()) {
|
||||
throw new Error("Enter a valid Ethiopian phone number.");
|
||||
}
|
||||
|
||||
return parsed.number;
|
||||
}
|
||||
|
||||
if (!usernamePattern.test(trimmed)) {
|
||||
throw new Error(
|
||||
"Username must be 3-32 characters and use letters, numbers, ., _, or -.",
|
||||
);
|
||||
}
|
||||
|
||||
return trimmed;
|
||||
return v.toLowerCase();
|
||||
};
|
||||
|
||||
const LOGIN_IMAGE = "/assets/login.png";
|
||||
@@ -214,7 +160,6 @@ const FormFooter = () => (
|
||||
const LoginPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const { login, verifyMfa } = useAuth();
|
||||
const [mode, setMode] = useState<LoginMode>("email");
|
||||
const [identifier, setIdentifier] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
@@ -224,15 +169,13 @@ const LoginPage = () => {
|
||||
const [normalizedIdentifier, setNormalizedIdentifier] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const currentMode = loginModes.find((item) => item.value === mode)!;
|
||||
|
||||
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const normalized = normalizeIdentifier(mode, identifier);
|
||||
const normalized = normaliseIdentifier(identifier);
|
||||
setNormalizedIdentifier(normalized);
|
||||
|
||||
const result = await login({ email: normalized, password });
|
||||
@@ -284,32 +227,14 @@ const LoginPage = () => {
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-gray-800">
|
||||
Sign in method
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(event) => setMode(event.target.value as LoginMode)}
|
||||
className={`${fieldClass} appearance-none pr-10`}
|
||||
>
|
||||
{loginModes.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-gray-800">
|
||||
{currentMode.label} <span className="text-red-500">*</span>
|
||||
Email or Phone <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={identifier}
|
||||
onChange={(event) => setIdentifier(event.target.value)}
|
||||
placeholder={currentMode.placeholder}
|
||||
placeholder="name@company.com or 09XXXXXXXX"
|
||||
autoComplete="username"
|
||||
className={fieldClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -50,8 +50,8 @@ export default function ETradeInfo({
|
||||
<Stack gap="md">
|
||||
<Group align="flex-start" grow>
|
||||
<TextInput
|
||||
label="TIN Number (10 digits)"
|
||||
placeholder="1234567890"
|
||||
label={<>TIN Number (10 digits) <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="0012345678"
|
||||
maxLength={10}
|
||||
error={error}
|
||||
{...register}
|
||||
|
||||
@@ -450,14 +450,15 @@ export default function CompanyProfileForm({
|
||||
});
|
||||
|
||||
// The business owner/manager pulled from eTrade — powers "Use owner as
|
||||
// manager" on the General Manager step. Null until a TIN lookup succeeds.
|
||||
// manager" on the General Manager step.
|
||||
const [etradeOwner, setEtradeOwner] = useState<{
|
||||
name: string;
|
||||
phone: string;
|
||||
email?: string;
|
||||
} | null>(null);
|
||||
|
||||
// Mirror the two "copy from previous person" checkboxes so they can be
|
||||
// re-toggled (re-checking re-pulls the latest values).
|
||||
// Mirror the three "copy from previous person" checkboxes.
|
||||
const [ownerIsGm, setOwnerIsGm] = useState(false);
|
||||
const [gmIsContact, setGmIsContact] = useState(false);
|
||||
const [contactIsPoa, setContactIsPoa] = useState(false);
|
||||
|
||||
@@ -507,15 +508,20 @@ export default function CompanyProfileForm({
|
||||
phone: toEthiopianE164(
|
||||
data.managerPhone || data.regularPhone || data.mobilePhone,
|
||||
),
|
||||
email: data.managerEmail || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
/** Fill the General Manager from the eTrade business owner. */
|
||||
const useOwnerAsManager = () => {
|
||||
if (!etradeOwner) return;
|
||||
const toggleOwnerAsGm = (checked: boolean) => {
|
||||
setOwnerIsGm(checked);
|
||||
if (!checked || !etradeOwner) return;
|
||||
const { first, last } = splitName(etradeOwner.name);
|
||||
setValue("generalManagerFirstName", first, { shouldValidate: true });
|
||||
setValue("generalManagerLastName", last, { shouldValidate: true });
|
||||
setValue("generalManagerEmail", etradeOwner.email ?? "", {
|
||||
shouldValidate: true,
|
||||
});
|
||||
setValue("generalManagerPhone", etradeOwner.phone ?? "", {
|
||||
shouldValidate: true,
|
||||
});
|
||||
@@ -702,13 +708,13 @@ export default function CompanyProfileForm({
|
||||
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="First Name"
|
||||
label={<>First Name <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Global"
|
||||
error={errors.companyFirstName?.message}
|
||||
{...register("companyFirstName")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Last Name"
|
||||
label={<>Last Name <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Logistics Ltd"
|
||||
error={errors.companyLastName?.message}
|
||||
{...register("companyLastName")}
|
||||
@@ -716,7 +722,7 @@ export default function CompanyProfileForm({
|
||||
</SimpleGrid>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Company Email"
|
||||
label={<>Company Email <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
type="email"
|
||||
placeholder="ops@company.com"
|
||||
error={errors.companyEmail?.message}
|
||||
@@ -730,21 +736,21 @@ export default function CompanyProfileForm({
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<TextInput
|
||||
label="Location"
|
||||
label={<>Location <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Addis Ababa, Ethiopia"
|
||||
error={errors.companyLocation?.message}
|
||||
{...register("companyLocation")}
|
||||
/>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="VAT Number"
|
||||
label={<>VAT Number <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="VAT-12345"
|
||||
maxLength={10}
|
||||
error={errors.vatNumber?.message}
|
||||
{...register("vatNumber")}
|
||||
/>
|
||||
<TextInput
|
||||
label="FAN Number (16 digits)"
|
||||
label={<>FAN Number (16 digits) <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="1234567890123456"
|
||||
maxLength={16}
|
||||
error={errors.fanNumber?.message}
|
||||
@@ -757,16 +763,21 @@ export default function CompanyProfileForm({
|
||||
<Text fw={600} size="sm" c="edr-text">
|
||||
Registration Details
|
||||
</Text>
|
||||
<Text size="xs" c="edr-muted">
|
||||
Auto-filled from eTrade — these fields cannot be edited.
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="License Number"
|
||||
placeholder="01/23/01/19786/2006"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.licenceNumber?.message}
|
||||
{...register("licenceNumber")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Status"
|
||||
placeholder="Not renewed for 2 years"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.statusDescription?.message}
|
||||
{...register("statusDescription")}
|
||||
/>
|
||||
@@ -774,13 +785,15 @@ export default function CompanyProfileForm({
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Date Registered"
|
||||
placeholder="12/17/2013"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.dateRegistered?.message}
|
||||
{...register("dateRegistered")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Renewal Date"
|
||||
placeholder="3/17/2016"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.renewalDate?.message}
|
||||
{...register("renewalDate")}
|
||||
/>
|
||||
@@ -788,13 +801,15 @@ export default function CompanyProfileForm({
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Renewed From"
|
||||
placeholder="3/17/2016"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.renewedFrom?.message}
|
||||
{...register("renewedFrom")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Renewed To"
|
||||
placeholder="7/7/2016"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.renewedTo?.message}
|
||||
{...register("renewedTo")}
|
||||
/>
|
||||
@@ -806,13 +821,15 @@ export default function CompanyProfileForm({
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Region"
|
||||
placeholder="Tigray"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.region?.message}
|
||||
{...register("region")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Zone"
|
||||
placeholder="EASTERN TIGRAY"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.zone?.message}
|
||||
{...register("zone")}
|
||||
/>
|
||||
@@ -820,13 +837,15 @@ export default function CompanyProfileForm({
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Woreda"
|
||||
placeholder="EROB"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.woreda?.message}
|
||||
{...register("woreda")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kebele"
|
||||
placeholder="ARAS"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.kebele?.message}
|
||||
{...register("kebele")}
|
||||
/>
|
||||
@@ -834,7 +853,8 @@ export default function CompanyProfileForm({
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="House No"
|
||||
placeholder="House Number"
|
||||
readOnly
|
||||
styles={{ input: { backgroundColor: "var(--mantine-color-gray-0)", cursor: "default" } }}
|
||||
error={errors.houseNo?.message}
|
||||
{...register("houseNo")}
|
||||
/>
|
||||
@@ -850,31 +870,25 @@ export default function CompanyProfileForm({
|
||||
|
||||
{step === "personnel" && (
|
||||
<>
|
||||
<Group justify="space-between" align="center">
|
||||
<Text fw={600} size="sm" c="edr-text">
|
||||
General Manager
|
||||
</Text>
|
||||
{etradeOwner && (
|
||||
<Button
|
||||
variant="light"
|
||||
color="edr-green"
|
||||
size="xs"
|
||||
leftSection={<UserCheck size={14} />}
|
||||
onClick={useOwnerAsManager}
|
||||
>
|
||||
Use owner as manager
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
<Text fw={600} size="sm" c="edr-text">
|
||||
General Manager
|
||||
</Text>
|
||||
<Checkbox
|
||||
color="edr-green"
|
||||
label="Use eTrade business owner as General Manager"
|
||||
checked={ownerIsGm}
|
||||
disabled={!etradeOwner}
|
||||
onChange={(e) => toggleOwnerAsGm(e.currentTarget.checked)}
|
||||
/>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="First Name"
|
||||
label={<>First Name <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Abebe"
|
||||
error={errors.generalManagerFirstName?.message}
|
||||
{...register("generalManagerFirstName")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Last Name"
|
||||
label={<>Last Name <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Bikila"
|
||||
error={errors.generalManagerLastName?.message}
|
||||
{...register("generalManagerLastName")}
|
||||
@@ -882,7 +896,7 @@ export default function CompanyProfileForm({
|
||||
</SimpleGrid>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Email"
|
||||
label={<>Email <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
type="email"
|
||||
placeholder="gm@company.com"
|
||||
error={errors.generalManagerEmail?.message}
|
||||
@@ -911,13 +925,13 @@ export default function CompanyProfileForm({
|
||||
/>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="First Name"
|
||||
label={<>First Name <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Jane"
|
||||
error={errors.contactPersonFirstName?.message}
|
||||
{...register("contactPersonFirstName")}
|
||||
/>
|
||||
<TextInput
|
||||
label="Last Name"
|
||||
label={<>Last Name <span style={{ color: "var(--mantine-color-red-6)" }}>*</span></>}
|
||||
placeholder="Smith"
|
||||
error={errors.contactPersonLastName?.message}
|
||||
{...register("contactPersonLastName")}
|
||||
|
||||
@@ -1,48 +1,39 @@
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { ChevronDown, Eye, EyeOff, Mail, Smartphone } from "lucide-react";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import RPNInput from "react-phone-number-input";
|
||||
import "react-phone-number-input/style.css";
|
||||
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import AuthShell, { fieldClass, primaryButtonClass } from "@/components/auth/AuthShell";
|
||||
import "@/components/phone-field.css";
|
||||
|
||||
const EDR_LOGO = "/assets/edr-logo.png";
|
||||
|
||||
type LoginMethod = "email" | "phone";
|
||||
|
||||
const loginMethods: Array<{
|
||||
value: LoginMethod;
|
||||
label: string;
|
||||
icon: typeof Mail;
|
||||
placeholder: string;
|
||||
}> = [
|
||||
{ value: "email", label: "Email", icon: Mail, placeholder: "name@company.com" },
|
||||
{ value: "phone", label: "Phone", icon: Smartphone, placeholder: "09XXXXXXXX" },
|
||||
];
|
||||
/** Normalise Ethiopian local phone (09…/07…) to E.164; pass email through unchanged. */
|
||||
function normaliseIdentifier(raw: string): string {
|
||||
const v = raw.trim();
|
||||
const digits = v.replace(/\D/g, "");
|
||||
if (digits.length >= 9 && (v.startsWith("0") || v.startsWith("+251"))) {
|
||||
const local = digits.startsWith("251") ? digits.slice(3) : digits.replace(/^0/, "");
|
||||
return `+251${local}`;
|
||||
}
|
||||
return v.toLowerCase();
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { login } = useAuth();
|
||||
const [method, setMethod] = useState<LoginMethod>("email");
|
||||
const [identifier, setIdentifier] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const currentMethod = loginMethods.find((item) => item.value === method)!;
|
||||
|
||||
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
// In phone mode the identifier is already a canonical E.164 string
|
||||
// (e.g. +251912345678) from the phone field; email mode passes through.
|
||||
const result = await login({ email: identifier, password });
|
||||
const result = await login({ email: normaliseIdentifier(identifier), password });
|
||||
if (result.success) {
|
||||
const from = (location.state as { from?: { pathname: string } } | null)?.from
|
||||
?.pathname;
|
||||
@@ -74,55 +65,19 @@ export default function LoginPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-gray-800">Sign in method</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={method}
|
||||
onChange={(event) => {
|
||||
setMethod(event.target.value as LoginMethod);
|
||||
setIdentifier("");
|
||||
}}
|
||||
disabled={loading}
|
||||
className={`${fieldClass} appearance-none pr-10`}
|
||||
>
|
||||
{loginMethods.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-gray-800">
|
||||
{currentMethod.label} <span className="text-red-500">*</span>
|
||||
Email or Phone <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{method === "phone" ? (
|
||||
<div className="edr-phone-wrapper">
|
||||
<RPNInput
|
||||
international
|
||||
defaultCountry="ET"
|
||||
countryCallingCodeEditable={false}
|
||||
addInternationalOption
|
||||
placeholder="912 345 678"
|
||||
disabled={loading}
|
||||
value={identifier || undefined}
|
||||
onChange={(v) => setIdentifier(v ?? "")}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
type="email"
|
||||
value={identifier}
|
||||
onChange={(event) => setIdentifier(event.target.value)}
|
||||
placeholder={currentMethod.placeholder}
|
||||
disabled={loading}
|
||||
className={fieldClass}
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
type="text"
|
||||
value={identifier}
|
||||
onChange={(event) => setIdentifier(event.target.value)}
|
||||
placeholder="name@company.com or 09XXXXXXXX"
|
||||
disabled={loading}
|
||||
autoComplete="username"
|
||||
className={fieldClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
|
||||
Reference in New Issue
Block a user