Merge branch 'feat/user-management' into imprv/user-status-filtering-search-user-status

src/client/js/admin.jsx

@@ -18,6 +18,7 @@ import Customize from './components/Admin/Customize/Customize';
 import ImportDataPage from './components/Admin/ImportDataPage';
 import ExportArchiveDataPage from './components/Admin/ExportArchiveDataPage';
 import FullTextSearchManagement from './components/Admin/FullTextSearchManagement';
+import AdminNavigation from './components/Admin/Common/AdminNavigation';
 
 import AdminHomeContainer from './services/AdminHomeContainer';
 import AdminCustomizeContainer from './services/AdminCustomizeContainer';
@@ -79,6 +80,7 @@ Object.assign(componentMappings, {
   'admin-user-group-detail': <UserGroupDetailPage />,
   'admin-full-text-search-management': <FullTextSearchManagement />,
   'admin-user-group-page': <UserGroupPage />,
+  'admin-navigation': <AdminNavigation />,
 });
 
 

src/client/js/components/Admin/Common/AdminNavigation.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import urljoin from 'url-join';
+
+const AdminNavigation = (props) => {
+  const { t } = props;
+  const pathname = window.location.pathname;
+
+  const isActiveMenu = (path) => {
+    return (pathname.startsWith(urljoin('/admin', path)));
+  };
+
+  return (
+    <ul className="nav nav-pills nav-stacked">
+      <li className={`${pathname === '/admin' && 'active'}`}>
+        <a href="/admin"><i className="icon-fw icon-home"></i> { t('Management Wiki Home') }</a>
+      </li>
+      <li className={`${isActiveMenu('/app') && 'active'}`}>
+        <a href="/admin/app"><i className="icon-fw icon-settings"></i> { t('App Settings') }</a>
+      </li>
+      <li className={`${isActiveMenu('/security') && 'active'}`}>
+        <a href="/admin/security"><i className="icon-fw icon-shield"></i> { t('security_settings') }</a>
+      </li>
+      <li className={`${isActiveMenu('/markdown') && 'active'}`}>
+        <a href="/admin/markdown"><i className="icon-fw icon-note"></i> { t('Markdown Settings') }</a>
+      </li>
+      <li className={`${isActiveMenu('/customize') && 'active'}`}>
+        <a href="/admin/customize"><i className="icon-fw icon-wrench"></i> { t('Customize') }</a>
+      </li>
+      <li className={`${isActiveMenu('/importer') && 'active'}`}>
+        <a href="/admin/importer"><i className="icon-fw icon-cloud-upload"></i> { t('Import Data') }</a>
+      </li>
+      <li className={`${isActiveMenu('/export') && 'active'}`}>
+        <a href="/admin/export"><i className="icon-fw icon-cloud-download"></i> { t('Export Archive Data') }</a>
+      </li>
+      <li className={`${(isActiveMenu('/notification') || isActiveMenu('/global-notification')) && 'active'}`}>
+        <a href="/admin/notification"><i className="icon-fw icon-bell"></i> { t('Notification Settings') }</a>
+      </li>
+      <li className={`${(isActiveMenu('/users')) && 'active'}`}>
+        <a href="/admin/users"><i className="icon-fw icon-user"></i> { t('User_Management') }</a>
+      </li>
+      <li className={`${isActiveMenu('/user-group') && 'active'}`}>
+        <a href="/admin/user-groups"><i className="icon-fw icon-people"></i> { t('UserGroup Management') }</a>
+      </li>
+      <li className={`${isActiveMenu('/search') && 'active'}`}>
+        <a href="/admin/search"><i className="icon-fw icon-magnifier"></i> { t('Full Text Search Management') }</a>
+      </li>
+    </ul>
+  );
+};
+
+
+AdminNavigation.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+};
+
+export default withTranslation()(AdminNavigation);

src/client/js/components/Admin/UserManagement.jsx

@@ -19,7 +19,9 @@ class UserManagement extends React.Component {
 
   constructor(props) {
     super();
-
+    this.state = {
+      statusList: new Set(),
+    };
     this.handlePage = this.handlePage.bind(this);
   }
 
@@ -36,6 +38,26 @@ class UserManagement extends React.Component {
     }
   }
 
