Login page for links editor
This commit is contained in:
parent
7389e555fe
commit
006f12c618
|
@ -0,0 +1,40 @@
|
||||||
|
import React, { useState, useContext, createContext } from "react";
|
||||||
|
|
||||||
|
export interface AuthContextState {
|
||||||
|
loggedIn: boolean;
|
||||||
|
loginFailed: boolean;
|
||||||
|
login: (pass?: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_STATE: AuthContextState = {
|
||||||
|
loggedIn: false,
|
||||||
|
loginFailed: false,
|
||||||
|
login: () => console.error("No parent AuthContext found!"),
|
||||||
|
};
|
||||||
|
|
||||||
|
const AuthContext: React.Context<AuthContextState> = createContext(
|
||||||
|
DEFAULT_STATE
|
||||||
|
);
|
||||||
|
|
||||||
|
const password = "bubbles";
|
||||||
|
|
||||||
|
export const AuthProvider: React.FC = (props) => {
|
||||||
|
const [loggedIn, setLoggedIn] = useState(false);
|
||||||
|
const [loginFailed, setLoginFailed] = useState(false);
|
||||||
|
|
||||||
|
function login(pass?: string): void {
|
||||||
|
if (pass === password) {
|
||||||
|
setLoggedIn(true);
|
||||||
|
setLoginFailed(false);
|
||||||
|
} else {
|
||||||
|
setLoggedIn(false);
|
||||||
|
setLoginFailed(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={{ loggedIn, login, loginFailed }} {...props} />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAuth = () => useContext(AuthContext);
|
|
@ -0,0 +1,51 @@
|
||||||
|
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 { login, loginFailed } = 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`;
|
||||||
|
|
||||||
|
function handleSubmit(e: React.SyntheticEvent): void {
|
||||||
|
e.preventDefault();
|
||||||
|
login(password);
|
||||||
|
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;
|
|
@ -0,0 +1,22 @@
|
||||||
|
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;
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from "react";
|
||||||
|
import Analytics from "components/Analytics/index";
|
||||||
|
|
||||||
|
const Editor: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Analytics />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Editor;
|
|
@ -0,0 +1,52 @@
|
||||||
|
import Head from "next/head";
|
||||||
|
import { GetStaticProps } from "next";
|
||||||
|
import React from "react";
|
||||||
|
import { AuthProvider, useAuth } from "components/Login/authcontext";
|
||||||
|
import LoginHead from "components/Login/loginhead";
|
||||||
|
import LoginBox from "components/Login/loginbox";
|
||||||
|
import Editor from "components/editor";
|
||||||
|
|
||||||
|
export const getStaticProps: GetStaticProps = async () => {
|
||||||
|
// TODO: Fetch links here
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: { data: null }, // will be passed to the page component as props
|
||||||
|
// Next.js will attempt to re-generate the page:
|
||||||
|
// - When a request comes in
|
||||||
|
// - At most once every second
|
||||||
|
revalidate: 1,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const LoginScreen: React.FC = () => {
|
||||||
|
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>
|
||||||
|
<LoginHead />
|
||||||
|
<div className="flex justify-center items-center px-10 py-8 bg-gray-50 border-2 border-gray-300 rounded-lg">
|
||||||
|
<LoginBox />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const LoginChecker: React.FC = () => {
|
||||||
|
const { loggedIn } = useAuth();
|
||||||
|
return loggedIn ? <Editor /> : <LoginScreen />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Login: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<LoginChecker />
|
||||||
|
</AuthProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Login;
|
|
@ -1,27 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { GetStaticProps } from "next";
|
|
||||||
import Analytics from "components/Analytics/index";
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async () => {
|
|
||||||
// TODO: Fetch links here
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: { data: null }, // will be passed to the page component as props
|
|
||||||
// Next.js will attempt to re-generate the page:
|
|
||||||
// - When a request comes in
|
|
||||||
// - At most once every second
|
|
||||||
revalidate: 1,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const Editor: React.FC = ({ data }: any) => {
|
|
||||||
console.log({ data });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Analytics />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Editor;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const Login: React.FC = () => {
|
|
||||||
return <div></div>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Login;
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 102 KiB |
|
@ -3,3 +3,10 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Karla";
|
||||||
|
src: local("Karla"),
|
||||||
|
url("/fonts/Karla-VariableFont_wght.ttf") format("truetype");
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: {
|
purge: {
|
||||||
content: [
|
content: [
|
||||||
|
@ -24,6 +25,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
|
sans: ["Karla", "Helvetica", "Ubuntu", "sans-serif"],
|
||||||
karla: ["Karla", "Verdana", "sans-serif"],
|
karla: ["Karla", "Verdana", "sans-serif"],
|
||||||
},
|
},
|
||||||
fontSize: {
|
fontSize: {
|
||||||
|
|
Loading…
Reference in New Issue