fix: sign-in/up and add head component
This commit is contained in:
parent
bbbbb19d26
commit
7f50654da4
10 changed files with 94 additions and 63 deletions
|
@ -6,23 +6,32 @@ import Link from '../Link'
|
|||
|
||||
const Auth = ({ page }: { page: "signup" | "signin" }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const signingIn = page === 'signin'
|
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
const NO_EMPTY_SPACE_REGEX = /^\S*$/;
|
||||
|
||||
const handleJson = (json: any) => {
|
||||
if (json.error) {
|
||||
setError(json.error.message)
|
||||
} else {
|
||||
if (json.error) return setError(json.error.message)
|
||||
|
||||
localStorage.setItem('drift-token', json.token)
|
||||
localStorage.setItem('drift-userid', json.userId)
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!username.match(NO_EMPTY_SPACE_REGEX))
|
||||
return setError("Username can't be empty")
|
||||
|
||||
if (!password.match(NO_EMPTY_SPACE_REGEX))
|
||||
return setError("Password can't be empty")
|
||||
|
||||
const reqOpts = {
|
||||
method: 'POST',
|
||||
|
@ -32,24 +41,17 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
|
|||
body: JSON.stringify({ username, password })
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
if (signingIn) {
|
||||
try {
|
||||
const resp = await fetch('/server-api/auth/signin', reqOpts)
|
||||
const json = await resp.json()
|
||||
const signUrl = signingIn ? '/server-api/auth/signin' : '/server-api/auth/signup';
|
||||
const resp = await fetch(signUrl, reqOpts);
|
||||
const json = await resp.json();
|
||||
|
||||
if (!resp.ok) throw new Error();
|
||||
|
||||
handleJson(json)
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Something went wrong")
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const resp = await fetch('/server-api/auth/signup', reqOpts)
|
||||
const json = await resp.json()
|
||||
handleJson(json)
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Something went wrong")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -86,8 +88,17 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
|
|||
<Button type="success" ghost htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
|
||||
</div>
|
||||
<div className={styles.formGroup}>
|
||||
{signingIn && <Text>Don't have an account? <Link color href="/signup" >Sign up</Link></Text>}
|
||||
{!signingIn && <Text>Already have an account? <Link color href="/signin" >Sign in</Link></Text>}
|
||||
{signingIn ? (
|
||||
<Text>
|
||||
Don't have an account?{" "}
|
||||
<Link color href="/signup">Sign up</Link>
|
||||
</Text>
|
||||
) : (
|
||||
<Text>
|
||||
Already have an account?{" "}
|
||||
<Link color href="/signin">Sign in</Link>
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{error && <Text type='error'>{error}</Text>}
|
||||
</Card>
|
||||
|
|
27
client/components/page-seo/index.tsx
Normal file
27
client/components/page-seo/index.tsx
Normal file
|
@ -0,0 +1,27 @@
|
|||
import Head from "next/head";
|
||||
import React from "react";
|
||||
|
||||
type PageSeoProps = {
|
||||
title?: string;
|
||||
description?: string;
|
||||
isLoading?: boolean;
|
||||
isPrivate?: boolean
|
||||
};
|
||||
|
||||
const PageSeo = ({
|
||||
title = 'Drift',
|
||||
description = "A self-hostable clone of GitHub Gist",
|
||||
isPrivate = false
|
||||
}: PageSeoProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
{!isPrivate && <meta name="description" content={description} />}
|
||||
</Head>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageSeo;
|
|
@ -58,6 +58,7 @@ function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
|
|||
<meta name="application-name" content="Drift" />
|
||||
<meta name="msapplication-TileColor" content="#da532c" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<title>Drift</title>
|
||||
</Head>
|
||||
<GeistProvider themeType={themeType} >
|
||||
<SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import Head from 'next/head'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import { Page, Spacer, Text } from '@geist-ui/core'
|
||||
|
||||
|
@ -7,6 +6,7 @@ import { ThemeProps } from './_app'
|
|||
import Document from '../components/document'
|
||||
import Image from 'next/image'
|
||||
import ShiftBy from '../components/shift-by'
|
||||
import PageSeo from 'components/page-seo'
|
||||
|
||||
export function getStaticProps() {
|
||||
const introDoc = process.env.WELCOME_CONTENT
|
||||
|
@ -25,10 +25,9 @@ type Props = ThemeProps & {
|
|||
const Home = ({ theme, changeTheme, introContent }: Props) => {
|
||||
return (
|
||||
<Page className={styles.container} width="100%">
|
||||
<Head>
|
||||
<title>Drift</title>
|
||||
<meta name="description" content="A self-hostable clone of GitHub Gist" />
|
||||
</Head>
|
||||
<PageSeo />
|
||||
|
||||
|
||||
<Page.Header>
|
||||
<Header theme={theme} changeTheme={changeTheme} />
|
||||
</Page.Header>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import Head from 'next/head'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import { Page } from '@geist-ui/core'
|
||||
|
||||
|
@ -8,10 +7,6 @@ import MyPosts from '../components/my-posts'
|
|||
const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => {
|
||||
return (
|
||||
<Page className={styles.container} width="100%">
|
||||
<Head>
|
||||
<title>Drift</title>
|
||||
<meta name="description" content="A self-hostable clone of GitHub Gist" />
|
||||
</Head>
|
||||
<Page.Header>
|
||||
<Header theme={theme} changeTheme={changeTheme} />
|
||||
</Page.Header>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import Head from 'next/head'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import NewPost from '../components/new-post'
|
||||
import { Page } from '@geist-ui/core'
|
||||
|
@ -6,6 +5,7 @@ import useSignedIn from '../lib/hooks/use-signed-in'
|
|||
import Header from '../components/header'
|
||||
import { ThemeProps } from './_app'
|
||||
import { useRouter } from 'next/router'
|
||||
import PageSeo from 'components/page-seo'
|
||||
|
||||
const Home = ({ theme, changeTheme }: ThemeProps) => {
|
||||
const router = useRouter()
|
||||
|
@ -15,9 +15,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
|
|||
}
|
||||
return (
|
||||
<Page className={styles.container} width="100%">
|
||||
<Head>
|
||||
<title>Drift</title>
|
||||
</Head>
|
||||
<PageSeo title="Drift - New" />
|
||||
|
||||
<Page.Header>
|
||||
<Header theme={theme} changeTheme={changeTheme} />
|
||||
|
|
|
@ -7,7 +7,7 @@ import Document from '../../components/document'
|
|||
import Header from "../../components/header";
|
||||
import VisibilityBadge from "../../components/visibility-badge";
|
||||
import { ThemeProps } from "../_app";
|
||||
import Head from "next/head";
|
||||
import PageSeo from "components/page-seo";
|
||||
|
||||
const Post = ({ theme, changeTheme }: ThemeProps) => {
|
||||
const [post, setPost] = useState<any>()
|
||||
|
@ -65,11 +65,14 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
|
|||
|
||||
return (
|
||||
<Page width={"100%"}>
|
||||
<Head>
|
||||
{isLoading && <title>loading - Drift</title>}
|
||||
{!isLoading && <title>{post.title} - Drift</title>}
|
||||
{!isLoading && post.visibility !== 'private' && <meta name="description" content={post.description} />}
|
||||
</Head>
|
||||
{!isLoading && (
|
||||
<PageSeo
|
||||
title={`${post.title} - Drift`}
|
||||
description={post.description}
|
||||
isPrivate={post.visibility === 'private'}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Page.Header>
|
||||
<Header theme={theme} changeTheme={changeTheme} />
|
||||
</Page.Header>
|
||||
|
|
|
@ -1,15 +1,13 @@
|
|||
import { Page } from "@geist-ui/core";
|
||||
import Head from 'next/head'
|
||||
import PageSeo from "components/page-seo";
|
||||
import Auth from "../components/auth";
|
||||
import Header from "../components/header";
|
||||
import { ThemeProps } from "./_app";
|
||||
|
||||
const SignIn = ({ theme, changeTheme }: ThemeProps) => (
|
||||
<Page width={"100%"}>
|
||||
<Head>
|
||||
<title>Drift - Sign In</title>
|
||||
<meta name="description" content="A self-hostable clone of GitHub Gist" />
|
||||
</Head>
|
||||
<PageSeo title="Drift - Sign In" />
|
||||
|
||||
<Page.Header>
|
||||
<Header theme={theme} changeTheme={changeTheme} />
|
||||
</Page.Header>
|
||||
|
|
|
@ -1,15 +1,13 @@
|
|||
import { Page } from "@geist-ui/core";
|
||||
import Head from "next/head";
|
||||
import Auth from "../components/auth";
|
||||
import Header from "../components/header";
|
||||
import Auth from "components/auth";
|
||||
import Header from "components/header";
|
||||
import PageSeo from 'components/page-seo';
|
||||
import { ThemeProps } from "./_app";
|
||||
|
||||
const SignUp = ({ theme, changeTheme }: ThemeProps) => (
|
||||
<Page width="100%">
|
||||
<Head>
|
||||
<title>Drift - Sign Up</title>
|
||||
<meta name="description" content="A self-hostable clone of GitHub Gist" />
|
||||
</Head>
|
||||
<PageSeo title="Drift - Sign Up" />
|
||||
|
||||
<Page.Header>
|
||||
<Header theme={theme} changeTheme={changeTheme} />
|
||||
</Page.Header>
|
||||
|
|
|
@ -13,7 +13,8 @@
|
|||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
"incremental": true,
|
||||
"baseUrl": "./"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
|
|
Loading…
Reference in a new issue