basic next.js application using nextui
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
parent
d61d3118a8
commit
d966e9a909
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
|
||||||
|
import { Providers } from "./providers";
|
||||||
|
|
||||||
|
import "@styles/global.scss";
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className="dark">
|
||||||
|
<body>
|
||||||
|
<Providers>{children}</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: {
|
||||||
|
default: "Portfolio",
|
||||||
|
template: "%s | Portfolio"
|
||||||
|
},
|
||||||
|
description: "Guus van Meerveld's portfolio",
|
||||||
|
applicationName: "Portfolio",
|
||||||
|
manifest: "/manifest.json"
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Button } from "@nextui-org/react";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button color="primary">Click me</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { NextUIProvider } from "@nextui-org/react";
|
||||||
|
|
||||||
|
export function Providers({ children }: { children: React.ReactNode }) {
|
||||||
|
return <NextUIProvider>{children}</NextUIProvider>;
|
||||||
|
}
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import styles from "./emptyPage.module.scss";
|
|
||||||
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
const EmptyPage: FC = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<div className={styles.body}>
|
|
||||||
<div className="container">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmptyPage;
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
import Footer from "@components/Footer";
|
|
||||||
import ThemeChanger from "@components/ThemeChanger";
|
|
||||||
|
|
||||||
const Layout: FC = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ThemeChanger />
|
|
||||||
{children}
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Layout;
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
import Link from "next/link";
|
|
||||||
import z from "zod";
|
|
||||||
|
|
||||||
import styles from "./linkComponent.module.scss";
|
|
||||||
|
|
||||||
import { FC, useCallback, useState } from "react";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { Link as LinkType } from "@prisma/client";
|
|
||||||
|
|
||||||
import { LinkId } from "@models/link";
|
|
||||||
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
import useUser from "@utils/hooks/useUser";
|
|
||||||
import multipleClassNames from "@utils/multipleClassNames";
|
|
||||||
|
|
||||||
const LinkComponent: FC<{ link: LinkType }> = ({ link }) => {
|
|
||||||
const user = useUser();
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [deleted, setDeleted] = useState(false);
|
|
||||||
|
|
||||||
const deleteLink = useCallback(async (id) => {
|
|
||||||
const parseUserInputResult = LinkId.safeParse(id);
|
|
||||||
|
|
||||||
if (!parseUserInputResult.success) {
|
|
||||||
setError(parseUserInputResult.error.message);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await axios
|
|
||||||
.delete("/api/link/delete", { params: { id } })
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
setError(JSON.stringify(response.error));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setDeleted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (deleted) return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={multipleClassNames("bg-gray", "s-rounded", styles.body)}>
|
|
||||||
<div className="container">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="col col-11">
|
|
||||||
<Link href={link.remoteAddress}>
|
|
||||||
<a>{link.location}</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
{user !== null && (
|
|
||||||
<div className="col col-1">
|
|
||||||
<Link href={`/link/edit/${link.id}`}>
|
|
||||||
<a className="mr-2">edit</a>
|
|
||||||
</Link>
|
|
||||||
<a className={styles.delete} onClick={() => deleteLink(link.id)}>
|
|
||||||
delete
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LinkComponent;
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import { FC, FormEvent, useCallback, useState } from "react";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { LoginCredentials } from "@models/login";
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { parseUserInputError } from "@utils/errors";
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
|
|
||||||
const LoginForm: FC = () => {
|
|
||||||
const [username, setUsername] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [rememberMe, setRememberMe] = useState(false);
|
|
||||||
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const login = useCallback(
|
|
||||||
async (e: FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const parseUserInputResult = LoginCredentials.safeParse({
|
|
||||||
username,
|
|
||||||
password,
|
|
||||||
rememberMe
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!parseUserInputResult.success) {
|
|
||||||
setError(parseUserInputError(parseUserInputResult.error.message));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response: Response = await axios
|
|
||||||
.post("/api/login", parseUserInputResult.data)
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
router.push("/blog");
|
|
||||||
} else {
|
|
||||||
setError(JSON.stringify(response.error));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[username, password, rememberMe, router]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={login}>
|
|
||||||
<div className="form-group">
|
|
||||||
<label className="form-label" htmlFor="email">
|
|
||||||
Email address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
name="username"
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
placeholder="mail@example.com"
|
|
||||||
/>
|
|
||||||
<label className="form-label" htmlFor="password">
|
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
placeholder="Password"
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
minLength={8}
|
|
||||||
maxLength={128}
|
|
||||||
name="password"
|
|
||||||
type="password"
|
|
||||||
id="password"
|
|
||||||
/>
|
|
||||||
<label className="form-checkbox">
|
|
||||||
<input
|
|
||||||
checked={rememberMe}
|
|
||||||
onChange={() => setRememberMe((state) => !state)}
|
|
||||||
name="rememberMe"
|
|
||||||
type="checkbox"
|
|
||||||
/>
|
|
||||||
<i className="form-icon" /> Remember me
|
|
||||||
</label>
|
|
||||||
{error !== null && (
|
|
||||||
<div className="toast toast-error mb-2">
|
|
||||||
<button
|
|
||||||
className="btn btn-clear float-right"
|
|
||||||
onClick={() => setError(null)}
|
|
||||||
/>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<input className="btn btn-primary" type="submit" value="Login" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LoginForm;
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
import styles from "./post.module.scss";
|
|
||||||
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
import { Post, User } from "@prisma/client";
|
|
||||||
|
|
||||||
import multipleClassNames from "@utils/multipleClassNames";
|
|
||||||
|
|
||||||
const PostsPage: FC<{
|
|
||||||
post: Post & {
|
|
||||||
author: User;
|
|
||||||
};
|
|
||||||
}> = ({ post }) => {
|
|
||||||
return (
|
|
||||||
<div className="columns mt-2">
|
|
||||||
<div
|
|
||||||
className={multipleClassNames(
|
|
||||||
"column col-4 col-md-12 col-ml-auto bg-gray",
|
|
||||||
styles.body
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<h3>{post.title}</h3>
|
|
||||||
|
|
||||||
{post.tags.map((tag) => (
|
|
||||||
<span key={tag} className="chip">
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{post.content && (
|
|
||||||
<p className="mt-2 mb-0">
|
|
||||||
{post.content?.length > 300
|
|
||||||
? post.content.slice(0, 300)
|
|
||||||
: post.content}{" "}
|
|
||||||
<Link href={`/blog/${post.id}`}>Continue reading</Link>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={multipleClassNames(
|
|
||||||
"column col-4 col-md-12 col-mr-auto bg-gray",
|
|
||||||
styles.body,
|
|
||||||
styles.info
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<h5>Posted on {new Date(post.createdAt).toLocaleDateString()}</h5>
|
|
||||||
<h6>By {post.author.name}</h6>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PostsPage;
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import { FC, FormEvent, useCallback, useState } from "react";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
import { SignupCredentials } from "@models/signup";
|
|
||||||
|
|
||||||
import { parseUserInputError } from "@utils/errors";
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
|
|
||||||
const SignupForm: FC = () => {
|
|
||||||
const [email, setEmail] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [username, setUsername] = useState("");
|
|
||||||
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const signup = useCallback(
|
|
||||||
async (e: FormEvent): Promise<void> => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const parseUserInputResult = SignupCredentials.safeParse({
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
name: username
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!parseUserInputResult.success) {
|
|
||||||
setError(parseUserInputError(parseUserInputResult.error.message));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response: Response = await axios
|
|
||||||
.post("/api/signup", parseUserInputResult.data)
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
router.push("/blog");
|
|
||||||
} else {
|
|
||||||
setError(JSON.stringify(response.error));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[email, password, username, router]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={signup}>
|
|
||||||
<div className="form-group">
|
|
||||||
<label className="form-label" htmlFor="email">
|
|
||||||
Email address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
name="email"
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
placeholder="mail@example.com"
|
|
||||||
/>
|
|
||||||
<label className="form-label" htmlFor="password">
|
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
placeholder="Password"
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
minLength={8}
|
|
||||||
maxLength={128}
|
|
||||||
name="password"
|
|
||||||
type="password"
|
|
||||||
id="password"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<label className="form-label" htmlFor="password">
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
placeholder="Full name"
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
maxLength={32}
|
|
||||||
name="name"
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{error !== null && (
|
|
||||||
<div className="toast toast-error mt-2">
|
|
||||||
<button
|
|
||||||
className="btn btn-clear float-right"
|
|
||||||
onClick={() => setError(null)}
|
|
||||||
/>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<input className="btn btn-primary mt-2" type="submit" value="Signup" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SignupForm;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
const Tags: FC<{ tags: string[] }> = ({ tags }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{tags.map((tag) => (
|
|
||||||
<span key={tag} className="chip">
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Tags;
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { useTheme } from "next-themes";
|
|
||||||
|
|
||||||
import styles from "./themeChanger.module.scss";
|
|
||||||
|
|
||||||
import { FC, useEffect, useState } from "react";
|
|
||||||
|
|
||||||
const ThemeChanger: FC = () => {
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
const { theme, setTheme } = useTheme();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!mounted) return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
||||||
<a
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
className={styles.main}
|
|
||||||
onClick={() => setTheme(theme == "light" ? "dark" : "light")}
|
|
||||||
>
|
|
||||||
{theme}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ThemeChanger;
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
import Image from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
import styles from "./user.module.scss";
|
|
||||||
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
import Owner from "@models/owner";
|
|
||||||
|
|
||||||
import multipleClassNames from "@utils/multipleClassNames";
|
|
||||||
|
|
||||||
const User: FC<{ owner: Owner }> = ({ owner }) => {
|
|
||||||
return (
|
|
||||||
<div className={styles.main}>
|
|
||||||
<div className="container">
|
|
||||||
<div className="columns">
|
|
||||||
<div
|
|
||||||
className={multipleClassNames(
|
|
||||||
"column",
|
|
||||||
"col-4",
|
|
||||||
"col-mx-auto",
|
|
||||||
styles.avatarCol
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={styles.avatarContainer}>
|
|
||||||
<Image
|
|
||||||
src={owner.avatar ?? ""}
|
|
||||||
className={styles.avatar}
|
|
||||||
width={256}
|
|
||||||
height={256}
|
|
||||||
alt={`${owner.name}'s avatar`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="column col-8 col-md-12 col-mx-auto">
|
|
||||||
<h1>{owner.fullName}</h1>
|
|
||||||
|
|
||||||
<h3>{owner.description}</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<Link
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
href={owner.contact.git}
|
|
||||||
className="btn btn-primary mr-2"
|
|
||||||
>
|
|
||||||
Git
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
href={owner.contact.linkedin}
|
|
||||||
className="btn btn-primary mr-2"
|
|
||||||
>
|
|
||||||
Git
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link
|
|
||||||
href={`mailto:${owner.contact.email}`}
|
|
||||||
className="btn btn-primary"
|
|
||||||
>
|
|
||||||
Contact
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default User;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.body {
|
|
||||||
padding: 10rem 0;
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
$margin: 1rem;
|
|
||||||
|
|
||||||
.main {
|
|
||||||
margin-top: $margin;
|
|
||||||
margin-bottom: $margin;
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
.body {
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
.body {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
.card {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
.main {
|
|
||||||
position: absolute;
|
|
||||||
top: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
.main {
|
|
||||||
padding-top: 10rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatarContainer {
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatarCol {
|
|
||||||
display: flex;
|
|
||||||
justify-content: right;
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
import { OwnerModel } from "./owner";
|
|
||||||
|
|
||||||
export const LandingModel = z.object({
|
|
||||||
owner: OwnerModel
|
|
||||||
});
|
|
||||||
|
|
||||||
export type Landing = z.infer<typeof LandingModel>;
|
|
||||||
|
|
||||||
export default Landing;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
export const LinkId = z.number().int().positive();
|
|
||||||
|
|
||||||
export const LinkIdFromString = z.preprocess(
|
|
||||||
(a) => parseInt(z.string().parse(a)),
|
|
||||||
LinkId
|
|
||||||
);
|
|
||||||
|
|
||||||
const Link = z.object({
|
|
||||||
remoteAddress: z.string().url(),
|
|
||||||
location: z.string()
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Link;
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
export const LoginCredentials = z.object({
|
|
||||||
username: z.string().email(),
|
|
||||||
password: z.string().min(8).max(128),
|
|
||||||
rememberMe: z.boolean()
|
|
||||||
});
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
export const OwnerModel = z.object({
|
|
||||||
fullName: z.string(),
|
|
||||||
name: z.string(),
|
|
||||||
description: z.string(),
|
|
||||||
avatar: z.string().optional(),
|
|
||||||
contact: z.object({
|
|
||||||
email: z.string().email(),
|
|
||||||
linkedin: z.string().url(),
|
|
||||||
git: z.string().url()
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
export type Owner = z.infer<typeof OwnerModel>;
|
|
||||||
|
|
||||||
export default Owner;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
export const Post = z.object({
|
|
||||||
title: z.string().trim(),
|
|
||||||
content: z.string().min(100).trim(),
|
|
||||||
tags: z.string().trim(),
|
|
||||||
publish: z.boolean()
|
|
||||||
});
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
interface Error {
|
|
||||||
ok: false;
|
|
||||||
error?: unknown;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ErrorModel: z.ZodType<Error> = z.object({
|
|
||||||
ok: z.literal(false),
|
|
||||||
error: z.unknown()
|
|
||||||
});
|
|
||||||
|
|
||||||
interface Ok {
|
|
||||||
ok: true;
|
|
||||||
data?: unknown;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const OkModel: z.ZodType<Ok> = z.object({
|
|
||||||
ok: z.literal(true),
|
|
||||||
data: z.unknown()
|
|
||||||
});
|
|
||||||
|
|
||||||
export type Response = Ok | Error;
|
|
||||||
|
|
||||||
const ResponseModel: z.ZodType<Response> = ErrorModel.or(OkModel);
|
|
||||||
|
|
||||||
export default ResponseModel;
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
export const SignupCredentials = z.object({
|
|
||||||
email: z.string().email(),
|
|
||||||
password: z.string().min(8).max(128),
|
|
||||||
name: z.string().max(32)
|
|
||||||
});
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
import { SignupCredentials } from "./signup";
|
|
||||||
|
|
||||||
export const User = SignupCredentials.extend({
|
|
||||||
id: z.number(),
|
|
||||||
admin: z.boolean()
|
|
||||||
});
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import type { DefaultSeoProps } from "next-seo";
|
|
||||||
|
|
||||||
const SEO: DefaultSeoProps = {
|
|
||||||
titleTemplate: "%s | Guus van Meerveld",
|
|
||||||
defaultTitle: "Guus van Meerveld",
|
|
||||||
description: "Guus van Meerveld's portfolio"
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SEO;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
.main {
|
|
||||||
height: 100vh;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { NextPage } from "next";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import styles from "./404.module.scss";
|
|
||||||
|
|
||||||
import multipleClassNames from "@utils/multipleClassNames";
|
|
||||||
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
|
|
||||||
const NotFound: NextPage = () => {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<div className={multipleClassNames("empty", styles.main)}>
|
|
||||||
<div>
|
|
||||||
<div className="empty-icon">
|
|
||||||
<i className="icon icon-stop"></i>
|
|
||||||
</div>
|
|
||||||
<p className="empty-title h5">Page not found</p>
|
|
||||||
<p className="empty-subtitle">
|
|
||||||
The page has either been deleted or moved
|
|
||||||
</p>
|
|
||||||
<div className="empty-action">
|
|
||||||
<button onClick={() => router.back()} className="btn btn-primary">
|
|
||||||
Go back
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NotFound;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
||||||
import { DefaultSeo } from "next-seo";
|
|
||||||
import { ThemeProvider } from "next-themes";
|
|
||||||
import type { AppProps } from "next/app";
|
|
||||||
|
|
||||||
import SEO from "../next-seo.config";
|
|
||||||
|
|
||||||
import "@styles/globals.scss";
|
|
||||||
|
|
||||||
const queryClient = new QueryClient({
|
|
||||||
defaultOptions: { queries: { refetchOnWindowFocus: false } }
|
|
||||||
});
|
|
||||||
|
|
||||||
const App = ({ Component, pageProps }: AppProps): JSX.Element => (
|
|
||||||
<>
|
|
||||||
<DefaultSeo {...SEO} />
|
|
||||||
<ThemeProvider>
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<Component {...pageProps} />
|
|
||||||
</QueryClientProvider>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.body {
|
|
||||||
padding: 10rem 0;
|
|
||||||
}
|
|
||||||
@ -1,118 +0,0 @@
|
|||||||
import { NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
|
|
||||||
import styles from "./admin.module.scss";
|
|
||||||
|
|
||||||
import { Post, User } from "@prisma/client";
|
|
||||||
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
import { withSessionSsr } from "@utils/session";
|
|
||||||
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
|
|
||||||
const AdminPage: NextPage<{
|
|
||||||
user: User;
|
|
||||||
users: User[];
|
|
||||||
posts: (Post & { author: User })[];
|
|
||||||
}> = ({ user, users, posts }) => {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="Admin" />
|
|
||||||
<div className={styles.body}>
|
|
||||||
<div className="container">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="col col-8 col-mx-auto">
|
|
||||||
<h3>Welcome {user.name}</h3>
|
|
||||||
</div>
|
|
||||||
<div className="col col-8 col-md-12 col-mx-auto py-2">
|
|
||||||
<h4>Users</h4>
|
|
||||||
<table className="table table-striped table-hover mb-2">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>id</th>
|
|
||||||
<th>name</th>
|
|
||||||
<th>email</th>
|
|
||||||
<th>admin</th>
|
|
||||||
<th>postCount</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{users.map((user, i) => (
|
|
||||||
<tr key={user.id} className={i % 2 === 0 ? "active" : ""}>
|
|
||||||
<td>{user.id}</td>
|
|
||||||
<td>{user.name}</td>
|
|
||||||
<td>{user.email}</td>
|
|
||||||
<td>{user.admin ? "true" : "false"}</td>
|
|
||||||
<td>0</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div className="col col-8 col-md-12 col-mx-auto">
|
|
||||||
<h4>Posts</h4>
|
|
||||||
<table className="table table-striped table-hover">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>id</th>
|
|
||||||
<th>title</th>
|
|
||||||
<th>content</th>
|
|
||||||
<th>published</th>
|
|
||||||
<th>createdAt</th>
|
|
||||||
<th>tags</th>
|
|
||||||
<th>author</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{posts.map((post, i) => (
|
|
||||||
<tr key={post.id} className={i % 2 === 0 ? "active" : ""}>
|
|
||||||
<td>{post.id}</td>
|
|
||||||
<td>{post.title}</td>
|
|
||||||
<td>{post.content}</td>
|
|
||||||
<td>{post.published ? "true" : "false"}</td>
|
|
||||||
<td>{new Date(post.createdAt).toLocaleString()}</td>
|
|
||||||
<td>{post.tags}</td>
|
|
||||||
<td>{post.author.name}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getServerSideProps = withSessionSsr(async ({ req }) => {
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined || !user.admin) return { notFound: true };
|
|
||||||
|
|
||||||
const posts = await prisma.post.findMany({
|
|
||||||
orderBy: { createdAt: "desc" },
|
|
||||||
take: 5,
|
|
||||||
include: { author: true }
|
|
||||||
});
|
|
||||||
|
|
||||||
const users = await prisma.user.findMany({
|
|
||||||
orderBy: { id: "desc" },
|
|
||||||
take: 5
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
user,
|
|
||||||
users,
|
|
||||||
posts: posts.map((post) => ({
|
|
||||||
...post,
|
|
||||||
createdAt: post.createdAt.getTime(),
|
|
||||||
tags: post.tags.join(", "),
|
|
||||||
content: post.content?.slice(0, 100).concat("...")
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
export default AdminPage;
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import { Post } from "@models/post";
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { methodNotAllowed, unauthorized } from "@utils/errors";
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handle: NextApiHandler<Response> = async (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() != "POST") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const postData = Post.safeParse(req.body);
|
|
||||||
|
|
||||||
if (!postData.success) {
|
|
||||||
res.status(403).json({ ok: false, error: postData.error });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { publish, ...data } = postData.data;
|
|
||||||
|
|
||||||
await prisma.user
|
|
||||||
.update({
|
|
||||||
where: { id: user.id },
|
|
||||||
data: {
|
|
||||||
posts: {
|
|
||||||
create: {
|
|
||||||
...data,
|
|
||||||
published: publish,
|
|
||||||
tags: data.tags.split(" ")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(() => res.json({ ok: true, data: "Successfully created new post" }))
|
|
||||||
.catch((error) => res.status(500).json({ ok: false, error }));
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handle);
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
import { NextApiHandler } from "next";
|
|
||||||
import z from "zod";
|
|
||||||
|
|
||||||
import { LinkIdFromString } from "@models/link";
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { methodNotAllowed, unauthorized } from "@utils/errors";
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handler: NextApiHandler<Response> = async (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() !== "DELETE") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsePostDataResult = z
|
|
||||||
.object({
|
|
||||||
id: LinkIdFromString
|
|
||||||
})
|
|
||||||
.safeParse(req.query);
|
|
||||||
|
|
||||||
if (!parsePostDataResult.success) {
|
|
||||||
res
|
|
||||||
.status(400)
|
|
||||||
.json({ ok: false, error: parsePostDataResult.error.message });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const link = await prisma.link.findUnique({
|
|
||||||
where: { id: parsePostDataResult.data.id },
|
|
||||||
include: { author: true }
|
|
||||||
});
|
|
||||||
|
|
||||||
if (link === null) {
|
|
||||||
res.status(400).json({ ok: false, error: "Link does not exist" });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (link.authorId !== user.id) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await prisma.link
|
|
||||||
.delete({ where: { id: link.id } })
|
|
||||||
.then(() => res.json({ ok: true, data: "Successfully deleted link" }))
|
|
||||||
.catch((error) => res.status(500).json({ ok: false, error }));
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handler);
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import Link from "@models/link";
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { methodNotAllowed, unauthorized } from "@utils/errors";
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handler: NextApiHandler<Response> = async (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() !== "POST") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedInputResult = Link.safeParse(req.body);
|
|
||||||
|
|
||||||
if (!parsedInputResult.success) {
|
|
||||||
res.status(400).json({ ok: false, error: parsedInputResult.error.message });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await prisma.user
|
|
||||||
.update({
|
|
||||||
where: { id: user.id },
|
|
||||||
data: { links: { create: parsedInputResult.data } }
|
|
||||||
})
|
|
||||||
.then(() => res.json({ ok: true, data: "Successfully created link" }))
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
|
|
||||||
return res.status(500).json({ ok: false, error });
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handler);
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import bcrypt from "bcrypt";
|
|
||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import { LoginCredentials } from "@models/login";
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { methodNotAllowed, unauthorized } from "@utils/errors";
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handle: NextApiHandler<Response> = async (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() !== "POST") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const loginCredentials = LoginCredentials.safeParse(req.body);
|
|
||||||
|
|
||||||
if (!loginCredentials.success) {
|
|
||||||
res.status(403).json({ ok: false, error: loginCredentials.error });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const email = loginCredentials.data.username;
|
|
||||||
|
|
||||||
const user = await prisma.user.findUnique({ where: { email } });
|
|
||||||
|
|
||||||
if (user === null) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const password = loginCredentials.data.password;
|
|
||||||
|
|
||||||
const isCorrect = await new Promise((resolve, reject) =>
|
|
||||||
bcrypt.compare(password, user.password, (err, result) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else if (result !== undefined) resolve(result);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!isCorrect) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
req.session.user = user;
|
|
||||||
|
|
||||||
await req.session.save();
|
|
||||||
|
|
||||||
res.json({ ok: true, data: "Login successfull" });
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handle);
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { methodNotAllowed, unauthorized } from "@utils/errors";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handle: NextApiHandler<Response> = (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() != "GET") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
req.session.destroy();
|
|
||||||
|
|
||||||
req.session.user = undefined;
|
|
||||||
|
|
||||||
res.json({ ok: true, data: "Logout successfull" });
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handle);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { registrationIsEnabled } from "@utils/config";
|
|
||||||
import { methodNotAllowed } from "@utils/errors";
|
|
||||||
|
|
||||||
const handler: NextApiHandler<Response> = (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() !== "GET") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
res.json({ ok: true, data: { registrationIsEnabled } });
|
|
||||||
};
|
|
||||||
|
|
||||||
export default handler;
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import bcrypt from "bcrypt";
|
|
||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
import { SignupCredentials } from "@models/signup";
|
|
||||||
|
|
||||||
import { registrationIsEnabled, saltRoundsForPassword } from "@utils/config";
|
|
||||||
import { methodNotAllowed } from "@utils/errors";
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handle: NextApiHandler<Response> = async (req, res) => {
|
|
||||||
if (!registrationIsEnabled) {
|
|
||||||
res
|
|
||||||
.status(403)
|
|
||||||
.json({ ok: false, error: "Registration is not enabled on this server" });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.method?.toUpperCase() != "POST") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const signupCredentials = SignupCredentials.safeParse(req.body);
|
|
||||||
|
|
||||||
if (!signupCredentials.success) {
|
|
||||||
res.status(403).json({ ok: false, error: signupCredentials.error });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const password: string = await new Promise((resolve, reject) =>
|
|
||||||
bcrypt.hash(
|
|
||||||
signupCredentials.data.password,
|
|
||||||
saltRoundsForPassword,
|
|
||||||
(err, hash) => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
else if (hash) return resolve(hash);
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
await prisma.user
|
|
||||||
.create({
|
|
||||||
data: {
|
|
||||||
email: signupCredentials.data.email,
|
|
||||||
name: signupCredentials.data.name,
|
|
||||||
password,
|
|
||||||
admin: process.env.ADMIN_EMAIL === signupCredentials.data.email
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(async (user) => {
|
|
||||||
req.session.user = user;
|
|
||||||
|
|
||||||
await req.session.save();
|
|
||||||
|
|
||||||
res.json({ ok: true, data: "Signup successfull" });
|
|
||||||
})
|
|
||||||
.catch((error) => res.status(500).json({ ok: false, error }));
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handle);
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { NextApiHandler } from "next";
|
|
||||||
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { methodNotAllowed, unauthorized } from "@utils/errors";
|
|
||||||
import { withIronSession } from "@utils/session";
|
|
||||||
|
|
||||||
const handler: NextApiHandler<Response> = (req, res) => {
|
|
||||||
if (req.method?.toUpperCase() !== "GET") {
|
|
||||||
res.status(405).json(methodNotAllowed);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) {
|
|
||||||
res.status(401).json(unauthorized);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
res.json({ ok: true, data: user });
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withIronSession(handler);
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.body {
|
|
||||||
padding: 10rem 0;
|
|
||||||
}
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import { GetStaticPaths, GetStaticProps, NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
|
|
||||||
import styles from "./[id].module.scss";
|
|
||||||
|
|
||||||
import { Post, User } from "@prisma/client";
|
|
||||||
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
import Tags from "@components/Tags";
|
|
||||||
|
|
||||||
const PostPage: NextPage<{
|
|
||||||
post: Post & {
|
|
||||||
author: User;
|
|
||||||
};
|
|
||||||
}> = ({ post }) => {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title={post.title} />
|
|
||||||
<div className={styles.body}>
|
|
||||||
<div className="container">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column col-2" />
|
|
||||||
<div className="column col-6 col-md-12">
|
|
||||||
<h1>{post.title}</h1>
|
|
||||||
<div className="divider" />
|
|
||||||
<h4>
|
|
||||||
by {post.author.name} on{" "}
|
|
||||||
{new Date(post.createdAt).toLocaleDateString()}
|
|
||||||
</h4>
|
|
||||||
<Tags tags={post.tags} />
|
|
||||||
<p style={{ whiteSpace: "pre-line" }} className="mt-2">
|
|
||||||
{post.content}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getStaticPaths: GetStaticPaths = async ({}) => {
|
|
||||||
const posts = await prisma.post
|
|
||||||
.findMany({
|
|
||||||
where: { published: true }
|
|
||||||
})
|
|
||||||
.catch(() => []);
|
|
||||||
|
|
||||||
const paths = posts.map((post) => ({
|
|
||||||
params: { id: post.id.toString() }
|
|
||||||
}));
|
|
||||||
|
|
||||||
// { fallback: false } means other routes should 404
|
|
||||||
return { paths, fallback: false };
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async ({ params }) => {
|
|
||||||
if (!params?.id || Array.isArray(params?.id)) return { notFound: true };
|
|
||||||
|
|
||||||
const postId = parseInt(params?.id);
|
|
||||||
|
|
||||||
if (Number.isNaN(postId)) return { notFound: true };
|
|
||||||
|
|
||||||
const post = await prisma.post.findUnique({
|
|
||||||
where: { id: postId },
|
|
||||||
include: { author: true }
|
|
||||||
});
|
|
||||||
|
|
||||||
if (post === null) return { notFound: true };
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
post: {
|
|
||||||
...post,
|
|
||||||
createdAt: post.createdAt.toString()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
revalidate: 60 * 10
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PostPage;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
.body {
|
|
||||||
padding: 10rem 1rem;
|
|
||||||
|
|
||||||
@media (max-width: 840px) {
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import { GetStaticProps, NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
|
|
||||||
import styles from "./blog.module.scss";
|
|
||||||
|
|
||||||
import { Post, User } from "@prisma/client";
|
|
||||||
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
import PostComponent from "@components/Post";
|
|
||||||
|
|
||||||
const Blog: NextPage<{
|
|
||||||
posts: (Post & {
|
|
||||||
author: User;
|
|
||||||
})[];
|
|
||||||
}> = ({ posts }) => {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="Blog" />
|
|
||||||
<div className={styles.body}>
|
|
||||||
<div className="container">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column col-8 col-md-12 col-mx-auto">
|
|
||||||
<h1>Latest posts</h1>
|
|
||||||
<div className="divider" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{posts.length < 1 && (
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column col-8 col-md-12 col-mx-auto">
|
|
||||||
<h3>No posts yet</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{posts.length > 0 &&
|
|
||||||
posts.map((post) => <PostComponent key={post.id} post={post} />)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async (
|
|
||||||
{
|
|
||||||
// query
|
|
||||||
}
|
|
||||||
) => {
|
|
||||||
// let cursor = 0;
|
|
||||||
// if (!Array.isArray(query.cursor) && query.cursor !== undefined) {
|
|
||||||
// cursor = parseInt(query.cursor);
|
|
||||||
// }
|
|
||||||
|
|
||||||
const posts = await prisma.post
|
|
||||||
.findMany({
|
|
||||||
where: { published: true },
|
|
||||||
orderBy: { createdAt: "desc" },
|
|
||||||
take: 5,
|
|
||||||
include: { author: true }
|
|
||||||
})
|
|
||||||
.catch(() => []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
posts: posts.map((post) => ({
|
|
||||||
...post,
|
|
||||||
createdAt: post.createdAt.toString(),
|
|
||||||
content: post.content?.trim().split("\n")[0]
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
revalidate: 60 * 1
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Blog;
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
import { NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import { FormEvent, useCallback, useState } from "react";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { User } from "@prisma/client";
|
|
||||||
|
|
||||||
import { Post } from "@models/post";
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
import { parseUserInputError } from "@utils/errors";
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
import { withSessionSsr } from "@utils/session";
|
|
||||||
|
|
||||||
import EmptyPage from "@components/EmptyPage";
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
|
|
||||||
const NewPostPage: NextPage<{ user: User }> = ({ user }) => {
|
|
||||||
const [title, setTitle] = useState("");
|
|
||||||
const [tags, setTags] = useState("");
|
|
||||||
const [content, setContent] = useState("");
|
|
||||||
const [publish, setPublish] = useState(false);
|
|
||||||
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const createPost = useCallback(
|
|
||||||
async (e: FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const parseUserInputResult = Post.safeParse({
|
|
||||||
title,
|
|
||||||
tags,
|
|
||||||
content,
|
|
||||||
publish
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!parseUserInputResult.success) {
|
|
||||||
setError(parseUserInputError(parseUserInputResult.error.message));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response: Response = await axios
|
|
||||||
.post("/api/blog/new", parseUserInputResult.data)
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
router.push("/blog");
|
|
||||||
} else {
|
|
||||||
setError(JSON.stringify(response.error));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[title, tags, content, publish, router]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="New post" />
|
|
||||||
<EmptyPage>
|
|
||||||
<div className="columns">
|
|
||||||
<div className="column col-8 col-md-12 col-mx-auto">
|
|
||||||
<h2>Create new post</h2>
|
|
||||||
<h5>Logged in as {user.name}</h5>
|
|
||||||
<form onSubmit={createPost}>
|
|
||||||
<div className="form-group">
|
|
||||||
<label className="form-label" htmlFor="title">
|
|
||||||
Post title
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
value={title}
|
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
name="title"
|
|
||||||
type="text"
|
|
||||||
id="title"
|
|
||||||
placeholder="Title"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<label className="form-label" htmlFor="tags">
|
|
||||||
Tags
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
value={tags}
|
|
||||||
onChange={(e) => setTags(e.target.value)}
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
name="tags"
|
|
||||||
type="text"
|
|
||||||
id="tags"
|
|
||||||
placeholder="A space seperated list of tags"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<label className="form-label" htmlFor="content">
|
|
||||||
Content
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={content}
|
|
||||||
onChange={(e) => setContent(e.target.value)}
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
placeholder="Some content"
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
name="content"
|
|
||||||
id="content"
|
|
||||||
minLength={100}
|
|
||||||
cols={30}
|
|
||||||
rows={10}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<label className="form-checkbox">
|
|
||||||
<input
|
|
||||||
checked={publish}
|
|
||||||
onChange={() => setPublish((state) => !state)}
|
|
||||||
name="published"
|
|
||||||
type="checkbox"
|
|
||||||
/>
|
|
||||||
<i className="form-icon" /> Publish
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{error !== null && (
|
|
||||||
<div className="toast toast-error my-2">
|
|
||||||
<button
|
|
||||||
className="btn btn-clear float-right"
|
|
||||||
onClick={() => setError(null)}
|
|
||||||
/>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<input
|
|
||||||
className={"btn btn-primary"}
|
|
||||||
type="submit"
|
|
||||||
value="Create post"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</EmptyPage>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getServerSideProps = withSessionSsr(({ req }) => {
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) {
|
|
||||||
return {
|
|
||||||
notFound: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
user: req.session.user
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
export default NewPostPage;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { GetStaticProps, InferGetStaticPropsType, NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
|
|
||||||
import Landing from "@models/landing";
|
|
||||||
|
|
||||||
import { readLandingJson } from "@utils/landing";
|
|
||||||
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
import User from "@components/User";
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps<Landing> = async () => {
|
|
||||||
const landing = await readLandingJson();
|
|
||||||
|
|
||||||
if (landing === null) return { revalidate: 1, notFound: true };
|
|
||||||
|
|
||||||
return { props: landing };
|
|
||||||
};
|
|
||||||
|
|
||||||
const Index: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
|
|
||||||
landing
|
|
||||||
) => (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="Home" />
|
|
||||||
<User owner={landing.owner} />
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Index;
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { GetServerSideProps, NextPage } from "next";
|
|
||||||
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
|
|
||||||
const LinkRedirectPage: NextPage = () => {
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
|
|
||||||
const location = params?.location;
|
|
||||||
|
|
||||||
if (location === undefined || typeof location !== "string")
|
|
||||||
return { notFound: true };
|
|
||||||
|
|
||||||
const link = await prisma.link.findFirst({ where: { location } });
|
|
||||||
|
|
||||||
if (link === null) return { notFound: true };
|
|
||||||
|
|
||||||
return { redirect: { destination: link.remoteAddress, permanent: false } };
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LinkRedirectPage;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { GetServerSideProps, NextPage } from "next";
|
|
||||||
import z from "zod";
|
|
||||||
|
|
||||||
import { LinkIdFromString } from "@models/link";
|
|
||||||
|
|
||||||
import { withSessionSsr } from "@utils/session";
|
|
||||||
|
|
||||||
const EditLinkPage: NextPage = () => {
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getServerSideProps: GetServerSideProps = withSessionSsr(
|
|
||||||
async ({ req, params }) => {
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined) return { notFound: true };
|
|
||||||
|
|
||||||
const parseParamsResult = z
|
|
||||||
.object({ id: LinkIdFromString })
|
|
||||||
.safeParse(params);
|
|
||||||
|
|
||||||
if (!parseParamsResult.success) return { notFound: true };
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export default EditLinkPage;
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import { GetStaticProps, NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
import { Link as LinkType } from "@prisma/client";
|
|
||||||
|
|
||||||
import useUser from "@utils/hooks/useUser";
|
|
||||||
import prisma from "@utils/prisma";
|
|
||||||
|
|
||||||
import EmptyPage from "@components/EmptyPage";
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
import LinkComponent from "@components/LinkComponent";
|
|
||||||
|
|
||||||
const LinksPage: NextPage<{ links: LinkType[] }> = ({ links }) => {
|
|
||||||
const user = useUser();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="Links" />
|
|
||||||
<EmptyPage>
|
|
||||||
<div className="columns">
|
|
||||||
<div className="col col-8 col-mx-auto">
|
|
||||||
<h1>Links</h1>
|
|
||||||
<div className="container">
|
|
||||||
<div className="columns">
|
|
||||||
<div className="col col-11">
|
|
||||||
<h5>This is a collection of quick usefull links</h5>
|
|
||||||
</div>
|
|
||||||
{user !== null && (
|
|
||||||
<div className="col col-1">
|
|
||||||
<Link href="/link/new">
|
|
||||||
<a>new</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col col-8 col-mx-auto">
|
|
||||||
{links.length < 1 && <h2>No links yet</h2>}
|
|
||||||
{links.map((link) => (
|
|
||||||
<LinkComponent key={link.id} link={link} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</EmptyPage>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps = async () => {
|
|
||||||
const links = await prisma.link
|
|
||||||
.findMany({
|
|
||||||
orderBy: { id: "desc" },
|
|
||||||
take: 5
|
|
||||||
})
|
|
||||||
.catch(() => []);
|
|
||||||
|
|
||||||
return { props: { links }, revalidate: 1 * 60 };
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LinksPage;
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
import { GetServerSideProps, NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import { FormEvent, useCallback, useState } from "react";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { User } from "@prisma/client";
|
|
||||||
|
|
||||||
import Link from "@models/link";
|
|
||||||
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
import { withSessionSsr } from "@utils/session";
|
|
||||||
|
|
||||||
import EmptyPage from "@components/EmptyPage";
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
|
|
||||||
const NewLinkPage: NextPage<{ user: User }> = ({ user }) => {
|
|
||||||
const [remoteAddress, setRemoteAddress] = useState("");
|
|
||||||
const [localAddress, setLocalAddress] = useState("");
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const host =
|
|
||||||
typeof window !== "undefined" && "location" in window
|
|
||||||
? location.host
|
|
||||||
: "guusvanmeerveld.dev";
|
|
||||||
|
|
||||||
const createLink = useCallback(
|
|
||||||
async (e: FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const parsedLinkResult = Link.safeParse({
|
|
||||||
remoteAddress,
|
|
||||||
location: localAddress
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!parsedLinkResult.success) {
|
|
||||||
setError(parsedLinkResult.error.message);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await axios
|
|
||||||
.post("/api/link/new", parsedLinkResult.data)
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
setError(JSON.stringify(response.error));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push("/link");
|
|
||||||
},
|
|
||||||
[remoteAddress, localAddress, router]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="New link" />
|
|
||||||
<EmptyPage>
|
|
||||||
<div className="columns">
|
|
||||||
<div className="col col-6 col-mx-auto">
|
|
||||||
<h2>Create a new link</h2>
|
|
||||||
<form onSubmit={createLink}>
|
|
||||||
<label className="form-label" htmlFor="remote-address">
|
|
||||||
Remote address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
onChange={(e) => setRemoteAddress(e.target.value)}
|
|
||||||
name="remoteAddress"
|
|
||||||
type="text"
|
|
||||||
id="remote-address"
|
|
||||||
placeholder="https://example.com"
|
|
||||||
/>
|
|
||||||
<label className="form-label" htmlFor="local-address">
|
|
||||||
Address on the server
|
|
||||||
</label>
|
|
||||||
<div className="input-group">
|
|
||||||
<span className="input-group-addon">{host}/link/</span>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
className="form-input"
|
|
||||||
onChange={(e) => setLocalAddress(e.target.value)}
|
|
||||||
name="local-address"
|
|
||||||
type="text"
|
|
||||||
id="local-address"
|
|
||||||
placeholder="example"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error !== null && (
|
|
||||||
<div className="toast toast-error mt-2">
|
|
||||||
<button
|
|
||||||
className="btn btn-clear float-right"
|
|
||||||
onClick={() => setError(null)}
|
|
||||||
/>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-primary mt-2"
|
|
||||||
value="Create new link"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</EmptyPage>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getServerSideProps: GetServerSideProps = withSessionSsr(
|
|
||||||
async ({ req }) => {
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (user === undefined)
|
|
||||||
return {
|
|
||||||
notFound: true
|
|
||||||
};
|
|
||||||
|
|
||||||
return { props: { user } };
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export default NewLinkPage;
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
.body {
|
|
||||||
height: 100vh;
|
|
||||||
padding: 10rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
margin: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loginButton,
|
|
||||||
.signupButton {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signupButton {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { NextPage } from "next";
|
|
||||||
import { NextSeo } from "next-seo";
|
|
||||||
import z from "zod";
|
|
||||||
|
|
||||||
import styles from "./login.module.scss";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
import multipleClassNames from "@utils/multipleClassNames";
|
|
||||||
|
|
||||||
import Layout from "@components/Layout";
|
|
||||||
import LoginForm from "@components/LoginForm";
|
|
||||||
import SignupForm from "@components/SignupForm";
|
|
||||||
|
|
||||||
const SettingsModel = z.object({ registrationIsEnabled: z.boolean() });
|
|
||||||
|
|
||||||
const Login: NextPage = () => {
|
|
||||||
const { data, isLoading, error } = useQuery<
|
|
||||||
z.infer<typeof SettingsModel>,
|
|
||||||
string
|
|
||||||
>(["settings"], async (): Promise<z.infer<typeof SettingsModel>> => {
|
|
||||||
const response = await axios
|
|
||||||
.get("/api/settings")
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw JSON.stringify(response.error);
|
|
||||||
}
|
|
||||||
|
|
||||||
const parseSettingsResult = SettingsModel.safeParse(response.data);
|
|
||||||
|
|
||||||
if (!parseSettingsResult.success) {
|
|
||||||
throw parseSettingsResult.error.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return parseSettingsResult.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
const registrationEnabled =
|
|
||||||
data !== undefined && data.registrationIsEnabled && error === null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<NextSeo title="Login" />
|
|
||||||
<div className={styles.body}>
|
|
||||||
<div className="columns">
|
|
||||||
<div
|
|
||||||
className={`col-md-4 ${
|
|
||||||
registrationEnabled ? "col-ml-auto" : "col-mx-auto"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<h2 className={styles.title}>Login to blog</h2>
|
|
||||||
<LoginForm />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{registrationEnabled && (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className={multipleClassNames("divider-vert", styles.divider)}
|
|
||||||
data-content="OR"
|
|
||||||
/>
|
|
||||||
<div className="col-md-4 col-mr-auto">
|
|
||||||
<h2 className={styles.title}>Create new account</h2>
|
|
||||||
<SignupForm />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{isLoading && (
|
|
||||||
<div className="columns">
|
|
||||||
<div className="col col-mx-auto">
|
|
||||||
<div className="loading loading-lg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Login;
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
[data-theme="dark"] {
|
|
||||||
body {
|
|
||||||
background-color: $bg-dark;
|
|
||||||
color: $text-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty {
|
|
||||||
background-color: $bg-dark-secondary;
|
|
||||||
color: $text-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: $bg-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-icon {
|
|
||||||
background-color: $bg-dark-secondary !important;
|
|
||||||
color: $text-primary;
|
|
||||||
border-color: lighten($bg-dark-secondary, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider-vert {
|
|
||||||
&::before {
|
|
||||||
border-color: lighten($bg-dark-secondary, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-content]::after {
|
|
||||||
background-color: $bg-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray {
|
|
||||||
background-color: $bg-dark-secondary !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chip,
|
|
||||||
.input-group .input-group-addon {
|
|
||||||
background-color: lighten($bg-dark-secondary, 10%);
|
|
||||||
border-color: lighten($bg-dark-secondary, 20%)
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
border-color: $bg-dark-secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-color: lighten($bg-dark-secondary, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table tbody tr.active,
|
|
||||||
.table.table-striped tbody tr.active {
|
|
||||||
background: $bg-dark-secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: $primary-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
color: $primary-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-primary {
|
|
||||||
background-color: $primary-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background-color: $bg-dark-secondary;
|
|
||||||
color: $primary-color;
|
|
||||||
|
|
||||||
border-color: $primary-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: $primary-color;
|
|
||||||
border-color: $primary-color;
|
|
||||||
|
|
||||||
color: $text-primary;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $primary-color-dark;
|
|
||||||
border-color: $primary-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: $primary-color-dark;
|
|
||||||
border-color: $primary-color-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
$light-color: #eee;
|
|
||||||
$dark-color: #212121;
|
|
||||||
$primary-color: #7e57c2;
|
|
||||||
|
|
||||||
$dark-color-secondary: lighten($dark-color, 2%);
|
|
||||||
|
|
||||||
$primary-color-dark: darken($primary-color, 10%);
|
|
||||||
|
|
||||||
$bg-dark: $dark-color;
|
|
||||||
$bg-dark-secondary: $dark-color-secondary;
|
|
||||||
|
|
||||||
$text-primary: $light-color;
|
|
||||||
$text-secondary: darken($light-color, 10%);
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
@ -1,10 +0,0 @@
|
|||||||
@use "spectre.css/src/spectre.scss";
|
|
||||||
@use "spectre.css/src/spectre-icons.scss";
|
|
||||||
|
|
||||||
@import "variables";
|
|
||||||
|
|
||||||
@import "dark";
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 1.25rem;
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
export const sessionCookieName = "portfolio-session";
|
|
||||||
export const sessionPassword = process.env.SESSION_PASSWORD ?? "";
|
|
||||||
|
|
||||||
export const sessionOptions = {
|
|
||||||
cookieName: sessionCookieName,
|
|
||||||
password: sessionPassword,
|
|
||||||
cookieOptions: {
|
|
||||||
secure: process.env.NODE_ENV === "production"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const registrationIsEnabled =
|
|
||||||
process.env.ALLOW_REGISTRATION !== undefined ? true : false;
|
|
||||||
|
|
||||||
export const saltRoundsForPassword =
|
|
||||||
parseInt(process.env.PASSWORD_SALT_ROUNDS ?? "") || 10;
|
|
||||||
|
|
||||||
export const landingJsonLocation =
|
|
||||||
process.env.LANDING_JSON_LOCATION ?? "/app/landing.json";
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
import { Response } from "@models/response";
|
|
||||||
|
|
||||||
const baseError = (error: string): Response => ({
|
|
||||||
error,
|
|
||||||
ok: false
|
|
||||||
});
|
|
||||||
|
|
||||||
export const methodNotAllowed: Response = baseError("Method not allowed");
|
|
||||||
|
|
||||||
export const unauthorized: Response = baseError(
|
|
||||||
"Could not login; incorrect email or password"
|
|
||||||
);
|
|
||||||
|
|
||||||
export const parseUserInputError: (error: unknown) => string = (error) =>
|
|
||||||
"Failed to parse user input: ".concat(JSON.stringify(error));
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import { stat } from "fs-extra";
|
|
||||||
|
|
||||||
export const exists = async (fileName: string): Promise<boolean> => {
|
|
||||||
return await stat(fileName)
|
|
||||||
.then(() => true)
|
|
||||||
.catch(() => false);
|
|
||||||
};
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import { AxiosError, AxiosResponse } from "axios";
|
|
||||||
|
|
||||||
import ResponseModel, { ErrorModel, Response } from "@models/response";
|
|
||||||
|
|
||||||
export const parseAxiosResponse = (res: AxiosResponse<unknown>): Response => {
|
|
||||||
const parseResponseResult = ResponseModel.safeParse(res.data);
|
|
||||||
|
|
||||||
if (!parseResponseResult.success) {
|
|
||||||
return { ok: false, error: parseResponseResult.error };
|
|
||||||
}
|
|
||||||
|
|
||||||
return parseResponseResult.data;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const parseAxiosError = (e: AxiosError<unknown>): Response => {
|
|
||||||
const parseErrorResult = ErrorModel.safeParse(e.response?.data);
|
|
||||||
|
|
||||||
if (!parseErrorResult.success) {
|
|
||||||
return { ok: false, error: parseErrorResult.error };
|
|
||||||
}
|
|
||||||
|
|
||||||
return parseErrorResult.data;
|
|
||||||
};
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import z from "zod";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import {
|
|
||||||
RepositoryResponse,
|
|
||||||
SearchResultsResponse,
|
|
||||||
UserResponse
|
|
||||||
} from "@models/git/responses";
|
|
||||||
|
|
||||||
import { giteaServerUrl } from "@utils/config";
|
|
||||||
|
|
||||||
const apiUrl = `https://${giteaServerUrl}/api/v1`;
|
|
||||||
|
|
||||||
export const fetchUser = async (
|
|
||||||
giteaUsername: string
|
|
||||||
): Promise<z.infer<typeof UserResponse>> => {
|
|
||||||
const { data: user } = await axios.get<unknown>(
|
|
||||||
`${apiUrl}/users/${giteaUsername}`
|
|
||||||
);
|
|
||||||
|
|
||||||
return UserResponse.parse(user);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const fetchRepositories = async (
|
|
||||||
giteaUserUid: number
|
|
||||||
): Promise<z.infer<typeof RepositoryResponse>[]> => {
|
|
||||||
const { data: repositories } = await axios.get<unknown>(
|
|
||||||
`${apiUrl}/repos/search`,
|
|
||||||
{
|
|
||||||
params: {
|
|
||||||
topic: true,
|
|
||||||
q: "on-portfolio",
|
|
||||||
id: giteaUserUid,
|
|
||||||
limit: 6
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const results = SearchResultsResponse.parse(repositories);
|
|
||||||
|
|
||||||
if (results.ok) return results.data;
|
|
||||||
else throw results.data;
|
|
||||||
};
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import { User } from "@prisma/client";
|
|
||||||
|
|
||||||
import { User as UserModel } from "@models/user";
|
|
||||||
|
|
||||||
import { parseAxiosError, parseAxiosResponse } from "@utils/fetch";
|
|
||||||
|
|
||||||
const useUser = (): User | null => {
|
|
||||||
const { data } = useQuery(
|
|
||||||
["user"],
|
|
||||||
async () => {
|
|
||||||
const response = await axios
|
|
||||||
.get("/api/user")
|
|
||||||
.then(parseAxiosResponse)
|
|
||||||
.catch(parseAxiosError);
|
|
||||||
|
|
||||||
if (response.ok) return response.data;
|
|
||||||
else throw response.error;
|
|
||||||
},
|
|
||||||
{ retry: () => false, enabled: typeof window !== "undefined" }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (typeof window === "undefined") return null;
|
|
||||||
|
|
||||||
const parseUserResult = UserModel.safeParse(data);
|
|
||||||
|
|
||||||
if (parseUserResult.success) {
|
|
||||||
return parseUserResult.data;
|
|
||||||
} else return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useUser;
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { readJson } from "fs-extra";
|
|
||||||
|
|
||||||
import Landing, { LandingModel } from "@models/landing";
|
|
||||||
|
|
||||||
import { landingJsonLocation } from "@utils/config";
|
|
||||||
import { exists } from "@utils/exists";
|
|
||||||
|
|
||||||
export const readLandingJson = async (): Promise<Landing | null> => {
|
|
||||||
const location = landingJsonLocation;
|
|
||||||
|
|
||||||
const fileExists = await exists(location);
|
|
||||||
|
|
||||||
if (!fileExists) {
|
|
||||||
console.log(`Could not find landing json file at: ${location}`);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawJson: unknown = await readJson(location);
|
|
||||||
|
|
||||||
const landingResult = LandingModel.safeParse(rawJson);
|
|
||||||
|
|
||||||
if (!landingResult.success) {
|
|
||||||
console.log(`Failed to parse landing json: ${landingResult.error}`);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return landingResult.data;
|
|
||||||
};
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const multipleClassNames = (...classNames: string[]): string => {
|
|
||||||
return classNames.join(" ");
|
|
||||||
};
|
|
||||||
|
|
||||||
export default multipleClassNames;
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import { PrismaClient } from "@prisma/client";
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
var prisma: PrismaClient;
|
|
||||||
}
|
|
||||||
|
|
||||||
let prisma: PrismaClient;
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === "production") {
|
|
||||||
prisma = new PrismaClient();
|
|
||||||
} else {
|
|
||||||
if (!global.prisma) {
|
|
||||||
global.prisma = new PrismaClient();
|
|
||||||
}
|
|
||||||
|
|
||||||
prisma = global.prisma;
|
|
||||||
}
|
|
||||||
export default prisma;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { withIronSessionApiRoute, withIronSessionSsr } from "iron-session/next";
|
|
||||||
import {
|
|
||||||
GetServerSidePropsContext,
|
|
||||||
GetServerSidePropsResult,
|
|
||||||
NextApiHandler
|
|
||||||
} from "next";
|
|
||||||
|
|
||||||
import { sessionOptions } from "./config";
|
|
||||||
|
|
||||||
import { User } from "@prisma/client";
|
|
||||||
|
|
||||||
export const withIronSession = (handler: NextApiHandler) =>
|
|
||||||
withIronSessionApiRoute(handler, sessionOptions);
|
|
||||||
|
|
||||||
export function withSessionSsr<
|
|
||||||
P extends { [key: string]: unknown } = { [key: string]: unknown }
|
|
||||||
>(
|
|
||||||
handler: (
|
|
||||||
context: GetServerSidePropsContext
|
|
||||||
) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
|
|
||||||
) {
|
|
||||||
return withIronSessionSsr(handler, sessionOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module "iron-session" {
|
|
||||||
interface IronSessionData {
|
|
||||||
user?: User;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { nextui } from "@nextui-org/react";
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
const config = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {}
|
||||||
|
},
|
||||||
|
darkMode: "class",
|
||||||
|
plugins: [nextui()]
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@ -1,30 +1,58 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"lib": [
|
||||||
"allowJs": true,
|
"dom",
|
||||||
"skipLibCheck": true,
|
"dom.iterable",
|
||||||
"strict": true,
|
"esnext"
|
||||||
"forceConsistentCasingInFileNames": true,
|
],
|
||||||
"noEmit": true,
|
"allowJs": true,
|
||||||
"esModuleInterop": true,
|
"skipLibCheck": true,
|
||||||
"module": "esnext",
|
"strict": true,
|
||||||
"moduleResolution": "node",
|
"forceConsistentCasingInFileNames": true,
|
||||||
"resolveJsonModule": true,
|
"noEmit": true,
|
||||||
"isolatedModules": true,
|
"esModuleInterop": true,
|
||||||
"jsx": "preserve",
|
"module": "esnext",
|
||||||
"incremental": true,
|
"moduleResolution": "node",
|
||||||
"tsBuildInfoFile": ".next/tsbuildinfo.json",
|
"resolveJsonModule": true,
|
||||||
"baseUrl": "src",
|
"isolatedModules": true,
|
||||||
"paths": {
|
"jsx": "preserve",
|
||||||
"@styles/*": ["styles/*"],
|
"incremental": true,
|
||||||
"@components/*": ["components/*"],
|
"tsBuildInfoFile": ".next/tsbuildinfo.json",
|
||||||
"@interfaces/*": ["interfaces/*"],
|
"baseUrl": "src",
|
||||||
"@models/*": ["models/*"],
|
"paths": {
|
||||||
"@utils/*": ["utils/*"],
|
"@styles/*": [
|
||||||
"@src/*": ["src/*"]
|
"styles/*"
|
||||||
}
|
],
|
||||||
},
|
"@components/*": [
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
"components/*"
|
||||||
"exclude": ["node_modules"]
|
],
|
||||||
|
"@interfaces/*": [
|
||||||
|
"interfaces/*"
|
||||||
|
],
|
||||||
|
"@models/*": [
|
||||||
|
"models/*"
|
||||||
|
],
|
||||||
|
"@utils/*": [
|
||||||
|
"utils/*"
|
||||||
|
],
|
||||||
|
"@src/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue