diff --git a/.env.sample b/.env.sample new file mode 100644 index 0000000..c7408ae --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +REACT_APP_API_URL="http://dummy:port/" \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4d29575..532eddc 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.env \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 65c3ffb..cbb67ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,14 @@ "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", + "axios": "^0.24.0", "i18next": "^21.6.5", "i18next-browser-languagedetector": "^6.1.2", "i18next-http-backend": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-i18next": "^11.15.3", + "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" } @@ -4271,6 +4273,14 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz", + "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==", + "dependencies": { + "follow-redirects": "^1.14.4" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -7810,6 +7820,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -13037,6 +13055,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.2.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -18900,6 +18942,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz", "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==" }, + "axios": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz", + "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==", + "requires": { + "follow-redirects": "^1.14.4" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -21502,6 +21552,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25169,6 +25227,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", + "requires": { + "history": "^5.2.0", + "react-router": "6.2.1" + } + }, "react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", diff --git a/package.json b/package.json index 66bd393..cb12f77 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,14 @@ "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", + "axios": "^0.24.0", "i18next": "^21.6.5", "i18next-browser-languagedetector": "^6.1.2", "i18next-http-backend": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-i18next": "^11.15.3", + "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" }, diff --git a/src/App.js b/src/App.js index e07cf1f..dec29f6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,16 @@ import Test from './components/Test'; +import AuthProvider from './config/authProvider'; import localizationInit from './config/localization'; localizationInit(); function App() { return ( -
- -
+ +
+ +
+ ); } diff --git a/src/components/Test.js b/src/components/Test.js index 3fbd94e..c87d1dd 100644 --- a/src/components/Test.js +++ b/src/components/Test.js @@ -1,11 +1,39 @@ import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; +import { useAuth } from '../config/authProvider'; export default function Test() { const { t } = useTranslation(); + let auth = useAuth(); + let navigate = useNavigate(); + + if (!auth.user) { + return ( + <> +

You are not logged in.

{' '} + + + ); + } + return ( - <> +

{t('app_title')}

{t('welcome_message')}
- + Welcome {auth.user}!{' '} + +

); } diff --git a/src/config/authProvider.js b/src/config/authProvider.js new file mode 100644 index 0000000..e1024ef --- /dev/null +++ b/src/config/authProvider.js @@ -0,0 +1,28 @@ +import { createContext, useContext, useState } from 'react'; +import authService from '../services/auth.service'; + +let AuthContext = createContext(null); + +export default function AuthProvider({ children }) { + let [user, setUser] = useState(authService.getCurrentUser()); + + let signin = async (loginData, callback) => { + const userData = await authService.login(loginData); + setUser(userData); + callback(); + }; + + let signout = async (callback) => { + await authService.logout(); + setUser(null); + callback(); + }; + + let value = { user, signin, signout }; + + return {children}; +} + +export const useAuth = () => { + return useContext(AuthContext); +}; diff --git a/src/config/axiosInstance.js b/src/config/axiosInstance.js new file mode 100644 index 0000000..198e5e8 --- /dev/null +++ b/src/config/axiosInstance.js @@ -0,0 +1,11 @@ +import axios from 'axios'; +import urls from '../constants/urls'; + +const axiosInstance = axios.create({ + baseURL: urls.baseURL, + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, +}); + +export default axiosInstance; diff --git a/src/constants/placeholder b/src/constants/placeholder deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants/urls.js b/src/constants/urls.js new file mode 100644 index 0000000..48e68a9 --- /dev/null +++ b/src/constants/urls.js @@ -0,0 +1,6 @@ +const urls = { + baseURL: process.env.REACT_APP_API_URL || "http://dummy:port/", + auth: 'auth', +}; + +export default urls; diff --git a/src/services/auth.service.js b/src/services/auth.service.js new file mode 100644 index 0000000..62833a1 --- /dev/null +++ b/src/services/auth.service.js @@ -0,0 +1,42 @@ +// import axiosInstance from '../config/axios'; +// import urls from '../constants/urls'; + +const authService = { + login(username) { + // return axiosInstance + // .post(urls.auth, { + // username, + // password, + // }) + // .then((response) => { + // if (response.data.accessToken) { + localStorage.setItem('user', username); + // localStorage.setItem('user', JSON.stringify(response.data)); + // localStorage.setItem('token', JSON.stringify(response.data.accessToken)); + // } + + // return response.data; + // }); + return username; + }, + + logout() { + localStorage.removeItem('user'); + localStorage.removeItem('token'); + }, + + // register(username, email, password) { + // return axios.post(API_URL + 'signup', { + // username, + // email, + // password, + // }); + // } + + getCurrentUser() { + return localStorage.getItem('user'); + // return JSON.parse(localStorage.getItem('user')); + }, +}; + +export default authService; diff --git a/src/services/placeholder b/src/services/placeholder deleted file mode 100644 index e69de29..0000000