Add login and signup pages

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

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

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 = () => {
                 <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/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);

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', () => {
   /*

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
         </Menu.Item>
+        <Menu.Item
+          key="4"
+          onClick={() => {
+            history.push('/login');
+          }}
+        >
+          Login
+        </Menu.Item>
+        <Menu.Item
+          key="5"
+          onClick={() => {
+            history.push('/signup');
+          }}
+        >
+          Sign Up
+        </Menu.Item>
       </Menu>
     </Header>
   );

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 = () => {
         <meta name="description" content="Description goes here." />
       </Helmet>
       <div className="content-container">
-        {/*
-          Place relevant components in here
-        */}
         <Title>Code4Community Frontend Scaffold</Title>
         <Title level={3}>
           Built with React.js, Typescript, and AntD components.
         </Title>
-        <Form
-          name="basic"
-          initialValues={{ remember: true }}
-          onFinish={onFinish}
-        >
+        <Form name="basic" onFinish={onFinish}>
           <Form.Item
             label="Username"
             name="username"
@@ -45,10 +38,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

src/containers/home/home.less

@@ -1,6 +0,0 @@
-.content-container {
-  display: block;
-  padding: 24px;
-  max-width: 960px;
-  margin: auto;
-}

src/containers/login/Login.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import './login.less';
+import { Button, 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 (
+    <>
+      <Helmet>
+        <title>Login</title>
+        <meta name="description" content="Description goes here." />
+      </Helmet>
+      <div className="content-container">
+        <Title>Login</Title>
+        <Form name="basic" onFinish={onFinish}>
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[{ required: true, message: 'Please input your username!' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[{ required: true, message: 'Please input your password!' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Paragraph>
+            Need an account? Sign up{' '}
+            <Link to="/signup" component={Typography.Link}>
+              here
+            </Link>
+            !
+          </Paragraph>
+
+          <Paragraph>
+            Forgot your password? Click{' '}
+            <Link to="/" component={Typography.Link}>
+              here
+            </Link>{' '}
+            to reset it.
+          </Paragraph>
+
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+export default Login;

src/containers/not-found/not-found.less

@@ -1,6 +0,0 @@
-.content-container {
-  display: block;
-  padding: 24px;
-  max-width: 960px;
-  margin: auto;
-}

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 (
+    <>
+      <Helmet>
+        <title>Sign Up</title>
+        <meta name="description" content="Description goes here." />
+      </Helmet>
+      <div className="content-container">
+        {/*
+          Place relevant components in here
+        */}
+        <Title>Sign Up</Title>
+        <Form name="basic" onFinish={onFinish}>
+          <Form.Item
+            label="First Name"
+            name="firstName"
+            rules={[{ required: true, message: 'Required' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Last Name"
+            name="lastName"
+            rules={[{ required: true, message: 'Required' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Email"
+            name="email"
+            rules={[{ required: true, message: 'Required' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[{ required: true, message: 'Required' }]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[{ required: true, message: 'Required' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            label="Confirm Password"
+            name="confirmPassword"
+            rules={[{ required: true, message: 'Required' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Paragraph>
+            Already have an account? Log in{' '}
+            <Link to="/login" component={Typography.Link}>
+              here
+            </Link>
+            !
+          </Paragraph>
+
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+export default Signup;

src/containers/template-1-col-block/template.less

@@ -1,6 +0,0 @@
-.content-container {
-  display: block;
-  padding: 24px;
-  max-width: 960px;
-  margin: auto;
-}