+
+  /**
+   * onChange
+   */
+
+
+  // To do GW-1206: setting of onChange
+  onChangeStatusList(status) {
+    const { statusList } = this.state;
+
+    if (statusList.has(status)) {
+      statusList.delete(status);
+    }
+    else {
+      statusList.add(status);
+    }
+    this.setState({ statusList });
+  }
+
+
   render() {
     const { t, adminUsersContainer } = this.props;
 
@@ -63,6 +85,37 @@ class UserManagement extends React.Component {
 
         <h2>{t('User_Management')}</h2>
 
+        <div className="row border-top border-bottom mr-2">
+          <div className="px-0">
+
+            <label className="col-md-3 mb-0 my-3">
+              <i className="icon-magnifier mr-1"></i>
+              <input type="text" name="name" />
+            </label>
+          </div>
+
+          <div className="col-md-6 py-2 my-2" style={{ width: 500 }}>
+            <input type="checkbox" className="mr-1" onChange={() => { this.onChangeStatusList() }} />
+            <label className="mr-2">All</label>
+
+            <input type="checkbox" className="mr-1" onChange={this.ApprovalPending} />
+            <label className="label label-info mr-2">Approval Pending</label>
+
+            <input type="checkbox" className="mr-1" onChange={this.Active} />
+            <label className="label label-success mr-2">Active</label>
+
+            <input type="checkbox" className="mr-1" onChange={this.Suspended} />
+            <label className="label label-warning mr-2">Suspended</label>
+
+            <input type="checkbox" className="mr-1" onChange={this.__Invited} />
+            <label className="label label-info mr-2">Invited</label>
+
+            <input type="checkbox" className="mr-1" onChange={this.__Status} />
+            <label className="label label-info">Status</label>
+          </div>
+        </div>
+
+
         {pager}
         <UserTable />
         {pager}

src/client/styles/agile-admin/inverse/colors/spring.scss

@@ -11,7 +11,6 @@ $bodycolor: $sidebar;
 $headingtext: $subthemecolor;
 $bodytext: #333333;
 $linktext: $subthemecolor;
-$linkcolor: burlywood;
 $linktext-hover: lighten($linktext, 20%);
 $sidebar-text: #38495a;
 $accentcolor: #e08dbc;
@@ -21,10 +20,9 @@ $background-color: rgba(171, 224, 174, 0.4);
 $third-main-color: antiquewhite;
 $textcolor: dimgray;
 $primary: $themecolor;
-
 $logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
-$wikilinktext: lighten($themecolor, 20%);
-$wikilinktext-hover: lighten($wikilinktext, 20%);
+$wikilinktext: $subthemecolor;
+$wikilinktext-hover: gba(171, 224, 174, 0.9);
 
 @import 'apply-colors';
 @import 'apply-colors-light';
@@ -199,10 +197,6 @@ input .btn-secondary {
   color: $subthemecolor;
 }
 
-.wiki a {
-  color: $linkcolor;
-}
-
 /*
  *  panel
  */

src/client/styles/scss/_user.scss

@@ -34,9 +34,11 @@
         font-weight: bold;
       }
 
-      .user-page-email {}
+      .user-page-email {
+      }
 
-      .user-page-introduction {}
+      .user-page-introduction {
+      }
     }
 
     .btn-like,
@@ -79,7 +81,6 @@
         }
 
         a {
-
           .icon-copy,
           .draft-delete,
           .icon-edit {

src/server/views/admin/app.html

@@ -14,28 +14,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-  {% set smessage = req.flash('successMessage') %}
-  {% if smessage.length %}
-  <div class="alert alert-success">
-    {{ smessage }}
-  </div>
-  {% endif %}
-
-  {% set emessage = req.flash('errorMessage') %}
-  {% if emessage.length %}
-  <div class="alert alert-danger">
-    {{ emessage }}
-  </div>
-  {% endif %}
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'app'} %}
-    </div>
-
-    <div class="col-md-9" id="admin-app"></div>
-  </div>
-
+<div class="content-main row">
+  {% parent %}
+  <div class="col-md-9" id="admin-app"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/customize.html

@@ -21,32 +21,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-customize">
-  {% set smessage = req.flash('successMessage') %}
-  {% if smessage.length %}
-  <div class="alert alert-success">
-    {{ smessage }}
-  </div>
-  {% endif %}
-  {% set emessage = req.flash('errorMessage') %}
-  {% if emessage.length %}
-  <div class="alert alert-danger">
-    {{ emessage }}
-  </div>
-  {% endif %}
-
-  <div id="grw-hljs-container-for-demo">
-    {{ cdnHighlightJsStyleTag(getConfig('crowi', 'customize:highlightJsStyle')) }}
-  </div>
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'customize'} %}
-    </div>
-    <div class="col-md-9">
-      <div id="admin-customize"></div>
-    </div>
-  </div>
+<div class="content-main admin-customize row">
+  {% parent %}
+  <div class="col-md-9" id="admin-customize"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/export.html

@@ -11,18 +11,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-export">
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'export'} %}
-    </div>
-    <div
-      id="admin-export-page"
-      class="col-md-9"
-    >
-    </div>
-  </div>
+<div class="content-main admin-export row">
+  {% parent %}
+  <div id="admin-export-page" class="col-md-9"></div>
 </div>
 
 {% endblock content_main %}

src/server/views/admin/external-accounts.html

