Merge pull request #26 from sampaioxsamuel/fix-sign-up

Fix empty spaces in sign-in/sign-up inputs

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) => {
-            if (json.error) {
-                setError(json.error.message)
-            } else {
-                localStorage.setItem('drift-token', json.token)
-                localStorage.setItem('drift-userid', json.userId)
-                router.push('/')
-            }
-        }
+    const handleJson = (json: any) => {
+        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,23 +41,16 @@ 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()
-                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")
-            }
+        try {
+            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")
         }
     }
 
@@ -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 && <Text>Already have an account? <Link color href="/signin" >Sign in</Link></Text>}
+                            {signingIn ? (
+                                <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/new-post/drag-and-drop/index.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './drag-and-drop.module.css'
 import { Document } from '../'
-import generateUUID from '../../../lib/generate-uuid'
+import generateUUID from '@lib/generate-uuid'
 import { XCircle } from '@geist-ui/icons'
 const allowedFileTypes = [
     'application/json',

client/components/new-post/index.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react'
-import generateUUID from '../../lib/generate-uuid';
+import generateUUID from '@lib/generate-uuid';
 import Document from '../document';
 import FileDropzone from './drag-and-drop';
 import styles from './post.module.css'

client/components/new-post/title/index.tsx

@@ -1,6 +1,6 @@
 import { Text, Input } from '@geist-ui/core'
 import { memo } from 'react'
-import ShiftBy from '../../shift-by'
+import ShiftBy from '@components/shift-by'
 import styles from '../post.module.css'
 
 const titlePlaceholders = [

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/components/post-list/list-item.tsx

@@ -1,7 +1,7 @@
 import { Card, Spacer, Grid, Divider, Link, Text, Input, Tooltip } from "@geist-ui/core"
 import NextLink from "next/link"
 import { useEffect, useMemo, useState } from "react"
-import timeAgo from "../../lib/time-ago"
+import timeAgo from "@lib/time-ago"
 import ShiftBy from "../shift-by"
 import VisibilityBadge from "../visibility-badge"
 

client/components/preview/react-markdown-preview.tsx

@@ -6,7 +6,7 @@ import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import a11yEmoji from '@fec/remark-a11y-emoji';
 import styles from './preview.module.css'
 import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism'
-import useSharedState from "../../lib/hooks/use-shared-state";
+import useSharedState from "@lib/hooks/use-shared-state";
 
 type Props = {
     content: string | undefined

client/pages/_app.tsx

@@ -1,8 +1,8 @@
-import '../styles/globals.css'
+import '@styles/globals.css'
 import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core'
 import { useEffect, useMemo, useState } from 'react'
 import type { AppProps as NextAppProps } from "next/app";
-import useSharedState from '../lib/hooks/use-shared-state';
+import useSharedState from '@lib/hooks/use-shared-state';
 
 import 'react-loading-skeleton/dist/skeleton.css'
 import { SkeletonTheme } from 'react-loading-skeleton';
@@ -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,12 +1,12 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import styles from '@styles/Home.module.css'
 import { Page, Spacer, Text } from '@geist-ui/core'
 
-import Header from '../components/header'
+import Header from '@components/header'
 import { ThemeProps } from './_app'
-import Document from '../components/document'
+import Document from '@components/document'
 import Image from 'next/image'
-import ShiftBy from '../components/shift-by'
+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>
@@ -45,7 +44,7 @@ const Home = ({ theme, changeTheme, introContent }: Props) => {
           initialTab={`preview`}
         />
       </Page.Content>
-    </Page >
+    </Page>
   )
 }
 

client/pages/mine.tsx

@@ -1,17 +1,12 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import styles from '@styles/Home.module.css'
 import { Page } from '@geist-ui/core'
 
-import Header from '../components/header'
-import MyPosts from '../components/my-posts'
+import Header from '@components/header'
+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,11 +1,11 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import NewPost from '../components/new-post'
+import styles from '@styles/Home.module.css'
+import NewPost from '@components/new-post'
 import { Page } from '@geist-ui/core'
-import useSignedIn from '../lib/hooks/use-signed-in'
-import Header from '../components/header'
+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} />

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

client/pages/signin.tsx

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

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

client/tsconfig.json

@@ -13,7 +13,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"],
+      "@lib/*": ["lib/*"],
+      "@styles/*": ["styles/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]