acid-info
/
acid-chan
mirror of https://github.com/acid-info/acid-chan.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: implement auth

This commit is contained in:
jinhojang6 2024-03-01 01:41:24 +09:00
parent ce08dd27c1
commit fc53426308
No known key found for this signature in database
GPG Key ID: 1762F21FE8B543F8
10 changed files with 255 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md Normal file
View File

@ -0,0 +1,5 @@
# acidchan
acidchan PoC & MVP
ref: https://github.com/plebbit/plebchan

0
jsconfig.json Normal file
View File

1
package.json
View File

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

BIN
public/.DS_Store vendored Normal file
View File

Binary file not shown.

6
src/App.js
View File

@ -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() {
<GlobalStyle background={bodyStyle.background} color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} />
<Routes>
<Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
<Route exact path='/sign-in' element={<SignIn />} />
<Route exact path='/sign-up' element={<SignUp />} />
<Route exact path='/auth/:id' element={<SignInAuth />} />
<Route exact path='/shop/product/:id' element={<ProductItem />} />
<Route exact path='/shop/:category' element={<ShopCategory />} />
<Route exact path='/shop' element={<Shop />} />

30
src/components/styled/Auth.styled.jsx Normal file
View File

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

77
src/components/views/SignIn.jsx Normal file
View File

@ -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 (
<>
<AboutContent>
<Header>
<Logo>
<Link to='/'>
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
</Link>
</Logo>
</Header>
</AboutContent>
<Container>
<Form onSubmit={handleSubmit}>
<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>
</Form>
</Container>
</>
);
};
export default SignIn;

51
src/components/views/SignInAuth.jsx Normal file
View File

@ -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 (
<>
<AboutContent>
<Header>
<Logo>
<Link to='/'>
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
</Link>
</Logo>
</Header>
</AboutContent>
</>
);
};
export default SignInAuth;

58
src/components/views/SignUp.jsx Normal file
View File

@ -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 (
<>
<AboutContent>
<Header>
<Logo>
<Link to='/'>
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
</Link>
</Logo>
</Header>
</AboutContent>
<Container>
<Form onSubmit={handleSubmit}>
<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>
</Form>
</Container>
</>
);
};
export default SignUp;

27
yarn.lock
View File

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