Fix UI, Fix NotFound redirect

Author: MetaCorp

frontend/package.json

@@ -5,11 +5,6 @@
   "dependencies": {
     "@material-ui/core": "^4.0.0-rc.0",
     "@material-ui/icons": "^4.0.0-rc.0",
-    "@types/jest": "24.0.13",
-    "@types/node": "12.0.2",
-    "@types/react": "16.8.18",
-    "@types/react-dom": "16.8.4",
-    "@types/react-router-dom": "^4.3.3",
     "apollo-cache-inmemory": "^1.6.0",
     "apollo-client": "^2.6.0",
     "apollo-link": "^1.2.11",
@@ -53,6 +48,11 @@
     ]
   },
   "devDependencies": {
-    "@types/lodash.get": "^4.4.6"
+    "@types/lodash.get": "^4.4.6",
+    "@types/jest": "24.0.13",
+    "@types/node": "12.0.2",
+    "@types/react": "16.8.18",
+    "@types/react-dom": "16.8.4",
+    "@types/react-router-dom": "^4.3.3"
   }
 }

frontend/src/components/NotFound.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
+import { Redirect } from 'react-router'
 
 const NotFound: React.FC = (props) => {
-  return <div>NotFound</div>
+  if (!localStorage.getItem('token')) return <Redirect to="/login" />
+
+  return <div>Not Found</div>
 }
 
 export default NotFound

frontend/src/components/auth/Login.tsx

@@ -119,13 +119,23 @@ const Login: React.FC<Props> = () => {
                     value={values.password}
                   />
                   {errors.password && touched.password && errors.password}
-                  <Button type="submit" disabled={isSubmitting}>
-                    Submit
-                  </Button>
+                  <Box clone my={2}>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      Submit
+                    </Button>
+                  </Box>
                 </form>
               </Box>
             )}
           </Formik>
+          <Box display="flex" flexDirection="column" alignItems="flex-end">
+            <Button onClick={() => history.push('/signup')}>Signup</Button>
+          </Box>
           {error}
         </Paper>
       </Box>

frontend/src/components/auth/Signup.tsx

@@ -134,13 +134,23 @@ const Signup: React.FC<Props> = () => {
                     value={values.password}
                   />
                   {errors.password && touched.password && errors.password}
-                  <Button type="submit" disabled={isSubmitting}>
-                    Submit
-                  </Button>
+                  <Box clone my={2}>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      Submit
+                    </Button>
+                  </Box>
                 </form>
               </Box>
             )}
           </Formik>
+          <Box display="flex" flexDirection="column" alignItems="flex-end">
+            <Button onClick={() => history.push('/login')}>Login</Button>
+          </Box>
           {error}
         </Paper>
       </Box>

frontend/src/components/layout/AuthLayout.tsx

@@ -56,7 +56,7 @@ const AuthLayout: React.FC<Props> = ({ children }) => {
   useEffect(() => {
     window.addEventListener('resize', resize)
     resize()
-  }, [resize])
+  }, []) // eslint-disable-line
 
   const checkIsMobile = () => (window.innerWidth < 600 ? true : false)