From e985b71c456dfc94217900f550014de1d9d1448c Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 23 Nov 2020 12:51:02 -0700
Subject: [PATCH] #62 #16 New custom signin page

---
 src/pages/api/auth/[...nextauth].js           |  1 +
 src/pages/auth/{email-signin.js => signin.js} | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 rename src/pages/auth/{email-signin.js => signin.js} (87%)

diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
index c23abba4..5a95d6a5 100644
--- a/src/pages/api/auth/[...nextauth].js
+++ b/src/pages/api/auth/[...nextauth].js
@@ -56,6 +56,7 @@ const options = {
 
   pages: {
     newUser: '/user/newuser',
+    signIn: '/auth/signin',
   },
 
   callbacks: {
diff --git a/src/pages/auth/email-signin.js b/src/pages/auth/signin.js
similarity index 87%
rename from src/pages/auth/email-signin.js
rename to src/pages/auth/signin.js
index d276cc65..6d2bef2e 100644
--- a/src/pages/auth/email-signin.js
+++ b/src/pages/auth/signin.js
@@ -1,7 +1,7 @@
 import { setCookie } from 'nookies';
 import React, { useState } from 'react';
 import fetch from 'isomorphic-unfetch';
-import { csrfToken, useSession } from 'next-auth/client';
+import { csrfToken, useSession, signIn } from 'next-auth/client';
 import { Button, Card, Form } from 'react-bootstrap';
 import Router from 'next/router';
 import Layout from '../../components/Layout';
@@ -27,12 +27,20 @@ const SignIn = ({ props }) => {
           <Card.Body>
             <Form method="post" action="/api/auth/signin/email">
               <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
-              <Form.Label>Email address</Form.Label>
+              <Form.Label>With email address</Form.Label>
               <Form.Control name="email" type="email" placeholder="Email address" />
               <Button variant="outline-secondary" type="submit" className="mt-3">
                 Submit
               </Button>
             </Form>
+            <hr />
+            <div key="Google">
+              With Google account
+              <br />
+              <Button onClick={() => signIn('google')} variant="outline-secondary" className="mt-2">
+                Sign in with Google
+              </Button>
+            </div>
           </Card.Body>
         </Card>
       )}
@@ -64,7 +72,7 @@ const SignIn = ({ props }) => {
         <Card style={{ width: '33%', marginLeft: '33%' }} className="text-center">
           <Card.Header>Log In / Sign Up</Card.Header>
           <Card.Body>
-            You are already logged in.
+            You are now logged in.
             <br />
             <Button
               className="mt-3"