Steven Xu
2 years ago
parent
c17dff1792
commit
413a00259c
@ -0,0 +1,56 @@ |
||||
import React, { useState, useContext, createContext } from "react"; |
||||
|
||||
interface AuthState { |
||||
loggedIn: boolean; |
||||
login: (password: string) => Promise<boolean>; |
||||
logout: () => void; |
||||
headers?: HeadersInit; |
||||
} |
||||
|
||||
const AuthContext = createContext<AuthState>({ |
||||
loggedIn: false, |
||||
login: () => Promise.resolve(false), |
||||
logout: () => console.error("No parent AuthContext found!"), |
||||
}); |
||||
|
||||
export const AuthProvider: React.FC = ({ children }) => { |
||||
const [headers, setHeaders] = useState<HeadersInit | undefined>(); |
||||
|
||||
const logout = () => setHeaders(undefined); |
||||
|
||||
const login = async (password: string): Promise<boolean> => { |
||||
const username = process.env.NEXT_PUBLIC_EDITOR_USERNAME; |
||||
|
||||
if (!username) { |
||||
throw new Error( |
||||
"Missing NEXT_PUBLIC_EDITOR_USERNAME environment variable" |
||||
); |
||||
} |
||||
|
||||
const newHeaders = { |
||||
Authorization: `CustomBasic ${btoa(`${username}:${password}`)}`, |
||||
}; |
||||
|
||||
const res = await fetch("/api/editor/links", { headers: newHeaders }); |
||||
|
||||
if (res.status === 200) { |
||||
setHeaders(newHeaders); |
||||
return true; |
||||
} else { |
||||
logout(); |
||||
return false; |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<AuthContext.Provider |
||||
value={{ loggedIn: !!headers, login, logout, headers }} |
||||
> |
||||
{children} |
||||
</AuthContext.Provider> |
||||
); |
||||
}; |
||||
|
||||
export function useAuth(): AuthState { |
||||
return useContext(AuthContext); |
||||
} |
||||
@ -1,71 +0,0 @@ |
||||
import React, { useState, useContext, createContext } from "react"; |
||||
|
||||
interface LoggedInState { |
||||
loggedIn: true; |
||||
headers: HeadersInit; |
||||
logout(): void; |
||||
} |
||||
|
||||
interface LoggedOutState { |
||||
loggedIn: false; |
||||
login(password: string): Promise<boolean>; |
||||
} |
||||
|
||||
export type AuthState = LoggedInState | LoggedOutState; |
||||
|
||||
const AuthContext = createContext({ |
||||
loggedIn: false, |
||||
login: () => { |
||||
throw new Error("No parent AuthContext found!"); |
||||
}, |
||||
} as AuthState); |
||||
|
||||
export const AuthProvider: React.FC = (props) => { |
||||
const [loggedIn, setLoggedIn] = useState(false); |
||||
const [headers, setHeaders] = useState<HeadersInit | undefined>(); |
||||
|
||||
function logout() { |
||||
setLoggedIn(false); |
||||
setHeaders(undefined); |
||||
} |
||||
|
||||
async function login(password: string): Promise<boolean> { |
||||
const username = process.env.NEXT_PUBLIC_EDITOR_USERNAME; |
||||
|
||||
if (!username) { |
||||
throw new Error( |
||||
"Missing NEXT_PUBLIC_EDITOR_USERNAME environment variable" |
||||
); |
||||
} |
||||
|
||||
const newHeaders = { |
||||
Authorization: `CustomBasic ${btoa(`${username}:${password}`)}`, |
||||
}; |
||||
|
||||
const res = await fetch("/api/editor/links", { headers: newHeaders }); |
||||
|
||||
if (res.status === 200) { |
||||
setLoggedIn(true); |
||||
setHeaders(newHeaders); |
||||
return true; |
||||
} else { |
||||
logout(); |
||||
return false; |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<AuthContext.Provider |
||||
value={ |
||||
loggedIn && headers != null |
||||
? { loggedIn, headers, logout } |
||||
: { loggedIn: false, login } |
||||
} |
||||
{...props} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
export function useAuth(): AuthState { |
||||
return useContext(AuthContext); |
||||
} |
||||
@ -0,0 +1,91 @@ |
||||
import React, { useState } from "react"; |
||||
import { useAuth } from "components/Login/AuthContext"; |
||||
import Image from "next/image"; |
||||
import Head from "next/head"; |
||||
|
||||
const LoginBox: React.FC = () => { |
||||
const [password, setPassword] = useState(""); |
||||
const [focused, setFocused] = useState(false); |
||||
const [loginFailed, setLoginFailed] = useState(false); |
||||
const { loggedIn, login } = useAuth(); |
||||
|
||||
const passwordLabelClassName = `absolute inset-y-0 left-0 px-4 font-sans text-gray-600 ${ |
||||
focused || password |
||||
? "transform scale-75 -translate-y-5 -translate-x-2" |
||||
: "" |
||||
} transition-transform pointer-events-none`;
|
||||
|
||||
const handleSubmit = async (e: React.SyntheticEvent) => { |
||||
e.preventDefault(); |
||||
|
||||
if (!loggedIn) { |
||||
const loginSuccessful = await login(password); |
||||
|
||||
if (!loginSuccessful) { |
||||
setLoginFailed(true); |
||||
setPassword(""); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div className="fixed h-screen w-full overflow-auto bg-gray-100"> |
||||
<div className="m-auto h-full flex justify-center items-center"> |
||||
<div className="container m-auto h-auto flex flex-col justify-center items-center p-10 space-y-20"> |
||||
<Head> |
||||
<title>Login</title> |
||||
</Head> |
||||
<div className="flex flex-col justify-center items-center space-y-10"> |
||||
<div className="flex flex-row justify-center items-center space-x-5"> |
||||
<Image |
||||
src="/images/csc-logo-fb-trans.png" |
||||
height={80} |
||||
width={80} |
||||
alt="CSC Logo" |
||||
/> |
||||
<h1 className="text-4xl font-sans font-bold text-gray-900"> |
||||
linklist |
||||
</h1> |
||||
</div> |
||||
<h2 className="text-xl font-sans font-semibold text-gray-900 text-center"> |
||||
Log in to continue to your Linklist admin |
||||
</h2> |
||||
</div> |
||||
<div className="flex justify-center items-center px-10 py-8 bg-gray-50 border-2 border-gray-300 rounded-lg"> |
||||
<div className="space-y-4"> |
||||
{loginFailed ? ( |
||||
<div className="text-red-600">Invalid credentials.</div> |
||||
) : null} |
||||
<form onSubmit={handleSubmit} className="space-y-6"> |
||||
<div> |
||||
<label htmlFor="password" className="relative"> |
||||
<span className={passwordLabelClassName}>Password</span> |
||||
</label> |
||||
<input |
||||
name="password" |
||||
type="password" |
||||
value={password} |
||||
onFocus={() => setFocused(true)} |
||||
onBlur={() => { |
||||
setFocused(false); |
||||
setLoginFailed(false); |
||||
}} |
||||
onChange={(event) => setPassword(event.target.value)} |
||||
className="bg-transparent p-4 border border-gray-300 leading-snug focus:outline-none focus:border-gray-500 rounded" |
||||
/> |
||||
</div> |
||||
<input |
||||
type="submit" |
||||
value="Log In" |
||||
className="w-full px-4 py-2 font-sans font-semibold text-white bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 rounded-lg" |
||||
/> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default LoginBox; |
||||
@ -1,59 +0,0 @@ |
||||
import React, { useState } from "react"; |
||||
import { useAuth } from "components/Login/authcontext"; |
||||
|
||||
const LoginBox: React.FC = () => { |
||||
const [password, setPassword] = useState(""); |
||||
const [focused, setFocused] = useState(false); |
||||
const [loginFailed, setLoginFailed] = useState(false); |
||||
const auth = useAuth(); |
||||
|
||||
const passwordLabelClassName = `absolute inset-y-0 left-0 px-4 font-sans text-gray-600 ${ |
||||
focused || password |
||||
? "transform scale-75 -translate-y-5 -translate-x-2" |
||||
: "" |
||||
} transition-transform pointer-events-none`;
|
||||
|
||||
async function handleSubmit(e: React.SyntheticEvent) { |
||||
e.preventDefault(); |
||||
|
||||
if (!auth.loggedIn) { |
||||
const loginSuccessful = await auth.login(password); |
||||
|
||||
if (!loginSuccessful) { |
||||
setLoginFailed(true); |
||||
setPassword(""); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div className="space-y-4"> |
||||
{loginFailed ? ( |
||||
<div className="text-red-600">Invalid credentials.</div> |
||||
) : null} |
||||
<form onSubmit={handleSubmit} className="space-y-6"> |
||||
<div> |
||||
<label htmlFor="password" className="relative"> |
||||
<span className={passwordLabelClassName}>Password</span> |
||||
</label> |
||||
<input |
||||
name="password" |
||||
type="password" |
||||
value={password} |
||||
onFocus={() => setFocused(true)} |
||||
onBlur={() => setFocused(false)} |
||||
onChange={(event) => setPassword(event.target.value)} |
||||
className="bg-transparent p-4 border border-gray-300 leading-snug focus:outline-none focus:border-gray-500 rounded" |
||||
/> |
||||
</div> |
||||
<input |
||||
type="submit" |
||||
value="Log In" |
||||
className="w-full px-4 py-2 font-sans font-semibold text-white bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 rounded-lg" |
||||
/> |
||||
</form> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default LoginBox; |
||||
@ -1,22 +0,0 @@ |
||||
import Image from "next/image"; |
||||
|
||||
const LoginHead: React.FC = () => { |
||||
return ( |
||||
<div className="flex flex-col justify-center items-center space-y-10"> |
||||
<div className="flex flex-row justify-center items-center space-x-5"> |
||||
<Image |
||||
src="/images/csc-logo-fb-trans.png" |
||||
height={80} |
||||
width={80} |
||||
alt="CSC Logo" |
||||
/> |
||||
<h1 className="text-4xl font-sans font-bold text-gray-900">linklist</h1> |
||||
</div> |
||||
<h2 className="text-xl font-sans font-semibold text-gray-900 text-center"> |
||||
Log in to continue to your Linklist admin |
||||
</h2> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default LoginHead; |
||||
Loading…
Reference in new issue