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

Fix empty spaces in sign-in/sign-up inputs
This commit is contained in:
Max Leiter 2022-03-12 20:51:02 -08:00 committed by GitHub
commit a490b94bce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 119 additions and 83 deletions

View file

@ -6,23 +6,32 @@ import Link from '../Link'
const Auth = ({ page }: { page: "signup" | "signin" }) => { const Auth = ({ page }: { page: "signup" | "signin" }) => {
const router = useRouter(); const router = useRouter();
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const signingIn = page === 'signin' 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 = { const reqOpts = {
method: 'POST', method: 'POST',
@ -32,24 +41,17 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
body: JSON.stringify({ username, password }) body: JSON.stringify({ username, password })
} }
e.preventDefault()
if (signingIn) {
try { try {
const resp = await fetch('/server-api/auth/signin', reqOpts) const signUrl = signingIn ? '/server-api/auth/signin' : '/server-api/auth/signup';
const json = await resp.json() const resp = await fetch(signUrl, reqOpts);
const json = await resp.json();
if (!resp.ok) throw new Error();
handleJson(json) handleJson(json)
} catch (err: any) { } catch (err: any) {
setError(err.message || "Something went wrong") 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 ( return (
@ -86,8 +88,17 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
<Button type="success" ghost htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button> <Button type="success" ghost htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
</div> </div>
<div className={styles.formGroup}> <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> </div>
{error && <Text type='error'>{error}</Text>} {error && <Text type='error'>{error}</Text>}
</Card> </Card>

View file

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

View file

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

View file

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

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

View file

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

View file

@ -6,7 +6,7 @@ import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import a11yEmoji from '@fec/remark-a11y-emoji'; import a11yEmoji from '@fec/remark-a11y-emoji';
import styles from './preview.module.css' import styles from './preview.module.css'
import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism' 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 = { type Props = {
content: string | undefined content: string | undefined

View file

@ -1,8 +1,8 @@
import '../styles/globals.css' import '@styles/globals.css'
import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core' import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import type { AppProps as NextAppProps } from "next/app"; 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 'react-loading-skeleton/dist/skeleton.css'
import { SkeletonTheme } from 'react-loading-skeleton'; import { SkeletonTheme } from 'react-loading-skeleton';
@ -58,6 +58,7 @@ function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
<meta name="application-name" content="Drift" /> <meta name="application-name" content="Drift" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<title>Drift</title>
</Head> </Head>
<GeistProvider themeType={themeType} > <GeistProvider themeType={themeType} >
<SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}> <SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>

View file

@ -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 { Page, Spacer, Text } from '@geist-ui/core'
import Header from '../components/header' import Header from '@components/header'
import { ThemeProps } from './_app' import { ThemeProps } from './_app'
import Document from '../components/document' import Document from '@components/document'
import Image from 'next/image' 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() { export function getStaticProps() {
const introDoc = process.env.WELCOME_CONTENT const introDoc = process.env.WELCOME_CONTENT
@ -25,10 +25,9 @@ type Props = ThemeProps & {
const Home = ({ theme, changeTheme, introContent }: Props) => { const Home = ({ theme, changeTheme, introContent }: Props) => {
return ( return (
<Page className={styles.container} width="100%"> <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> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>
@ -45,7 +44,7 @@ const Home = ({ theme, changeTheme, introContent }: Props) => {
initialTab={`preview`} initialTab={`preview`}
/> />
</Page.Content> </Page.Content>
</Page > </Page>
) )
} }

View file

@ -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 { Page } from '@geist-ui/core'
import Header from '../components/header' import Header from '@components/header'
import MyPosts from '../components/my-posts' import MyPosts from '@components/my-posts'
const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => { const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => {
return ( return (
<Page className={styles.container} width="100%"> <Page className={styles.container} width="100%">
<Head>
<title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" />
</Head>
<Page.Header> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>

View file

@ -1,11 +1,11 @@
import Head from 'next/head' import styles from '@styles/Home.module.css'
import styles from '../styles/Home.module.css' import NewPost from '@components/new-post'
import NewPost from '../components/new-post'
import { Page } from '@geist-ui/core' import { Page } from '@geist-ui/core'
import useSignedIn from '../lib/hooks/use-signed-in' import useSignedIn from '@lib/hooks/use-signed-in'
import Header from '../components/header' import Header from '@components/header'
import { ThemeProps } from './_app' import { ThemeProps } from './_app'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import PageSeo from '@components/page-seo'
const Home = ({ theme, changeTheme }: ThemeProps) => { const Home = ({ theme, changeTheme }: ThemeProps) => {
const router = useRouter() const router = useRouter()
@ -15,9 +15,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
} }
return ( return (
<Page className={styles.container} width="100%"> <Page className={styles.container} width="100%">
<Head> <PageSeo title="Drift - New" />
<title>Drift</title>
</Head>
<Page.Header> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />

View file

@ -7,7 +7,7 @@ import Document from '../../components/document'
import Header from "../../components/header"; import Header from "../../components/header";
import VisibilityBadge from "../../components/visibility-badge"; import VisibilityBadge from "../../components/visibility-badge";
import { ThemeProps } from "../_app"; import { ThemeProps } from "../_app";
import Head from "next/head"; import PageSeo from "components/page-seo";
const Post = ({ theme, changeTheme }: ThemeProps) => { const Post = ({ theme, changeTheme }: ThemeProps) => {
const [post, setPost] = useState<any>() const [post, setPost] = useState<any>()
@ -65,11 +65,14 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
return ( return (
<Page width={"100%"}> <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> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>

View file

@ -1,15 +1,13 @@
import { Page } from "@geist-ui/core"; import { Page } from "@geist-ui/core";
import Head from 'next/head' import PageSeo from "@components/page-seo";
import Auth from "../components/auth"; import Auth from "@components/auth";
import Header from "../components/header"; import Header from "@components/header";
import { ThemeProps } from "./_app"; import { ThemeProps } from "./_app";
const SignIn = ({ theme, changeTheme }: ThemeProps) => ( const SignIn = ({ theme, changeTheme }: ThemeProps) => (
<Page width={"100%"}> <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> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>

View file

@ -1,15 +1,13 @@
import { Page } from "@geist-ui/core"; 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"; import { ThemeProps } from "./_app";
const SignUp = ({ theme, changeTheme }: ThemeProps) => ( const SignUp = ({ theme, changeTheme }: ThemeProps) => (
<Page width="100%"> <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> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>

View file

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