+ client: login page

client/src/components/Header/Header.css

@@ -29,6 +29,7 @@
 .nav-tabs .nav-link {
     width: 100%;
     border: 0;
+    padding: 20px 0;
 }
 
 .header {
@@ -68,42 +69,8 @@
     overflow: hidden;
 }
 
-.nav-version {
-    padding: 7px 0;
-    font-size: 0.80rem;
-    text-align: right;
-}
-
-.nav-version__value {
-    max-width: 110px;
-    font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-@media screen and (min-width: 992px) {
-    .nav-version__value {
-        max-width: 100%;
-        overflow: visible;
-    }
-}
-
-.nav-version__link {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dashed #495057;
-    cursor: pointer;
-}
-
-.nav-version__text {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-
 .header-brand-img {
-    height: 32px;
+    height: 24px;
 }
 
 .nav-tabs .nav-item.show .nav-link {
@@ -112,6 +79,56 @@
     border-bottom-color: #66b574;
 }
 
+.header__right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 100px;
+}
+
+.header__logout {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 25px;
+    min-width: 25px;
+    padding: 2px;
+    margin-left: 10px;
+    color: #9aa0ac;
+}
+
+.header__logout:hover,
+.header__logout:focus {
+    color: #6e7687;
+}
+
+.header__logout-icon {
+    height: 100%;
+}
+
+.header__row {
+    display: flex;
+    align-items: center;
+}
+
+.header__container {
+    width: 100%;
+    max-width: 1200px;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.header__column:last-child {
+    margin-left: auto;
+}
+
+.nav-tabs {
+    margin: 0;
+}
+
 @media screen and (min-width: 992px) {
     .header {
         padding: 0;
@@ -139,13 +156,31 @@
         box-shadow: none;
     }
 
-    .nav-version {
-        padding: 0;
-    }
-
     .nav-icon {
         display: none;
     }
+
+    .header-brand-img {
+        height: 32px;
+    }
+
+    .header__logout {
+        width: 35px;
+        height: 35px;
+        padding: 5px;
+    }
+
+    .header__row {
+        justify-content: space-between;
+    }
+
+    .header__column:last-child {
+        margin-left: 0;
+    }
+
+    .nav-tabs {
+        margin: 0 -0.75rem;
+    }
 }
 
 @media screen and (min-width: 1280px) {
@@ -153,10 +188,6 @@
         font-size: 14px;
     }
 
-    .nav-version {
-        font-size: 0.85rem;
-    }
-
     .nav-icon {
         display: block;
     }

client/src/components/Header/Menu.js

@@ -26,7 +26,7 @@ class Menu extends Component {
 
     render() {
         const menuClass = classnames({
-            'col-lg-6 mobile-menu': true,
+            'header__column mobile-menu': true,
             'mobile-menu--active': this.props.isMenuOpen,
         });
 

client/src/components/Header/Version.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
-
-const Version = (props) => {
-    const {
-        dnsVersion, dnsAddresses, processingVersion, t,
-    } = props;
-
-    return (
-        <div className="nav-version">
-            <div className="nav-version__text">
-                <Trans>version</Trans>:&nbsp;<span className="nav-version__value" title={dnsVersion}>{dnsVersion}</span>
-                <button
-                    type="button"
-                    className="btn btn-icon btn-icon-sm btn-outline-primary btn-sm ml-2"
-                    onClick={() => props.getVersion(true)}
-                    disabled={processingVersion}
-                    title={t('check_updates_now')}
-                >
-                    <svg className="icons">
-                        <use xlinkHref="#refresh" />
-                    </svg>
-                </button>
-            </div>
-            <div className="nav-version__link">
-                <div className="popover__trigger popover__trigger--address">
-                    <Trans>dns_addresses</Trans>
-                </div>
-                <div className="popover__body popover__body--address">
-                    <div className="popover__list">
-                        {dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-Version.propTypes = {
-    dnsVersion: PropTypes.string.isRequired,
-    dnsAddresses: PropTypes.array.isRequired,
-    dnsPort: PropTypes.number.isRequired,
-    getVersion: PropTypes.func.isRequired,
-    processingVersion: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
-export default withNamespaces()(Version);

client/src/components/Header/index.js

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import { Trans, withNamespaces } from 'react-i18next';
 
 import Menu from './Menu';
-import Version from './Version';
 import logo from '../ui/svg/logo.svg';
 import './Header.css';
 
@@ -23,7 +22,7 @@ class Header extends Component {
     };
 
     render() {
-        const { dashboard, getVersion, location } = this.props;
+        const { dashboard, location } = this.props;
         const { isMenuOpen } = this.state;
         const badgeClass = classnames({
             'badge dns-status': true,
@@ -33,21 +32,24 @@ class Header extends Component {
 
         return (
             <div className="header">
-                <div className="container">
-                    <div className="row align-items-center">
-                        <div className="header-toggler d-lg-none ml-2 ml-lg-0 collapsed" onClick={this.toggleMenuOpen}>
+                <div className="header__container">
+                    <div className="header__row">
+                        <div
+                            className="header-toggler d-lg-none ml-lg-0 collapsed"
+                            onClick={this.toggleMenuOpen}
+                        >
                             <span className="header-toggler-icon"></span>
                         </div>
-                        <div className="col col-lg-3">
+                        <div className="header__column">
                             <div className="d-flex align-items-center">
                                 <Link to="/" className="nav-link pl-0 pr-1">
                                     <img src={logo} alt="" className="header-brand-img" />
                                 </Link>
-                                {!dashboard.proccessing && dashboard.isCoreRunning &&
+                                {!dashboard.proccessing && dashboard.isCoreRunning && (
                                     <span className={badgeClass}>
                                         <Trans>{dashboard.protectionEnabled ? 'on' : 'off'}</Trans>
                                     </span>
-                                }
+                                )}
                             </div>
                         </div>
                         <Menu
@@ -56,14 +58,13 @@ class Header extends Component {
                             toggleMenuOpen={this.toggleMenuOpen}
                             closeMenu={this.closeMenu}
                         />
-                        {!dashboard.processing &&
-                            <div className="col col-sm-6 col-lg-3">
-                                <Version
-                                    { ...dashboard }
-                                    getVersion={getVersion}
-                                />
+                        <div className="header__column">
+                            <div className="header__right">
+                                <a href="/control/logout" className="btn btn-sm btn-outline-secondary">
+                                    <Trans>logout</Trans>
+                                </a>
                             </div>
-                        }
+                        </div>
                     </div>
                 </div>
             </div>
@@ -75,6 +76,7 @@ Header.propTypes = {
     dashboard: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     getVersion: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(Header);