Merge commit '09a1f6290db613465309e48f34240fb63b69d550' into support/apply-bootstrap4-export-page

# Conflicts:
#	src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

.github/workflows/build.yml

@@ -2,8 +2,9 @@ name: Release Docker Images
 
 on:
   push:
-    tags:
-      - v3.*.*
+    branches:
+      - tmp/release-**
+
 
 jobs:
 

.github/workflows/release.yml

@@ -41,5 +41,6 @@ jobs:
       uses: Roang-zero1/github-create-release-action@master
       with:
         created_tag: v${{ env.RELEASE_VERSION }}
+        changelog_file: CHANGES.md
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CHANGES.md

@@ -1,10 +1,17 @@
 # CHANGES
 
-## v3.6.4-RC
+## v3.6.5-RC
+
+*
+
+## v3.6.4
 
 * Feature: Alert for stale page
+* Improvement: Reactify admin pages (Home)
 * Improvement: Reactify admin pages (App)
 * Improvement: Accessibility for editor icons of dark themes
+* Improvement: Accessibility for importing table data pane
+* Improvement: Resolve username and email when logging in with Google OAuth
 
 ## v3.6.3
 

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

@@ -40,14 +40,17 @@ class AdminHome extends React.Component {
         </p>
 
         <div className="row mb-5">
-          <h2>{t('admin_top.System Information')}</h2>
-          <SystemInfomationTable />
+          <div className="col-md-12">
+            <h2 className="admin-setting-header">{t('admin_top.System Information')}</h2>
+            <SystemInfomationTable />
+          </div>
         </div>
 
         <div className="row mb-5">
-          <h2>{t('admin_top.List of installed plugins')}</h2>
-          <InstalledPluginTable />
-
+          <div className="col-md-12">
+            <h2 className="admin-setting-header">{t('admin_top.List of installed plugins')}</h2>
+            <InstalledPluginTable />
+          </div>
         </div>
       </Fragment>
     );

src/client/js/components/Admin/App/AppSettingsPage.jsx

@@ -39,35 +39,35 @@ class AppSettingsPage extends React.Component {
       <Fragment>
         <div className="row">
           <div className="col-md-12">
-            <h2>{t('App Settings')}</h2>
+            <h2 className="admin-setting-header">{t('App Settings')}</h2>
             <AppSetting />
           </div>
         </div>
 
-        <div className="row">
+        <div className="row mt-5">
           <div className="col-md-12">
-            <h2>{t('Site URL settings')}</h2>
+            <h2 className="admin-setting-header">{t('Site URL settings')}</h2>
             <SiteUrlSetting />
           </div>
         </div>
 
-        <div className="row">
+        <div className="row mt-5">
           <div className="col-md-12">
-            <h2>{t('app_setting.Mail settings')}</h2>
+            <h2 className="admin-setting-header">{t('app_setting.Mail settings')}</h2>
             <MailSetting />
           </div>
         </div>
 
-        <div className="row">
+        <div className="row mt-5">
           <div className="col-md-12">
-            <h2>{t('app_setting.AWS settings')}</h2>
+            <h2 className="admin-setting-header">{t('app_setting.AWS settings')}</h2>
             <AwsSetting />
           </div>
         </div>
 
-        <div className="row">
+        <div className="row mt-5">
           <div className="col-md-12">
-            <h2>{t('app_setting.Plugin settings')}</h2>
+            <h2 className="admin-setting-header">{t('app_setting.Plugin settings')}</h2>
             <PluginSetting />
           </div>
         </div>

src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -0,0 +1,176 @@
+.top-left-part {
+  .logo-mark, .logo-text {
+    fill: white;
+  }
+}
+
+
+/*
+ * Button
+ */
+.btn-default {
+  &:hover, &:focus,
+  &.active, &.active:hover, &.active:focus {
+    color: white;
+    background-color: lighten($bodycolor, 5%);
+  }
+}
+
+/*
+  * Form
+  */
+input.form-control, textarea.form-control {
+  color: lighten($bodytext, 30%);
+  background-color: darken($bodycolor, 5%);
+  border: 1px solid darken($border, 30%);
+}
+.form-control[disabled], .form-control[readonly] {
+  color: lighten($bodytext, 10%);
+  background-color: lighten($bodycolor, 5%);
+}
+.input-group .input-group-addon {
+  color: $dark;
+  background-color: rgba($topbar, 0.4);
+  border: 1px solid darken($border, 30%);
+  border-right: none;
+}
+
+/*
+ * Dropdown
+ */
+.dropdown-menu {
+  background-color: $bodycolor;
+  > li > a {
+    color: $bodytext;
+  }
+
+  .divider {
+    background-color: $border;
+  }
+}
+
+.modal {
+  .modal-header {
+    .close {
+      color: white;
+    }
+  }
+}
+
+/*
+ * Panel
+ */
+.panel {
+  &, &.panel-white, &.panel-default {
+    .panel-heading, .panel-body {
+      color: $light;
+    }
+  }
+}
+
+/*
+ * Table
+ */
+ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
+ .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
+ .table > thead > tr > th, .table-bordered{
+     border-top: 1px solid $border;
+ }
+
+ .table-bordered > thead > tr > th,
+ .table-bordered > tbody > tr > th,
+ .table-bordered > tfoot > tr > th,
+ .table-bordered > thead > tr > td,
+ .table-bordered > tbody > tr > td,
+ .table-bordered > tfoot > tr > td {
+   border: 1px solid $border;
+ }
+ .table > thead > tr > th {
+     border-bottom: 1px solid $border;
+ }
+
+ .table-bordered {
+     border: 1px solid $border;
+ }
+
+
+/*
+ * GROWI header
+ */
+.main-container header.affix {
+  .logo-mark {
+    fill: white;
+  }
+}
+
+/*
+ * GROWI page list
+ */
+.page-list {
+  .page-list-ul {
+    > li {
+      > a strong {
+        color: lighten($bodytext, 25%);
+      }
+      > span.page-list-meta {
+        color: $bodytext;
+      }
+    }
+  }
+}
+
+/*
+ * GROWI search page
+ */
+.search-page {
+  .input-group-btn {
+    .btn-default {
+      border: 1px solid darken($border, 30%); // fit to input.form-control
+    }
+  }
+}
+
+/*
+ * GROWI on-edit
+ */
+.page-editor-footer {
+  #slack-mark-black {
+    display: none;
+  }
+}
+
+legend {
+  border-color: lighten($border, 10%);
+}
+.wiki {
+  h1 {
+    border-color: lighten($border, 10%);
+  }
+  h2 {
+    border-color: $border;
+  }
+}
+.editor-container .navbar-editor svg {
+  fill: $bodytext;
+}
+
+/*
+ * GROWI admin page #themeOptions
+ */
+.admin-page {
+  #themeOptions {
+    .theme-option-container.active a {
+      background-color: darken($themecolor,15%);
+      border-color: darken($themecolor,15%);
+    }
+  }
+}
+
+/*
+ * GROWI comment form
+ */
+.comment-form {
+  #slack-mark-black {
+    display: none;
+  }
+}

