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

fix: sign-in/up and add head component

Browse source
This commit is contained in:
Samuel 2022-03-13 01:13:35 -03:00
parent bbbbb19d26
commit 7f50654da4
10 changed files with 94 additions and 63 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 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>

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;

1
client/pages/_app.tsx
View file

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

9
client/pages/index.tsx
View file

@ -1,4 +1,3 @@
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'
@ -7,6 +6,7 @@ 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>

5
client/pages/mine.tsx
View file

@ -1,4 +1,3 @@
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'
@ -8,10 +7,6 @@ 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>

6
client/pages/new.tsx
View file

@ -1,4 +1,3 @@
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'
@ -6,6 +5,7 @@ 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} />

15
client/pages/post/[id].tsx
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>

8
client/pages/signin.tsx
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>

12
client/pages/signup.tsx
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>

3
client/tsconfig.json
View file

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