@@ -11,36 +11,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-  {% set wmessage = req.flash('warningMessage') %}
-  {% if wmessage.length %}
-  <div class="alert alert-warning">
-    {{ wmessage }}
-  </div>
-  {% endif %}
-
-  {% set smessage = req.flash('successMessage') %}
-  {% if smessage.length %}
-  <div class="alert alert-success">
-    {{ smessage }}
-  </div>
-  {% endif %}
-
-  {% set emessage = req.flash('errorMessage') %}
-  {% if emessage.length %}
-  <div class="alert alert-danger">
-    {{ emessage }}
-  </div>
-  {% endif %}
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'external-account'} %}
-    </div>
-
-    <div class="col-md-9" id="admin-external-account-setting">
-    </div>
-  </div>
+<div class="content-main row">
+  {% parent %}
+  <div class="col-md-9" id="admin-external-account-setting"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/global-notification-detail.html

@@ -11,29 +11,11 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-  {% set smessage = req.flash('successMessage') %}
-  {% if smessage.length %}
-  <div class="alert alert-success">
-    {{ smessage }}
-  </div>
-  {% endif %}
-
-  {% set emessage = req.flash('errorMessage') %}
-  {% if emessage.length %}
-  <div class="alert alert-danger">
-    {{ emessage }}
-  </div>
-  {% endif %}
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'notification'} %}
-    </div>
-    <div class="col-md-9" id="admin-global-notification-setting"
-      data-global-notification="{{ globalNotification|json }}">
-    </div>
-  </div>
+<div class="content-main row">
+  {% parent %}
+  <div class="col-md-9" id="admin-global-notification-setting"
+      data-global-notification="{{ globalNotification|json }}"></div>
+</div>
 
   {% endblock content_main %}
 

src/server/views/admin/importer.html

@@ -11,38 +11,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-importer">
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'importer'} %}
-    </div>
-    <div class="col-lg-7 col-md-9">
-
-      <!-- Flash message for success -->
-      {% set smessage = req.flash('successMessage') %}
-      {% if smessage.length %}
-      <div class="alert alert-success">
-        {% for e in smessage %}
-        {{ e }}<br>
-        {% endfor %}
-      </div>
-      {% endif %}
-
-      <!-- Flash message for error -->
-      {% set emessage = req.flash('errorMessage') %}
-      {% if emessage.length %}
-      <div class="alert alert-danger">
-        {% for e in emessage %}
-        {{ e }}<br>
-        {% endfor %}
-      </div>
-      {% endif %}
-
-      <div id="admin-importer"></div>
-
-    </div>
-  </div>
+<div class="content-main admin-importer row">
+  {% parent %}
+  <div class="col-md-9" id="admin-importer"></div>
 </div>
 
 {% endblock content_main %}

src/server/views/admin/index.html

@@ -11,24 +11,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-
-  {% set emessage = req.flash('errorMessage') %}
-  {% if emessage.length %}
-  <div class="alert alert-danger">
-    {{ emessage }}
-  </div>
-  {% endif %}
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' %}
-    </div>
-    <div class="col-md-9">
-      <div id="admin-home"></div>
-    </div>
-  </div>
-
+<div class="content-main row">
+  {% parent %}
+  <div class="col-md-9" id="admin-home"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/markdown.html

@@ -12,15 +12,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'markdown'} %}
-    </div>
-
-    <div class="col-md-9" id="admin-markdown-setting"></div>
-  </div>
-
+<div class="content-main row">
+  {% parent %}
+  <div class="col-md-9" id="admin-markdown-setting"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/notification.html

@@ -11,13 +11,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-notification">
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'notification'} %}
-    </div>
-    <div class="col-md-9" id="admin-notification-setting"></div>
-  </div>
+<div class="content-main admin-notification row">
+  {% parent %}
+  <div class="col-md-9" id="admin-notification-setting"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/search.html

@@ -11,12 +11,8 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'search'} %}
-    </div>
+<div class="content-main row">
+  {% parent %}
     <div
       class="col-md-9"
       id ="admin-full-text-search-management"
@@ -25,8 +21,6 @@
       <!-- {% include '../widget/pager.html' with {path: "/admin/search", pager: pager} %} -->
       <!-- Reactify Paginator end -->
     </div>
-  </div>
-
 </div>
 
 

src/server/views/admin/security.html

@@ -11,11 +11,8 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-security">
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'security'} %}
-    </div>
+<div class="content-main admin-security row">
+  {% parent %}
     <div class="col-md-9">
 
       {% set smessage = req.flash('successMessage') %}

src/server/views/admin/user-group-detail.html

@@ -11,17 +11,13 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'user-group'} %}
-    </div>
-    <div
-      id="admin-user-group-detail"
-      class="col-md-9"
-      data-user-group="{{ userGroup|json }}"
-    >
-    </div>
+<div class="content-main row">
+  {% parent %}
+  <div
+    id="admin-user-group-detail"
+    class="col-md-9"
+    data-user-group="{{ userGroup|json }}"
+  >
   </div>
 </div>
 {% endblock content_main %}

