Merge pull request #82 from pi-hole/fix/login-redirect

Use BrowserRouter and fix login page redirection

src/index.js

@@ -10,7 +10,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import "ionicons/dist/css/ionicons.min.css";
 import "font-awesome/css/font-awesome.min.css";
 import "simple-line-icons/css/simple-line-icons.css";
@@ -28,11 +28,11 @@ setupI18n();
 
 ReactDOM.render(
   (
-    <HashRouter>
+    <BrowserRouter>
       <Switch>
         <Route path="/" name="Home" component={Full}/>
       </Switch>
-    </HashRouter>
+    </BrowserRouter>
   ),
   document.getElementById('root')
 );

src/views/Login.js

@@ -8,18 +8,19 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */
 
-import React, { Component, Fragment } from 'react';
-import { Redirect } from 'react-router-dom';
-import sha from 'sha.js';
+import React, { Component, Fragment } from "react";
+import { Redirect } from "react-router-dom";
+import sha from "sha.js";
 import { api } from "../utils";
-import logo from '../img/logo.svg';
+import logo from "../img/logo.svg";
 import { routes } from "../routes";
 import ForgotPassword from "../components/login/ForgotPassword";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
+import config from "../config";
 
 class Login extends Component {
   state = {
-    password: '',
+    password: "",
     error: false,
     cookiesEnabled: false
   };
@@ -41,19 +42,22 @@ class Login extends Component {
     if(e.keyCode === 13)
       this.authenticate();
     else
-      this.setState({ password: e.target.value })
+      this.setState({ password: e.target.value });
   };
 
   /**
    * Try to authenticate the user
    */
-  authenticate = () => {
+  authenticate = e => {
+    // Prevent the page from reloading when the user gets redirected
+    e.preventDefault();
+
     // Hash the password twice before sending to the API
     let hashedPassword = sha("sha256").update(this.state.password).digest("hex");
     hashedPassword = sha("sha256").update(hashedPassword).digest("hex");
 
     // Clear the state
-    this.setState({ password: '', error: false });
+    this.setState({ password: "", error: false });
 
     // Send the password to the API to authenticate the user
     api.authenticate(hashedPassword)
@@ -67,9 +71,14 @@ class Login extends Component {
 
         api.loggedIn = true;
 
+        if(config.fakeAPI) {
+          // When using the fake API, set the cookie ourselves
+          document.cookie = "user_id=;";
+        }
+
         // Redirect to the page the user was originally going to, or if that doesn't exist, go to home
-        const redirect = this.props.location.state.from || '/';
-        this.props.history.push(redirect);
+        const locationState = this.props.location.state || "/";
+        this.props.history.push(locationState.from.pathname);
       })
       // If there was an error, tell the user they used the wrong password
       .catch(() => this.setState({ error: true }));
@@ -83,16 +92,16 @@ class Login extends Component {
     const { t } = this.props;
 
     return (
-      <div className="mainbox col-md-8 offset-md-2 col-lg-6 offset-lg-3" style={{'float': 'none'}}>
+      <div className="mainbox col-md-8 offset-md-2 col-lg-6 offset-lg-3" style={{ "float": "none" }}>
         <div className="card">
           <div className="card-header">
-            <div style={{'textAlign': 'center'}}>
+            <div style={{ "textAlign": "center" }}>
               <img src={logo} alt="Logo" width="30%"/>
             </div>
             <br/>
 
-            <div className="card-title text-center" style={{'marginBottom': 0}}>
-              <span className="logo-lg" style={{'fontSize': '25px'}}>
+            <div className="card-title text-center" style={{ "marginBottom": 0 }}>
+              <span className="logo-lg" style={{ "fontSize": "25px" }}>
                 Pi-<b>hole</b>
               </span>
             </div>
@@ -115,7 +124,7 @@ class Login extends Component {
               {
                 // If cookies are not enabled (or detected), show a warning
                 !this.state.cookiesEnabled ?
-                  <div className="text-center" style={{'color': '#F00'}}>
+                  <div className="text-center" style={{ "color": "#F00" }}>
                     {t("Verify that cookies are allowed for {{host}}", { host: window.location.host })}
                   </div>
                   : null
@@ -135,7 +144,7 @@ class Login extends Component {
 
           <div className="card-body">
             <form id="loginform">
-              <div className={'input-group' + (this.state.error ? ' has-error' : '')}>
+              <div className={"input-group" + (this.state.error ? " has-error" : "")}>
                 <input type="password" className="form-control"
                        value={this.state.password} onChange={this.handlePasswordChange}
                        placeholder={t("Password")} autoFocus/>

src/views/Logout.js

@@ -11,11 +11,19 @@
 import React, { Component } from 'react';
 import { Redirect } from 'react-router-dom';
 import { api } from "../utils";
+import config from "../config";
 
 export default class Logout extends Component {
   componentWillMount() {
     api.loggedIn = false;
-    api.logout();
+
+    if(config.fakeAPI) {
+      // When using the fake API, don't try deleting the resource
+      // (it results in an error). Instead, delete the cookie.
+      document.cookie = 'user_id=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    } else {
+      api.logout();
+    }
   }
 
   render() {