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 components;
|
||||
@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 = {
|
||||
purge: {
|
||||
content: [
|
||||
|
@ -24,6 +25,7 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Karla", "Helvetica", "Ubuntu", "sans-serif"],
|
||||
karla: ["Karla", "Verdana", "sans-serif"],
|
||||
},
|
||||
fontSize: {
|
||||
|
|
Loading…
Reference in New Issue