Register button now calls register api route. Put AuthorizeRoute back in.

Author: luko0610

.env

@@ -1,2 +1,3 @@
 REACT_APP_API_URL=https://localhost:5001
-REACT_APP_LOGIN_URL=/register?account=github&redirect=http://localhost:3000/login-callback
+REACT_APP_LOGIN_URL=/login?account=github&redirect=http://localhost:3000/login-callback
+REACT_APP_SIGN_UP_URL=/register?account=github&redirect=http://localhost:3000/login-callback

src/App.js

@@ -13,10 +13,10 @@ const App = () => (
   <React.Fragment>
     <BrowserRouter>
       <Switch>
+        <Route path="/" component={HomeView} />
         <Route path="/login-callback" component={LoginCallback} />
         <Route path="/login-success" component={LoginSuccessView} />
         <Route path="/logout" component={LogoutView} />
-        <Route path="/" component={HomeView} />
       </Switch>
     </BrowserRouter>
   </React.Fragment>

src/Authentication/AuthorizeRoute.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Route } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import login from "../redux/Slices/LoginSlice";
+
+const AuthorizeRoute = (props) => {
+  const isLoggedIn = useSelector((state) => state.login.isLoggedIn);
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    if (isLoggedIn === false)
+      dispatch(login.actions.redirectToLogin(props.path));
+  }, [isLoggedIn]);
+
+  return <Route {...props} />;
+};
+
+export default AuthorizeRoute;

src/components/HeaderComponent.js

@@ -17,7 +17,7 @@ const HeaderComponent = () => {
           inlineIndent="10em"
           theme="dark"
           mode="horizontal"
-          defaultSelectedKeys={["2"]}
+          defaultSelectedKeys={["1"]}
           className="main-menu w-1/2 float-left"
         >
           <Menu.Item key="1">Projects</Menu.Item>
@@ -37,7 +37,9 @@ const LoginButtons = () => (
     <Link to="login">
       <Button type="primary">Login</Button>
     </Link>
-    <Button type="primary">Sign up</Button>
+    <Link to="signup">
+      <Button type="primary">Sign up</Button>
+    </Link>
   </React.Fragment>
 );
 

src/redux/Slices/LoginSlice.js

@@ -16,6 +16,15 @@ function redirectToLogin(state, action) {
   window.location.href = redirectUrl;
 }
 
+/*
+ * Redirects to the login page with the current state
+ * Sends the current state too
+ */
+function redirectToSignUp(state, action) {
+  const redirectUrl = `${process.env.REACT_APP_API_URL}${process.env.REACT_APP_SIGN_UP_URL}`;
+  window.location.href = redirectUrl;
+}
+
 /*
  * Recieves back the state from 'redirectToLogin'
  */
@@ -37,6 +46,7 @@ const login = createSlice({
   reducers: {
     redirectToLogin,
     loginCallback,
+    redirectToSignUp,
   },
 });
 

src/views/HomeView.js

@@ -4,20 +4,22 @@ import { Route, Switch } from "react-router-dom";
 
 import HeaderComponent from "../components/HeaderComponent";
 import FooterComponent from "../components/FooterComponent";
-import LoginView from "./LoginView";
+import LoginRegisterView from "./LoginRegisterView";
 import LogoutView from "./LogoutView";
 import LoginSuccessView from "./LoginSuccessView";
 import ProjectsListScreenView from "./ProjectsListScreenView";
+import AuthorizeRoute from "../Authentication/AuthorizeRoute";
 
 const HomeView = () => (
   <Layout>
     <HeaderComponent />
     <Layout.Content className="site-layout" style={styles.content}>
       <Switch>
-        <Route path="/login" component={LoginView} />
+        <Route path="/login" render={() => <LoginRegisterView isLogin />} />
+        <Route path="/signup" render={() => <LoginRegisterView isRegister />} />
         <Route path="/login-success" component={LoginSuccessView} />
         <Route path="/logout" component={LogoutView} />
-        <Route path="/projects" component={ProjectsListScreenView} />
+        <AuthorizeRoute path="/projects" component={ProjectsListScreenView} />
       </Switch>
     </Layout.Content>
     <FooterComponent />

src/views/LoginView.js src/views/LoginRegisterView.jssrc/views/LoginView.js renamed to src/views/LoginRegisterView.js

@@ -3,14 +3,18 @@ import { useSelector, useDispatch } from "react-redux";
 import login from "../redux/Slices/LoginSlice";
 import { GithubLoginButton } from "react-social-login-buttons";
 
-const LoginView = (props) => {
+const LoginRegisterView = (props) => {
   const isLoggedIn = useSelector((state) => state.login.isLoggedIn);
   const dispatch = useDispatch();
 
   const initLogin = (provider) => {
+    let action = props.isLogin
+      ? login.actions.redirectToLogin
+      : login.actions.redirectToSignUp;
+    debugger;
     if (isLoggedIn === false) {
       if (provider === "github") {
-        dispatch(login.actions.redirectToLogin(props.path));
+        dispatch(action(props.path));
       }
     }
   };
@@ -28,4 +32,4 @@ const LoginView = (props) => {
   );
 };
 
-export default LoginView;
+export default LoginRegisterView;