src/client/styles/agile-admin/inverse/colors/blue-night.scss

@@ -49,7 +49,3 @@ $bgcolor-inline-code: #0a121b;
     }
   }
 }
-
-.editor-container .navbar-editor svg {
-  fill: $bodytext;
-}

src/client/styles/agile-admin/inverse/colors/default-dark.scss

@@ -25,9 +25,5 @@ $active-navbar-border: darken($border, 3%);
 $btn-default-bgcolor: darken($basecolor, 10%);
 $bgcolor-inline-code: darken($bgcolor-global, 5%);
 
-.editor-container .navbar-editor svg {
-  fill: $bodytext;
-}
-
 @import 'apply-colors';
 @import 'apply-colors-dark';

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

@@ -35,7 +35,3 @@ body:not(.on-edit) {
     border-bottom: 1px solid rgb(131, 228, 215);
   }
 }
-
-.editor-container .navbar-editor svg {
-  fill: $bodytext;
-}

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

@@ -73,10 +73,6 @@ $bgcolor-inline-code: #0a121b;
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-.editor-container .navbar-editor svg {
-  fill: $bodytext;
-}
-
 /*
  * Tabs
  */

src/client/styles/scss/_handsontable.scss

@@ -42,7 +42,8 @@
   }
 
   .data-import-form {
-    background-color: #f8f8f8;
+    color: $headingtext;
+    background-color: $navbar-default-bg;
 
     .btn + .btn {
       margin-left: 5px;

src/server/models/config.js

@@ -84,8 +84,14 @@ module.exports = function(crowi) {
       'mail:smtpUser'     : undefined,
       'mail:smtpPassword' : undefined,
 
-      'google:clientId'     : undefined,
-      'google:clientSecret' : undefined,
+      'security:passport-google:clientId'     : undefined,
+      'security:passport-google:clientSecret' : undefined,
+
+      'security:passport-github:clientId': undefined,
+      'security:passport-github:clientSecret': undefined,
+
+      'security:passport-twitter:clientId': undefined,
+      'security:passport-twitter:clientSecret': undefined,
 
       'plugin:isEnabledPlugins' : true,
 

src/server/routes/login-passport.js

@@ -258,6 +258,16 @@ module.exports = function(crowi, app) {
       username: response.displayName,
       name: `${response.name.givenName} ${response.name.familyName}`,
     };
+
+    // Emails are not empty if it exists
+    // See https://github.com/passport/express-4.x-facebook-example/blob/dfce5495d0313174a1b5039bab2c2dcda7e0eb61/views/profile.ejs
+    // Both Facebook and Google use OAuth 2.0, the code is similar
+    // See https://github.com/jaredhanson/passport-google-oauth2/blob/723e8f3e8e711275f89e0163e2c77cfebae33f25/README.md#examples
+    if (response.emails != null) {
+      userInfo.email = response.emails[0].value;
+      userInfo.username = userInfo.email.slice(0, userInfo.email.indexOf('@'));
+    }
+
     const externalAccount = await getOrCreateUser(req, res, userInfo, providerId);
     if (!externalAccount) {
       return loginFailure(req, res, next);