Revert "issue-129 Add custom auth ui/ux"

This reverts commit fc4906757a.

web/src/components/InputText/InputText.js

@@ -10,7 +10,7 @@ const InputText = ({ value, isEditable, onChange, className }) => {
           className
         )}
       >
-        <div className="absolute inset-0 mb-2 rounded bg-gray-200 shadow-inners" />
+        <div className="absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner bg-gray-100" />
         <input
           className="pl-2 pt-1 text-indigo-800 font-medium mb-px pb-px bg-transparent relative"
           onChange={onChange}

web/src/components/InputTextForm/InputTextForm.js

@@ -1,36 +0,0 @@
-import { getActiveClasses } from 'get-active-classes'
-import { TextField, FieldError } from '@redwoodjs/forms'
-import { useFormContext } from 'react-hook-form'
-
-// COPY of InputText but using TextField for use with redwood forms. Maybe I should combine them back into one or otherwise try and share code between these two.
-
-const InputText = ({ type = 'text', className, name, validation }) => {
-  const { errors } = useFormContext()
-  return (
-    <>
-      <div className={getActiveClasses('relative inline-block', className)}>
-        <FieldError
-          className="absolute -my-4 text-sm text-red-500 font-ropa-sans"
-          name={name}
-        />
-        <div
-          className={getActiveClasses(
-            'absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner',
-            { 'border border-red-500': errors[name] }
-          )}
-        />
-        <TextField
-          className={getActiveClasses(
-            'pl-2 pt-1 text-indigo-800 font-medium mb-px pb-px bg-transparent relative w-full'
-          )}
-          name={name}
-          readOnly={false}
-          type={type}
-          validation={validation}
-        />
-      </div>
-    </>
-  )
-}
-
-export default InputText

web/src/components/InputTextForm/InputTextForm.stories.js

@@ -1,7 +0,0 @@
-import InputTextForm from './InputTextForm'
-
-export const generated = () => {
-  return <InputTextForm />
-}
-
-export default { title: 'Components/InputTextForm' }

web/src/components/InputTextForm/InputTextForm.test.js

@@ -1,11 +0,0 @@
-import { render } from '@redwoodjs/testing'
-
-import InputTextForm from './InputTextForm'
-
-describe('InputTextForm', () => {
-  it('renders successfully', () => {
-    expect(() => {
-      render(<InputTextForm />)
-    }).not.toThrow()
-  })
-})

web/src/components/LandingSection/LandingSection.js

@@ -7,18 +7,17 @@ import {
 } from './mockEditorParts'
 import Svg from 'src/components/Svg'
 import OutBound from 'src/components/OutBound'
+import { useAuth } from '@redwoodjs/auth'
 import ReactGA from 'react-ga'
