Unauth header init

web/ASC.Web.Common/src/components/Layout/index.js

@@ -7,6 +7,7 @@ import Main from "./sub-components/main";
 import HeaderNav from "./sub-components/header-nav";
 import NavLogoItem from "./sub-components/nav-logo-item";
 import NavItem from "./sub-components/nav-item";
+import HeaderUnauth from "./sub-components/header-unauth";
 
 class Layout extends React.Component {
   constructor(props) {
@@ -45,7 +46,7 @@ class Layout extends React.Component {
       }
     }
     if (props.availableModules && this.state.availableModules) {
-        hash += utils.array.isArrayEqual(this.state.availableModules, props.availableModules);
+      hash += utils.array.isArrayEqual(this.state.availableModules, props.availableModules);
     }
     return hash;
   };
@@ -74,7 +75,7 @@ class Layout extends React.Component {
     const newState = {
       isBackdropAvailable: mainModules.length > 0 || !!props.asideContent,
       isHeaderNavAvailable: isolateModules.length > 0 || !!props.currentUser,
-      isHeaderAvailable: mainModules.length > 0,
+      //isHeaderAvailable: mainModules.length > 0,
       isNavAvailable: mainModules.length > 0,
       isAsideAvailable: !!props.asideContent,
 
@@ -156,9 +157,12 @@ class Layout extends React.Component {
       isNavHoverEnabled: false
     });
   };
+  
+  isAuthKey = localStorage.getItem("asc_auth_key") ? true : false;
 
   render() {
     //console.log("Layout render");
+    //const isAuthKey = localStorage.getItem("asc_auth_key") ? true : false;
 
     return (
       <>
@@ -175,14 +179,15 @@ class Layout extends React.Component {
             userActions={this.state.currentUserActions}
           />
         )}
-        {this.state.isHeaderAvailable && (
+        { this.isAuthKey ?
           <HeaderComponent
             badgeNumber={this.state.totalNotifications}
             onClick={this.showNav}
             onLogoClick={this.state.onLogoClick}
             currentModule={this.state.currentModule}
           />
-        )}
+          : <HeaderUnauth>{this.props.children}</HeaderUnauth>
+        }
         {this.state.isNavAvailable && (
           <Nav
             opened={this.state.isNavOpened}

web/ASC.Web.Common/src/components/Layout/sub-components/header-unauth.js

@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "asc-web-components";
+import styled from "styled-components";
+
+const backgroundColor = "#0F4071";
+
+const Header = styled.header`
+  align-items: center;
+  background-color: ${backgroundColor};
+  display: flex;
+  z-index: 185;
+  position: absolute;
+  width: 100vw;
+  height: 56px;
+
+  .header-logo-wrapper {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .header-module-title {
+    display: block;
+    font-size: 21px;
+    line-height: 0;
+  }
+
+  .header-logo-min_icon {
+    display: none;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+  }
+
+  .header-logo-icon {
+    width: 146px;
+    height: 24px;
+    position: relative;
+    padding: 4px 20px 0 6px;
+    cursor: pointer;
+  }
+`;
+
+const HeaderUnauth = () => {
+  //console.log("Header render");
+  //const currentModule = props.currentModule && props.currentModule.title;
+  return (
+    <Header>
+
+      <Box>
+
+        <Box>
+          <a className="header-logo-wrapper" href="/">
+            <img className="header-logo-min_icon" src="images/nav.logo.react.svg" />
+            <img
+              className="header-logo-icon"
+              src="images/nav.logo.opened.react.svg"
+            />
+          </a>
+        </Box>
+
+        <Box>
+          Recover
+        </Box>
+
+      </Box>
+
+    </Header>
+  );
+};
+
+HeaderUnauth.displayName = "Header";
+
+HeaderUnauth.propTypes = {
+  badgeNumber: PropTypes.number,
+  onClick: PropTypes.func,
+  onLogoClick: PropTypes.func,
+  currentModule: PropTypes.object
+};
+
+export default HeaderUnauth;