From 7df39077be1b67e1fa66c248ecbc3f5bba57ad8c Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 12 Oct 2020 10:23:02 -0400 Subject: [PATCH 01/10] Add signup to app and auth --- src/App.tsx | 2 ++ src/auth/authAPI.tsx | 10 +++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 5347c8b..4dc247d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ 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 BlockTemplate from './containers/template-1-col-block/Template'; import GridTemplate from './containers/template-24-col-grid/Template'; @@ -32,6 +33,7 @@ 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); From 74973cc04af25b24e3301e77eb06cc684da592ec Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 12 Oct 2020 10:24:53 -0400 Subject: [PATCH 02/10] Add signup page --- src/containers/signup/Signup.tsx | 99 +++++++++++++++++++++++++++++++ src/containers/signup/signup.less | 6 ++ 2 files changed, 105 insertions(+) create mode 100644 src/containers/signup/Signup.tsx create mode 100644 src/containers/signup/signup.less diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx new file mode 100644 index 0000000..85b2a0b --- /dev/null +++ b/src/containers/signup/Signup.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import './signup.less'; +import { Button, Checkbox, 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 ( + <> + + Title goes here + + +
+ {/* + 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..c01db0d --- /dev/null +++ b/src/containers/signup/signup.less @@ -0,0 +1,6 @@ +.content-container { + display: block; + padding: 24px; + max-width: 960px; + margin: auto; +} From e35db6e14bb20df3747946480c5ab9a7b81cfc30 Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 12 Oct 2020 10:48:59 -0400 Subject: [PATCH 03/10] Add sign up to nav bar --- src/App.tsx | 2 +- src/components/NavBar.tsx | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 4dc247d..1ab3dc9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,9 +33,9 @@ const App: React.FC = () => {
- +
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 928939c..5cecf4e 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -16,6 +16,8 @@ const NavBar: React.FC = () => { return '2'; case '/grid-template': return '3'; + case '/signup': + return '4'; default: return '1'; } @@ -52,6 +54,14 @@ const NavBar: React.FC = () => { > Grid Template + { + history.push('/signup'); + }} + > + Sign Up + ); From 1272552fcefe51cc05b2522b76c71957689f91f1 Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 12 Oct 2020 10:55:01 -0400 Subject: [PATCH 04/10] Fix title --- src/containers/signup/Signup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx index 85b2a0b..0686ab2 100644 --- a/src/containers/signup/Signup.tsx +++ b/src/containers/signup/Signup.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Helmet } from 'react-helmet'; import './signup.less'; -import { Button, Checkbox, Form, Input, Typography } from 'antd'; +import { Button, Form, Input, Typography } from 'antd'; import { signup } from '../../auth/authAPI'; import { Link } from 'react-router-dom'; const { Title, Paragraph } = Typography; @@ -21,7 +21,7 @@ const Signup: React.FC = () => { return ( <> - Title goes here + Sign Up
From c0a0f1f6aee5a98e32fe0ef5e8b5f791c8fe6db8 Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 12 Oct 2020 10:55:12 -0400 Subject: [PATCH 05/10] Create login page --- src/containers/login/Login.tsx | 69 +++++++++++++++++++++++++++++++++ src/containers/login/login.less | 6 +++ 2 files changed, 75 insertions(+) create mode 100644 src/containers/login/Login.tsx create mode 100644 src/containers/login/login.less diff --git a/src/containers/login/Login.tsx b/src/containers/login/Login.tsx new file mode 100644 index 0000000..7d54bc0 --- /dev/null +++ b/src/containers/login/Login.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import './login.less'; +import { Button, Checkbox, Form, Input, Typography } from 'antd'; +import { login } from '../../auth/authAPI'; +import { Link } from 'react-router-dom'; +const { Title, Paragraph } = Typography; + +const Login: React.FC = () => { + const onFinish = (values: any) => { + login({ email: values.username, password: values.password }) + }; + + return ( + <> + + Login + + +
+ {/* + Place relevant components in here + */} + Login +
+ + + + + + + + + + Remember me + + + + Need an account? Sign up here! + + + + Forgot your password? Click here to reset it. + + + + + +
+
+ + ); +}; + +export default Login; diff --git a/src/containers/login/login.less b/src/containers/login/login.less new file mode 100644 index 0000000..c01db0d --- /dev/null +++ b/src/containers/login/login.less @@ -0,0 +1,6 @@ +.content-container { + display: block; + padding: 24px; + max-width: 960px; + margin: auto; +} From 9bc5ef0ef7b943e0a153ae1bc826de824888e9a4 Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 12 Oct 2020 10:58:05 -0400 Subject: [PATCH 06/10] Add login page to router and nav bar --- src/App.tsx | 2 ++ src/components/NavBar.tsx | 12 +++++++++++- src/containers/signup/Signup.tsx | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1ab3dc9..bb92570 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ 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'; @@ -35,6 +36,7 @@ const App: React.FC = () => { + diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 5cecf4e..8134fef 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -16,8 +16,10 @@ const NavBar: React.FC = () => { return '2'; case '/grid-template': return '3'; - case '/signup': + case '/login': return '4'; + case '/signup': + return '5'; default: return '1'; } @@ -56,6 +58,14 @@ const NavBar: React.FC = () => { { + history.push('/login'); + }} + > + Login + + { history.push('/signup'); }} diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx index 0686ab2..8caecc5 100644 --- a/src/containers/signup/Signup.tsx +++ b/src/containers/signup/Signup.tsx @@ -82,7 +82,7 @@ const Signup: React.FC = () => { - Already have an account? Log in here! + Already have an account? Log in here! From 1b9f746019684d33f36bfb8473c9ee0c0dc81bd4 Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Tue, 27 Oct 2020 18:25:51 -0400 Subject: [PATCH 07/10] Run prettier --- .eslintrc.json | 2 +- .github/pull_request_template.md | 6 +++--- craco.config.js | 2 +- src/auth/axios.test.tsx | 2 +- src/containers/login/Login.tsx | 14 +++++++++++--- src/containers/signup/Signup.tsx | 13 +++++++------ 6 files changed, 24 insertions(+), 15 deletions(-) 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/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/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/containers/login/Login.tsx b/src/containers/login/Login.tsx index 7d54bc0..8ab7276 100644 --- a/src/containers/login/Login.tsx +++ b/src/containers/login/Login.tsx @@ -8,7 +8,7 @@ const { Title, Paragraph } = Typography; const Login: React.FC = () => { const onFinish = (values: any) => { - login({ email: values.username, password: values.password }) + login({ email: values.username, password: values.password }); }; return ( @@ -48,11 +48,19 @@ const Login: React.FC = () => { - Need an account? Sign up here! + Need an account? Sign up{' '} + + here + + ! - Forgot your password? Click here to reset it. + Forgot your password? Click{' '} + + here + {' '} + to reset it. diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx index 8caecc5..4f05e00 100644 --- a/src/containers/signup/Signup.tsx +++ b/src/containers/signup/Signup.tsx @@ -14,7 +14,7 @@ const Signup: React.FC = () => { email: values.email, password: values.password, firstName: values.firstName, - lastName: values.lastName + lastName: values.lastName, }); }; @@ -29,10 +29,7 @@ const Signup: React.FC = () => { Place relevant components in here */} Sign Up -
+ { - Already have an account? Log in here! + Already have an account? Log in{' '} + + here + + ! From 80605811718b10aa709872a4e286f635df2101e1 Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Mon, 26 Oct 2020 14:47:32 -0400 Subject: [PATCH 08/10] Move .content-container style to App.less, remove 'remember me' checkbox --- package-lock.json | 6 +++--- package.json | 2 +- src/App.less | 7 +++++++ src/containers/home/Home.tsx | 7 ------- src/containers/home/home.less | 6 ------ src/containers/login/Login.tsx | 7 ------- src/containers/login/login.less | 6 ------ src/containers/not-found/not-found.less | 6 ------ src/containers/signup/signup.less | 6 ------ src/containers/template-1-col-block/template.less | 6 ------ 10 files changed, 11 insertions(+), 48 deletions(-) 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/containers/home/Home.tsx b/src/containers/home/Home.tsx index bb9959f..60819d8 100644 --- a/src/containers/home/Home.tsx +++ b/src/containers/home/Home.tsx @@ -17,9 +17,6 @@ const Home: React.FC = () => {
- {/* - Place relevant components in here - */} Code4Community Frontend Scaffold Built with React.js, Typescript, and AntD components. @@ -45,10 +42,6 @@ const Home: React.FC = () => { <Input.Password /> </Form.Item> - <Form.Item name="remember" valuePropName="checked"> - <Checkbox>Remember me</Checkbox> - </Form.Item> - <Form.Item> <Button type="primary" htmlType="submit"> Submit diff --git a/src/containers/home/home.less b/src/containers/home/home.less index c01db0d..e69de29 100644 --- a/src/containers/home/home.less +++ b/src/containers/home/home.less @@ -1,6 +0,0 @@ -.content-container { - display: block; - padding: 24px; - max-width: 960px; - margin: auto; -} diff --git a/src/containers/login/Login.tsx b/src/containers/login/Login.tsx index 8ab7276..d778197 100644 --- a/src/containers/login/Login.tsx +++ b/src/containers/login/Login.tsx @@ -18,9 +18,6 @@ const Login: React.FC = () => { <meta name="description" content="Description goes here." /> </Helmet> <div className="content-container"> - {/* - Place relevant components in here - */} <Title>Login { - - Remember me - - Need an account? Sign up{' '} diff --git a/src/containers/login/login.less b/src/containers/login/login.less index c01db0d..e69de29 100644 --- a/src/containers/login/login.less +++ b/src/containers/login/login.less @@ -1,6 +0,0 @@ -.content-container { - display: block; - padding: 24px; - max-width: 960px; - margin: auto; -} 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.less b/src/containers/signup/signup.less index c01db0d..e69de29 100644 --- a/src/containers/signup/signup.less +++ b/src/containers/signup/signup.less @@ -1,6 +0,0 @@ -.content-container { - display: block; - padding: 24px; - max-width: 960px; - margin: auto; -} 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; -} From 006430c14632e31ac723172c4594e0a358b67c5e Mon Sep 17 00:00:00 2001 From: Aaron Pradhan <12a.pradhan@gmail.com> Date: Tue, 27 Oct 2020 14:24:57 -0400 Subject: [PATCH 09/10] Remove unused values --- src/containers/home/Home.tsx | 1 - src/containers/login/Login.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/containers/home/Home.tsx b/src/containers/home/Home.tsx index 60819d8..03193eb 100644 --- a/src/containers/home/Home.tsx +++ b/src/containers/home/Home.tsx @@ -23,7 +23,6 @@ const Home: React.FC = () => { { Login Date: Tue, 27 Oct 2020 18:27:19 -0400 Subject: [PATCH 10/10] remove unused Checkbox import and run prettier --- .travis.yml | 2 +- src/containers/home/Home.tsx | 7 ++----- src/containers/login/Login.tsx | 7 ++----- 3 files changed, 5 insertions(+), 11 deletions(-) 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/src/containers/home/Home.tsx b/src/containers/home/Home.tsx index 03193eb..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; @@ -21,10 +21,7 @@ const Home: React.FC = () => { Built with React.js, Typescript, and AntD components. - + {
Login - +