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

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

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="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<title>Drift</title>
</Head>
<GeistProvider themeType={themeType} >
<SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>

11
client/pages/index.tsx
View file

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

5
client/pages/mine.tsx
View file

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

6
client/pages/new.tsx
View file

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

8
client/pages/signin.tsx
View file

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

3
client/tsconfig.json
View file

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