src/server/views/admin/user-groups.html

@@ -11,13 +11,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-  <div class="row">
-    <div class="col-md-3">
-      {% include './widget/menu.html' with {current: 'user-group'} %}
-    </div>
-    <div id ="admin-user-group-page" class="col-md-9"></div>
-  </div>
+<div class="content-main row">
+  {% parent %}
+  <div id ="admin-user-group-page" class="col-md-9"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/users.html

@@ -11,24 +11,8 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
-    {% set smessage = req.flash('successMessage') %}
-  {% if smessage.length %}
-  <div class="alert alert-success">
-    {{ smessage }}
-  </div>
-  {% endif %}
-
-  {% set emessage = req.flash('errorMessage') %}
-  {% if emessage.length %}
-  <div class="alert alert-danger">
-    {{ emessage }}
-  </div>
-  {% endif %}
-
-  <div class="col-md-3">
-    {% include './widget/menu.html' with {current: 'user'} %}
-  </div>
+<div class="content-main row">
+  {% parent %}
   <div
     class="col-md-9"
     id ="admin-user-page"

src/server/views/admin/widget/menu.html

@@ -1,16 +0,0 @@
-{% if not current %}
-  {% set current = 'index' %}
-{% endif  %}
-<ul class="nav nav-pills nav-stacked">
-  <li class="{% if current == 'index'%}active{% endif %}"><a href="/admin"><i class="icon-fw icon-home"></i> {{ t('Management Wiki Home') }}</a></li>
-  <li class="{% if current == 'app'%}active{% endif %}"><a href="/admin/app"><i class="icon-fw icon-settings"></i> {{ t('App Settings') }}</a></li>
-  <li class="{% if current == 'security'%}active{% endif %}"><a href="/admin/security"><i class="icon-fw icon-shield"></i> {{ t('security_settings') }}</a></li>
-  <li class="{% if current == 'markdown'%}active{% endif %}"><a href="/admin/markdown"><i class="icon-fw icon-note"></i> {{ t('Markdown Settings') }}</a></li>
-  <li class="{% if current == 'customize'%}active{% endif %}"><a href="/admin/customize"><i class="icon-fw icon-wrench"></i> {{ t('Customize') }}</a></li>
-  <li class="{% if current == 'importer'%}active{% endif %}"><a href="/admin/importer"><i class="icon-fw icon-cloud-upload"></i> {{ t('Import Data') }}</a></li>
-  <li class="{% if current == 'export'%}active{% endif %}"><a href="/admin/export"><i class="icon-fw icon-cloud-download"></i> {{ t('Export Archive Data') }}</a></li>
-  <li class="{% if current == 'notification'%}active{% endif %}"><a href="/admin/notification"><i class="icon-fw icon-bell"></i> {{ t('Notification Settings') }}</a></li>
-  <li class="{% if current == 'user' || current == 'external-account' %}active{% endif %}"><a href="/admin/users"><i class="icon-fw icon-user"></i> {{ t('User_Management') }}</a></li>
-  <li class="{% if current == 'user-group'%}active{% endif %}"><a href="/admin/user-groups"><i class="icon-fw icon-people"></i> {{ t('UserGroup Management') }}</a></li>
-  <li class="{% if current == 'search'%}active{% endif %}"><a href="/admin/search"><i class="icon-fw icon-magnifier"></i> {{ t('Full Text Search Management') }}</a></li>
-</ul>

src/server/views/admin/widget/theme-colorbox.html

@@ -1,16 +0,0 @@
-<div id="theme-option-{{name}}" class="theme-option-container d-flex flex-column align-items-center {% if name === settingForm['customize:theme'] %}active{% endif %}">
-  <a class="m-0　{{name}} theme-button"
-    id="{{name}}"
-    {% if 'kibela' !== settingForm['customize:layout'] %}onclick="selectTheme('{{name}}')"{% endif %}
-    data-theme="{{ webpack_asset('styles/theme-' + name + '.css') }}">
-
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-      <g>
-        <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="{{bg}}"></path>
-        <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="{{topbar}}"></path>
-        <path d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="{{theme}}"></path>
-      </g>
-    </svg>
-  </a>
-  <span class="theme-option-name"><b>{{name}}</b></span>
-</div>

src/server/views/layout/admin.html

@@ -8,6 +8,10 @@
 <script src="{{ webpack_asset('js/admin.js') }}" defer></script>
 {% endblock %}
 
+{% block content_main %}
+  <div class="col-md-3" id="admin-navigation"></div>
+{% endblock content_main %}
+
 {# disable custom script in admin page #}
 {% block custom_script %}
 {% endblock %}