3 files changed, 34 insertions, 46 deletions

diff --git a/src/pages/CallbackPage.tsx b/src/pages/CallbackPage.tsx
index fab2086..00feb76 100644
--- a/src/pages/CallbackPage.tsx
+++ b/src/pages/CallbackPage.tsx
@@ -7,11 +7,12 @@ export default function CallbackPage(): JSX.Element {
     const params = new URLSearchParams(location.search);
 
     const code = params.get("code");
+    const state = params.get("state");
 
     if (!hasSent) {
         setHasSent(true);
-        window.opener.postMessage(code);
+        window.opener.postMessage({code: code, state: state});
     }
 
-    return <p>Code is {code}</p>;
+    return <div/>;
 }
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 1e331b9..8852ac5 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -10,10 +10,12 @@ import HeaderBar from "../components/HeaderBar";
 import RenderedQuestion from "../components/Question";
 import Loading from "../components/Loading";
 import ScrollToTop from "../components/ScrollToTop";
+import OAuth2Button  from "../components/OAuth2Button";
 
 import { Form, FormFeatures, getForm } from "../api/forms";
+import { OAuthScopes, checkScopes } from "../api/auth";
 import colors from "../colors";
-import { unselectable }  from "../commonStyles";
+import { submitStyles, unselectable }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 
@@ -22,7 +24,8 @@ interface PathParams {
 }
 
 interface NavigationProps {
-    form_state: boolean  // Whether the form is open or not
+    form_state: boolean,  // Whether the form is open or not
+    scopes: OAuthScopes[]
 }
 
 class Navigation extends React.Component<NavigationProps> {
@@ -39,7 +42,7 @@ class Navigation extends React.Component<NavigationProps> {
         width: 50%;
       }
 
-      @media (max-width: 850px) {
+      @media (max-width: 870px) {
         width: 100%;
 
         > div {
@@ -63,13 +66,13 @@ class Navigation extends React.Component<NavigationProps> {
       height: 0;
       display: none;
 
-      @media (max-width: 850px) {
+      @media (max-width: 870px) {
         display: block;
       }
     `;
 
     static returnStyles = css`
-      padding: 0.5rem 2rem;
+      padding: 0.5rem 2.2rem;
       border-radius: 8px;
 
       color: white;
@@ -84,37 +87,23 @@ class Navigation extends React.Component<NavigationProps> {
       }
     `;
 
-    submitStyles = css`
-      text-align: right;
-      white-space: nowrap;
-
-      button {
-        padding: 0.5rem 4rem;
-        cursor: pointer;
-
-        border: none;
-        border-radius: 8px;
-
-        color: white;
-        font: inherit;
-
-        background-color: ${colors.blurple};
-        transition: background-color 300ms;
-      }
-
-      button:hover {
-        background-color: ${colors.darkerBlurple};
-      }
-    `;
+    constructor(props: NavigationProps) {
+        super(props);
+        this.setState({"logged_in": false});
+    }
 
     render(): JSX.Element {
         let submit = null;
+
         if (this.props.form_state) {
-            submit = (
-                <div css={this.submitStyles}>
-                    <button form="form" type="submit">Submit</button>
-                </div>
-            );
+            let inner_submit;
+            if (this.props.scopes.includes(OAuthScopes.Identify) && !checkScopes(this.props.scopes)) {
+                // Render OAuth button if login is required, and the scopes needed are not available
+                inner_submit = <OAuth2Button scopes={this.props.scopes} rerender={() => this.setState({"logged_in": true})}/>;
+            } else {
+                inner_submit = <button form="form" type="submit">Submit</button>;
+            }
+            submit = <div css={submitStyles}>{ inner_submit }</div>;
         }
 
         return (
@@ -148,7 +137,7 @@ const closedHeaderStyles = css`
   font-size: 1.5rem;
 
   background-color: ${colors.error};
-  
+
   @media (max-width: 500px) {
     padding: 1rem 1.5rem;
   }
@@ -282,6 +271,13 @@ function FormPage(): JSX.Element {
     }
 
     const open: boolean = form.features.includes(FormFeatures.Open);
+    const require_auth: boolean = form.features.includes(FormFeatures.RequiresLogin);
+
+    const scopes = [];
+    if (require_auth) {
+        scopes.push(OAuthScopes.Identify);
+        if (form.features.includes(FormFeatures.CollectEmail)) { scopes.push(OAuthScopes.Email); }
+    }
 
     let closed_header = null;
     if (!open) {
@@ -297,7 +293,7 @@ function FormPage(): JSX.Element {
                     { closed_header }
                     { questions }
                 </form>
-                <Navigation form_state={open}/>
+                <Navigation form_state={open} scopes={scopes}/>
             </div>
 
             <div css={css`margin-bottom: 10rem`}/>
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 06fef46..efb3f05 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 
 import HeaderBar from "../components/HeaderBar";
 import FormListing from "../components/FormListing";
-import OAuth2Button from "../components/OAuth2Button";
 import Loading from "../components/Loading";
 import ScrollToTop from "../components/ScrollToTop";
 
@@ -28,16 +27,8 @@ function LandingPage(): JSX.Element {
         <HeaderBar/>
         <ScrollToTop/>
         <div>
-            <div css={css`
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-      `}>
+            <div css={css`display: flex; align-items: center; flex-direction: column;`}>
                 <h1>Available Forms</h1>
-
-                <OAuth2Button/>
-
-
                 {forms.map(form => (
                     <FormListing key={form.id} form={form}/>
                 ))}