add oauth page (#217)

* add oauth page

* change page comment

Author: roymoran

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pub",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "private": true,
   "scripts": {
     "build": "gatsby build --prefix-paths",

package.json

@@ -36,8 +36,8 @@ interface ResetPasswordFormProps {
 }
 
 export const ResetPasswordForm: FC<ResetPasswordFormProps> = (props) => {
-  const [newPassword, setNewPassword] = useState<string>('');
-  const [confirmNewPassword, setConfirmNewPassword] = useState<string>('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmNewPassword, setConfirmNewPassword] = useState('');
   const [formValid, setFormValid] = useState(true);
   const [formMessage, setFormMessage] = useState('');
 

src/components/shared/form/reset-password.tsx

@@ -18,7 +18,7 @@ import { AuthContext } from '@contexts';
 const MagicLoginPage: FC = () => {
   const location = useLocation();
   const authContext = useContext(AuthContext);
-  const [message, setMessage] = useState<string>('Logging in...');
+  const [message, setMessage] = useState('Logging in...');
   const siteMetadata = useSiteMetadata();
 
   const handleLogin = (token: string | null) => {
@@ -50,7 +50,7 @@ const MagicLoginPage: FC = () => {
   return (
     <Layout>
       <Seo
-        title={`${siteMetadata.title} - Magic Login`}
+        title={`Magic Login`}
         description={`Magic login page for ${siteMetadata.title} website`}
         urlSlug="magin-login/"
       />

src/pages/magic-login.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useState, useEffect } from 'react';
+import { useLocation } from '@reach/router';
+
+import {
+  Container,
+  Layout,
+  PageTitle,
+  PageBody,
+  Seo,
+} from '@components/shared';
+import { useSiteMetadata } from '@hooks';
+
+/* Page supports oauth authorization flow */
+const OauthPage: FC = () => {
+  const location = useLocation();
+  const siteMetadata = useSiteMetadata();
+  const [appName, setAppName] = useState('App');
+
+  useEffect(() => {
+    const app = new URLSearchParams(location.search).get('app');
+    if (app === null) {
+      return;
+    }
+    setAppName(app);
+  }, [location.search]);
+
+  return (
+    <Layout>
+      <Seo
+        title={`Oauth`}
+        description={`Oauth page for ${siteMetadata.title} website`}
+        urlSlug="oauth/"
+      />
+      <Container>
+        <PageTitle>Successfully Authorized {appName}</PageTitle>
+        <PageBody>
+          <p>
+            You successfully authorized {appName}. You can close this window.
+          </p>
+        </PageBody>
+      </Container>
+    </Layout>
+  );
+};
+
+export default OauthPage;