ref: change look of oauth

src/components/icons/index.tsx

@@ -27,6 +27,8 @@ import ExternalLinkIcon from './ExternalLinkIcon';
 import ShareXIcon from './ShareXIcon';
 import DownloadIcon from './DownloadIcon';
 import FlameshotIcon from './FlameshotIcon';
+import GitHubIcon from './GitHubIcon';
+import DiscordIcon from './DiscordIcon';
 
 export {
   ActivityIcon,
@@ -58,4 +60,6 @@ export {
   ShareXIcon,
   DownloadIcon,
   FlameshotIcon,
+  GitHubIcon,
+  DiscordIcon,
 };

src/lib/middleware/getServerSideProps.ts

@@ -5,18 +5,18 @@ import { GetServerSideProps } from 'next';
 
 export const getServerSideProps: GetServerSideProps = async ctx => {
   // this entire thing will also probably change before the stable release
-  const ghEnabled = notNull(config.oauth.github_client_id, config.oauth.github_client_secret);
-  const discEnabled = notNull(config.oauth.discord_client_id, config.oauth.discord_client_secret);
+  const ghEnabled = notNull(config.oauth?.github_client_id, config.oauth?.github_client_secret);
+  const discEnabled = notNull(config.oauth?.discord_client_id, config.oauth?.discord_client_secret);
 
   const oauth_providers = [];
 
   if (ghEnabled) oauth_providers.push({
     name: 'GitHub',
-    url: github_auth.oauth_url(config.oauth.github_client_id),
+    url: '/api/auth/oauth/github',
   });
   if (discEnabled) oauth_providers.push({
     name: 'Discord',
-    url: discord_auth.oauth_url(config.oauth.discord_client_id, `${config.core.https ? 'https' : 'http'}://${ctx.req.headers.host}`),
+    url: '/api/auth/oauth/discord',
   });
 
   return {

src/lib/util.ts

@@ -26,7 +26,7 @@ export function createToken() {
 }
 
 export function sign(value: string, secret: string): string {
-  const signed =  value + ':' + createHmac('sha256', secret)
+  const signed = value + ':' + createHmac('sha256', secret)
     .update(value)
     .digest('base64')
     .replace(/=+$/, '');
@@ -54,7 +54,7 @@ export function unsign64(value: string, secret: string): string {
 }
 
 export function chunk<T>(arr: T[], size: number): Array<T[]> {
-  const result = []; 
+  const result = [];
   const L = arr.length;
   let i = 0;
 
@@ -67,7 +67,7 @@ export function chunk<T>(arr: T[], size: number): Array<T[]> {
 
 export async function sizeOfDir(directory: string): Promise<number> {
   const files = await readdir(directory);
-  
+
   let size = 0;
   for (let i = 0, L = files.length; i !== L; ++i) {
     const sta = await stat(join(directory, files[i]));
@@ -92,7 +92,7 @@ export function bytesToRead(bytes: number) {
 export function randomInvis(length: number) {
   // some parts from https://github.com/tycrek/ass/blob/master/generators/lengthGen.js
   const invisibleCharset = ['\u200B', '\u2060', '\u200C', '\u200D'];
-  
+
   return [...randomBytes(length)].map((byte) => invisibleCharset[Number(byte) % invisibleCharset.length]).join('').slice(1).concat(invisibleCharset[0]);
 }
 
@@ -107,7 +107,7 @@ export function createInvisImage(length: number, imageId: number) {
     });
 
     if (existing) return retry();
-    
+
     const inv = await prisma.invisibleImage.create({
       data: {
         invis,
@@ -132,7 +132,7 @@ export function createInvisURL(length: number, urlId: string) {
     });
 
     if (existing) return retry();
-    
+
     const ur = await prisma.invisibleUrl.create({
       data: {
         invis,
@@ -156,6 +156,6 @@ export async function getBase64URLFromURL(url: string) {
   return `data:${res.headers.get('content-type')};base64,${base64}`;
 }
 
-export async function notNull(a: any, b: any) {
+export function notNull(a: any, b: any) {
   return a !== null && b !== null;
 }

src/pages/api/auth/oauth/discord.ts

@@ -14,7 +14,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   }
 
   const { code } = req.query as { code: string };
-  if (!code) return res.bad('no code');
+  if (!code) return res.redirect(discord_auth.oauth_url(config.oauth.discord_client_id, `${config.core.https ? 'https' : 'http'}://${req.headers.host}`));
 
   const resp = await fetch('https://discord.com/api/oauth2/token', {
     method: 'POST',

src/pages/api/auth/oauth/github.ts

@@ -15,7 +15,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
   const { code } = req.query as { code: string };
 
-  if (!code) return res.bad('no code');
+  if (!code) return res.redirect(github_auth.oauth_url(config.oauth.github_client_id));
 
   const resp = await fetch('https://github.com/login/oauth/access_token', {
     method: 'POST',

src/pages/auth/login.tsx

@@ -1,14 +1,27 @@
-import { Button, Center, TextInput, Title, PasswordInput } from '@mantine/core';
+import { Button, Center, TextInput, Title, PasswordInput, Divider } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import Link from 'next/link';
 import useFetch from 'hooks/useFetch';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import Head from 'next/head';
+import { GitHubIcon, DiscordIcon } from 'components/icons';
 export { getServerSideProps } from 'middleware/getServerSideProps';
 
-export default function Login({ oauth_registration }) {
+export default function Login({ title, oauth_registration, oauth_providers: unparsed }) {
   const router = useRouter();
 
+  const oauth_providers = JSON.parse(unparsed);
+
+  const icons = {
+    GitHub: GitHubIcon,
+    Discord: DiscordIcon,
+  };
+
+  for (const provider of oauth_providers) {
+    provider.Icon = icons[provider.name];
+  }
+
   const form = useForm({
     initialValues: {
       username: '',
@@ -47,9 +60,12 @@ export default function Login({ oauth_registration }) {
 
   return (
     <>
+      <Head>
+        <title>{title} - Login</title>
+      </Head>
       <Center sx={{ height: '100vh' }}>
         <div>
-          <Title align='center'>Zipline</Title>
+          <Title align='center'>{title}</Title>
           <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
             <TextInput size='lg' id='username' label='Username' {...form.getInputProps('username')} />
             <PasswordInput size='lg' id='password' label='Password' {...form.getInputProps('password')} />
@@ -57,9 +73,14 @@ export default function Login({ oauth_registration }) {
             <Button size='lg' type='submit' fullWidth mt={12}>Login</Button>
           </form>
           {oauth_registration && (
-            <Link href='/auth/register' passHref>
-              <Button size='lg' fullWidth mt={12} component='a'>Register</Button>
-            </Link>
+            <>
+              <Divider label='or' labelPosition='center' my={8} />
+              {oauth_providers.map(({ url, name, Icon }, i) => (
+                <Link key={i} href={url} passHref>
+                  <Button size='lg' fullWidth leftIcon={<Icon />} component='a' my={8}>Login in with {name}</Button>
+                </Link>
+              ))}
+            </>
           )}
         </div>
       </Center>

src/pages/auth/register.tsx

@@ -1,14 +1,13 @@
-import { Button, Center, TextInput, Title, PasswordInput } from '@mantine/core';
-import { useForm } from '@mantine/form';
+import { Button, Center } from '@mantine/core';
 import Link from 'next/link';
-import useFetch from 'hooks/useFetch';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import GitHubIcon from 'components/icons/GitHubIcon';
 import DiscordIcon from 'components/icons/DiscordIcon';
+import Head from 'next/head';
 export { getServerSideProps } from 'middleware/getServerSideProps';
 
-export default function Login({ oauth_registration, oauth_providers: unparsed }) {
+export default function Login({ title, oauth_registration, oauth_providers: unparsed }) {
   const oauth_providers = JSON.parse(unparsed);
 
   const icons = {
@@ -35,8 +34,16 @@ export default function Login({ oauth_registration, oauth_providers: unparsed })
 
   return (
     <>
+      <Head>
+        <title>{title} - Login</title>
+      </Head>
       <Center sx={{ height: '100vh' }}>
         <div>
+          <Link href='/auth/login' passHref>
+            <Button size='lg' fullWidth variant='outline' component='a'>
+              Go Back to Login
+            </Button>
+          </Link>
           {oauth_providers.map(({ url, name, Icon }, i) => (
             <Link key={i} href={url} passHref>
               <Button size='lg' fullWidth mt={12} leftIcon={<Icon />} component='a'>Sign in with {name}</Button>