diff --git a/renderer/pageComponents/SignUp/StyledWrapper.js b/renderer/pageComponents/SignUp/StyledWrapper.js new file mode 100644 index 00000000..85d4b5a8 --- /dev/null +++ b/renderer/pageComponents/SignUp/StyledWrapper.js @@ -0,0 +1,49 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + min-height: 100vh; + + .form-container { + max-width: 350px; + border-radius: 4px; + border: 1px #ddd solid; + + button.continue-btn { + font-size: 16px; + padding-top: 8px; + padding-bottom: 8px; + min-height: 38px; + align-items: center; + color: #212529; + background: #e2e6ea; + border: solid 1px #dae0e5; + } + + .field-error { + font-size: 0.875rem; + } + + a { + color: var(--color-text-link); + } + + .or { + display: inline-block; + position: relative; + top: -14px; + background: white; + padding-inline: 10px; + } + + .error-msg { + font-size: 15px; + color: rgb(192 69 8); + } + } +`; + +export default Wrapper; diff --git a/renderer/pageComponents/SignUp/index.js b/renderer/pageComponents/SignUp/index.js new file mode 100644 index 00000000..04511cb6 --- /dev/null +++ b/renderer/pageComponents/SignUp/index.js @@ -0,0 +1,187 @@ +import React, { useState } from "react"; +import Link from 'next/link'; +import StyledWrapper from './StyledWrapper'; +import IdentityApi from 'api/identity'; +import { useFormik } from 'formik'; +import * as Yup from 'yup'; +import { useRouter } from 'next/router'; +import { useAuth } from 'providers/Auth'; + +const SignUp = () => { + const router = useRouter(); + const [authState, authDispatch] = useAuth(); + const [errorSigningUp, setErrorSigningUp] = useState(false); + const [errorMsg, setErrorMsg] = useState(''); + const [signingUp, setSigningUp] = useState(false); + + const { + currentUser + } = authState; + + const formik = useFormik({ + initialValues: { + name: '', + email: '', + password: '' + }, + validationSchema: Yup.object({ + name: Yup.string() + .min(3, 'Must be atleast 3 characters') + .max(50, 'Must be 50 characters or less') + .required('Required'), + email: Yup.string() + .email('Invalid email address') + .required('Required'), + password: Yup.string() + .min(8, 'Must be atleast 8 characters') + .max(50, 'Must be 50 characters or less') + .required('Required') + }), + onSubmit: (values, { resetForm }) => { + setSigningUp(true); + IdentityApi + .signup({ + name: values.name, + email: values.email, + password: values.password + }) + .then((response) => { + authDispatch({ + type: 'LOGIN_SUCCESS', + user: response.data + }); + }) + .catch((error) => { + setSigningUp(false); + setErrorSigningUp(true); + setErrorMsg(error.message) + }); + setSigningUp(false); + }, + }); + + if(authState.isLoading) { + return null; + }; + + if(currentUser) { + router.push('/'); + return null; + }; + + return ( + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
grafnode
+
Opensource API Collection Collaboration
+
+ +
+
+
Create Account
+ +
+ + setErrorSigningUp(false)} + /> + {formik.touched.name && formik.errors.name ? ( +
{formik.errors.name}
+ ) : null} +
+ +
+ + setErrorSigningUp(false)} + /> + {formik.touched.email && formik.errors.email ? ( +
{formik.errors.email}
+ ) : null} +
+ +
+ + setErrorSigningUp(false)} + /> + {formik.touched.password && formik.errors.password ? ( +
{formik.errors.password}
+ ) : null} +
+ +
+ By signing in you are agreeing to our Terms of Use and our Privacy Policy. +
+ +
+ { signingUp ? ( +
+ +
+ ) : +
+ {errorSigningUp && errorMsg.length ? ( +
{errorMsg}
+ ) : null} +
+ +
+
+ } +
+
+
+
+ Already have an account? Log in +
+
+
+ + ) +}; + +export default SignUp; diff --git a/renderer/pages/login.js b/renderer/pages/login.js index c997a2d2..13b9ae4a 100644 --- a/renderer/pages/login.js +++ b/renderer/pages/login.js @@ -3,7 +3,7 @@ import Login from 'pageComponents/Login'; import MenuBar from 'components/Sidebar/MenuBar'; import GlobalStyle from '../globalStyles'; -export default function Home() { +export default function LoginPage() { return (
diff --git a/renderer/pages/signup.js b/renderer/pages/signup.js new file mode 100644 index 00000000..22fe0308 --- /dev/null +++ b/renderer/pages/signup.js @@ -0,0 +1,26 @@ +import Head from 'next/head'; +import SignUp from 'pageComponents/SignUp'; +import MenuBar from 'components/Sidebar/MenuBar'; +import GlobalStyle from '../globalStyles'; + +export default function SignUpPage() { + return ( +
+ + grafnode + + + + + +
+
+ +
+ +
+
+
+
+ ); +};