diff --git a/.eslintrc.json b/.eslintrc.json index 067bd4c..a1d90b4 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -17,7 +17,7 @@ "error", { "singleQuote": true, - "endOfLine":"auto" + "endOfLine": "auto" } ], "react/no-unescaped-entities": 0 diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 5a2d092..4c4d409 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -6,12 +6,12 @@ What benefit does this bring to the end user? Or, what benefit does this bring t ## This PR -Describe the changes required and any implementation choices you made to give context to reviewers. +Describe the changes required and any implementation choices you made to give context to reviewers. ## Screenshots -Provide screenshots of any new components, styling changes, or pages. +Provide screenshots of any new components, styling changes, or pages. ## Verification Steps -What steps did you take to verify your changes work? These should be clear enough for someone to be able to clone the branch and follow the steps themselves. \ No newline at end of file +What steps did you take to verify your changes work? These should be clear enough for someone to be able to clone the branch and follow the steps themselves. diff --git a/.travis.yml b/.travis.yml index 6f8cb44..a47a186 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,5 +3,5 @@ node_js: - 13.12.0 script: - npm run travis -after_success: +after_success: - npm run coveralls diff --git a/craco.config.js b/craco.config.js index f7450cf..119e499 100644 --- a/craco.config.js +++ b/craco.config.js @@ -15,4 +15,4 @@ module.exports = { }, }, ], -}; \ No newline at end of file +}; diff --git a/package-lock.json b/package-lock.json index f81c1ed..a354c38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1947,9 +1947,9 @@ "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==" }, "@types/node": { - "version": "12.12.50", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.50.tgz", - "integrity": "sha512-5ImO01Fb8YsEOYpV+aeyGYztcYcjGsBvN4D7G5r1ef2cuQOpymjWNQi5V0rKHE6PC2ru3HkoUr/Br2/8GUA84w==" + "version": "12.19.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.1.tgz", + "integrity": "sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A==" }, "@types/parse-json": { "version": "4.0.0", diff --git a/package.json b/package.json index dcf51d0..3971d57 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/jest": "^24.9.1", - "@types/node": "^12.12.50", + "@types/node": "^12.19.1", "@types/react-dom": "^16.9.8", "@types/react-helmet": "^6.0.0", "@types/react-router-dom": "^5.1.5", diff --git a/src/App.less b/src/App.less index 534a57b..40016ae 100644 --- a/src/App.less +++ b/src/App.less @@ -2,3 +2,10 @@ // need to use !important to overwrite .ant-layout min-height: 100vh !important; } + +.content-container { + display: block; + padding: 24px; + max-width: 960px; + margin: auto; +} diff --git a/src/App.tsx b/src/App.tsx index 5347c8b..bb92570 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,8 @@ import { Helmet } from 'react-helmet'; import 'antd/dist/antd.css'; import './App.less'; import Home from './containers/home/Home'; +import Signup from './containers/signup/Signup'; +import Login from './containers/login/Login'; import BlockTemplate from './containers/template-1-col-block/Template'; import GridTemplate from './containers/template-24-col-grid/Template'; @@ -34,6 +36,8 @@ const App: React.FC = () => { + + diff --git a/src/auth/authAPI.tsx b/src/auth/authAPI.tsx index 25be1c6..66d0203 100644 --- a/src/auth/authAPI.tsx +++ b/src/auth/authAPI.tsx @@ -12,13 +12,21 @@ interface LoginRequest { readonly password: string; } +interface SignupRequest { + readonly username: string; + readonly email: string; + readonly password: string; + readonly firstName: string; + readonly lastName: string; +} + export const login = async (user: LoginRequest) => Axios.post(ROUTES.LOGIN, user).then((response) => { Token.setAccessToken(response.data.accessToken); Token.setRefreshToken(response.data.refreshToken); }); -export const signup = async (user: LoginRequest) => +export const signup = async (user: SignupRequest) => Axios.post(ROUTES.SIGNUP, user).then((response) => { Token.setAccessToken(response.data.accessToken); Token.setRefreshToken(response.data.refreshToken); diff --git a/src/auth/axios.test.tsx b/src/auth/axios.test.tsx index 837ac47..9c25652 100644 --- a/src/auth/axios.test.tsx +++ b/src/auth/axios.test.tsx @@ -1,5 +1,5 @@ import tokenService from './token'; -import requestInterceptor from './axios'; +import { requestInterceptor } from './axios'; describe('Request Interceptor Tests', () => { /* diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 928939c..8134fef 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -16,6 +16,10 @@ const NavBar: React.FC = () => { return '2'; case '/grid-template': return '3'; + case '/login': + return '4'; + case '/signup': + return '5'; default: return '1'; } @@ -52,6 +56,22 @@ const NavBar: React.FC = () => { > Grid Template + { + history.push('/login'); + }} + > + Login + + { + history.push('/signup'); + }} + > + Sign Up + ); diff --git a/src/containers/home/Home.tsx b/src/containers/home/Home.tsx index bb9959f..32dd3c4 100644 --- a/src/containers/home/Home.tsx +++ b/src/containers/home/Home.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Helmet } from 'react-helmet'; import './home.less'; -import { Button, Checkbox, Form, Input, Typography } from 'antd'; +import { Button, Form, Input, Typography } from 'antd'; import { login } from '../../auth/authAPI'; const { Title } = Typography; @@ -17,18 +17,11 @@ const Home: React.FC = () => {
- {/* - Place relevant components in here - */} Code4Community Frontend Scaffold Built with React.js, Typescript, and AntD components. -
+ { - - Remember me - - + +
+
+ + ); +}; + +export default Login; diff --git a/src/containers/login/login.less b/src/containers/login/login.less new file mode 100644 index 0000000..e69de29 diff --git a/src/containers/not-found/not-found.less b/src/containers/not-found/not-found.less index c01db0d..e69de29 100644 --- a/src/containers/not-found/not-found.less +++ b/src/containers/not-found/not-found.less @@ -1,6 +0,0 @@ -.content-container { - display: block; - padding: 24px; - max-width: 960px; - margin: auto; -} diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx new file mode 100644 index 0000000..4f05e00 --- /dev/null +++ b/src/containers/signup/Signup.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import './signup.less'; +import { Button, Form, Input, Typography } from 'antd'; +import { signup } from '../../auth/authAPI'; +import { Link } from 'react-router-dom'; +const { Title, Paragraph } = Typography; + +const Signup: React.FC = () => { + const onFinish = (values: any) => { + // TODO: what if backend says the values are invalid? need to handle this + signup({ + username: values.username, + email: values.email, + password: values.password, + firstName: values.firstName, + lastName: values.lastName, + }); + }; + + return ( + <> + + Sign Up + + +
+ {/* + Place relevant components in here + */} + Sign Up +
+ + + + + + + + + + + + + + + + + + + + + + + + + + Already have an account? Log in{' '} + + here + + ! + + + + + +
+
+ + ); +}; + +export default Signup; diff --git a/src/containers/signup/signup.less b/src/containers/signup/signup.less new file mode 100644 index 0000000..e69de29 diff --git a/src/containers/template-1-col-block/template.less b/src/containers/template-1-col-block/template.less index c01db0d..e69de29 100644 --- a/src/containers/template-1-col-block/template.less +++ b/src/containers/template-1-col-block/template.less @@ -1,6 +0,0 @@ -.content-container { - display: block; - padding: 24px; - max-width: 960px; - margin: auto; -}