feat: implement redirect for sign in

src/components/styled/Auth.styled.jsx

@@ -24,7 +24,7 @@ export const Button = styled.button`
   padding: 10px;
   border: none;
   border-radius: 5px;
-  background-color: blue;
+  background-color: #800;
   color: white;
   cursor: pointer;
 `;

src/components/views/SignIn.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Header, Logo, AboutContent } from '../styled/views/Home.styled';
+import { Header, Logo, AboutContent, CustomLink } from '../styled/views/Home.styled';
 import { Link } from 'react-router-dom';
 import { Container, Form, Input, Button } from '../styled/Auth.styled';
 import { useNavigate } from 'react-router-dom';
@@ -68,6 +68,9 @@ const SignIn = () => {
           <Input type='email' placeholder='Email' value={email} onChange={(e) => setEmail(e.target.value)} required />
           {/* <Input type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)} required /> */}
           <Button type='submit'>Sign In</Button>
+          <div>
+            <span style={{ color: 'black' }}>or</span> <CustomLink to='/sign-up'>Sign Up</CustomLink>
+          </div>
         </Form>
       </Container>
     </>

src/components/views/SignInAuth.jsx

@@ -2,9 +2,11 @@ import React, { useEffect } from 'react';
 import { Header, Logo, AboutContent } from '../styled/views/Home.styled';
 import { Link } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const SignInAuth = () => {
   const { id } = useParams();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!id) return;
@@ -24,8 +26,14 @@ const SignInAuth = () => {
           body: JSON.stringify({ token: id }),
         }).then((response) => response.json());
 
-        console.log('Successful', response);
         const { customer_id, jwt } = response;
+
+        console.log('customer_id', customer_id);
+        console.log('jwt', jwt);
+        localStorage.setItem('customer_id', customer_id);
+        localStorage.setItem('jwt', jwt);
+
+        navigate('/shop');
       } catch (error) {
         console.error('Failed', error);
       }

src/components/views/SignUp.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { Header, Logo, AboutContent } from '../styled/views/Home.styled';
+import { Header, Logo, AboutContent, CustomLink } from '../styled/views/Home.styled';
 import { Link } from 'react-router-dom';
 import { Container, Form, Input, Button } from '../styled/Auth.styled';
 
 const SignUp = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [done, setDone] = useState(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -27,7 +28,15 @@ const SignUp = () => {
         body: JSON.stringify({ email }),
       }).then((response) => response.json());
 
-      console.log('Signup Successful', response);
+      const emailUrl = new URL('https://api.chec.io/v1/customers/email-token');
+
+      await fetch(emailUrl, {
+        method: 'POST',
+        headers: headers,
+        body: JSON.stringify({ email, base_url: base_url + '/#/auth' }),
+      }).then((response) => response.json());
+
+      setDone(true);
     } catch (error) {
       console.error('Signup Failed', error);
     }
@@ -49,8 +58,12 @@ const SignUp = () => {
           <Input type='email' placeholder='Email' value={email} onChange={(e) => setEmail(e.target.value)} required />
           {/* <Input type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)} required /> */}
           <Button type='submit'>Sign Up</Button>
+          <div>
+            <span style={{ color: 'black' }}>or</span> <CustomLink to='/sign-in'>Sign In</CustomLink>
+          </div>
         </Form>
       </Container>
+      {done && <p style={{ textAlign: 'center', marginTop: '40px' }}>Check your email for a link to sign in</p>}
     </>
   );
 };