-import LoginModal from 'src/components/LoginModal'
-import { useState } from 'react'
 
 const LandingSection = () => {
-  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
-  const recordedLogin = async () => {
+  const { logIn } = useAuth()
+  const recordedLogin = () => {
     ReactGA.event({
       category: 'login',
       action: 'landing section CTA',
     })
-    setIsLoginModalOpen(true)
+    logIn()
   }
   return (
     <div className="mt-16">
@@ -164,12 +163,10 @@ const LandingSection = () => {
             with more integrations coming soon.
           </p>
           <button
-            className="bg-texture bg-purple-800 text-center w-full py-6 rounded-b-md border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl"
+            className="font-bold text-2xl bg-texture bg-purple-800 text-center w-full py-6 rounded-b-md border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl"
             onClick={recordedLogin}
           >
-            <span className="font-bold text-2xl text-indigo-200">
-              Start Hacking Now
-            </span>
+            <span className="text-indigo-200">Start Hacking Now</span>
           </button>
         </div>
       </div>
@@ -182,11 +179,6 @@ const LandingSection = () => {
           />
         </div>
       </div>
-      <LoginModal
-        open={isLoginModalOpen}
-        onClose={() => setIsLoginModalOpen(false)}
-        shouldStartWithSignup
-      />
     </div>
   )
 }

web/src/components/LoginModal/LoginModal.js

@@ -1,183 +0,0 @@
-import { useState } from 'react'
-import Dialog from '@material-ui/core/Dialog'
-import Tab from '@material-ui/core/Tab'
-import Tabs from '@material-ui/core/Tabs'
-import InputTextForm from 'src/components/InputTextForm'
-import OutBound from 'src/components/OutBound'
-import { Form, Submit } from '@redwoodjs/forms'
-import { useAuth } from '@redwoodjs/auth'
-import { Link, routes } from '@redwoodjs/router'
-
-const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
-  const { logIn, signUp } = useAuth()
-
-  const [tab, setTab] = useState(shouldStartWithSignup ? 0 : 1)
-  const onTabChange = (_, newValue) => {
-    setTab(newValue)
-    setError('')
-  }
-  const [checkBox, setCheckBox] = useState(true)
-  const [error, setError] = useState('')
-
-  const onSubmitSignUp = async ({ email, password, name, userName }) => {
-    try {
-      setError('')
-      await signUp({
-        email,
-        password,
-        remember: { full_name: name, userName },
-      })
-      onClose()
-    } catch (errorEvent) {
-      setError(errorEvent?.json?.error_description)
-    }
-  }
-  const onSubmitSignIn = async ({ email, password }) => {
-    try {
-      setError('')
-      await logIn({ email, password, remember: true })
-      onClose()
-    } catch (errorEvent) {
-      setError(errorEvent?.json?.error_description)
-    }
-  }
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg">
-        <Tabs
-          value={tab}
-          onChange={onTabChange}
-          centered
-          textColor="primary"
-          indicatorColor="primary"
-        >
-          <Tab label="Sign Up" />
-          <Tab label="Sign In" />
-        </Tabs>
-        {error && (
-          <div className="text-sm text-red-500 font-ropa-sans pt-4 text-center">
-            {error}
-          </div>
-        )}
-        {tab === 0 ? (
-          <SignUpForm
-            onSubmitSignUp={onSubmitSignUp}
-            checkBox={checkBox}
-            setCheckBox={setCheckBox}
-          />
-        ) : (
-          <SignInForm onSubmitSignIn={onSubmitSignIn} />
-        )}
-      </div>
-    </Dialog>
-  )
-}
-
-const Field = ({ name, type = 'text', validation }) => (
-  <>
-    <span className="capitalize text-gray-500 text-sm align-middle my-3">
-      {name}:
-    </span>
-    <InputTextForm
-      type={type}
-      className="text-xl"
-      name={name}
-      validation={validation}
-    />
-  </>
-)
-
-const HeroButton = ({ text }) => (
-  <Submit className="bg-texture bg-purple-800 py-6 w-full flex items-center justify-center rounded-b border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl">
-    <span className="font-bold text-2xl text-indigo-200">{text}</span>
-  </Submit>
-)
-
-const SignInForm = ({ onSubmitSignIn }) => (
-  <Form className="w-full" onSubmit={onSubmitSignIn}>
-    <div className="p-8">
-      <div
-        className="grid items-center gap-2"
-        style={{ gridTemplateColumns: 'auto 1fr' }}
-      >
-        <Field
-          name="email"
-          validation={{
-            required: true,
-            pattern: {
-              value: /[^@]+@[^.]+\..+/,
-              message: 'please enter a valid email address',
-            },
-          }}
-        />
-        <Field
-          name="password"
-          type="password"
-          validation={{ required: true }}
-        />
-      </div>
-      <Link
-        to={routes.accountRecovery()}
-        className="underline text-sm text-gray-500 block text-center"
-      >
-        forgot your password?
-      </Link>
-    </div>
-    <HeroButton text="Sign In" />
-  </Form>
-)
-
-const SignUpForm = ({ onSubmitSignUp, checkBox, setCheckBox }) => (
-  <Form className="w-full" onSubmit={onSubmitSignUp}>
-    <div className="p-8">
-      <div
-        className="grid items-center gap-2"
-        style={{ gridTemplateColumns: 'auto 1fr' }}
-      >
-        <Field name="name" validation={{ required: true }} />
-        <Field
-          name="userName"
-          validation={{
-            required: true,
-            pattern: {
-              value: /^[a-zA-Z0-9-_]+$/,
-              message: 'Only alphanumeric and dash characters allowed',
-            },
-          }}
-        />
-        <Field
-          name="email"
-          validation={{
-            required: true,
-            pattern: {
-              value: /[^@]+@[^.]+\..+/,
-              message: 'please enter a valid email address',
-            },
-          }}
-        />
-        <Field
-          name="password"
-          type="password"
-          validation={{ required: true }}
-        />
-      </div>
-      <div className="flex pt-4">
-        <input
-          type="checkbox"
-          checked={checkBox}
-          onChange={() => setCheckBox(!checkBox)}
-        />{' '}
-        <span className="pl-4 text-gray-500 text-sm max-w-sm">
-          Stay up-to-date with CadHub's progress with the founder's (
-          <OutBound className="underline" to="https://twitter.com/IrevDev">
-            Kurt's
-          </OutBound>
-          ) newsletter
-        </span>
-      </div>
-    </div>
-    <HeroButton text="Sign Up" />
-  </Form>
-)
-
-export default LoginModal

web/src/components/LoginModal/LoginModal.stories.js

@@ -1,7 +0,0 @@
-import LoginModal from './LoginModal'
-
-export const generated = () => {
-  return <LoginModal open={true} />
-}
-
-export default { title: 'Components/LoginModal' }

web/src/components/LoginModal/LoginModal.test.js

@@ -1,11 +0,0 @@
-import { render } from '@redwoodjs/testing'
-
-import LoginModal from './LoginModal'
-
-describe('LoginModal', () => {
-  it('renders successfully', () => {
-    expect(() => {
-      render(<LoginModal />)
-    }).not.toThrow()
-  })
-})