Merge pull request #13 from Code-4-Community/login-signup

Add login and signup pages

Author: 796RCP92VZ

.eslintrc.json

@@ -17,7 +17,7 @@
       "error",
       {
         "singleQuote": true,
-        "endOfLine":"auto"
+        "endOfLine": "auto"
       }
     ],
     "react/no-unescaped-entities": 0

.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. 
+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.

.travis.yml

@@ -3,5 +3,5 @@ node_js:
   - 13.12.0
 script:
   - npm run travis
-after_success: 
+after_success:
   - npm run coveralls

craco.config.js

@@ -15,4 +15,4 @@ module.exports = {
       },
     },
   ],
-};
+};

package-lock.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",

package.json

@@ -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;
+}

src/App.less

@@ -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 = () => {
                 <Route path="/" exact component={Home} />
                 <Route path="/block-template" exact component={BlockTemplate} />
                 <Route path="/grid-template" exact component={GridTemplate} />
+                <Route path="/login" exact component={Login} />
+                <Route path="/signup" exact component={Signup} />
                 <Route path="*" exact component={NotFound} />
               </Switch>
             </div>

src/App.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);

src/auth/authAPI.tsx

@@ -1,5 +1,5 @@
 import tokenService from './token';
-import requestInterceptor from './axios';
+import { requestInterceptor } from './axios';
 
 describe('Request Interceptor Tests', () => {
   /*