h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit fc4906757a.
This commit is contained in:
Kurt Hutten
2020-12-05 18:06:07 +11:00
parent 73e1dccdb8
commit 04820ebd2d
23 changed files with 26 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/Routes.js
View File

@@ -32,9 +32,6 @@ const Routes = () => {
)
return (
<Router>
<Route path="/account-recovery/update-password" page={UpdatePasswordPage} name="updatePassword" />
{/* <Route path="/account-recovery/update-password/{recoveryToken}" page={UpdatePasswordPage} name="updatePassword" /> */}
<Route path="/account-recovery" page={AccountRecoveryPage} name="accountRecovery" />
<Route path="/" page={PartsPage} name="home" />
<Route notfound page={NotFoundPage} />

2
web/src/components/InputText/InputText.js
View File

@@ -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}

36
web/src/components/InputTextForm/InputTextForm.js
View File

@@ -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

7
web/src/components/InputTextForm/InputTextForm.stories.js
View File

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

11
web/src/components/InputTextForm/InputTextForm.test.js
View File

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

20
web/src/components/LandingSection/LandingSection.js
View File

@@ -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>
)
}

183
web/src/components/LoginModal/LoginModal.js
View File

@@ -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

7
web/src/components/LoginModal/LoginModal.stories.js
View File

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

11
web/src/components/LoginModal/LoginModal.test.js
View File

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

12
web/src/index.js
View File

