fix: sign-in/up and add head component

client/components/auth/index.tsx

@@ -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) => {
+    const handleJson = (json: any) => {
-            if (json.error) {
+        if (json.error) return setError(json.error.message)
-                setError(json.error.message)
+
-            } else {
+        localStorage.setItem('drift-token', json.token)
-                localStorage.setItem('drift-token', json.token)
+        localStorage.setItem('drift-userid', json.userId)
-                localStorage.setItem('drift-userid', json.userId)
+        router.push('/')
-                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,23 +41,16 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
             body: JSON.stringify({ username, password })
         }
 
-        e.preventDefault()
+        try {
-        if (signingIn) {
+            const signUrl = signingIn ? '/server-api/auth/signin' : '/server-api/auth/signup';
-            try {
+            const resp = await fetch(signUrl, reqOpts);
-                const resp = await fetch('/server-api/auth/signin', reqOpts)
+            const json = await resp.json();
-                const json = await resp.json()
+
-                handleJson(json)
+            if (!resp.ok) throw new Error();
-            } catch (err: any) {
+
-                setError(err.message || "Something went wrong")
+            handleJson(json)
-            }
+        } catch (err: any) {
-        } else {
+            setError(err.message || "Something went wrong")
-            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")
-            }
         }
     }
 
@@ -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&apos;t have an account? <Link color href="/signup" >Sign up</Link></Text>}
+                            {signingIn ? (
-                            {!signingIn && <Text>Already have an account? <Link color href="/signin" >Sign in</Link></Text>}
+                                <Text>
+                                    Don&apos;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>

client/components/page-seo/index.tsx

@@ -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;

client/pages/_app.tsx

@@ -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}>

client/pages/index.tsx

@@ -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>
+      <PageSeo />
-        <title>Drift</title>
+
-        <meta name="description" content="A self-hostable clone of GitHub Gist" />
+
-      </Head>
       <Page.Header>
         <Header theme={theme} changeTheme={changeTheme} />
       </Page.Header>
@@ -45,7 +44,7 @@ const Home = ({ theme, changeTheme, introContent }: Props) => {
           initialTab={`preview`}
         />
       </Page.Content>
-    </Page >
+    </Page>
   )
 }
 

client/pages/mine.tsx

@@ -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>

client/pages/new.tsx

@@ -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>
+      <PageSeo title="Drift - New" />
-        <title>Drift</title>
-      </Head>
 
       <Page.Header>
         <Header theme={theme} changeTheme={changeTheme} />

client/pages/post/[id].tsx

@@ -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 && (
-                {isLoading && <title>loading - Drift</title>}
+                <PageSeo
-                {!isLoading && <title>{post.title} - Drift</title>}
+                    title={`${post.title} - Drift`}
-                {!isLoading && post.visibility !== 'private' && <meta name="description" content={post.description} />}
+                    description={post.description}
-            </Head>
+                    isPrivate={post.visibility === 'private'}
+                />
+            )}
+
             <Page.Header>
                 <Header theme={theme} changeTheme={changeTheme} />
             </Page.Header>

client/pages/signin.tsx

@@ -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>
+        <PageSeo title="Drift - Sign In" />
-            <title>Drift - Sign In</title>
+
-            <meta name="description" content="A self-hostable clone of GitHub Gist" />
-        </Head>
         <Page.Header>
             <Header theme={theme} changeTheme={changeTheme} />
         </Page.Header>

client/pages/signup.tsx

@@ -1,15 +1,13 @@
 import { Page } from "@geist-ui/core";
-import Head from "next/head";
+import Auth from "components/auth";
-import Auth from "../components/auth";
+import Header from "components/header";
-import Header from "../components/header";
+import PageSeo from 'components/page-seo';
 import { ThemeProps } from "./_app";
 
 const SignUp = ({ theme, changeTheme }: ThemeProps) => (
     <Page width="100%">
-        <Head>
+        <PageSeo title="Drift - Sign Up" />
-            <title>Drift - Sign Up</title>
+
-            <meta name="description" content="A self-hostable clone of GitHub Gist" />
-        </Head>
         <Page.Header>
             <Header theme={theme} changeTheme={changeTheme} />
         </Page.Header>

client/tsconfig.json

@@ -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"]