From fc53426308fc2247c362e8bda43ce1c32ced92e6 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 1 Mar 2024 01:41:24 +0900 Subject: [PATCH] feat: implement auth --- README.md | 5 ++ jsconfig.json | 0 package.json | 1 + public/.DS_Store | Bin 0 -> 6148 bytes src/App.js | 6 ++ src/components/styled/Auth.styled.jsx | 30 ++++++++++ src/components/views/SignIn.jsx | 77 ++++++++++++++++++++++++++ src/components/views/SignInAuth.jsx | 51 +++++++++++++++++ src/components/views/SignUp.jsx | 58 +++++++++++++++++++ yarn.lock | 27 +++++++++ 10 files changed, 255 insertions(+) create mode 100644 README.md create mode 100644 jsconfig.json create mode 100644 public/.DS_Store create mode 100644 src/components/styled/Auth.styled.jsx create mode 100644 src/components/views/SignIn.jsx create mode 100644 src/components/views/SignInAuth.jsx create mode 100644 src/components/views/SignUp.jsx diff --git a/README.md b/README.md new file mode 100644 index 00000000..85cb813b --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# acidchan + +acidchan PoC & MVP + +ref: https://github.com/plebbit/plebchan diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 00000000..e69de29b diff --git a/package.json b/package.json index 909e8d14..1573d17e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@capacitor/android": "3.6.0", "@capacitor/app": "1.1.1", "@capacitor/core": "3.6.0", + "@chec/commerce.js": "^2.8.0", "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#4d667f7ad7a77cfd416184acffd6f561761ebc9b", "@testing-library/dom": "9.0.1", "@testing-library/jest-dom": "5.14.1", diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..57155538d45d810a1d6e977347f1352d80f54aea GIT binary patch literal 6148 zcmeH~u?oUK42Bc!Ah>jNyu}Cb4Gz&K=nFUqI!G&u&iCm4$pyjcEFym(`7gN(rQgtN zL`2uO{Ys=2kr~`nmKH{)$Q!xJQ3g5RyGwr>`U7fKpTt>P!&@2c$2NroNPq-LfCNb3 zhX~lc4V%rYGLirZkie6GeIF9sG>4X|{^>yQ5dhkt?1r_^63}D?Xbvq^QGsbp4;roN zV~Ewg9h%}?4lPw{yJ!p_8c$Z6VqjX^MH3R3W)}t$Ab}BqY0X=^|F`f@^Z%%YDG89k zpApbz({0vxskmF;UeD^gsM@-~p?)0UV!Z literal 0 HcmV?d00001 diff --git a/src/App.js b/src/App.js index 6bc8c0da..db536977 100644 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,9 @@ import packageJson from '../package.json'; import Shop from './components/views/Shop'; import ProductItem from './components/views/ProductItem'; import ShopCategory from './components/views/ShopCategory'; +import SignIn from './components/views/SignIn'; +import SignUp from './components/views/SignUp'; +import SignInAuth from './components/views/SignInAuth'; const commitRef = process?.env?.REACT_APP_COMMIT_REF || ''; @@ -155,6 +158,9 @@ export default function App() { } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/src/components/styled/Auth.styled.jsx b/src/components/styled/Auth.styled.jsx new file mode 100644 index 00000000..3e5b29e7 --- /dev/null +++ b/src/components/styled/Auth.styled.jsx @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 100px; +`; + +export const Form = styled.form` + display: flex; + flex-direction: column; + gap: 20px; + width: 300px; +`; + +export const Input = styled.input` + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +`; + +export const Button = styled.button` + padding: 10px; + border: none; + border-radius: 5px; + background-color: blue; + color: white; + cursor: pointer; +`; diff --git a/src/components/views/SignIn.jsx b/src/components/views/SignIn.jsx new file mode 100644 index 00000000..d664df40 --- /dev/null +++ b/src/components/views/SignIn.jsx @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; +import { Header, Logo, AboutContent } 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'; + +const SignIn = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const navigate = useNavigate(); + + const handleSubmit = async (e) => { + e.preventDefault(); + console.log('Attempting to Sign In', { email, password }); + const base_url = window.location.origin; + + try { + // const url = new URL('https://api.chec.io/v1/customers/exchange-token'); + + // const headers = { + // 'X-Authorization': 'sk_test_56290c1603cc68a61b59eb003647fdb91940a2cdc5b31', + // 'Content-Type': 'application/json', + // Accept: 'application/json', + // }; + + // const response = await fetch(url, { + // method: 'POST', + // headers: headers, + // body: JSON.stringify({ token: 'fasfa' }), + // }).then((response) => response.json()); + + // console.log('Signin Successful', response); + // // navigate('/shop'); + + const url = new URL('https://api.chec.io/v1/customers/email-token'); + + const headers = { + 'X-Authorization': 'sk_test_56290c1603cc68a61b59eb003647fdb91940a2cdc5b31', + 'Content-Type': 'application/json', + Accept: 'application/json', + }; + + const response = await fetch(url, { + method: 'POST', + headers: headers, + body: JSON.stringify({ email, base_url: base_url + '/#/auth' }), + }).then((response) => response.json()); + + console.log('Signup Successful', response); + } catch (error) { + console.error('Signin Failed', error); + } + }; + + return ( + <> + +
+ + + plebchan + + +
+ + +
+ setEmail(e.target.value)} required /> + {/* setPassword(e.target.value)} required /> */} + +
+ + + ); +}; + +export default SignIn; diff --git a/src/components/views/SignInAuth.jsx b/src/components/views/SignInAuth.jsx new file mode 100644 index 00000000..8f88e731 --- /dev/null +++ b/src/components/views/SignInAuth.jsx @@ -0,0 +1,51 @@ +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'; + +const SignInAuth = () => { + const { id } = useParams(); + + useEffect(() => { + if (!id) return; + const getUser = async () => { + try { + const url = new URL('https://api.chec.io/v1/customers/exchange-token'); + + const headers = { + 'X-Authorization': 'sk_test_56290c1603cc68a61b59eb003647fdb91940a2cdc5b31', + 'Content-Type': 'application/json', + Accept: 'application/json', + }; + + const response = await fetch(url, { + method: 'POST', + headers: headers, + body: JSON.stringify({ token: id }), + }).then((response) => response.json()); + + console.log('Successful', response); + const { customer_id, jwt } = response; + } catch (error) { + console.error('Failed', error); + } + }; + getUser(); + }, [id]); + + return ( + <> + +
+ + + plebchan + + +
+ + + ); +}; + +export default SignInAuth; diff --git a/src/components/views/SignUp.jsx b/src/components/views/SignUp.jsx new file mode 100644 index 00000000..96e17724 --- /dev/null +++ b/src/components/views/SignUp.jsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import { Header, Logo, AboutContent } 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 handleSubmit = async (e) => { + e.preventDefault(); + console.log('Attempting to Sign In', { email, password }); + const base_url = window.location.origin; + + try { + const url = new URL('https://api.chec.io/v1/customers'); + + const headers = { + 'X-Authorization': 'sk_test_56290c1603cc68a61b59eb003647fdb91940a2cdc5b31', + 'Content-Type': 'application/json', + Accept: 'application/json', + }; + + const response = await fetch(url, { + method: 'POST', + headers: headers, + body: JSON.stringify({ email }), + }).then((response) => response.json()); + + console.log('Signup Successful', response); + } catch (error) { + console.error('Signup Failed', error); + } + }; + + return ( + <> + +
+ + + plebchan + + +
+ + +
+ setEmail(e.target.value)} required /> + {/* setPassword(e.target.value)} required /> */} + +
+ + + ); +}; + +export default SignUp; diff --git a/yarn.lock b/yarn.lock index 99219c99..1fc23a43 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1235,6 +1235,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.7.4": + version "7.24.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e" + integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec" @@ -1331,6 +1338,14 @@ dependencies: tslib "^2.1.0" +"@chec/commerce.js@^2.8.0": + version "2.8.0" + resolved "https://registry.yarnpkg.com/@chec/commerce.js/-/commerce.js-2.8.0.tgz#c213cfcc2bc366fe66b77ea561dfa4b3aa7abc8c" + integrity sha512-OPBphT/hU33iDp52zzYOqz/oSXLhEuhGVUg2UNvYtmBW4eCNmtsM0dqW0+wu+6K0d6fZojurCBdVQMKb2R7l3g== + dependencies: + "@babel/runtime" "^7.7.4" + axios "^0.21.1" + "@commitlint/config-validator@^17.6.7": version "17.6.7" resolved "https://registry.yarnpkg.com/@commitlint/config-validator/-/config-validator-17.6.7.tgz#c664d42a1ecf5040a3bb0843845150f55734df41" @@ -4586,6 +4601,13 @@ axe-core@^4.6.2: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0" integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g== +axios@^0.21.1: + version "0.21.4" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575" + integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg== + dependencies: + follow-redirects "^1.14.0" + axios@^0.27.2: version "0.27.2" resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" @@ -8031,6 +8053,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.9: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== +follow-redirects@^1.14.0: + version "1.15.5" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020" + integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw== + for-each@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"