CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

51
client/components/auth/index.tsx
View file

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

2
client/components/new-post/drag-and-drop/index.tsx
View file

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

2
client/components/new-post/index.tsx
View file

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

2
client/components/new-post/title/index.tsx
View file

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

27
client/components/page-seo/index.tsx Normal file
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;

2
client/components/post-list/list-item.tsx
View file

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

2
client/components/preview/react-markdown-preview.tsx
View file

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

5
client/pages/_app.tsx
View file

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

19
client/pages/index.tsx
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 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>
)
}

11
client/pages/mine.tsx
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 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>

14
client/pages/new.tsx
View file

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

15
client/pages/post/[id].tsx
View file

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

12
client/pages/signin.tsx
View file

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

12
client/pages/signup.tsx
View file

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

8
client/tsconfig.json
View file

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