mirror of
https://github.com/barthuijgen/factorio-sites.git
synced 2025-01-24 11:46:19 +02:00
style cleanup
This commit is contained in:
Bart
parent
7278f23f48
commit
94daa2c89f
@ -4,7 +4,6 @@ import Router from "next/router";
|
||||
import { css, Global } from "@emotion/react";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import NProgress from "nprogress";
|
||||
|
||||
import { Header } from "../components/Header";
|
||||
import { AuthContext, AuthContextProps } from "../providers/auth";
|
||||
import { useFetch } from "../hooks/fetch";
|
||||
@ -13,6 +12,7 @@ import { getSessionToken } from "@factorio-sites/node-utils";
|
||||
const globalStyles = css`
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #201810;
|
||||
@ -21,14 +21,15 @@ const globalStyles = css`
|
||||
url(data:image/jpeg;base64,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);
|
||||
background-size: 2048px 3072px;
|
||||
background-position: center top;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
font-family: titillium web, sans-serif;
|
||||
}
|
||||
main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
margin: 1rem;
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -61,16 +62,16 @@ const BlueprintsApp = ({
|
||||
<link rel="shortcut icon" href="/favicon.png" />
|
||||
<link href="https://cdn.factorio.com/assets/fonts/titillium-web.css" rel="stylesheet" />
|
||||
</Head>
|
||||
<div>
|
||||
{!auth.loading && (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
{!auth.loading && (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
<div className="container">
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)}
|
||||
</AuthContext.Provider>
|
||||
</ChakraProvider>
|
||||
);
|
||||
|
||||
@ -21,109 +21,103 @@ const headerCss = css`
|
||||
|
||||
export const Index: NextPage = () => {
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="800px">
|
||||
<Panel title="About">
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="800px">
|
||||
<Panel title="About">
|
||||
<Box>
|
||||
<h2 css={{ fontSize: "30px" }}>Factorio Blueprints by Barry</h2>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3 css={{ color: "orange" }}>
|
||||
Work in progress! <IoIosConstruct css={{ display: "inline-block" }} />
|
||||
</h3>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3>Contact</h3>
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "200px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<h2 css={{ fontSize: "30px" }}>Factorio Blueprints by Barry</h2>
|
||||
<Image
|
||||
src="https://discord.com/assets/e4923594e694a21542a489471ecffa50.svg"
|
||||
height="35px"
|
||||
/>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3 css={{ color: "orange" }}>
|
||||
Work in progress! <IoIosConstruct css={{ display: "inline-block" }} />
|
||||
</h3>
|
||||
<Box>
|
||||
<Text>Barry#7827</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<a href="https://github.com/barthuijgen">
|
||||
<Image
|
||||
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png"
|
||||
css={{ height: "25px", display: "inline" }}
|
||||
/>
|
||||
</a>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3>Credits</h3>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>
|
||||
Currently the website is provided for demo and test purposes, it is very much still a
|
||||
work in progress.
|
||||
</Text>
|
||||
<Box css={headerCss}>
|
||||
<h3>Contact</h3>
|
||||
</Box>
|
||||
<Box
|
||||
css={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "200px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Image
|
||||
src="https://discord.com/assets/e4923594e694a21542a489471ecffa50.svg"
|
||||
height="35px"
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Barry#7827</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<a href="https://github.com/barthuijgen">
|
||||
<Image
|
||||
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png"
|
||||
css={{ height: "25px", display: "inline" }}
|
||||
Factorio Blueprints uses the work of Teoxoy with the
|
||||
<a
|
||||
href="https://github.com/Teoxoy/factorio-blueprint-editor"
|
||||
css={{
|
||||
textDecoration: "underline",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
margin: "0 5px",
|
||||
verticalAlign: "bottom",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/fbe.svg"
|
||||
alt="Factorio blueprint editor"
|
||||
css={{ display: "inline-block", height: "18px" }}
|
||||
/>
|
||||
Factorio Blueprints Editor
|
||||
</a>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3>Credits</h3>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>
|
||||
Factorio Blueprints uses the work of Teoxoy with the
|
||||
<a
|
||||
href="https://github.com/Teoxoy/factorio-blueprint-editor"
|
||||
css={{
|
||||
textDecoration: "underline",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
margin: "0 5px",
|
||||
verticalAlign: "bottom",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/fbe.svg"
|
||||
alt="Factorio blueprint editor"
|
||||
css={{ display: "inline-block", height: "18px" }}
|
||||
/>
|
||||
Factorio Blueprints Editor
|
||||
</a>
|
||||
to render it's images
|
||||
</Text>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3>Roadmap</h3>
|
||||
</Box>
|
||||
<Box>
|
||||
<ul css={listCss}>
|
||||
<li>Make a good tags list</li>
|
||||
<li>Add a "copy url" button</li>
|
||||
<li>Fix "auhor" field in blueprint pages and filter blueprints by user</li>
|
||||
<li>Add book preview when creating blueprints</li>
|
||||
<li>Improve modded blueprint support in FBE</li>
|
||||
<li>Improve blueprint title icon (bbcode) support</li>
|
||||
<li>Make entity/recipe/item dropdown be based on blueprint data in the site</li>
|
||||
<li>Add a Wysiwyg editor for descriptions</li>
|
||||
<li>Change thumbnail generation method to be more reliable</li>
|
||||
<li>Add tag fixing moderators role</li>
|
||||
<li>Add a landing page on steam sign up to change username before submitting</li>
|
||||
<li>Add tracking of blueprint views</li>
|
||||
<li>Add blueprint history</li>
|
||||
<li className="strike">Add creating new blueprints</li>
|
||||
<li className="strike">Add search</li>
|
||||
<li className="strike">Add blueprint tags</li>
|
||||
<li className="strike">Expand search with tags</li>
|
||||
<li className="strike">Add favorites</li>
|
||||
<li className="strike">Add sorting by views/favorites</li>
|
||||
<li className="strike">Add thumbnails</li>
|
||||
<li className="strike">
|
||||
Add search filter for blueprint entities/recipes without manual tagging
|
||||
</li>
|
||||
</ul>
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
to render it's images
|
||||
</Text>
|
||||
</Box>
|
||||
<Box css={headerCss}>
|
||||
<h3>Roadmap</h3>
|
||||
</Box>
|
||||
<Box>
|
||||
<ul css={listCss}>
|
||||
<li>Make a good tags list</li>
|
||||
<li>Add a "copy url" button</li>
|
||||
<li>Fix "auhor" field in blueprint pages and filter blueprints by user</li>
|
||||
<li>Add book preview when creating blueprints</li>
|
||||
<li>Improve modded blueprint support in FBE</li>
|
||||
<li>Improve blueprint title icon (bbcode) support</li>
|
||||
<li>Make entity/recipe/item dropdown be based on blueprint data in the site</li>
|
||||
<li>Add a Wysiwyg editor for descriptions</li>
|
||||
<li>Change thumbnail generation method to be more reliable</li>
|
||||
<li>Add tag fixing moderators role</li>
|
||||
<li>Add a landing page on steam sign up to change username before submitting</li>
|
||||
<li>Add tracking of blueprint views</li>
|
||||
<li>Add blueprint history</li>
|
||||
<li className="strike">Add creating new blueprints</li>
|
||||
<li className="strike">Add search</li>
|
||||
<li className="strike">Add blueprint tags</li>
|
||||
<li className="strike">Expand search with tags</li>
|
||||
<li className="strike">Add favorites</li>
|
||||
<li className="strike">Add sorting by views/favorites</li>
|
||||
<li className="strike">Add thumbnails</li>
|
||||
<li className="strike">
|
||||
Add search filter for blueprint entities/recipes without manual tagging
|
||||
</li>
|
||||
</ul>
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -60,7 +60,6 @@ const BlueprintStyles = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTable = styled.table`
|
||||
td {
|
||||
border: 1px solid #909090;
|
||||
@ -148,7 +147,6 @@ export const Index: NextPage<IndexProps> = ({
|
||||
return (
|
||||
<Grid
|
||||
css={BlueprintStyles}
|
||||
margin="0.7rem"
|
||||
templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
|
||||
gap={6}
|
||||
>
|
||||
|
||||
@ -22,9 +22,32 @@ import {
|
||||
Radio,
|
||||
Checkbox,
|
||||
} from "@chakra-ui/react";
|
||||
import { css } from "@emotion/react";
|
||||
import { MdSearch } from "react-icons/md";
|
||||
import { TAGS } from "@factorio-sites/common-utils";
|
||||
|
||||
const pageCss = css({
|
||||
display: "flex",
|
||||
});
|
||||
const sidebarCss = css({
|
||||
borderRight: "1px solid #b7b7b7",
|
||||
paddingRight: "1rem",
|
||||
marginRight: "1rem",
|
||||
width: "233px",
|
||||
});
|
||||
const SidebarRow = css({
|
||||
marginTop: "1rem",
|
||||
});
|
||||
const sidebarCheckbox = css({
|
||||
...SidebarRow,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
p: {
|
||||
marginRight: "1rem",
|
||||
display: "inline-bloc",
|
||||
},
|
||||
});
|
||||
|
||||
interface IndexProps {
|
||||
totalItems: number;
|
||||
currentPage: number;
|
||||
@ -60,21 +83,10 @@ export const Index: NextPage<IndexProps> = ({
|
||||
}));
|
||||
|
||||
return (
|
||||
<SimpleGrid columns={1} margin="0.7rem">
|
||||
<SimpleGrid columns={1}>
|
||||
<Panel title="Blueprints">
|
||||
<Box
|
||||
css={{
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
css={{
|
||||
borderRight: "1px solid #b7b7b7",
|
||||
paddingRight: "1rem",
|
||||
marginRight: "1rem",
|
||||
width: "213px",
|
||||
}}
|
||||
>
|
||||
<Box css={pageCss}>
|
||||
<Box css={sidebarCss}>
|
||||
<Box>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents="none" children={<MdSearch />} />
|
||||
@ -92,9 +104,9 @@ export const Index: NextPage<IndexProps> = ({
|
||||
/>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Sort order</Text>
|
||||
<Box css={{ marginRight: "1rem" }}>
|
||||
<Box css={SidebarRow}>
|
||||
<Text>Sort order</Text>
|
||||
<Box>
|
||||
<RadioGroup
|
||||
onChange={(value: string) => router.push(routerQueryToHref({ order: value }))}
|
||||
value={(router.query.order as string) || "date"}
|
||||
@ -106,9 +118,9 @@ export const Index: NextPage<IndexProps> = ({
|
||||
</RadioGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Search mode</Text>
|
||||
<Box css={{ marginRight: "1rem" }}>
|
||||
<Box css={SidebarRow}>
|
||||
<Text>Search mode</Text>
|
||||
<Box>
|
||||
<RadioGroup
|
||||
onChange={(value: string) => router.push(routerQueryToHref({ mode: value }))}
|
||||
value={(router.query.mode as string) || "and"}
|
||||
@ -120,8 +132,8 @@ export const Index: NextPage<IndexProps> = ({
|
||||
</RadioGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Tags</Text>
|
||||
<Box css={SidebarRow}>
|
||||
<Text>Tags</Text>
|
||||
<Select
|
||||
options={tagsOptions}
|
||||
value={queryValueAsArray(router.query.tags)}
|
||||
@ -129,8 +141,8 @@ export const Index: NextPage<IndexProps> = ({
|
||||
css={{ width: "200px", marginRight: "1rem" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Entities</Text>
|
||||
<Box css={SidebarRow}>
|
||||
<Text>Entities</Text>
|
||||
<Select
|
||||
options={entityOptions}
|
||||
value={queryValueAsArray(router.query.entities)}
|
||||
@ -138,8 +150,8 @@ export const Index: NextPage<IndexProps> = ({
|
||||
css={{ width: "200px", marginRight: "1rem" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Recipes</Text>
|
||||
<Box css={SidebarRow}>
|
||||
<Text>Recipes</Text>
|
||||
<Select
|
||||
options={recipeOptions}
|
||||
value={queryValueAsArray(router.query.recipes)}
|
||||
@ -147,8 +159,8 @@ export const Index: NextPage<IndexProps> = ({
|
||||
css={{ width: "200px", marginRight: "1rem" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Items</Text>
|
||||
<Box css={SidebarRow}>
|
||||
<Text>Items</Text>
|
||||
<Select
|
||||
options={itemOptions}
|
||||
value={queryValueAsArray(router.query.items)}
|
||||
@ -156,8 +168,8 @@ export const Index: NextPage<IndexProps> = ({
|
||||
css={{ width: "200px", marginRight: "1rem" }}
|
||||
/>
|
||||
</Box>
|
||||
<Box css={{ marginTop: "1rem", display: "flex", alignItems: "center" }}>
|
||||
<Text css={{ marginRight: "1rem", display: "inline-block" }}>Snaps to grid</Text>
|
||||
<Box css={sidebarCheckbox}>
|
||||
<Text>Snaps to grid</Text>
|
||||
<Checkbox
|
||||
value="true"
|
||||
onChange={(ev) =>
|
||||
|
||||
@ -27,99 +27,97 @@ export const Login: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="600px">
|
||||
<Panel title="Login">
|
||||
<Formik
|
||||
initialValues={{ email: "", password: "" }}
|
||||
validate={validateLoginForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
|
||||
setStatus("");
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="600px">
|
||||
<Panel title="Login">
|
||||
<Formik
|
||||
initialValues={{ email: "", password: "" }}
|
||||
validate={validateLoginForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
|
||||
setStatus("");
|
||||
|
||||
const result = await fetch("/api/login", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
const result = await fetch("/api/login", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
|
||||
if (result.status) {
|
||||
setSubmitting(false);
|
||||
setStatus(result.status);
|
||||
} else if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push("/");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, status }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="email">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="email"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Email address</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
if (result.status) {
|
||||
setSubmitting(false);
|
||||
setStatus(result.status);
|
||||
} else if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push("/");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, status }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="email">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="email"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Email address</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="password">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="password"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<Input type="password" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="password">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="password"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<Input type="password" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Box>
|
||||
<Box css={{ display: "flex", alignItems: "center" }}>
|
||||
<Button type="submit" colorScheme="green" disabled={isSubmitting}>
|
||||
Login
|
||||
</Button>
|
||||
{status && <Text css={{ marginLeft: "1rem", color: "red" }}>{status}</Text>}
|
||||
</Box>
|
||||
|
||||
<div css={{ float: "right", display: "flex", alignItems: "center" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Make an account instead?</Text>
|
||||
<Link href="/register">
|
||||
<a>
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="grey"
|
||||
variant="outline"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<Box>
|
||||
<Box css={{ display: "flex", alignItems: "center" }}>
|
||||
<Button type="submit" colorScheme="green" disabled={isSubmitting}>
|
||||
Login
|
||||
</Button>
|
||||
{status && <Text css={{ marginLeft: "1rem", color: "red" }}>{status}</Text>}
|
||||
</Box>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Panel>
|
||||
<Panel title="Or login with" marginTop="1rem">
|
||||
<Box>
|
||||
<SteamLogin />
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
|
||||
<div css={{ float: "right", display: "flex", alignItems: "center" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Make an account instead?</Text>
|
||||
<Link href="/register">
|
||||
<a>
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="grey"
|
||||
variant="outline"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Panel>
|
||||
<Panel title="Or login with" marginTop="1rem">
|
||||
<Box>
|
||||
<SteamLogin />
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -28,122 +28,120 @@ export const Register: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="600px">
|
||||
<Panel title="Register">
|
||||
<Formik
|
||||
initialValues={{ email: "", username: "", password: "", password_confirm: "" }}
|
||||
validate={validateRegisterForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors }) => {
|
||||
const result = await fetch("/api/register", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="600px">
|
||||
<Panel title="Register">
|
||||
<Formik
|
||||
initialValues={{ email: "", username: "", password: "", password_confirm: "" }}
|
||||
validate={validateRegisterForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors }) => {
|
||||
const result = await fetch("/api/register", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
|
||||
if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push("/");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, errors }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="email">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="email"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Email address</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
<FormHelperText>We'll never share your email.</FormHelperText>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push("/");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, errors }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="email">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="email"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Email address</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
<FormHelperText>We'll never share your email.</FormHelperText>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="username">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="username"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="username">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="username"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="password">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="password"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<Input type="password" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="password">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="password"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<Input type="password" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="password_confirm">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="password_confirm"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Repeat Password</FormLabel>
|
||||
<Input type="password" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="password_confirm">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="password_confirm"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Repeat Password</FormLabel>
|
||||
<Input type="password" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Box>
|
||||
<Button type="submit" colorScheme="green" disabled={isSubmitting}>
|
||||
Register
|
||||
</Button>
|
||||
<Box>
|
||||
<Button type="submit" colorScheme="green" disabled={isSubmitting}>
|
||||
Register
|
||||
</Button>
|
||||
|
||||
<div css={{ float: "right", display: "flex", alignItems: "center" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Already have an account?</Text>
|
||||
<Link href="/login">
|
||||
<a>
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="grey"
|
||||
variant="outline"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Panel>
|
||||
<Panel title="Or register with" marginTop="1rem">
|
||||
<Box>
|
||||
<SteamLogin />
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
<div css={{ float: "right", display: "flex", alignItems: "center" }}>
|
||||
<Text css={{ marginRight: "1rem" }}>Already have an account?</Text>
|
||||
<Link href="/login">
|
||||
<a>
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="grey"
|
||||
variant="outline"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Panel>
|
||||
<Panel title="Or register with" marginTop="1rem">
|
||||
<Box>
|
||||
<SteamLogin />
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -35,120 +35,114 @@ export const UserBlueprintCreate: NextPage = () => {
|
||||
}));
|
||||
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<Formik
|
||||
initialValues={{ title: "", description: "", string: "", tags: [] }}
|
||||
validate={validateCreateBlueprintForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
|
||||
setStatus("");
|
||||
<Formik
|
||||
initialValues={{ title: "", description: "", string: "", tags: [] }}
|
||||
validate={validateCreateBlueprintForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
|
||||
setStatus("");
|
||||
|
||||
const result = await fetch("/api/blueprint/create", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
const result = await fetch("/api/blueprint/create", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
|
||||
if (result.status) {
|
||||
setSubmitting(false);
|
||||
setStatus(result.status);
|
||||
} else if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push(`/blueprint/${result.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, status, values, errors, setFieldValue }) => (
|
||||
<SimpleGrid
|
||||
columns={2}
|
||||
gap={6}
|
||||
templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
|
||||
>
|
||||
<Panel title="Create new blueprint">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="title">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="title"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="description">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="description"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<Textarea {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="tags">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="tags"
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Tags</FormLabel>
|
||||
<Select
|
||||
options={tagsOptions}
|
||||
value={field.value}
|
||||
onChange={(tags) => setFieldValue("tags", tags)}
|
||||
/>
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="string">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="string"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Blueprint string</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Box css={{ display: "flex", alignItems: "center" }}>
|
||||
<Button primary type="submit" disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
{status && <Text css={{ marginLeft: "1rem", color: "red" }}>{status}</Text>}
|
||||
</Box>
|
||||
</form>
|
||||
</Panel>
|
||||
<Panel title="Preview">
|
||||
<Box>
|
||||
{values.string && !errors.string && (
|
||||
<ImageEditor string={values.string}></ImageEditor>
|
||||
if (result.status) {
|
||||
setSubmitting(false);
|
||||
setStatus(result.status);
|
||||
} else if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push(`/blueprint/${result.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, status, values, errors, setFieldValue }) => (
|
||||
<SimpleGrid
|
||||
columns={2}
|
||||
gap={6}
|
||||
templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
|
||||
>
|
||||
<Panel title="Create new blueprint">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="title">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="title"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="description">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="description"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<Textarea {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="tags">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl id="tags" isInvalid={meta.touched && !!meta.error} css={FieldStyle}>
|
||||
<FormLabel>Tags</FormLabel>
|
||||
<Select
|
||||
options={tagsOptions}
|
||||
value={field.value}
|
||||
onChange={(tags) => setFieldValue("tags", tags)}
|
||||
/>
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="string">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="string"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Blueprint string</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Box css={{ display: "flex", alignItems: "center" }}>
|
||||
<Button primary type="submit" disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
{status && <Text css={{ marginLeft: "1rem", color: "red" }}>{status}</Text>}
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</form>
|
||||
</Panel>
|
||||
<Panel title="Preview">
|
||||
<Box>
|
||||
{values.string && !errors.string && (
|
||||
<ImageEditor string={values.string}></ImageEditor>
|
||||
)}
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -52,128 +52,122 @@ export const UserBlueprint: NextPage<UserBlueprintProps> = ({ blueprintPage, sel
|
||||
}));
|
||||
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<Formik
|
||||
initialValues={{
|
||||
title: blueprintPage.title,
|
||||
description: blueprintPage.description_markdown,
|
||||
string: selected.string,
|
||||
tags: blueprintPage.tags || ([] as string[]),
|
||||
}}
|
||||
validate={validateCreateBlueprintForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
|
||||
setStatus("");
|
||||
<Formik
|
||||
initialValues={{
|
||||
title: blueprintPage.title,
|
||||
description: blueprintPage.description_markdown,
|
||||
string: selected.string,
|
||||
tags: blueprintPage.tags || ([] as string[]),
|
||||
}}
|
||||
validate={validateCreateBlueprintForm}
|
||||
onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
|
||||
setStatus("");
|
||||
|
||||
const result = await fetch("/api/blueprint/edit", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
...values,
|
||||
id: blueprintPage.id,
|
||||
}),
|
||||
}).then((res) => res.json());
|
||||
const result = await fetch("/api/blueprint/edit", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
...values,
|
||||
id: blueprintPage.id,
|
||||
}),
|
||||
}).then((res) => res.json());
|
||||
|
||||
if (result.status) {
|
||||
setSubmitting(false);
|
||||
setStatus(result.status);
|
||||
} else if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push(`/blueprint/${result.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, status, values, errors, setFieldValue }) => (
|
||||
<SimpleGrid
|
||||
columns={2}
|
||||
gap={6}
|
||||
templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
|
||||
>
|
||||
<Panel title="Create new blueprint">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="title">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="title"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="description">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="description"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<Textarea {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="tags">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="tags"
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Tags</FormLabel>
|
||||
<Select
|
||||
options={tagsOptions}
|
||||
value={field.value}
|
||||
onChange={(tags) => setFieldValue("tags", tags)}
|
||||
/>
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="string">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="string"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Blueprint string</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Box css={{ display: "flex", alignItems: "center" }}>
|
||||
<Button primary type="submit" disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
{status && <Text css={{ marginLeft: "1rem", color: "red" }}>{status}</Text>}
|
||||
</Box>
|
||||
</form>
|
||||
</Panel>
|
||||
<Panel title="Preview">
|
||||
<Box>
|
||||
{values.string && !errors.string && (
|
||||
<ImageEditor string={values.string}></ImageEditor>
|
||||
if (result.status) {
|
||||
setSubmitting(false);
|
||||
setStatus(result.status);
|
||||
} else if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else if (result.success) {
|
||||
router.push(`/blueprint/${result.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit, status, values, errors, setFieldValue }) => (
|
||||
<SimpleGrid
|
||||
columns={2}
|
||||
gap={6}
|
||||
templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
|
||||
>
|
||||
<Panel title="Create new blueprint">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="title">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="title"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="description">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="description"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<Textarea {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="tags">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl id="tags" isInvalid={meta.touched && !!meta.error} css={FieldStyle}>
|
||||
<FormLabel>Tags</FormLabel>
|
||||
<Select
|
||||
options={tagsOptions}
|
||||
value={field.value}
|
||||
onChange={(tags) => setFieldValue("tags", tags)}
|
||||
/>
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="string">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="string"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Blueprint string</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Box css={{ display: "flex", alignItems: "center" }}>
|
||||
<Button primary type="submit" disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
{status && <Text css={{ marginLeft: "1rem", color: "red" }}>{status}</Text>}
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</form>
|
||||
</Panel>
|
||||
<Panel title="Preview">
|
||||
<Box>
|
||||
{values.string && !errors.string && (
|
||||
<ImageEditor string={values.string}></ImageEditor>
|
||||
)}
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -16,34 +16,30 @@ export const UserBlueprints: NextPage<UserBlueprintsProps> = ({ blueprints }) =>
|
||||
if (!blueprints) return null;
|
||||
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="800px">
|
||||
<Panel title="Blueprints">
|
||||
<Box
|
||||
css={{
|
||||
display: "flex",
|
||||
borderBottom: "1px solid #b7b7b7",
|
||||
paddingBottom: "0.3rem",
|
||||
}}
|
||||
>
|
||||
<Link href="/user/blueprint-create">
|
||||
<a>
|
||||
<Button primary>Create Blueprint</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
{blueprints.length !== 0 ? (
|
||||
blueprints.map((bp) => (
|
||||
<BlueprintLink key={bp.id} blueprint={bp} editLink type="row" />
|
||||
))
|
||||
) : (
|
||||
<p css={{ marginTop: "10px" }}>You don't have any blueprints yet</p>
|
||||
)}
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="800px">
|
||||
<Panel title="Blueprints">
|
||||
<Box
|
||||
css={{
|
||||
display: "flex",
|
||||
borderBottom: "1px solid #b7b7b7",
|
||||
paddingBottom: "0.3rem",
|
||||
}}
|
||||
>
|
||||
<Link href="/user/blueprint-create">
|
||||
<a>
|
||||
<Button primary>Create Blueprint</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box>
|
||||
{blueprints.length !== 0 ? (
|
||||
blueprints.map((bp) => <BlueprintLink key={bp.id} blueprint={bp} editLink type="row" />)
|
||||
) : (
|
||||
<p css={{ marginTop: "10px" }}>You don't have any blueprints yet</p>
|
||||
)}
|
||||
</Box>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -19,74 +19,72 @@ export const UserEdit: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div css={{ margin: "0.7rem" }}>
|
||||
<SimpleGrid columns={1} margin="0 auto" maxWidth="600px">
|
||||
<Panel title="Account settings">
|
||||
<Formik
|
||||
initialValues={{ username: auth?.username ?? "", email: auth?.email ?? "" }}
|
||||
validate={validateUserForm(auth)}
|
||||
onSubmit={async (values, { setSubmitting, setErrors }) => {
|
||||
const result = await fetch("/api/user/edit", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
<SimpleGrid columns={1} margin="0 auto" width="600px">
|
||||
<Panel title="Account settings">
|
||||
<Formik
|
||||
initialValues={{ username: auth?.username ?? "", email: auth?.email ?? "" }}
|
||||
validate={validateUserForm(auth)}
|
||||
onSubmit={async (values, { setSubmitting, setErrors }) => {
|
||||
const result = await fetch("/api/user/edit", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
}).then((res) => res.json());
|
||||
|
||||
if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else {
|
||||
// Update user session data
|
||||
router.reload();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="email">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="email"
|
||||
isRequired={!auth?.steam_id}
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Email address</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
if (result.errors) {
|
||||
setSubmitting(false);
|
||||
setErrors(result.errors);
|
||||
} else {
|
||||
// Update user session data
|
||||
router.reload();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, handleSubmit }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="email">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="email"
|
||||
isRequired={!auth?.steam_id}
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Email address</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field name="username">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="username"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="username">
|
||||
{({ field, meta }: FieldProps) => (
|
||||
<FormControl
|
||||
id="username"
|
||||
isRequired
|
||||
isInvalid={meta.touched && !!meta.error}
|
||||
css={FieldStyle}
|
||||
>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<Input type="text" {...field} />
|
||||
<FormErrorMessage>{meta.error}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Button
|
||||
primary
|
||||
css={{ width: 80, textAlign: "center" }}
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
<Button
|
||||
primary
|
||||
css={{ width: 80, textAlign: "center" }}
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</Panel>
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user