updated variables names to make a bit more sense :) #2
34
src/App.tsx
34
src/App.tsx
@ -17,42 +17,38 @@ const uri =
|
|||||||
"https://login.microsoft.com/{tenant}/.well-known/openid-configuration";
|
"https://login.microsoft.com/{tenant}/.well-known/openid-configuration";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [domain, setDomain] = useState<string>(location.hash.replace("#", ""));
|
const [input, setInput] = useState<string>(location.hash.replace("#", ""));
|
||||||
const [tenantId, setTenantId] = useState<string | null>(null);
|
const [tenantId, setTenantId] = useState<string | null>(null);
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
// const location = useLocation();
|
const [domain, setDomain] = useDebounce<string>(input, 500);
|
||||||
const [debouncedDomain, setDebouncedDomain] = useDebounce<string>(
|
|
||||||
domain,
|
|
||||||
500
|
|
||||||
);
|
|
||||||
const onChange = async (event: React.ChangeEvent<HTMLInputElement>) =>
|
const onChange = async (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
setDomain(event.target.value);
|
setInput(event.target.value);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
location.hash = debouncedDomain;
|
location.hash = domain;
|
||||||
if (
|
if (
|
||||||
(!debouncedDomain.includes("@") && !debouncedDomain.includes(".")) ||
|
(!domain.includes("@") && !domain.includes(".")) ||
|
||||||
debouncedDomain.includes(" ") ||
|
domain.includes(" ") ||
|
||||||
debouncedDomain.endsWith(".") ||
|
domain.endsWith(".") ||
|
||||||
debouncedDomain.length < 3 ||
|
domain.length < 3 ||
|
||||||
debouncedDomain.length > 254
|
domain.length > 254
|
||||||
) {
|
) {
|
||||||
setTenantId(null);
|
setTenantId(null);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setError("Please enter a valid email address or domain.");
|
setError("Please enter a valid email address or domain.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (debouncedDomain.includes("@")) {
|
if (domain.includes("@")) {
|
||||||
const parts = debouncedDomain.split("@");
|
const parts = domain.split("@");
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setDebouncedDomain(parts[parts.length - 1]);
|
setDomain(parts[parts.length - 1]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
(async function () {
|
(async function () {
|
||||||
const response = await fetch(uri.replace("{tenant}", debouncedDomain));
|
const response = await fetch(uri.replace("{tenant}", domain));
|
||||||
const body = await response.json();
|
const body = await response.json();
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
setTenantId(null);
|
setTenantId(null);
|
||||||
@ -64,7 +60,7 @@ function App() {
|
|||||||
setTenantId(myTenantId);
|
setTenantId(myTenantId);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
})();
|
})();
|
||||||
}, [debouncedDomain, setDebouncedDomain]);
|
}, [domain, setDomain]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -112,7 +108,7 @@ function App() {
|
|||||||
<Input
|
<Input
|
||||||
placeholder="Enter your email address or domain"
|
placeholder="Enter your email address or domain"
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
value={domain}
|
value={input}
|
||||||
/>
|
/>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user