@@ -1,6 +1,5 @@
import { AuthProvider } from '@redwoodjs/auth'
import GoTrue from 'gotrue-js'
import netlifyIdentity from 'netlify-identity-widget'
import ReactDOM from 'react-dom'
import { RedwoodProvider, FatalErrorBoundary } from '@redwoodjs/web'
import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -17,6 +16,8 @@ import './cascade/css/main.css'
import 'monaco-editor/min/vs/editor/editor.main.css'
import './index.css'
netlifyIdentity.init()
function initCascadeStudio() {
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('service-worker.js').then(function(registration) {
@@ -48,14 +49,9 @@ function initCascadeStudio() {
}
initCascadeStudio()
const goTrueClient = new GoTrue({
APIUrl: 'https://cadhub.xyz/.netlify/identity',
setCookie: true,
})
ReactDOM.render(
<FatalErrorBoundary page={FatalErrorPage}>
<AuthProvider client={goTrueClient} type="goTrue">
<AuthProvider client={netlifyIdentity} type="netlify">
<RedwoodProvider>
<Routes />
</RedwoodProvider>

50
web/src/layouts/MainLayout/MainLayout.js
View File

@@ -1,12 +1,12 @@
import { useState, useEffect } from 'react'
import { Link, routes, navigate } from '@redwoodjs/router'
import { Link, routes } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Flash, useQuery, useFlash } from '@redwoodjs/web'
import { Flash } from '@redwoodjs/web'
import Tooltip from '@material-ui/core/Tooltip'
import { useQuery } from '@redwoodjs/web'
import Popover from '@material-ui/core/Popover'
import { getActiveClasses } from 'get-active-classes'
import { useLocation } from '@redwoodjs/router'
import LoginModal from 'src/components/LoginModal'
import ReactGA from 'react-ga'
export const QUERY = gql`
@@ -26,13 +26,11 @@ let previousSubmission = ''
let previousUserID = ''
const MainLayout = ({ children }) => {
const { logOut, isAuthenticated, currentUser, client } = useAuth()
const { addMessage } = useFlash()
const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
const { data, loading } = useQuery(QUERY, {
skip: !currentUser?.sub,
variables: { id: currentUser?.sub },
})
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
const [isOpen, setIsOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(null)
const [popoverId, setPopoverId] = useState(undefined)
@@ -61,7 +59,7 @@ const MainLayout = ({ children }) => {
category: 'login',
action: 'navbar login',
})
setIsLoginModalOpen(true)
logIn()
}
const { pathname, params } = useLocation()
@@ -87,38 +85,6 @@ const MainLayout = ({ children }) => {
previousUserID = currentUser
}
}, [data, currentUser, isAuthenticated])
const hash = window.location.hash
useEffect(() => {
const [key, token] = hash.slice(1).split('=')
if (key === 'confirmation_token') {
console.log('confirming with', token)
client
.confirm(token, true)
.then(() => {
addMessage('Email confirmed', { classes: 'rw-flash-success' })
})
.catch(() => {
addMessage('Problem confirming email', {
classes: 'bg-red-300 text-red-900',
})
})
} else if (key === 'recovery_token') {
// http://localhost:8910/#recovery_token=LwsC-KpgmiDwGo-ZcGH0tA
// https://mandrillapp.com/track/click/31128206/cadhub.xyz?p=eyJzIjoiWFlFbDk5YTVYU0FOSmEtZ3ZtUXlDSW13QURrIiwidiI6MSwicCI6IntcInVcIjozMTEyODIwNixcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL2NhZGh1Yi54eXpcXFwvI3JlY292ZXJ5X3Rva2VuPUx3c0MtS3BnbWlEd0dvLVpjR0gwdEFcIixcImlkXCI6XCJjODU1ZWM1MjZiZmQ0Y2JmYmUyNmM4OTk2ZGU4ODczOFwiLFwidXJsX2lkc1wiOltcIjJkMjljMDI0NTY5MzcxODcxMmI0ODA0M2U3MDYyOTA1ZDc1NzVkNjlcIl19In0
// #recovery_token=LwsC-KpgmiDwGo-ZcGH0tA
// navigate(routes.updatePassword({ recoveryToken: token }))
client
.recover(token, true)
.then(() => {
navigate(routes.updatePassword())
})
.catch(() => {
addMessage('Problem recovering account', {
classes: 'bg-red-300 text-red-900',
})
})
}
}, [hash, client]) // complaining about not having addMessage, however adding it puts useEffect into a loop
return (
<>
<header id="cadhub-main-header">
@@ -232,11 +198,7 @@ const MainLayout = ({ children }) => {
)}
</nav>
</header>
<Flash timeout={1500} />
<LoginModal
open={isLoginModalOpen}
onClose={() => setIsLoginModalOpen(false)}
/>
<Flash timeout={1000} />
<main>{children}</main>
</>
)

67
web/src/pages/AccountRecoveryPage/AccountRecoveryPage.js
View File

@@ -1,67 +0,0 @@
import { routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Form, Submit } from '@redwoodjs/forms'
import { useFlash } from '@redwoodjs/web'
import InputTextForm from 'src/components/InputTextForm'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
const AccountRecoveryPage = () => {
const { addMessage } = useFlash()
const { client } = useAuth()
const onSubmit = ({ email }) => {
client
.requestPasswordRecovery(email)
.then(() => {
addMessage('Email sent', { classes: 'rw-flash-success' })
setTimeout(() => {
navigate(routes.home())
}, 500)
})
.catch(() => {
addMessage('Problem sending email', {
classes: 'bg-red-300 text-red-900',
})
})
}
return (
<MainLayout>
<Seo
title="Account recovery"
description="Send recovery email"
lang="en-US"
/>
<section className="max-w-md mx-auto mt-20">
<h2 className="text-xl text-indigo-500 pb-4">Send recovery email</h2>
<Form onSubmit={onSubmit}>
<div
className="grid items-center gap-2"
style={{ gridTemplateColumns: 'auto 1fr' }}
>
<span className="capitalize text-gray-500 text-sm align-middle my-3">
email:
</span>
<InputTextForm
className="text-xl"
name="email"
validation={{
required: true,
pattern: {
value: /[^@]+@[^.]+\..+/,
message: 'please enter a valid email address',
},
}}
/>
</div>
<Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
Send email
</Submit>
</Form>
</section>
</MainLayout>
)
}
export default AccountRecoveryPage

7
web/src/pages/AccountRecoveryPage/AccountRecoveryPage.stories.js
View File

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

11
web/src/pages/AccountRecoveryPage/AccountRecoveryPage.test.js
View File

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

82
web/src/pages/UpdatePasswordPage/UpdatePasswordPage.js
View File

@@ -1,82 +0,0 @@
import { routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Form, Submit } from '@redwoodjs/forms'
import { useFlash } from '@redwoodjs/web'
import InputTextForm from 'src/components/InputTextForm'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
const UpdatePasswordPage = () => {
const { addMessage } = useFlash()
const { client } = useAuth()
const onSubmit = ({ password, confirm }) => {
if (password !== confirm) {
addMessage("Passwords don't match, try again", {
classes: 'bg-red-300 text-red-900',
})
return
}
client
.currentUser()
.update({ password })
.then(() => {
addMessage('Email updated', { classes: 'rw-flash-success' })
setTimeout(() => {
navigate(routes.home())
}, 500)
})
.catch(() => {
addMessage('Problem updating email', {
classes: 'bg-red-300 text-red-900',
})
})
}
return (
<MainLayout>
<Seo
title="Account recovery"
description="Send recovery email"
lang="en-US"
/>
<section className="max-w-md mx-auto mt-20">
<h2 className="text-xl text-indigo-500 pb-4">Reset Password</h2>
<Form onSubmit={onSubmit}>
<div
className="grid items-center gap-2"
style={{ gridTemplateColumns: 'auto 1fr' }}
>
<span className="capitalize text-gray-500 text-sm align-middle my-3">
password:
</span>
<InputTextForm
className="text-xl"
name="email"
type="password"
validation={{
required: true,
}}
/>
<span className="capitalize text-gray-500 text-sm align-middle my-3">
confirm:
</span>
<InputTextForm
className="text-xl"
name="email"
type="password"
validation={{
required: true,
}}
/>
</div>
<Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
Update
</Submit>
</Form>
</section>
</MainLayout>
)
}
export default UpdatePasswordPage

7
web/src/pages/UpdatePasswordPage/UpdatePasswordPage.stories.js
View File

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

11
web/src/pages/UpdatePasswordPage/UpdatePasswordPage.test.js
View File

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