-
+
-
-
-
-
-
-
- {t("DHCP")}
-
- {t("DHCP Active")}: {this.state.active.toString()}
- {t("Start IP")}: {this.state.ip_start}
- {t("End IP")}: {this.state.ip_end}
- {t("Router IP")}: {this.state.router_ip}
- {t("Lease Time")}: {this.state.lease_time} h
- {t("Domain")}: {this.state.domain}
- {t("IPv6 Support")}: {this.state.ipv6_support.toString()}
-
-
+ {t("DHCP Active")}: {this.state.active.toString()}
+ {t("Start IP")}: {this.state.ip_start}
+ {t("End IP")}: {this.state.ip_end}
+ {t("Router IP")}: {this.state.router_ip}
+ {t("Lease Time")}: {this.state.lease_time} h
+ {t("Domain")}: {this.state.domain}
+ {t("IPv6 Support")}: {this.state.ipv6_support.toString()}
+
);
}
}
diff --git a/src/components/DNSInfo.js b/src/components/settings/DNSInfo.js
similarity index 51%
rename from src/components/DNSInfo.js
rename to src/components/settings/DNSInfo.js
index 338ca98..a977ca9 100644
--- a/src/components/DNSInfo.js
+++ b/src/components/settings/DNSInfo.js
@@ -10,7 +10,7 @@
import React, { Component } from "react";
import { translate } from "react-i18next";
-import { api, ignoreCancel, makeCancelable } from "../utils";
+import { api, ignoreCancel, makeCancelable } from "../../utils";
class DNSInfo extends Component {
state = {
@@ -69,41 +69,31 @@ class DNSInfo extends Component {
const { t } = this.props;
return (
-
-
-
-
-
+
+
+
+
);
}
}
diff --git a/src/components/settings/VersionCard.js b/src/components/settings/VersionCard.js
new file mode 100644
index 0000000..213c70b
--- /dev/null
+++ b/src/components/settings/VersionCard.js
@@ -0,0 +1,73 @@
+/* Pi-hole: A black hole for Internet advertisements
+* (c) 2017 Pi-hole, LLC (https://pi-hole.net)
+* Network-wide ad blocking via your own hardware.
+*
+* Web Interface
+* Settings :: Version - Card component
+*
+* This file is copyright under the latest version of the EUPL.
+* Please see LICENSE file for your rights under this license. */
+
+import React, { Component } from "react";
+import { translate } from "react-i18next";
+import PropTypes from "prop-types";
+import { Collapse } from "reactstrap";
+
+class VersionCard extends Component {
+ state = {
+ collapsed: true
+ };
+
+ render() {
+ const { t } = this.props;
+
+ return (
+
+
- +
+ {t("Upstream DNS Servers")}:
+ {this.state.upstream_dns.map(item => item + "\n")}
+
-
);
diff --git a/src/components/FTLInfo.js b/src/components/settings/FTLInfo.js
similarity index 69%
rename from src/components/FTLInfo.js
rename to src/components/settings/FTLInfo.js
index 9013b4e..a332817 100644
--- a/src/components/FTLInfo.js
+++ b/src/components/settings/FTLInfo.js
@@ -10,7 +10,7 @@
import React, { Component } from "react";
import { translate } from "react-i18next";
-import { api, ignoreCancel, makeCancelable } from "../utils";
+import { api, ignoreCancel, makeCancelable } from "../../utils";
class FTLInfo extends Component {
state = {
@@ -56,23 +56,11 @@ class FTLInfo extends Component {
const { t } = this.props;
return (
- {t("DNS")}
-
-
+
-
- --
- {t("Upstream DNS Servers")}:
- {this.state.upstream_dns.map(item => item + "\n")}
-
-
- --
- {t("Interface listening behaviour")}: {this.state.options.listening_type}
- {t("Forward FQDNs only")}: {this.state.options.fqdn_required.toString()}
- {t("Only forward public reverse lookups")}:{this.state.options.bogus_priv.toString()}
- {t("Use DNSSEC")}: {this.state.options.dnssec.toString()} -
-
- --
- {t("Conditional Forwarding")}
- {t("Enabled")}: {this.state.conditional_forwarding.enabled.toString()}
- {t("Router IP")}: {this.state.conditional_forwarding.router_ip.toString()}
- {t("Local Domain Name")}: {this.state.conditional_forwarding.domain.toString()}
-
+
+ ++
+ {t("Interface listening behavior")}: {this.state.options.listening_type}
+ {t("Forward FQDNs only")}: {this.state.options.fqdn_required.toString()}
+ {t("Only forward public reverse lookups")}:{this.state.options.bogus_priv.toString()}
+ {t("Use DNSSEC")}: {this.state.options.dnssec.toString()} +
+
+
+ {t("Conditional Forwarding")}
+ {t("Enabled")}: {this.state.conditional_forwarding.enabled.toString()}
+ {t("Router IP")}: {this.state.conditional_forwarding.router_ip.toString()}
+ {t("Local Domain Name")}: {this.state.conditional_forwarding.domain.toString()}
+
-
+
-
-
-
-
-
-
- - {t("FTL Database")} -
-
- {t("Queries")}: {this.state.queries}
- {t("Filesize")}: {this.state.filesize} B
- {t("SQLite version")}: {this.state.sqlite_version}
-
-
+ {t("Queries")}: {this.state.queries}
+ {t("Filesize")}: {this.state.filesize} B
+ {t("SQLite version")}: {this.state.sqlite_version}
+
);
}
}
diff --git a/src/components/NetworkInfo.js b/src/components/settings/NetworkInfo.js
similarity index 53%
rename from src/components/NetworkInfo.js
rename to src/components/settings/NetworkInfo.js
index 82b04d7..7f78b58 100644
--- a/src/components/NetworkInfo.js
+++ b/src/components/settings/NetworkInfo.js
@@ -8,9 +8,10 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
import { translate } from "react-i18next";
-import { api, ignoreCancel, makeCancelable } from "../utils";
+import { api, ignoreCancel, makeCancelable } from "../../utils";
+import { Col, Form, FormGroup, Input, Label } from "reactstrap";
class NetworkInfo extends Component {
state = {
@@ -58,22 +59,34 @@ class NetworkInfo extends Component {
const { t } = this.props;
return (
-
-
+
-
-
-
-
-
-
- {t("Network")}
-
- {t("Interface")}: {this.state.interface}
- {t("IPv4 address")}: {this.state.ipv4_address}
- {t("IPv6 address")}: {this.state.ipv6_address}
- {t("Hostname")}: {this.state.hostname}
-
-
+
+ );
+ }
+}
+
+VersionCard.propTypes = {
+ branch: PropTypes.string.isRequired,
+ hash: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ tag: PropTypes.string.isRequired
+};
+
+export default translate(["common", "settings"])(VersionCard);
diff --git a/src/components/VersionInfo.js b/src/components/settings/VersionInfo.js
similarity index 89%
rename from src/components/VersionInfo.js
rename to src/components/settings/VersionInfo.js
index b30ec10..cf27e51 100644
--- a/src/components/VersionInfo.js
+++ b/src/components/settings/VersionInfo.js
@@ -10,8 +10,8 @@
import React, { Component } from "react";
import { translate } from "react-i18next";
-import { api, ignoreCancel, makeCancelable } from "../utils";
-import VersionCard from "../components/VersionCard";
+import { api, ignoreCancel, makeCancelable } from "../../utils";
+import VersionCard from "./VersionCard";
class VersionInfo extends Component {
state = {
@@ -87,19 +87,19 @@ class VersionInfo extends Component {
return (
+
+
+
+
+
+
+
+
+
+
+
+ {this.props.name}
++ {t("Version")}: {this.props.branch === "master" ? this.props.tag : "vDev"} +
+ +| {t("Branch")} | +{this.props.branch} | +
| {t("Tag")} | +{this.props.tag} | +
| {t("Hash")} | +{this.props.hash} | +
-
+
-
+
-
+
-
+ : ;
+};
+
/**
* Create a route which requires authentication.
* If the user is unauthenticated, they will be redirected to the login page.
diff --git a/src/i18n.js b/src/i18n.js
index 025b51b..7069032 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -13,7 +13,7 @@ export function setupI18n() {
fallbackLng: "en",
ns: ['common'],
defaultNS: "common",
- fallbackNS: ['dashboard', 'footer', 'lists', 'location', 'login', 'query-log'],
+ fallbackNS: ["dashboard", "footer", "lists", "location", "login", "query-log", "settings"],
nsSeparator: false,
keySeparator: false,
debug: config.developmentMode,
diff --git a/src/index.js b/src/index.js
index 396f4a0..01ff80a 100644
--- a/src/index.js
+++ b/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(
(
-
+
-
+
),
document.getElementById('root')
);
diff --git a/src/routes.js b/src/routes.js
index ca8fc76..9165897 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -8,6 +8,16 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
+import Dashboard from "./views/Dashboard";
+import QueryLog from "./components/log/QueryLog";
+import Whitelist from "./views/Whitelist";
+import Blacklist from "./views/Blacklist";
+import Regexlist from "./views/Regexlist";
+import Versions from "./views/Versions";
+import Networking from "./views/Networking";
+import Login from "./views/Login";
+import Logout from "./views/Logout";
+
export const routes = t => ({
'/dashboard': t('Dashboard'),
'/query-log': t('Query Log'),
@@ -24,18 +34,21 @@ export const nav = [
{
name: 'Dashboard',
url: '/dashboard',
+ component: Dashboard,
icon: 'fa fa-dashboard',
auth: false
},
{
name: 'Query Log',
url: '/query-log',
+ component: QueryLog,
icon: 'fa fa-database',
auth: true
},
{
name: 'Whitelist',
url: '/whitelist',
+ component: Whitelist,
icon: 'fa fa-check-circle-o',
auth: false
},
@@ -48,12 +61,14 @@ export const nav = [
{
name: 'Exact',
url: '/blacklist/exact',
+ component: Blacklist,
icon: 'fa fa-ban',
auth: false
},
{
name: 'Regex',
url: '/blacklist/regex',
+ component: Regexlist,
icon: 'fa fa-ban',
auth: false
}
@@ -68,12 +83,14 @@ export const nav = [
{
name: 'Versions',
url: '/settings/versions',
+ component: Versions,
icon: 'fa fa-download',
auth: true
},
{
name: 'Networking',
url: '/settings/networking',
+ component: Networking,
icon: 'fa fa-sitemap',
auth: true,
}
@@ -82,6 +99,7 @@ export const nav = [
{
name: 'Login',
url: '/login',
+ component: Login,
icon: 'fa fa-user',
auth: false,
authStrict: true
@@ -89,6 +107,7 @@ export const nav = [
{
name: 'Logout',
url: '/logout',
+ component: Logout,
icon: 'fa fa-user-times',
auth: true,
authStrict: true
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index e460f4e..950615d 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -113,6 +113,10 @@
text-decoration: line-through !important;
}
+.bold {
+ font-weight: bold;
+}
+
.background-image {
background: url("../img/backgroundLight.png") repeat fixed;
}
diff --git a/src/views/Blacklist.js b/src/views/Blacklist.js
index 3ebc757..8c07571 100644
--- a/src/views/Blacklist.js
+++ b/src/views/Blacklist.js
@@ -11,7 +11,7 @@
import React from 'react';
import { translate } from 'react-i18next';
import { api } from "../utils";
-import ListPage from "../components/ListPage";
+import ListPage from "../components/list/ListPage";
const Blacklist = props => {
const { t } = props;
diff --git a/src/views/Dashboard.js b/src/views/Dashboard.js
index 4928138..5a625b7 100644
--- a/src/views/Dashboard.js
+++ b/src/views/Dashboard.js
@@ -9,14 +9,14 @@
* Please see LICENSE file for your rights under this license. */
import React, { Fragment } from 'react';
-import SummaryStats from '../components/SummaryStats';
-import QueriesGraph from '../components/QueriesGraph';
-import ClientsGraph from '../components/ClientsGraph';
-import QueryTypesChart from "../components/QueryTypesChart";
-import ForwardDestinationsChart from "../components/ForwardDestinationsChart";
-import TopDomains from '../components/TopDomains';
-import TopBlocked from '../components/TopBlocked';
-import TopClients from '../components/TopClients';
+import SummaryStats from '../components/dashboard/SummaryStats';
+import QueriesGraph from '../components/dashboard/QueriesGraph';
+import ClientsGraph from '../components/dashboard/ClientsGraph';
+import QueryTypesChart from "../components/dashboard/QueryTypesChart";
+import ForwardDestinationsChart from "../components/dashboard/ForwardDestinationsChart";
+import TopDomains from '../components/dashboard/TopDomains';
+import TopBlocked from '../components/dashboard/TopBlocked';
+import TopClients from '../components/dashboard/TopClients';
import { api } from "../utils";
export default () => (
diff --git a/src/views/Login.js b/src/views/Login.js
index a676967..c00666d 100644
--- a/src/views/Login.js
+++ b/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/ForgotPassword";
-import { translate } from 'react-i18next';
+import ForgotPassword from "../components/login/ForgotPassword";
+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 (
-
+
diff --git a/src/containers/Full.js b/src/containers/Full.js
index ac4506e..3b96f8c 100644
--- a/src/containers/Full.js
+++ b/src/containers/Full.js
@@ -10,18 +10,9 @@
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'
-import Header, { mobileSidebarHide } from '../components/Header';
-import Sidebar from '../components/Sidebar';
-import Footer from '../components/Footer';
-import Dashboard from '../views/Dashboard';
-import QueryLog from '../components/QueryLog';
-import Whitelist from "../views/Whitelist";
-import Blacklist from "../views/Blacklist";
-import Regexlist from "../views/Regexlist";
-import Versions from "../views/Versions";
-import Networking from "../views/Networking";
-import Login from "../views/Login";
-import Logout from "../views/Logout";
+import Header, { mobileSidebarHide } from '../components/common/Header';
+import Sidebar from '../components/common/Sidebar';
+import Footer from '../components/common/Footer';
import { api } from "../utils";
import { nav } from "../routes";
@@ -33,16 +24,8 @@ export default props => (
-
-
-
-
-
-
-
-
+ {nav.map(createRoute)}
@@ -51,6 +34,22 @@ export default props => (
);
+/**
+ * Create a route from the route data.
+ * If the route has children, an array of routes will be returned.
+ *
+ * @param routeData the route data (see routes.js)
+ */
+const createRoute = routeData => {
+ if(routeData.children) {
+ return routeData.children.map(createRoute);
+ }
+
+ return routeData.auth
+ ?
+
-
+
-
-
-
+
{t( - "You will be transferred to the {{page}}", + "You will be transferred to the \"{{page}}\" page", { page: routes(t)[this.props.location.state.from.pathname] } )}
@@ -115,7 +124,7 @@ class Login extends Component {
{
// If cookies are not enabled (or detected), show a warning
!this.state.cookiesEnabled ?
-
+
Pi-hole
@@ -106,7 +115,7 @@ class Login extends Component {
{t( - "You will be transferred to the {{page}}", + "You will be transferred to the \"{{page}}\" page", { page: routes(t)[this.props.location.state.from.pathname] } )}
+
{t("Verify that cookies are allowed for {{host}}", { host: window.location.host })}
: null
@@ -135,7 +144,7 @@ class Login extends Component {