Merge branch 'master' into support/apply-bootstrap4

# Conflicts:
#	src/client/js/components/Admin/MarkdownSetting/XssForm.jsx
#	src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx
#	yarn.lock

.markdownlint.yml

@@ -0,0 +1,9 @@
+ul-indent:
+  indent: 4
+ul-style: false
+heading-style: false
+line-length: false
+no-multiple-blanks: false
+no-duplicate-heading: false
+no-inline-html: false
+no-trailing-punctuation: false

.stylelintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": [
-    "stylelint-config-recess-order",
-    "./node_modules/prettier-stylelint/config.js"
+    "stylelint-config-recess-order"
   ],
   "ignoreFiles": [
     "src/client/styles/scss/_override-bootstrap-variables.scss",

.vscode/extensions.json

@@ -12,6 +12,7 @@
     "christian-kohler.npm-intellisense",
     "esbenp.prettier-vscode",
     "shinnn.stylelint",
+    "hex-ci.stylelint-plus",
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [

.vscode/settings.json

@@ -6,15 +6,24 @@
     "javascript": "jsx"
   },
 
+  // use stylelint-plus
+  // see https://qiita.com/y-w/items/bd7f11013fe34b69f0df#vs-code%E3%81%A8%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B
+  "css.validate": false,
+  "scss.validate": false,
+  "[css]": {
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.formatOnSave": true
+  },
+  "stylelint.autoFixOnSave": true,
+
   // for vscode-eslint
-  "eslint.autoFixOnSave": true,
   "[javascript]": {
     "editor.formatOnSave": false
   },
-
-  // for prettier-vecode + prettier-stylelint
-  "prettier.stylelintIntegration": true,
-  "[scss]": {
-    "editor.formatOnSave": true
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.markdownlint": true
   }
 }

CHANGES.md

@@ -1,8 +1,19 @@
 # CHANGES
 
-## 3.6.3-RC
+## v3.6.4-RC
 
-* 
+* Feature: Alert for stale page
+* Improvement: Reactify admin pages (App)
+
+## v3.6.3
+
+* Improvement: Searching users in UserGroup Management
+* Fix: Repair google authentication by migrating to jaredhanson/passport-google-oauth2
+* Fix: Markdown Settings are broken by the button to import recommended settings
+* Support: Upgrade libs
+    * check-node-version
+    * file-loader
+    * mini-css-extract-plugin
 
 ## 3.6.2
 
@@ -23,7 +34,7 @@
     * This affects **only when `MONGO_URI` has parameters**
     * v3.5.x or above has a bug ([#1361](https://github.com/weseek/growi/issues/1361))
 
-Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/36x.html
+Upgrading Guide: <https://docs.growi.org/en/admin-guide/upgrading/36x.html>
 
 ### Updates
 
@@ -252,7 +263,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/36x.html
 * The restriction mode of the root page (`/`) will be set 'Public'
 * The restriction mode of the root page (`/`) can not be changed after v 3.5.1
 
-Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/35x.html
+Upgrading Guide: <https://docs.growi.org/en/admin-guide/upgrading/35x.html>
 
 ### Updates
 
@@ -369,7 +380,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/35x.html
 
 None.
 
-Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
+Upgrading Guide: <https://docs.growi.org/en/admin-guide/upgrading/34x.html>
 
 ### Updates
 
@@ -682,7 +693,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 * Improvement: Post comment with `Ctrl-Enter`
 * Improvement: Place the commented page at the beginning of the list
 * Improvement: Resolve errors on IE11 (Experimental)
-* Support: Migrate to webpack 4 
+* Support: Migrate to webpack 4
 * Support: Upgrade libs
     * eslint
     * react-bootstrap-typeahead
@@ -706,7 +717,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 
 * Feature: Support [blockdiag](http://blockdiag.com)
 * Feature: Add `BLOCKDIAG_URI` environment variable
-* Fix: Select modal for group is not shown 
+* Fix: Select modal for group is not shown
 * Support: Upgrade libs
     * googleapis
     * throttle-debounce
@@ -743,17 +754,21 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 * Improvement: Add 'future' theme
 * Improvement: Modify syntax for Crowi compatible template feature
     * *before*
-        ~~~
+
+        ~~~markdown
         ``` template:/page/name
         page contents
         ```
         ~~~
+
     * *after*
-        ~~~
+
+        ~~~plane
         ::: template:/page/name
         page contents
         :::
         ~~~
+
 * Improvement: Escape iframe tag in block codes
 * Support: Upgrade libs
     * assets-webpack-plugin
@@ -776,7 +791,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 * Improvement: Auto-format markdown table which includes multibyte text
 * Improvement: Show icon when auto-format markdown table is activated
 * Improvement: Enable to switch show/hide border for highlight.js
-* Improvement: BindDN field allows also ActiveDirectory styles 
+* Improvement: BindDN field allows also ActiveDirectory styles
 * Improvement: Show LDAP logs when testing login
 * Fix: Comment body doesn't break long terms
 * Fix: lsx plugin lists up pages that hit by forward match wrongly
@@ -928,7 +943,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 * Support: Upgrade libs
     * uglifycss
     * sinon-chai
-    
+
 ## 2.4.2
 
 * Improvement: Ensure to set absolute url from root when attaching files when `FILE_UPLOAD=local`
@@ -1148,7 +1163,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 
 ## 1.2.13
 
-* Improvement: Enabled to switch whether to push states with History API when tabs changes 
+* Improvement: Enabled to switch whether to push states with History API when tabs changes
 * Fix: Layout of the Not Found page
 
 ## 1.2.12 (Missing number)
@@ -1309,7 +1324,7 @@ Upgrading Guide: https://docs.growi.org/en/admin-guide/upgrading/34x.html
 
 ## 1.0.2
 
-* Improvement: For lsx 
+* Improvement: For lsx
 
 ## 1.0.1
 

README.md

@@ -16,7 +16,7 @@
 </p>
 
 
-GROWI 
+GROWI
 ===========
 
 [![Actions Status](https://github.com/weseek/growi/workflows/Node%20CI/badge.svg)](https://github.com/weseek/growi/actions)
@@ -41,19 +41,19 @@ Features
 ========
 
 * **Features**
-  * Create hierarchical pages with markdown -> [HERE](https://docs.growi.org/en/guide/getting-started/five_minutes.html) is 5 minutes tutorial
-  * Simultaneously edit with multiple people by [HackMD(CodiMD)](https://hackmd.io/) integration
-      * [GROWI Docs: HackMD(CodiMD) Integration](https://docs.growi.org/en/admin-guide/admin-cookbook/integrate-with-hackmd.html)
-  * Support Authentication with LDAP / Active Directory, OAuth
-  * SSO(Single Sign On) with SAML
-  * Slack/Mattermost, IFTTT Integration
-  * [GROWI Docs: Features](https://docs.growi.org/en/guide/features/page_layout.html)
+    * Create hierarchical pages with markdown -> [HERE](https://docs.growi.org/en/guide/getting-started/five_minutes.html) is 5 minutes tutorial
+    * Simultaneously edit with multiple people by [HackMD(CodiMD)](https://hackmd.io/) integration
+        * [GROWI Docs: HackMD(CodiMD) Integration](https://docs.growi.org/en/admin-guide/admin-cookbook/integrate-with-hackmd.html)
+    * Support Authentication with LDAP / Active Directory, OAuth
+    * SSO(Single Sign On) with SAML
+    * Slack/Mattermost, IFTTT Integration
+    * [GROWI Docs: Features](https://docs.growi.org/en/guide/features/page_layout.html)
 * **Pluggable**
-  * You can find plugins from [npm](https://www.npmjs.com/browse/keyword/growi-plugin) or [github](https://github.com/search?q=topic%3Agrowi-plugin)!
+    * You can find plugins from [npm](https://www.npmjs.com/browse/keyword/growi-plugin) or [github](https://github.com/search?q=topic%3Agrowi-plugin)!
 * **[Docker Ready][dockerhub]**
 * **[Docker Compose Ready][docker-compose]**
-  * [GROWI Docs: Multiple sites](https://docs.growi.org/en/admin-guide/admin-cookbook/multi-app.html)
-  * [GROWI Docs: HTTPS(with Let's Encrypt) proxy integration](https://docs.growi.org/en/admin-guide/admin-cookbook/lets-encrypt.html)
+    * [GROWI Docs: Multiple sites](https://docs.growi.org/en/admin-guide/admin-cookbook/multi-app.html)
+    * [GROWI Docs: HTTPS(with Let's Encrypt) proxy integration](https://docs.growi.org/en/admin-guide/admin-cookbook/lets-encrypt.html)
 
 Quick Start for Production
 ===========================
@@ -74,6 +74,16 @@ Quick Start for Production
 - [GROWI Docs: Install on CentOS](https://docs.growi.org/en/admin-guide/getting-started/centos.html)
 
 
+Configuration
+============
+
+See [GROWI Docs: Admin Guide](https://docs.growi.org/en/admin-guide/) ([en](https://docs.growi.org/en/admin-guide/)/[ja](https://docs.growi.org/ja/admin-guide/)).
+
+## Environment Variables
+
+- [GROWI Docs: Environment Variables](https://docs.growi.org/en/admin-guide/admin-cookbook/env-vars.html)
+
+
 Development
 ==========
 
@@ -90,9 +100,9 @@ See [confirmed versions](https://docs.growi.org/en/dev/startup/dev-env.html#set-
 
 - Redis 3.x
 - ElasticSearch 6.x (needed when using Full-text search)
-  - **CAUTION: Following plugins are required**
-      - [Japanese (kuromoji) Analysis plugin](https://www.elastic.co/guide/en/elasticsearch/plugins/current/analysis-kuromoji.html)
-      - [ICU Analysis Plugin](https://www.elastic.co/guide/en/elasticsearch/plugins/current/analysis-icu.html)
+    - **CAUTION: Following plugins are required**
+        - [Japanese (kuromoji) Analysis plugin](https://www.elastic.co/guide/en/elasticsearch/plugins/current/analysis-kuromoji.html)
+        - [ICU Analysis Plugin](https://www.elastic.co/guide/en/elasticsearch/plugins/current/analysis-icu.html)
 
 ## Command details
 
@@ -105,70 +115,6 @@ See [confirmed versions](https://docs.growi.org/en/dev/startup/dev-env.html#set-
 For more info, see [GROWI Docs: List of npm Commands](https://docs.growi.org/en/dev/startup/launch.html#list-of-npm-commands).
 
 
-Environment Variables
-======================
-
-* **Required**
-    * MONGO_URI: URI to connect to MongoDB.
-* **Option**
-    * NODE_ENV: `production` OR `development`.
-    * PORT: Server port. default: `3000`.
-    * NO_CDN: If `true`, system doesn't use CDN, all resources will be downloaded from CDN when build client, and served by the GROWI Express server. default: `false`.
-    * ELASTICSEARCH_URI: URI to connect to Elasticearch.
-    * REDIS_URI: URI to connect to Redis (use it as a session store instead of MongoDB).
-    * PASSWORD_SEED: A password seed used by password hash generator.
-    * SECRET_TOKEN: A secret key for verifying the integrity of signed cookies.
-    * SESSION_NAME: The name of the session ID cookie to set in the response by Express. default: `connect.sid`
-    * SAML_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS: If `true`, the system uses only the value of the environment variable as the value of the SAML option that can be set via the environment variable.
-    * PUBLISH_OPEN_API: Publish GROWI OpenAPI resources with [ReDoc](https://github.com/Rebilly/ReDoc). Visit `/api-docs`.
-    * FORCE_WIKI_MODE: Forces wiki mode. default: undefined
-        * `public`  : Forces all pages to become public
-        * `private` : Forces all pages to become private
-        * undefined : Publicity will be configured by the admin security page settings
-    * FORMAT_NODE_LOG: If `false`, Output server log as JSON. defautl: `true` (Enabled only when `NODE_ENV=production`)
-* **Option for file uploading**
-    * FILE_UPLOAD: Attached files storage. default: `aws`
-        * `aws` : Amazon Web Service S3 (needs AWS settings on Admin page)
-        * `gcs` : Google Cloud Storage (needs settings with environment variables)
-        * `mongodb` : MongoDB GridFS (Setting-less)
-        * `local` : Server's Local file system (Setting-less)
-        * `none` : Disable file uploading
-    * FILE_UPLOAD_DISABLED: If `true`, file uploading will be disabled. However, the files can be still viewed. Default: `false`
-    * MAX_FILE_SIZE: The maximum file size limit for uploads (bytes). default: `Infinity`
-    * FILE_UPLOAD_TOTAL_LIMIT: Total capacity limit for uploads (bytes). default: `Infinity`
-    * GCS_API_KEY_JSON_PATH: Path of the JSON file that contains [service account key to authenticate to GCP API](https://cloud.google.com/iam/docs/creating-managing-service-account-keys)
-    * GCS_BUCKET: Name of the GCS bucket
-    * GCS_UPLOAD_NAMESPACE: Directory name to create in the bucket
-    * MONGO_GRIDFS_TOTAL_LIMIT: Total capacity limit of MongoDB GridFS (bytes). default: `Infinity`
-        * MONGO_GRIDFS_TOTAL_LIMIT setting takes precedence over FILE_UPLOAD_TOTAL_LIMIT.
-* **Option to integrate with external systems**
-    * HACKMD_URI: URI to connect to [HackMD(CodiMD)](https://hackmd.io/) server.
-        * **This server must load the GROWI agent. [Here's how to prepare it](https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html).**
-    * HACKMD_URI_FOR_SERVER: URI to connect to [HackMD(CodiMD)](https://hackmd.io/) server from GROWI Express server. If not set, `HACKMD_URI` will be used.
-    * PLANTUML_URI: URI to connect to [PlantUML](http://plantuml.com/) server.
-    * BLOCKDIAG_URI: URI to connect to [blockdiag](http://http://blockdiag.com/) server.
-* **Option (Overwritable in admin page)**
-    * APP_SITE_URL: Site URL. e.g. `https://example.com`, `https://example.com:8080`
-    * LOCAL_STRATEGY_ENABLED: Enable or disable ID/Pass login
-    * LOCAL_STRATEGY_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS: Prioritize env vars than values in DB for some ID/Pass login options
-    * SAML_ENABLED: Enable or disable SAML
-    * SAML_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS: Prioritize env vars than values in DB for some SAML options
-    * SAML_ENTRY_POINT: IdP entry point
-    * SAML_ISSUER: Issuer string to supply to IdP
-    * SAML_ATTR_MAPPING_ID: Attribute map for id
-    * SAML_ATTR_MAPPING_USERNAME: Attribute map for username
-    * SAML_ATTR_MAPPING_MAIL: Attribute map for email
-    * SAML_ATTR_MAPPING_FIRST_NAME: Attribute map for first name
-    * SAML_ATTR_MAPPING_LAST_NAME:  Attribute map for last name
-    * SAML_CERT: PEM-encoded X.509 signing certificate string to validate the response from IdP
-    * OAUTH_GOOGLE_CLIENT_ID: Google API client id for OAuth login.
-    * OAUTH_GOOGLE_CLIENT_SECRET: Google API client secret for OAuth login.
-    * OAUTH_GITHUB_CLIENT_ID: GitHub API client id for OAuth login.
-    * OAUTH_GITHUB_CLIENT_SECRET: GitHub API client secret for OAuth login.
-    * OAUTH_TWITTER_CONSUMER_KEY: Twitter consumer key(API key) for OAuth login.
-    * OAUTH_TWITTER_CONSUMER_SECRET: Twitter consumer secret(API secret) for OAuth login.
-
-
 Documentation
 ==============
 

config/swagger-definition.js

@@ -1,14 +1,16 @@
 const pkg = require('../package.json');
 
+const apiVersion = process.env.API_VERSION || 3;
+
 module.exports = {
   openapi: '3.0.1',
   info: {
-    title: 'GROWI REST API v3',
+    title: `GROWI REST API v${apiVersion}`,
     version: pkg.version,
   },
   servers: [
     {
-      url: 'https://demo.growi.org/_api/v3/',
+      url: 'https://demo.growi.org',
     },
   ],
 };

docker/README.md

@@ -44,8 +44,8 @@ Requirements
 ### Optional Dependencies
 
 * ElasticSearch (>= 6.6)
-  * Japanese (kuromoji) Analysis plugin
-  * ICU Analysis Plugin
+    * Japanese (kuromoji) Analysis plugin
+    * ICU Analysis Plugin
 
 
 Usage
@@ -76,65 +76,14 @@ Using docker-compose is the fastest and the most convenient way to boot GROWI.
 see: [weseek/growi-docker-compose](https://github.com/weseek/growi-docker-compose)
 
 
-Environment Variables
--------------------
+Configuration
+-----------
+
+See [GROWI Docs: Admin Guide](https://docs.growi.org/en/admin-guide/) ([en](https://docs.growi.org/en/admin-guide/)/[ja](https://docs.growi.org/ja/admin-guide/)).
+
+### Environment Variables
 
-* **Required**
-    * MONGO_URI: URI to connect to MongoDB.
-* **Option**
-    * NODE_ENV: `production` OR `development`.
-    * PORT: Server port. default: `3000`
-    * ELASTICSEARCH_URI: URI to connect to Elasticearch.
-    * REDIS_URI: URI to connect to Redis (use it as a session store instead of MongoDB).
-    * PASSWORD_SEED: A password seed used by password hash generator.
-    * SECRET_TOKEN: A secret key for verifying the integrity of signed cookies.
-    * SESSION_NAME: The name of the session ID cookie to set in the response by Express. default: `connect.sid`
-    * FILE_UPLOAD: Attached files storage. default: `aws`
-        * `aws` : AWS S3 (needs AWS settings on Admin page)
-        * `mongodb` : MongoDB GridFS (Setting-less)
-        * `local` : Server's Local file system (Setting-less)
-        * `none` : Disable file uploading
-    * MAX_FILE_SIZE: The maximum file size limit for uploads (bytes). default: `Infinity`
-    * MONGO_GRIDFS_TOTAL_LIMIT: Total capacity limit of MongoDB GridFS (bytes). default: `Infinity`
-    * SAML_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS: If `true`, the system uses only the value of the environment variable as the value of the SAML option that can be set via the environment variable.
-    * PUBLISH_OPEN_API: Publish GROWI OpenAPI resources with [ReDoc](https://github.com/Rebilly/ReDoc). Visit `/api-docs`.
-    * FORCE_WIKI_MODE: Forces wiki mode. default: undefined
-      * `public`  : Forces all pages to become public
-      * `private` : Forces all pages to become private
-      * undefined : Publicity will be configured by the admin security page settings
-    * FORMAT_NODE_LOG: If `false`, Output server log as JSON. defautl: `true` (Enabled only when `NODE_ENV=production`)
-* **Option to integrate with external systems**
-    * HACKMD_URI: URI to connect to [HackMD(CodiMD)](https://hackmd.io/) server.
-        * **This server must load the GROWI agent. [Here's how to prepare it](https://docs.growi.org/management-cookbook/integrate-with-hackmd).**
-    * HACKMD_URI_FOR_SERVER: URI to connect to [HackMD(CodiMD)](https://hackmd.io/) server from GROWI Express server. If not set, `HACKMD_URI` will be used.
-    * PLANTUML_URI: URI to connect to [PlantUML](http://plantuml.com/) server.
-    * BLOCKDIAG_URI: URI to connect to [blockdiag](http://http://blockdiag.com/) server.
-* **Option (Overwritable in admin page)**
-    * APP_SITE_URL: Site URL. e.g. `https://example.com`, `https://example.com:8080`
-    * LOCAL_STRATEGY_ENABLED: Enable or disable ID/Pass login
-    * LOCAL_STRATEGY_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS: Prioritize env vars than values in DB for some ID/Pass login options
-    * SAML_ENABLED: Enable or disable SAML
-    * SAML_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS: Prioritize env vars than values in DB for some SAML options
-    * SAML_ENTRY_POINT: IdP entry point
-    * SAML_ISSUER: Issuer string to supply to IdP
-    * SAML_ATTR_MAPPING_ID: Attribute map for id
-    * SAML_ATTR_MAPPING_USERNAME: Attribute map for username
-    * SAML_ATTR_MAPPING_MAIL: Attribute map for email
-    * SAML_ATTR_MAPPING_FIRST_NAME: Attribute map for first name
-    * SAML_ATTR_MAPPING_LAST_NAME:  Attribute map for last name
-    * SAML_CERT: PEM-encoded X.509 signing certificate string to validate the response from IdP
-    * OAUTH_GOOGLE_CLIENT_ID: Google API client id for OAuth login.
-    * OAUTH_GOOGLE_CLIENT_SECRET: Google API client secret for OAuth login.
-    * OAUTH_GITHUB_CLIENT_ID: GitHub API client id for OAuth login.
-    * OAUTH_GITHUB_CLIENT_SECRET: GitHub API client secret for OAuth login.
-    * OAUTH_TWITTER_CONSUMER_KEY: Twitter consumer key(API key) for OAuth login.
-    * OAUTH_TWITTER_CONSUMER_SECRET: Twitter consumer secret(API secret) for OAuth login.
-
-Other Documentation
---------------------
-
-* [GROWI Github wiki](https://github.com/weseek/growi/wiki)
-  * [Questions and Answers](https://github.com/weseek/growi/wiki/Questions-and-Answers)
+- [GROWI Docs: Environment Variables](https://docs.growi.org/en/admin-guide/admin-cookbook/env-vars.html)
 
 
 Issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.6.3-RC",
+  "version": "3.6.4-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",
@@ -20,7 +20,9 @@
     "url": "https://github.com/weseek/growi/issues"
   },
   "scripts": {
-    "build:apiv3:jsdoc": "swagger-jsdoc -o tmp/swagger.json -d config/swagger-definition.js src/server/**/*.js",
+    "build:api:jsdoc": "swagger-jsdoc -o tmp/swagger.json -d config/swagger-definition.js \"src/server/**/*.js\"",
+    "build:apiv3:jsdoc": "cross-env API_VERSION=3 npm run build:api:jsdoc",
+    "build:apiv1:jsdoc": "cross-env API_VERSION=1 npm run build:api:jsdoc",
     "build:dev:app:watch": "npm run build:dev:app -- --watch",
     "build:dev:app": "env-cmd -f config/env.dev.js webpack --config config/webpack.dev.js --progress",
     "build:dev:watch": "npm run build:dev:app:watch",
@@ -35,7 +37,7 @@
     "heroku-postbuild": "sh bin/heroku/install-packages.sh && npm run build:prod",
     "lint:js:fix": "eslint \"**/*.{js,jsx}\" --fix",
     "lint:js": "eslint \"**/*.{js,jsx}\"",
-    "lint:styles:fix": "prettier-stylelint --quiet --write src/client/styles/scss/**/*.scss",
+    "lint:styles:fix": "stylelint --fix src/client/styles/scss/**/*.scss",
     "lint:styles": "stylelint src/client/styles/scss/**/*.scss",
     "lint:swagger2openapi": "node node_modules/swagger2openapi/oas-validate tmp/swagger.json",
     "lint": "npm-run-all -p lint:js lint:styles lint:swagger2openapi",
@@ -78,7 +80,7 @@
     "body-parser": "^1.18.2",
     "bunyan": "^1.8.12",
     "bunyan-format": "^0.2.1",
-    "check-node-version": "=3.3.0",
+    "check-node-version": "^4.0.2",
     "connect-flash": "~0.1.1",
     "connect-mongo": "^3.0.0",
     "connect-redis": "^3.3.0",
@@ -124,7 +126,7 @@
     "openid-client": "=2.5.0",
     "passport": "^0.4.0",
     "passport-github": "^1.1.0",
-    "passport-google-auth": "^1.0.2",
+    "passport-google-oauth20": "^2.0.0",
     "passport-http": "^0.3.0",
     "passport-ldapauth": "^2.0.0",
     "passport-local": "^1.0.0",
@@ -176,7 +178,7 @@
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jest": "^23.0.3",
     "eslint-plugin-react": "^7.14.2",
-    "file-loader": "^4.0.0",
+    "file-loader": "^5.0.2",
     "handsontable": "=6.2.2",
     "hard-source-webpack-plugin": "^0.13.1",
     "i18next-browser-languagedetector": "^4.0.1",
@@ -198,7 +200,7 @@
     "markdown-it-toc-and-anchor-with-slugid": "^1.1.4",
     "markdown-table": "^1.1.1",
     "metismenu": "^3.0.3",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "morgan": "^1.9.0",
     "node-dev": "^4.0.0",
     "node-sass": "^4.12.0",
@@ -209,7 +211,7 @@
     "penpal": "^4.0.0",
     "plantuml-encoder": "^1.2.5",
     "postcss-loader": "^3.0.0",
-    "prettier-stylelint": "^0.4.2",
+    "prettier": "^1.19.1",
     "react": "^16.8.3",
     "react-bootstrap-typeahead": "^3.4.7",
     "react-codemirror2": "^6.0.0",
@@ -227,6 +229,7 @@
     "simple-load-script": "^1.0.2",
     "socket.io-client": "^2.0.3",
     "style-loader": "^1.0.0",
+    "stylelint": "^12.0.1",
     "stylelint-config-recess-order": "^2.0.1",
     "swagger-jsdoc": "^3.4.0",
     "swagger2openapi": "^5.3.1",

resource/locales/en-US/translation.json

@@ -28,13 +28,11 @@
   "Page Path": "Page Path",
   "Category": "Category",
   "User": "User",
-  "status":"Status",
+  "status": "Status",
   "account_id": "Account Id",
-
   "Update": "Update",
   "Update Page": "Update Page",
   "Warning": "Warning",
-
   "Sign in": "Sign in",
   "Sign up is here": "Sign up",
   "Sign in is here": "Sign in",
@@ -44,30 +42,23 @@
   "Sign up with this Google Account": "Sign up with this Google Account",
   "Example": "Example",
   "Taro Yamada": "John Doe",
-
   "List View": "List",
   "Timeline View": "Timeline",
   "History": "History",
   "Presentation Mode": "Presentation",
-
   "username": "Username",
   "Created": "Created",
   "Last updated": "Updated",
   "Last_Login": "Last Login",
-
   "Share": "Share",
   "Share Link": "Share Link",
   "Markdown Link": "Markdown Link",
-
   "Create/Edit Template": "Create/Edit Template Page",
-
   "Unportalize": "Unportalize",
-
   "Go to this version": "View this version",
   "View diff": "View diff",
   "No diff": "No diff",
   "Shrink versions that have no diffs": "Shrink versions that have no diffs",
-
   "User ID": "User ID",
   "Home": "Home",
   "User Settings": "User Settings",
@@ -89,19 +80,15 @@
   "Show": "Show",
   "Hide": "Hide",
   "Disclose E-mail": "Disclose E-mail",
-
   "page exists": "this page already exists",
   "Error occurred": "Error occurred",
-
   "Create today's": "Create today's ...",
   "Memo": "memo",
   "Input page name": "Input page name",
   "Input page name (optional)": "Input page name (optional)",
   "New Page": "New Page",
   "Create under": "Create page under below:",
-
   "Table of Contents": "Table of Contents",
-
   "Management Wiki Home": "Management Wiki Home",
   "App Settings": "App Settings",
   "Site URL settings": "Site URL settings",
@@ -129,30 +116,24 @@
   "Add tags for this page": "Add tags for this page",
   "Edit tags for this page": "Edit tags for this page",
   "You have no tag, You can set tags on pages": "You have no tag, You can set tags on pages",
-
   "Show latest": "Show latest",
   "Load latest": "Load latest",
   "edited this page": "edited this page.",
-
   "List Drafts": "Drafts",
   "Deleted Pages": "Deleted Pages",
   "Sign out": "Logout",
-
   "form_validation": {
     "required": "<code>%s</code> is required"
   },
-
   "installer": {
     "setup": "Setup",
     "create_initial_account": "Create an initial account",
     "initial_account_will_be_administrator_automatically": "The initial account will be administrator automatically.",
     "unavaliable_user_id": "This 'User ID' is unavailable."
   },
-
   "breaking_changes": {
     "v346_using_basic_auth": "Basic Authentication currently in use will <strong>no longer be available</strong> in the near future. Remove settings from %s"
   },
-
   "page_register": {
     "notice": {
       "restricted": "Admin approval required.",
@@ -164,7 +145,6 @@
       "user_id": "The URL of pages you create will contain your User ID. Your User ID can consist of letters, numbers, and some symbols."
     }
   },
-
   "page_me": {
     "form_help": {
       "profile_image1": "Image upload settings not completed.",
@@ -177,10 +157,8 @@
       "update_token1": "You can update to generate a new API Token.",
       "update_token2": "You will need to update the API Token in any existing processes."
     },
-    "form_help": {
-    }
+    "form_help": {}
   },
-
   "Password": "Password",
   "Password Settings": "Password Settings",
   "Set new Password": "Set new Password",
@@ -189,14 +167,11 @@
   "New password": "New password",
   "Re-enter new password": "Re-enter new password",
   "Password is not set": "Password is not set",
-
   "security_settings": "Security Settings",
-
   "API Settings": "API Settings",
   "API Token Settings": "API Token Settings",
   "Current API Token": "Current API Token",
   "Update API Token": "Update API Token",
-
   "header_search_box": {
     "label": {
       "This tree": "This tree"
@@ -205,7 +180,6 @@
       "This tree": "Only children of this tree"
     }
   },
-
   "copy_to_clipboard": {
     "Copy to clipboard": "Copy to clipboard",
     "Page path": "Page path",
@@ -213,7 +187,6 @@
     "Page path and parmanent link": "Page path and parmanent link",
     "Markdown link": "Markdown link"
   },
-
   "search_help": {
     "title": "Searching Help",
     "and": {
@@ -243,7 +216,6 @@
   "search": {
     "search page bodies": "Hit [Enter] key to full-text search"
   },
-
   "page_page": {
     "notice": {
       "version": "This is not the current version.",
@@ -251,10 +223,11 @@
       "redirected": "You are redirected from <code>%s</code>",
       "duplicated": "This page was duplicated from <code>%s</code>",
       "unlinked": "Redirect pages to this page have been deleted.",
-      "restricted": "Access to this page is restricted"
+      "restricted": "Access to this page is restricted",
+      "stale": "More than {{count}} year has passed since last update.",
+      "stale_plural": "More than {{count}} years has passed since last update."
     }
   },
-
   "page_edit": {
     "Show active line": "Show active line",
     "overwrite_scopes": "{{operation}} and Overwrite scopes of all descendants",
@@ -262,14 +235,12 @@
       "conflict": "Couldn't save the changes you made because someone else was editing this page. Please re-edit the affected section after reloading the page."
     }
   },
-
   "page_api_error": {
     "notfound_or_forbidden": "Original page is not found or forbidden.",
     "already_exists": "New page is already exists.",
     "outdated": "Page is updated someone and now outdated.",
     "user_not_admin": "Only admin user can delete completely"
   },
-
   "modal_rename": {
     "label": {
       "Move/Rename page": "Move/Rename page",
@@ -285,10 +256,8 @@
       "recursive": "Move/Rename children of under <code>%s</code> recursively"
     }
   },
-
   "Put Back": "Put Back",
   "Delete Completely": "Delete Completely",
-
   "modal_delete": {
     "delete_page": "Delete Page",
     "deleting_page": "Deleting Page",
@@ -298,7 +267,6 @@
     "recursively": "Delete children of under <code>%s</code> recursively.",
     "completely": "Delete completely instead of putting it into trash."
   },
-
   "modal_duplicate": {
     "label": {
       "Duplicate page": "Duplicate page",
@@ -306,7 +274,6 @@
       "Current page name": "Current page name"
     }
   },
-
   "modal_putback": {
     "label": {
       "Put Back Page": "Put Back Page",
@@ -316,7 +283,6 @@
       "recursively": "Put Back children of under <code>%s</code> recursively"
     }
   },
-
   "modal_shortcuts": {
     "global": {
       "title": "Global shortcuts",
@@ -339,7 +305,6 @@
       "Post": "Post"
     }
   },
-
   "template": {
     "modal_label": {
       "Create/Edit Template Page": "Create/Edit Template Page",
@@ -358,7 +323,6 @@
       "desc": "Applies to all decendant pages"
     }
   },
-
   "sandbox": {
     "header": "Header",
     "header_x": "Header {{index}}",
@@ -390,7 +354,6 @@
     "insert_image": "inserts an image",
     "open_sandbox": "Open Sandbox"
   },
-
   "admin_top": {
     "Management Wiki": "Management Wiki",
     "System Information": "System Information",
@@ -401,7 +364,6 @@
     "Specified version": "Specified version",
     "Installed version": "Installed version"
   },
-
   "app_setting": {
     "Site Name": "Site name",
     "sitename_change": "You can change Site Name which is used for header and HTML title.",
@@ -411,7 +373,7 @@
     "siteurl_help": "Site full URL beginning from <code>http://</code> or <code>https://</code>.",
     "Confidential name": "Confidential name",
     "Default Language for new users": "Default Language for new users",
-    "ex): internal use only":"ex): internal use only",
+    "ex) internal use only":"ex): internal use only",
     "File Uploading": "File Uploading",
     "enable_files_except_image": "Enable file upload other than image files.",
     "attach_enable": "You can attach files other than image files if you enable this option.",
@@ -421,7 +383,7 @@
     "SMTP_but_AWS": "If you do not have SMTP settings but AWS settings,  e-mails will be sent by SES.",
     "neihter_of": "If you do not of neither of these, e-mails will not be sent.",
     "From e-mail address": "From e-mail address",
-    "SMTP settings": "SMTP settings"  ,
+    "SMTP settings": "SMTP settings",
     "Host": "Host",
     "Port": "Port",
     "User": "User",
@@ -438,21 +400,23 @@
     "Load plugins": "Load plugins",
     "Enable": "Enable",
     "Disable": "Disable",
-    "Use env var if empty": "If the value in the database is empty, the value of the environment variable <code>%s</code> is used."
+    "Use env var if empty": "If the value in the database is empty, the value of the environment variable <cod>{{variable}}</code> is used.",
+    "updated_app_setting": "Succeeded to update app setting",
+    "updated_site_url": "Succeeded to update site URL",
+    "updated_plugin_setting": "Succeeded to update plugin setting"
   },
-
   "security_setting": {
-		"Security settings": "Security settings",
+    "Security settings": "Security settings",
     "Guest Users Access": "Guest Users Access",
     "Fixed by env var": "This is fixed by the env var <code>%s=%s</code>.",
     "Register limitation": "Register limitation",
     "Register limitation desc": "Restricts ways to register new user.",
-		"The whitelist of registration permission E-mail address": "The whitelist of registration permission E-mail address",
-		"users_without_account": "Users without account is not accessible",
+    "The whitelist of registration permission E-mail address": "The whitelist of registration permission E-mail address",
+    "users_without_account": "Users without account is not accessible",
     "example": "Example",
     "restrict_emails": "You can restrict registerable e-mail address.",
-		"for_instance": " For instance, if you use growi within a company, you can write ",
-		"only_those": " Only those whose e-mail address including the company address can register.",
+    "for_instance": " For instance, if you use growi within a company, you can write ",
+    "only_those": " Only those whose e-mail address including the company address can register.",
     "insert_single": "Please insert single e-mail address per line.",
     "page_listing_1": "Page listing/searching<br>restricted by 'Just Me'",
     "page_listing_1_desc": "Show pages that are restricted by 'Just Me' option when listing/searching",
@@ -463,11 +427,10 @@
     "admin_only": "Admin Only",
     "admin_and_author": "Admin and Author",
     "anyone": "Anyone",
-
-		"Authentication mechanism settings": "Authentication Mechanism Settings",
+    "Authentication mechanism settings": "Authentication Mechanism Settings",
     "alert_siteUrl_is_not_set": "'Site URL' is NOT set. Set it from the %s",
-    "xss_prevent_setting":"Prevent XSS(Cross Site Scripting)",
-    "xss_prevent_setting_link":"Go to Markdown settings",
+    "xss_prevent_setting": "Prevent XSS(Cross Site Scripting)",
+    "xss_prevent_setting_link": "Go to Markdown settings",
     "callback_URL": "Callback URL",
     "providerName": "Provider Name",
     "issuerHost": "Issuer Host",
@@ -596,8 +559,7 @@
       "security:passport-saml:attrMapFirstName": "First Name",
       "security:passport-saml:attrMapLastName": "Last Name"
     }
-	},
-
+  },
   "markdown_setting": {
     "line_break_setting": "Line Break Setting",
     "line_break_setting_desc": "You can change line break settings.",
@@ -623,14 +585,13 @@
     "Ignore all tags desc": "Stripe all HTML tags and attributes",
     "Recommended setting": "Recommended Setting",
     "Custom Whitelist": "Custom Whitelist",
-    "Tag names":"Tag names",
-    "Tag attributes":"Tag attributes",
-    "import_recommended": "Import recommended %s",
+    "Tag names": "Tag names",
+    "Tag attributes": "Tag attributes",
+    "import_recommended": "Import recommended {{target}}",
     "updated_lineBreak": "Succeeded to update line braek setting",
     "updated_presentation": "Succeeded to update presentation setting",
     "updated_xss": "Succeeded to update XSS setting"
   },
-
   "notification_setting": {
     "notification_list": "List of Notification Settings",
     "add_notification": "Add New",
@@ -650,9 +611,8 @@
       "ifttt_link": "Create a new IFTTT applet with Email trigger"
     }
   },
-
   "customize_page": {
-    "recommended":"Recommended",
+    "recommended": "Recommended",
     "Behavior": "Behavior",
     "Layout": "Layout",
     "Function": "Function",
@@ -681,6 +641,8 @@
     "attach_title_header_desc": "Add page path to the first line as h1 section when create new page",
     "recent_created__n_draft_num_desc": "Number of Recently Created Pages & Drafts Displayed",
     "recently_created_n_draft_num_desc": "Number of recently created pages and drafts displayed on user page",
+    "stale_notification": "Display Notification on Stale Pages",
+    "stale_notification_desc": "Displays the notification to pages more than 1 year since the last update.",
     "update_layout_success": "Succeeded to update layout",
     "update_behavior_success": "Succeeded to update behavior",
     "update_function_success": "Succeeded to update function",
@@ -689,32 +651,31 @@
     "update_customHeader_success": "Succeeded to update customize html header",
     "update_customCss_success": "Succeeded to update customize css",
     "update_script_success": "Succeeded to update custom script",
-    "layout_description":{
-      "growi_title":"Simple and Clear",
-      "growi_text1":"Full screen layout and thin margins/paddings",
-      "growi_text2":"Show and post comments at the bottom of the page",
-      "growi_text3":"Affix Table-of-contents",
-      "kibela_title":"Easy Viewing Structure",
-      "kibela_text1":"Center aligned contents",
-      "kibela_text2":"Show and post comments at the bottom of the page",
-      "kibela_text3":"Affix Table-of-contents",
-      "crowi_title":"Separated Functions",
-      "crowi_text1":"Collapsible Sidebar",
-      "crowi_text2":"Show and post comments in Sidebar",
-      "crowi_text3":"Collapsible Table-of-contents"
+    "layout_description": {
+      "growi_title": "Simple and Clear",
+      "growi_text1": "Full screen layout and thin margins/paddings",
+      "growi_text2": "Show and post comments at the bottom of the page",
+      "growi_text3": "Affix Table-of-contents",
+      "kibela_title": "Easy Viewing Structure",
+      "kibela_text1": "Center aligned contents",
+      "kibela_text2": "Show and post comments at the bottom of the page",
+      "kibela_text3": "Affix Table-of-contents",
+      "crowi_title": "Separated Functions",
+      "crowi_text1": "Collapsible Sidebar",
+      "crowi_text2": "Show and post comments in Sidebar",
+      "crowi_text3": "Collapsible Table-of-contents"
     },
-    "behavior_description":{
-      "growi_text1":"Both of <code>/page</code> and <code>/page/</code> shows the same page。",
-      "growi_text2":"<code>/nonexistent_page</code> shows editing form",
-      "growi_text3":"All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b>",
-      "crowi_text1":"<code>/page</code> shows the page",
-      "crowi_text2":"<code>/page/</code> shows the list of sub pages",
-      "crowi_text3":"If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown",
-      "crowi_text4":"<code>/nonexistent_page</code> shows editing form<",
-      "crowi_text5":"<code>/nonexistent_page/</code> the list of sub pages"
+    "behavior_description": {
+      "growi_text1": "Both of <code>/page</code> and <code>/page/</code> shows the same page。",
+      "growi_text2": "<code>/nonexistent_page</code> shows editing form",
+      "growi_text3": "All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b>",
+      "crowi_text1": "<code>/page</code> shows the page",
+      "crowi_text2": "<code>/page/</code> shows the list of sub pages",
+      "crowi_text3": "If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown",
+      "crowi_text4": "<code>/nonexistent_page</code> shows editing form<",
+      "crowi_text5": "<code>/nonexistent_page/</code> the list of sub pages"
     }
   },
-
   "user_management": {
     "target_user": "Target User",
     "new_password": "New Password",
@@ -743,10 +704,10 @@
     "reset_password": "Reset Password",
     "related_username": "Related user's ",
     "accept": "Accept",
-    "deactivate_account":"Deactivate Account",
-    "your_own":"You cannot deactivate your own account",
-    "administrator_menu":"Administrator Menu",
-    "cannot_remove":"You cannot remove yourself from administrator",
+    "deactivate_account": "Deactivate Account",
+    "your_own": "You cannot deactivate your own account",
+    "administrator_menu": "Administrator Menu",
+    "cannot_remove": "You cannot remove yourself from administrator",
     "cannot_invite_maximum_users": "Can not invite more than the maximum number of users.",
     "current_users": "Current users:",
     "valid_email": "Valid email address is required",
@@ -758,8 +719,12 @@
     "remove_user_success": "Succeeded to removing {{username}} ",
     "remove_external_user_success": "Succeeded to remove {{accountId}} "
   },
-
   "user_group_management": {
+    "search_option": "Search Option",
+    "enable_option": "Enable {{option}}",
+    "forward_match": "forword match",
+    "partial_match": "partial match",
+    "backward_match": "backward match",
     "group_list": "Group List",
     "back_to_list": "Go Back to Group List",
     "basic_info": "Basic Info",
@@ -781,7 +746,6 @@
     "no_pages": "There are no pages the group has view permission",
     "remove_from_group": "Remove this user"
   },
-
   "importer_management": {
     "beta_warning": "This function is Beta.",
     "import_from": "Import from {{from}}",
@@ -840,13 +804,12 @@
     "page_skip": "Pages with a name that already exists on GROWI are not imported",
     "Directory_hierarchy_tag": "Directory Hierarchy Tag"
   },
-
-  "full_text_search_management":{
-    "elasticsearch_management":"Elasticsearch Management",
-    "build_button":"Rebuild Index",
-    "rebuild_description_1":"Force rebuild index.",
-    "rebuild_description_2":"Click 'Build Now' to delete and create mapping file and add all pages.",
-    "rebuild_description_3":"This may take a while."
+  "full_text_search_management": {
+    "elasticsearch_management": "Elasticsearch Management",
+    "build_button": "Rebuild Index",
+    "rebuild_description_1": "Force rebuild index.",
+    "rebuild_description_2": "Click 'Build Now' to delete and create mapping file and add all pages.",
+    "rebuild_description_3": "This may take a while."
   },
   "export_management": {
     "exporting_collection_list": "Exporting Collection List",

resource/locales/ja/translation.json

@@ -30,11 +30,9 @@
   "User": "ユーザー",
   "status": "ステータス",
   "account_id": "アカウントID",
-
   "Update": "更新",
   "Update Page": "ページを更新",
   "Warning": "注意",
-
   "Sign in": "ログイン",
   "Sign up is here": "新規登録はこちら",
   "Sign in is here": "ログインはこちら",
@@ -44,30 +42,23 @@
   "Sign up with this Google Account": "この Google アカウントで登録します",
   "Example": "例",
   "Taro Yamada": "山田 太郎",
-
   "List View": "リスト表示",
   "Timeline View": "タイムライン表示",
   "History": "更新履歴",
   "Presentation Mode": "プレゼンテーション",
-
   "username": "ユーザー名",
   "Created": "作成日",
   "Last updated": "最終更新",
   "Last_Login": "最終ログイン",
-
   "Share": "共有",
   "Share Link": "共有用リンク",
   "Markdown Link": "Markdown形式のリンク",
-
   "Create/Edit Template": "テンプレートページの作成/編集",
-
   "Unportalize": "ポータル解除",
-
   "Go to this version": "このバージョンを見る",
   "View diff": "差分を表示",
   "No diff": "差分なし",
   "Shrink versions that have no diffs": "差分のないバージョンをコンパクトに表示する",
-
   "User ID": "ユーザーID",
   "Home": "ホーム",
   "User Settings": "ユーザー設定",
@@ -89,19 +80,15 @@
   "Show": "公開",
   "Hide": "非公開",
   "Disclose E-mail": "メールアドレスの公開",
-
   "page exists": "このページはすでに存在しています",
-  "Error occurred":"エラーが発生しました",
-
+  "Error occurred": "エラーが発生しました",
   "Create today's": "今日の◯◯を作成",
   "Memo": "メモ",
   "Input page name": "ページ名を入力",
   "Input page name (optional)": "ページ名を入力(空欄OK)",
   "New Page": "新規ページ",
   "Create under": "ページを以下に作成",
-
   "Table of Contents": "目次",
-
   "Management Wiki Home": "Wiki管理トップ",
   "App Settings": "アプリ設定",
   "Site URL settings": "サイトURL設定",
@@ -128,34 +115,28 @@
   "Add tags for this page": "タグを付ける",
   "Edit tags for this page": "タグを編集する",
   "You have no tag, You can set tags on pages": "使用中のタグがありません",
-
   "Show latest": "最新のページを表示",
   "Load latest": "最新版を読み込む",
   "edited this page": "さんがこのページを編集しました。",
-
   "List Drafts": "下書き一覧",
   "Deleted Pages": "削除済みページ",
   "Sign out": "ログアウト",
-
   "form_validation": {
     "required": "<code>%s</code> に値を入力してください"
   },
-
   "installer": {
     "setup": "セットアップ",
     "create_initial_account": "最初のアカウントの作成",
     "initial_account_will_be_administrator_automatically": "初めに作成するアカウントは、自動的に管理者権限が付与されます",
     "unavaliable_user_id": "このユーザーIDは利用できません。"
   },
-
   "breaking_changes": {
     "v346_using_basic_auth": "現在利用中の Basic 認証機能は、近い将来<strong>廃止されます</strong>。%s から設定を削除してください。"
   },
-
   "page_register": {
     "notice": {
-       "restricted": "この Wiki への新規登録は制限されています。",
-       "restricted_defail": "利用を開始するには、新規登録後、管理者による承認が必要です。"
+      "restricted": "この Wiki への新規登録は制限されています。",
+      "restricted_defail": "利用を開始するには、新規登録後、管理者による承認が必要です。"
     },
     "form_help": {
       "email": "この Wiki では以下のメールアドレスのみ登録可能です。",
@@ -163,7 +144,6 @@
       "user_id": "ユーザーIDは、ユーザーページのURLなどに利用されます。半角英数字と一部の記号のみ利用できます。"
     }
   },
-
   "page_me": {
     "form_help": {
       "profile_image1": "画像をアップロードをするための設定がされていません。",
@@ -176,10 +156,8 @@
       "update_token1": "API Token を更新すると、自動的に新しい Token が生成されます。",
       "update_token2": "現在の Token を利用している処理は動かなくなります。"
     },
-    "form_help": {
-    }
+    "form_help": {}
   },
-
   "Password": "パスワード",
   "Password Settings": "パスワード設定",
   "Set new Password": "パスワードを新規に設定",
@@ -188,14 +166,11 @@
   "New password": "新しいパスワード",
   "Re-enter new password": "(確認用)",
   "Password is not set": "パスワードが設定されていません",
-
   "security_settings": "セキュリティ設定",
-
   "API Settings": "API設定",
   "API Token Settings": "API Token設定",
   "Current API Token": "現在のAPI Token",
   "Update API Token": "API Tokenを更新",
-
   "header_search_box": {
     "label": {
       "This tree": "この階層"
@@ -204,7 +179,6 @@
       "This tree": "この階層下の子ページのみ"
     }
   },
-
   "copy_to_clipboard": {
     "Copy to clipboard": "クリップボードにコピー",
     "Page path": "ページ名",
@@ -212,7 +186,6 @@
     "Page path and parmanent link": "ページ名とパーマリンク",
     "Markdown link": "マークダウン形式のリンク"
   },
-
   "search_help": {
     "title": "検索のヘルプ",
     "and": {
@@ -242,7 +215,6 @@
   "search": {
     "search page bodies": "[Enter] キー押下で全文検索"
   },
-
   "page_page": {
     "notice": {
       "version": "これは現在の版ではありません。",
@@ -250,10 +222,10 @@
       "redirected": "リダイレクト元 >> <code>%s</code>",
       "duplicated": "このページは <code>%s</code> から複製されました。",
       "unlinked": "このページへのリダイレクトは削除されました。",
-      "restricted": "このページの閲覧は制限されています"
+      "restricted": "このページの閲覧は制限されています",
+      "stale": "このページは最終更新日から{{count}}年以上が経過しています。"
     }
   },
-
   "page_edit": {
     "Show active line": "アクティブ行をハイライト",
     "overwrite_scopes": "{{operation}}と同時に全ての配下ページのスコープを上書き",
@@ -261,14 +233,12 @@
       "conflict": "すでに他の人がこのページを編集していたため保存できませんでした。ページを再読み込み後、自分の編集箇所のみ再度編集してください。"
     }
   },
-
   "page_api_error": {
     "notfound_or_forbidden": "元のページが見つからないか、アクセス権がありません。",
     "already_exists": "新しいページが既に存在しています。",
     "outdated": "ページが他のユーザーによって更新されました。",
     "user_not_admin": "権限のあるユーザーのみが完全削除できます"
   },
-
   "modal_rename": {
     "label": {
       "Move/Rename page": "ページを移動/名前変更する",
@@ -284,10 +254,8 @@
       "recursive": "<code>%s</code> 配下のページも移動/名前変更します"
     }
   },
-
   "Put Back": "元に戻す",
   "Delete Completely": "完全削除",
-
   "modal_delete": {
     "delete_page": "ページを削除する",
     "deleting_page": "ページパス",
@@ -297,7 +265,6 @@
     "recursively": "<code>%s</code> 配下のページも削除します",
     "completely": "ゴミ箱を経由せず、完全に削除します"
   },
-
   "modal_duplicate": {
     "label": {
       "Duplicate page": "ページを複製する",
@@ -305,7 +272,6 @@
       "Current page name": "現在のページ名"
     }
   },
-
   "modal_putback": {
     "label": {
       "Put Back Page": "ページを元に戻す",
@@ -315,7 +281,6 @@
       "recursively": "<code>%s</code> 配下のページも元に戻します"
     }
   },
-
   "modal_shortcuts": {
     "global": {
       "title": "グローバルショートカット",
@@ -338,7 +303,6 @@
       "Post": "投稿"
     }
   },
-
   "template": {
     "modal_label": {
       "Create/Edit Template Page": "テンプレートページの作成/編集",
@@ -357,7 +321,6 @@
       "desc": "テンプレートページが存在する下位層のすべてのページに適用されます"
     }
   },
-
   "sandbox": {
     "header": "見出し",
     "header_x": "見出し {{index}}",
@@ -389,7 +352,6 @@
     "insert_image": "で画像を挿入できます",
     "open_sandbox": "Sandbox を開く"
   },
-
   "admin_top": {
     "Management Wiki": "Wiki管理",
     "System Information": "システム情報",
@@ -400,7 +362,6 @@
     "Specified version": "指定バージョン",
     "Installed version": "インストールされているバージョン"
   },
-
   "app_setting": {
     "Site Name": "サイト名",
     "sitename_change": "ヘッダーや HTML タイトルに使用されるサイト名を変更できます。",
@@ -410,7 +371,7 @@
     "siteurl_help": "<code>http://</code> または <code>https://</code> から始まるサイトのURL",
     "Confidential name": "コンフィデンシャル表示",
     "Default Language for new users": "新規ユーザーのデフォルト設定言語",
-    "ex): internal use only": "例: 社外秘",
+    "ex) internal use only": "例: 社外秘",
     "File Uploading": "ファイルアップロード",
     "enable_files_except_image": "画像以外のファイルアップロードを許可",
     "attach_enable": "許可をしている場合、画像以外のファイルをページに添付可能になります。",
@@ -420,7 +381,7 @@
     "SMTP_but_AWS": "SMTP設定がなく、AWSの設定がある場合、SESでの送信を試みます。",
     "neihter_of": "どちらの設定もない場合、メールは送信されません。",
     "From e-mail address": "Fromアドレス",
-    "SMTP settings": "SMTP設定"   ,
+    "SMTP settings": "SMTP設定",
     "Host": "ホスト",
     "Port": "ポート",
     "User": "ユーザー",
@@ -437,9 +398,11 @@
     "Load plugins": "プラグインを読み込む",
     "Enable": "有効",
     "Disable": "無効",
-    "Use env var if empty": "データベース側の値が空の場合、環境変数 <code>%s</code> の値を利用します"
-   },
-
+    "Use env var if empty": "データベース側の値が空の場合、環境変数 <code>{{variable}}</code> の値を利用します",
+    "updated_app_setting": "アプリ設定を更新しました",
+    "updated_site_url": "サイトURLを更新しました",
+    "updated_plugin_setting": "プラグイン設定を更新しました"
+  },
   "security_setting": {
     "Guest Users Access": "ゲストユーザーのアクセス",
     "Fixed by env var": "環境変数 <code>%s=%s</code> により固定されています。",
@@ -449,9 +412,9 @@
     "users_without_account": "アカウントを持たないユーザーはアクセス不可",
     "example": "例",
     "restrict_emails": "登録可能なメールアドレスを制限することができます。",
-    "for_instance":"例えば、",
-    "only_those":"と記載することで、そのドメインのメールアドレスを持っている人のみ登録可能になります。",
-    "insert_single":"1行に1メールアドレス入力してください。",
+    "for_instance": "例えば、",
+    "only_those": "と記載することで、そのドメインのメールアドレスを持っている人のみ登録可能になります。",
+    "insert_single": "1行に1メールアドレス入力してください。",
     "page_listing_1": "ページのリスト表示と検索<br>'自分のみ'に閲覧制限しているページ",
     "page_listing_1_desc": "ページのリスト表示や検索結果において、'自分のみ'に閲覧制限をしているページをアクセス権のないユーザーにも表示します。",
     "page_listing_2": "ページのリスト表示と検索<br>特定グループに閲覧制限しているページ",
@@ -461,11 +424,10 @@
     "admin_only": "管理者のみ可能",
     "admin_and_author": "管理者とページ作者が可能",
     "anyone": "誰でも可能",
-
-    "Authentication mechanism settings":"認証機構設定",
+    "Authentication mechanism settings": "認証機構設定",
     "alert_siteUrl_is_not_set": "'サイトURL' が設定されていません。%s から設定してください。",
-    "xss_prevent_setting":"XSS(Cross Site Scripting)対策設定",
-    "xss_prevent_setting_link":"マークダウン設定ページに移動",
+    "xss_prevent_setting": "XSS(Cross Site Scripting)対策設定",
+    "xss_prevent_setting_link": "マークダウン設定ページに移動",
     "callback_URL": "コールバックURL",
     "desc_of_callback_URL": "%s プロバイダ側の設定で利用してください。",
     "clientID": "クライアントID",
@@ -581,7 +543,6 @@
       "security:passport-saml:attrMapLastName": "名"
     }
   },
-
   "markdown_setting": {
     "line_break_setting": "Line Break設定",
     "line_break_setting_desc": "Line Breakの設定を変更できます。",
@@ -607,14 +568,13 @@
     "Ignore all tags desc": "すべてのHTMLタグと属性を使用不可にします",
     "Recommended setting": "おすすめ設定",
     "Custom Whitelist": "カスタムホワイトリスト",
-    "Tag names": "タグ名のホワイトリスト",
-    "Tag attributes": "タグ属性のホワイトリスト",
-    "import_recommended": "おすすめをインポート",
+    "Tag names": "タグ名",
+    "Tag attributes": "タグ属性",
+    "import_recommended": "{{target}} のおすすめをインポート",
     "updated_lineBreak": "改行設定を更新しました",
     "updated_presentation": "プレゼンテーション設定を更新しました",
     "updated_xss": "XSS設定を更新しました"
   },
-
   "notification_setting": {
     "notification_list": "通知設定の一覧",
     "add_notification": "通知設定の追加",
@@ -634,9 +594,8 @@
       "ifttt_link": "IFTTT でメールトリガの新しいアプレットを作る"
     }
   },
-
   "customize_page": {
-    "recommended":"おすすめ",
+    "recommended": "おすすめ",
     "Behavior": "動作",
     "Layout": "レイアウト",
     "Function": "機能",
@@ -665,6 +624,8 @@
     "attach_title_header_desc": "新規作成したページの1行目に、ページのパスを h1 セクションとして挿入します。",
     "recent_created__n_draft_num_desc": "最近作成したページと下書きの表示数",
     "recently_created_n_draft_num_desc": "ホーム画面の Recently Created での、1ページの表示数を設定します。",
+    "stale_notification": "更新されていないページに通知を表示",
+    "stale_notification_desc": "最終更新から１年以上が経過しているページに通知を表示します。",
     "update_layout_success": "レイアウトを更新しました",
     "update_behavior_success": "動作を更新しました",
     "update_function_success": "機能を更新しました",
@@ -673,32 +634,31 @@
     "update_customHeader_success": "カスタムHTMLヘッダーを更新しました",
     "update_customCss_success": "カスタムCSSを更新しました",
     "update_script_success": "カスタムスクリプトを更新しました",
-    "layout_description":{
-      "growi_title":"シンプル・明瞭",
-      "growi_text1":"全画面レイアウトで、余白は少なくなります。",
-      "growi_text2":"コメントはページの下部に表示されます。",
-      "growi_text3":"ページ情報は下部に表示されます。",
-      "kibela_title":"閲覧重視の構造",
-      "kibela_text1":"コンテンツが中心に表示されます。",
-      "kibela_text2":"コメントはページの下部に表示されます。",
-      "kibela_text3":"ページ情報は下部に表示されます。",
-      "crowi_title":"ビュー・コントロールの分離",
-      "crowi_text1":"サイドバーを開くと情報が表示されます。",
-      "crowi_text2":"コメントはサイドバーに表示されます。",
-      "crowi_text3":"ページ情報はサイドバーに表示されます。"
+    "layout_description": {
+      "growi_title": "シンプル・明瞭",
+      "growi_text1": "全画面レイアウトで、余白は少なくなります。",
+      "growi_text2": "コメントはページの下部に表示されます。",
+      "growi_text3": "ページ情報は下部に表示されます。",
+      "kibela_title": "閲覧重視の構造",
+      "kibela_text1": "コンテンツが中心に表示されます。",
+      "kibela_text2": "コメントはページの下部に表示されます。",
+      "kibela_text3": "ページ情報は下部に表示されます。",
+      "crowi_title": "ビュー・コントロールの分離",
+      "crowi_text1": "サイドバーを開くと情報が表示されます。",
+      "crowi_text2": "コメントはサイドバーに表示されます。",
+      "crowi_text3": "ページ情報はサイドバーに表示されます。"
     },
-    "behavior_description":{
-      "growi_text1":"<code>/page</code>と<code>/page/</code>どちらのパスも同じページを表示します。",
-      "growi_text2":"<code>/nonexistent_page</code> では編集フォームを表示します",
-      "growi_text3":"<b>GROWI Enhanced Layout</b>では全てのページが配下のページリストを表示します",
-      "crowi_text1":"<code>/page</code> ではページを表示します。",
-      "crowi_text2":"<code>/page/</code> では配下のページを表示します。",
-      "crowi_text3":"<code>/page/</code>がポータルに適応している場合、ポータルページと配下のページリストを表示します。",
-      "crowi_text4":"<code>/nonexistent_page</code> では編集フォームを表示します",
-      "crowi_text5":"<code>/nonexistent_page</code> では配下のページリストを表示します。"
+    "behavior_description": {
+      "growi_text1": "<code>/page</code>と<code>/page/</code>どちらのパスも同じページを表示します。",
+      "growi_text2": "<code>/nonexistent_page</code> では編集フォームを表示します",
+      "growi_text3": "<b>GROWI Enhanced Layout</b>では全てのページが配下のページリストを表示します",
+      "crowi_text1": "<code>/page</code> ではページを表示します。",
+      "crowi_text2": "<code>/page/</code> では配下のページを表示します。",
+      "crowi_text3": "<code>/page/</code>がポータルに適応している場合、ポータルページと配下のページリストを表示します。",
+      "crowi_text4": "<code>/nonexistent_page</code> では編集フォームを表示します",
+      "crowi_text5": "<code>/nonexistent_page</code> では配下のページリストを表示します。"
     }
   },
-
   "user_management": {
     "target_user": "対象ユーザー",
     "new_password": "新しいパスワード",
@@ -742,8 +702,12 @@
     "remove_user_success": "{{username}}を削除しました",
     "remove_external_user_success": "{{accountId}}を削除しました "
   },
-
   "user_group_management": {
+    "search_option": "検索オプション",
+    "enable_option": "{{option}}を有効にする",
+    "forward_match": "前方一致",
+    "partial_match": "部分一致",
+    "backward_match": "後方一致",
     "group_list": "グループ一覧",
     "back_to_list": "グループ一覧に戻る",
     "basic_info": "基本情報",
@@ -766,7 +730,6 @@
     "no_pages": "グループが閲覧権限を保有するページはありません",
     "remove_from_group": "グループから外す"
   },
-
   "importer_management": {
     "beta_warning": "この機能はベータ版です",
     "import_from": "{{from}} からインポート",
@@ -825,13 +788,12 @@
     "page_skip": "既に GROWI 側に同名のページが存在する場合、そのページはスキップされます",
     "Directory_hierarchy_tag": "ディレクトリ階層タグ"
   },
-
-  "full_text_search_management":{
-    "elasticsearch_management":"Elasticsearch 管理",
-    "build_button":"インデックスのリビルド",
-    "rebuild_description_1":"Build Now ボタンを押すと全てのページのインデックスを削除し、作り直します。",
-    "rebuild_description_2":"この作業には数秒かかります。",
-    "rebuild_description_3":""
+  "full_text_search_management": {
+    "elasticsearch_management": "Elasticsearch 管理",
+    "build_button": "インデックスのリビルド",
+    "rebuild_description_1": "Build Now ボタンを押すと全てのページのインデックスを削除し、作り直します。",
+    "rebuild_description_2": "この作業には数秒かかります。",
+    "rebuild_description_3": ""
   },
   "export_management": {
     "exporting_collection_list": "エクスポート中のコレクション",

src/client/js/app.jsx

@@ -37,6 +37,7 @@ import TableOfContents from './components/TableOfContents';
 import UserGroupDetailPage from './components/Admin/UserGroupDetail/UserGroupDetailPage';
 import MarkdownSetting from './components/Admin/MarkdownSetting/MarkDownSetting';
 import UserManagement from './components/Admin/UserManagement';
+import AppSettingsPage from './components/Admin/App/AppSettingsPage';
 import ManageExternalAccount from './components/Admin/ManageExternalAccount';
 import UserGroupPage from './components/Admin/UserGroup/UserGroupPage';
 import Customize from './components/Admin/Customize/Customize';
@@ -52,6 +53,7 @@ import TagContainer from './services/TagContainer';
 import AdminCustomizeContainer from './services/AdminCustomizeContainer';
 import UserGroupDetailContainer from './services/UserGroupDetailContainer';
 import AdminUsersContainer from './services/AdminUsersContainer';
+import AdminAppContainer from './services/AdminAppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import AdminMarkDownContainer from './services/AdminMarkDownContainer';
 import AdminExternalAccountsContainer from './services/AdminExternalAccountsContainer';
@@ -166,6 +168,20 @@ const adminContainers = {
   'admin-export-page': websocketContainer,
 };
 
+// render for admin
+const adminAppElem = document.getElementById('admin-app');
+if (adminAppElem != null) {
+  const adminAppContainer = new AdminAppContainer(appContainer);
+  ReactDOM.render(
+    <Provider inject={[injectableContainers, adminAppContainer]}>
+      <I18nextProvider i18n={i18n}>
+        <AppSettingsPage />
+      </I18nextProvider>
+    </Provider>,
+    adminAppElem,
+  );
+}
+
 /**
  * define components
  *  key: id of element

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const logger = loggerFactory('growi:appSettings');
+
+class AppSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.submitHandler = this.submitHandler.bind(this);
+  }
+
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.updateAppSettingHandler();
+      toastSuccess(t('app_setting.updated_app_setting'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t, adminAppContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.Site Name')}</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.title}
+              onChange={(e) => { adminAppContainer.changeTitle(e.target.value) }}
+              placeholder="GROWI"
+            />
+            <p className="help-block">{t('app_setting.sitename_change')}</p>
+          </div>
+        </div>
+
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.Confidential name')}</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.confidential}
+              onChange={(e) => { adminAppContainer.changeConfidential(e.target.value) }}
+              placeholder={t('app_setting.ex) internal use only')}
+            />
+            <p className="help-block">{t('app_setting.header_content')}</p>
+          </div>
+        </div>
+
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.Default Language for new users')}</label>
+          <div className="col-xs-6">
+            <div className="radio radio-primary radio-inline">
+              <input
+                type="radio"
+                id="radioLangEn"
+                name="globalLang"
+                value="en-US"
+                checked={adminAppContainer.state.globalLang === 'en-US'}
+                onClick={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
+              />
+              <label htmlFor="radioLangEn">{t('English')}</label>
+            </div>
+            <div className="radio radio-primary radio-inline">
+              <input
+                type="radio"
+                id="radioLangJa"
+                name="globalLang"
+                value="ja"
+                checked={adminAppContainer.state.globalLang === 'ja'}
+                onClick={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
+              />
+              <label htmlFor="radioLangJa">{t('Japanese')}</label>
+            </div>
+          </div>
+        </div>
+
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.File Uploading')}</label>
+          <div className="col-xs-6">
+            <div className="checkbox checkbox-info">
+              <input
+                type="checkbox"
+                id="cbFileUpload"
+                name="fileUpload"
+                checked={adminAppContainer.state.fileUpload}
+                onChange={(e) => { adminAppContainer.changeFileUpload(e.target.checked) }}
+              />
+              <label htmlFor="cbFileUpload">{t('app_setting.enable_files_except_image')}</label>
+            </div>
+
+            <p className="help-block">
+              {t('app_setting.enable_files_except_image')}
+              <br />
+              {t('app_setting.attach_enable')}
+            </p>
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const AppSettingWrapper = (props) => {
+  return createSubscribedElement(AppSetting, props, [AppContainer, AdminAppContainer]);
+};
+
+AppSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default withTranslation()(AppSettingWrapper);

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

@@ -0,0 +1,94 @@
+import React, { Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+
+import AppSetting from './AppSetting';
+import SiteUrlSetting from './SiteUrlSetting';
+import MailSetting from './MailSetting';
+import AwsSetting from './AwsSetting';
+import PluginSetting from './PluginSetting';
+
+const logger = loggerFactory('growi:appSettings');
+
+class AppSettingsPage extends React.Component {
+
+  async componentDidMount() {
+    const { adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.retrieveAppSettingsData();
+    }
+    catch (err) {
+      toastError(err);
+      adminAppContainer.setState({ retrieveError: err });
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        <div className="row">
+          <div className="col-md-12">
+            <h2>{t('App Settings')}</h2>
+            <AppSetting />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-md-12">
+            <h2>{t('Site URL settings')}</h2>
+            <SiteUrlSetting />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-md-12">
+            <h2>{t('app_setting.Mail settings')}</h2>
+            <MailSetting />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-md-12">
+            <h2>{t('app_setting.AWS settings')}</h2>
+            <AwsSetting />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-md-12">
+            <h2>{t('app_setting.Plugin settings')}</h2>
+            <PluginSetting />
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+
+}
+
+AppSettingsPage.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const AppSettingsPageWrapper = (props) => {
+  return createSubscribedElement(AppSettingsPage, props, [AppContainer, AdminAppContainer]);
+};
+
+
+export default withTranslation()(AppSettingsPageWrapper);

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

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const logger = loggerFactory('growi:appSettings');
+
+class AwsSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.submitHandler = this.submitHandler.bind(this);
+  }
+
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.updateAwsSettingHandler();
+      toastSuccess(t('app_setting.updated_app_setting'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t, adminAppContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <p className="well">
+          {t('app_setting.AWS_access')}
+          <br />
+          {t('app_setting.No_SMTP_setting')}
+          <br />
+          <br />
+          <span className="text-danger">
+            <i className="ti-unlink"></i>
+            {t('app_setting.change_setting')}
+          </span>
+        </p>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            {t('app_setting.region')}
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              placeholder={`${t('eg')} ap-northeast-1`}
+              defaultValue={adminAppContainer.state.region}
+              onChange={(e) => {
+                adminAppContainer.changeRegion(e.target.value);
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            {t('app_setting.custom endpoint')}
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              placeholder={`${t('eg')} http://localhost:9000`}
+              defaultValue={adminAppContainer.state.customEndpoint}
+              onChange={(e) => {
+                adminAppContainer.changeCustomEndpoint(e.target.value);
+              }}
+            />
+            <p className="help-block">{t('app_setting.custom_endpoint_change')}</p>
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            {t('app_setting.bucket name')}
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              placeholder={`${t('eg')} crowi`}
+              defaultValue={adminAppContainer.state.bucket}
+              onChange={(e) => {
+                adminAppContainer.changeBucket(e.target.value);
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            Access Key ID
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.accessKeyId}
+              onChange={(e) => {
+                adminAppContainer.changeAccessKeyId(e.target.value);
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            Secret Access Key
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.secretKey}
+              onChange={(e) => {
+                adminAppContainer.changeSecretKey(e.target.value);
+              }}
+            />
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const AwsSettingWrapper = (props) => {
+  return createSubscribedElement(AwsSetting, props, [AppContainer, AdminAppContainer]);
+};
+
+AwsSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default withTranslation()(AwsSettingWrapper);

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const logger = loggerFactory('growi:appSettings');
+
+class MailSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.submitHandler = this.submitHandler.bind(this);
+  }
+
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.updateMailSettingHandler();
+      toastSuccess(t('app_setting.updated_app_setting'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t, adminAppContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <p className="well">{t('app_setting.SMTP_used')} {t('app_setting.SMTP_but_AWS')}<br />{t('app_setting.neihter_of')}</p>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">{t('app_setting.From e-mail address')}</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              placeholder={`${t('eg')} mail@growi.org`}
+              defaultValue={adminAppContainer.state.fromAddress}
+              onChange={(e) => { adminAppContainer.changeFromAddress(e.target.value) }}
+            />
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">{ t('app_setting.SMTP settings') }</label>
+          <div className="col-xs-4">
+            <label>{ t('app_setting.Host') }</label>
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.smtpHost}
+              onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
+            />
+          </div>
+          <div className="col-xs-2">
+            <label>{ t('app_setting.Port') }</label>
+            <input
+              className="form-control"
+              defaultValue={adminAppContainer.state.smtpPort}
+              onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
+            />
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <div className="col-xs-3 col-xs-offset-3">
+            <label>{ t('app_setting.User') }</label>
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.SmtpUser}
+              onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
+            />
+          </div>
+          <div className="col-xs-3">
+            <label>{ t('Password') }</label>
+            <input
+              className="form-control"
+              type="password"
+              defaultValue={adminAppContainer.state.smtpPassword}
+              onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
+            />
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const MailSettingWrapper = (props) => {
+  return createSubscribedElement(MailSetting, props, [AppContainer, AdminAppContainer]);
+};
+
+MailSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default withTranslation()(MailSettingWrapper);

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:app:pluginSetting');
+
+class PluginSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.submitHandler = this.submitHandler.bind(this);
+  }
+
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.updatePluginSettingHandler();
+      toastSuccess(t('app_setting.updated_plugin_setting'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t, adminAppContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <p className="well">{t('app_setting.Enable plugin loading')}</p>
+
+        <div className="row mb-5">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
+            <div className="checkbox checkbox-success">
+              <input
+                id="isEnabledPlugins"
+                type="checkbox"
+                checked={adminAppContainer.state.isEnabledPlugins}
+                onChange={(e) => {
+                  adminAppContainer.changeIsEnabledPlugins(e.target.checked);
+                }}
+              />
+              <label htmlFor="isEnabledPlugins">{t('app_setting.Load plugins')}</label>
+            </div>
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const PluginSettingWrapper = (props) => {
+  return createSubscribedElement(PluginSetting, props, [AppContainer, AdminAppContainer]);
+};
+
+PluginSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default withTranslation()(PluginSettingWrapper);

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminAppContainer from '../../../services/AdminAppContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const logger = loggerFactory('growi:appSettings');
+
+class SiteUrlSetting extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.submitHandler = this.submitHandler.bind(this);
+  }
+
+  async submitHandler() {
+    const { t, adminAppContainer } = this.props;
+
+    try {
+      await adminAppContainer.updateSiteUrlSettingHandler();
+      toastSuccess(t('app_setting.updated_site_url'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  render() {
+    const { t, adminAppContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <p className="well">{t('app_setting.Site URL desc')}</p>
+        {!adminAppContainer.state.isSetSiteUrl && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('app_setting.Site URL warn')}</p>)}
+
+        <div className="row">
+          <div className="col-md-12">
+            <div className="col-xs-offset-3">
+              <table className="table settings-table">
+                <colgroup>
+                  <col className="from-db" />
+                  <col className="from-env-vars" />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th>Database</th>
+                    <th>Environment variables</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <input
+                        className="form-control"
+                        type="text"
+                        name="settingForm[app:siteUrl]"
+                        defaultValue={adminAppContainer.state.siteUrl}
+                        onChange={(e) => { adminAppContainer.changeSiteUrl(e.target.value) }}
+                        placeholder="e.g. https://my.growi.org"
+                      />
+                      <p className="help-block">
+                        {/* eslint-disable-next-line react/no-danger */}
+                        <div dangerouslySetInnerHTML={{ __html: t('app_setting.siteurl_help') }} />
+                      </p>
+                    </td>
+                    <td>
+                      <input className="form-control" type="text" value={adminAppContainer.state.envSiteUrl} readOnly />
+                      <p className="help-block">
+                        {/* eslint-disable-next-line react/no-danger */}
+                        <div dangerouslySetInnerHTML={{ __html: t('app_setting.Use env var if empty', { variable: 'APP_SITE_URL' }) }} />
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const SiteUrlSettingWrapper = (props) => {
+  return createSubscribedElement(SiteUrlSetting, props, [AppContainer, AdminAppContainer]);
+};
+
+SiteUrlSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
+};
+
+export default withTranslation()(SiteUrlSettingWrapper);

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -123,6 +123,21 @@ class CustomizeBehaviorSetting extends React.Component {
           </div>
         </div>
 
+        <div className="form-group row">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
+            <CustomizeFunctionOption
+              optionId="isEnabledStaleNotification"
+              label={t('customize_page.stale_notification')}
+              isChecked={adminCustomizeContainer.state.isEnabledStaleNotification}
+              onChecked={() => { adminCustomizeContainer.switchEnableStaleNotification() }}
+            >
+              <p className="help-block">
+                { t('customize_page.stale_notification_desc') }
+              </p>
+            </CustomizeFunctionOption>
+          </div>
+        </div>
+
         <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </React.Fragment>
     );

src/client/js/components/Admin/MarkdownSetting/WhiteListInput.jsx

@@ -10,78 +10,62 @@ import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
 
 class WhiteListInput extends React.Component {
 
-  renderRecommendTagBtn() {
-    const { t, adminMarkDownContainer } = this.props;
+  constructor(props) {
+    super(props);
 
-    return (
-      <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={() => { adminMarkDownContainer.setState({ tagWhiteList: tags }) }}>
-        { t('markdown_setting.import_recommended', 'tags') }
-      </p>
-    );
-  }
+    this.tagWhiteList = React.createRef();
+    this.attrWhiteList = React.createRef();
 
-  renderRecommendAttrBtn() {
-    const { t, adminMarkDownContainer } = this.props;
-
-    return (
-      <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={() => { adminMarkDownContainer.setState({ attrWhiteList: attrs }) }}>
-        { t('markdown_setting.import_recommended', 'Attrs') }
-      </p>
-    );
+    this.onClickRecommendTagButton = this.onClickRecommendTagButton.bind(this);
+    this.onClickRecommendAttrButton = this.onClickRecommendAttrButton.bind(this);
   }
 
-  renderTagValue() {
-    const { customizable, adminMarkDownContainer } = this.props;
-
-    if (customizable) {
-      return adminMarkDownContainer.state.tagWhiteList;
-    }
-
-    return tags;
+  onClickRecommendTagButton() {
+    this.tagWhiteList.current.value = tags;
+    this.props.adminMarkDownContainer.setState({ tagWhiteList: tags });
   }
 
-  renderAttrValue() {
-    const { customizable, adminMarkDownContainer } = this.props;
-
-    if (customizable) {
-      return adminMarkDownContainer.state.attrWhiteList;
-    }
-
-    return attrs;
+  onClickRecommendAttrButton() {
+    this.attrWhiteList.current.value = attrs;
+    this.props.adminMarkDownContainer.setState({ attrWhiteList: attrs });
   }
 
   render() {
-    const { t, customizable, adminMarkDownContainer } = this.props;
+    const { t, adminMarkDownContainer } = this.props;
 
     return (
       <>
         <div className="mt-4">
           <div className="d-flex justify-content-between">
-            { t('markdown_setting.Tag names') }
-            {customizable && this.renderRecommendTagBtn()}
+            {t('markdown_setting.Tag names')}
+            <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={this.onClickRecommendTagButton}>
+              {t('markdown_setting.import_recommended', { target: 'Tags' })}
+            </p>
           </div>
           <textarea
             className="form-control xss-list"
             name="recommendedTags"
             rows="6"
             cols="40"
-            readOnly={!customizable}
-            defaultValue={this.renderTagValue()}
+            ref={this.tagWhiteList}
+            defaultValue={adminMarkDownContainer.state.tagWhiteList}
             onChange={(e) => { adminMarkDownContainer.setState({ tagWhiteList: e.target.value }) }}
           />
         </div>
         <div className="mt-4">
           <div className="d-flex justify-content-between">
-            { t('markdown_setting.Tag attributes') }
-            {customizable && this.renderRecommendAttrBtn()}
+            {t('markdown_setting.Tag attributes')}
+            <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={this.onClickRecommendAttrButton}>
+              {t('markdown_setting.import_recommended', { target: 'Attrs' })}
+            </p>
           </div>
           <textarea
             className="form-control xss-list"
             name="recommendedAttrs"
             rows="6"
             cols="40"
-            readOnly={!customizable}
-            defaultValue={this.renderAttrValue()}
+            ref={this.attrWhiteList}
+            defaultValue={adminMarkDownContainer.state.attrWhiteList}
             onChange={(e) => { adminMarkDownContainer.setState({ attrWhiteList: e.target.value }) }}
           />
         </div>
@@ -100,7 +84,6 @@ WhiteListInput.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
 
-  customizable: PropTypes.bool.isRequired,
 };
 
 export default withTranslation()(WhiteListWrapper);

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -5,6 +5,7 @@ import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
+import { tags, attrs } from '../../../../../lib/service/xss/recommended-whitelist';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
@@ -39,7 +40,7 @@ class XssForm extends React.Component {
     const { xssOption } = adminMarkDownContainer.state;
 
     return (
-      <fieldset className="form-group col-xs-12 my-3">
+      <fieldset className="row col-xs-12 my-3">
         <div className="col-xs-4 radio radio-primary">
           <input
             type="radio"
@@ -49,9 +50,9 @@ class XssForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
           />
           <label htmlFor="xssOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Ignore all tags') }</p>
+            <p className="font-weight-bold">{t('markdown_setting.Ignore all tags')}</p>
             <div className="mt-4">
-              { t('markdown_setting.Ignore all tags desc') }
+              {t('markdown_setting.Ignore all tags desc')}
             </div>
           </label>
         </div>
@@ -65,8 +66,33 @@ class XssForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
           />
           <label htmlFor="xssOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Recommended setting') }</p>
-            <WhiteListInput customizable={false} />
+            <p className="font-weight-bold">{t('markdown_setting.Recommended setting')}</p>
+            <div className="m-t-15">
+              <div className="d-flex justify-content-between">
+                {t('markdown_setting.Tag names')}
+              </div>
+              <textarea
+                className="form-control xss-list"
+                name="recommendedTags"
+                rows="6"
+                cols="40"
+                readOnly
+                defaultValue={tags}
+              />
+            </div>
+            <div className="m-t-15">
+              <div className="d-flex justify-content-between">
+                {t('markdown_setting.Tag attributes')}
+              </div>
+              <textarea
+                className="form-control xss-list"
+                name="recommendedAttrs"
+                rows="6"
+                cols="40"
+                readOnly
+                defaultValue={attrs}
+              />
+            </div>
           </label>
         </div>
 
@@ -79,8 +105,8 @@ class XssForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
           />
           <label htmlFor="xssOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
-            <WhiteListInput customizable />
+            <p className="font-weight-bold">{t('markdown_setting.Custom Whitelist')}</p>
+            <WhiteListInput />
           </label>
         </div>
       </fieldset>
@@ -106,7 +132,7 @@ class XssForm extends React.Component {
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
                 <label htmlFor="XssEnable">
-                  { t('markdown_setting.Enable XSS prevention') }
+                  {t('markdown_setting.Enable XSS prevention')}
                 </label>
               </div>
             </div>

src/client/js/components/Admin/UserGroupDetail/CheckBoxForSerchUserOption.jsx

@@ -0,0 +1,37 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class CheckBoxForSerchUserOption extends React.Component {
+
+  render() {
+    const { t, option } = this.props;
+    return (
+      <div className="checkbox checkbox-info" key={`isAlso${option}Searched`}>
+        <input
+          type="checkbox"
+          id={`isAlso${option}Searched`}
+          className="form-check-input"
+          checked={this.props.checked}
+          onChange={this.props.onChange}
+        />
+        <label className="text-capitalize form-check-label ml-3" htmlFor={`isAlso${option}Searched`}>
+          {t('user_group_management.enable_option', { option })}
+        </label>
+      </div>
+    );
+  }
+
+}
+
+
+CheckBoxForSerchUserOption.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  option: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(CheckBoxForSerchUserOption);

src/client/js/components/Admin/UserGroupDetail/RadioButtonForSerchUserOption.jsx

@@ -0,0 +1,37 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class RadioButtonForSerchUserOption extends React.Component {
+
+  render() {
+    const { t, searchType } = this.props;
+    return (
+      <div className="radio" key={`${searchType}Match`}>
+        <input
+          type="radio"
+          id={`${searchType}Match`}
+          className="form-check-radio"
+          checked={this.props.checked}
+          onChange={this.props.onChange}
+        />
+        <label className="text-capitalize form-check-label ml-3" htmlFor={`${searchType}Match`}>
+          {t(`user_group_management.${searchType}_match`)}
+        </label>
+      </div>
+    );
+  }
+
+}
+
+
+RadioButtonForSerchUserOption.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  searchType: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(RadioButtonForSerchUserOption);

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -40,7 +40,7 @@ class UserGroupPageList extends React.Component {
       const { total, pages } = res.data;
 
       this.setState({
-        total,
+        total: total || 0,
         activePage: pageNum,
         currentPages: pages,
       });

src/client/js/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -2,10 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import { AsyncTypeahead } from 'react-bootstrap-typeahead';
+import { debounce } from 'throttle-debounce';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import UserGroupDetailContainer from '../../../services/UserGroupDetailContainer';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
+import UserPicture from '../../User/UserPicture';
 
 class UserGroupUserFormByInput extends React.Component {
 
@@ -13,55 +16,133 @@ class UserGroupUserFormByInput extends React.Component {
     super(props);
 
     this.state = {
-      username: '',
+      keyword: '',
+      inputUser: '',
+      applicableUsers: [],
+      isLoading: false,
+      searchError: null,
     };
 
     this.xss = window.xss;
 
-    this.changeUsername = this.changeUsername.bind(this);
     this.addUserBySubmit = this.addUserBySubmit.bind(this);
     this.validateForm = this.validateForm.bind(this);
-  }
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
 
-  changeUsername(e) {
-    this.setState({ username: e.target.value });
+    this.searhApplicableUsersDebounce = debounce(1000, this.searhApplicableUsers);
   }
 
-  async addUserBySubmit(e) {
-    e.preventDefault();
-    const { username } = this.state;
+  async addUserBySubmit() {
+    if (this.state.inputUser.length === 0) { return }
+    const userName = this.state.inputUser[0].username;
 
     try {
-      await this.props.userGroupDetailContainer.addUserByUsername(username);
-      toastSuccess(`Added "${this.xss.process(username)}" to "${this.xss.process(this.props.userGroupDetailContainer.state.userGroup.name)}"`);
-      this.setState({ username: '' });
+      await this.props.userGroupDetailContainer.addUserByUsername(userName);
+      toastSuccess(`Added "${this.xss.process(userName)}" to "${this.xss.process(this.props.userGroupDetailContainer.state.userGroup.name)}"`);
+      this.setState({ inputUser: '' });
     }
     catch (err) {
-      toastError(new Error(`Unable to add "${this.xss.process(username)}" to "${this.xss.process(this.props.userGroupDetailContainer.state.userGroup.name)}"`));
+      toastError(new Error(`Unable to add "${this.xss.process(userName)}" to "${this.xss.process(this.props.userGroupDetailContainer.state.userGroup.name)}"`));
     }
   }
 
   validateForm() {
-    return this.state.username !== '';
+    return this.state.inputUser !== '';
+  }
+
+  async searhApplicableUsers() {
+    try {
+      const users = await this.props.userGroupDetailContainer.fetchApplicableUsers(this.state.keyword);
+      this.setState({ applicableUsers: users, isLoading: false });
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
+  /**
+   * Reflect when forecast is clicked
+   * @param {object} inputUser
+   */
+  handleChange(inputUser) {
+    this.setState({ inputUser });
+  }
+
+  handleSearch(keyword) {
+
+    if (keyword === '') {
+      return;
+    }
+
+    this.setState({ keyword, isLoading: true });
+    this.searhApplicableUsersDebounce();
+  }
+
+  onKeyDown(event) {
+    // 13 is Enter key
+    if (event.keyCode === 13) {
+      this.addUserBySubmit();
+    }
+  }
+
+  renderMenuItemChildren(option) {
+    const { userGroupDetailContainer } = this.props;
+    const user = option;
+    return (
+      <React.Fragment>
+        <UserPicture user={user} size="sm" withoutLink />
+        <strong className="ml-2">{user.username}</strong>
+        {userGroupDetailContainer.state.isAlsoNameSearched && <span className="ml-2">{user.name}</span>}
+        {userGroupDetailContainer.state.isAlsoMailSearched && <span className="ml-2">{user.email}</span>}
+      </React.Fragment>
+    );
+  }
+
+  getEmptyLabel() {
+    return (this.state.searchError !== null) && 'Error on searching.';
   }
 
   render() {
     const { t } = this.props;
 
+    const inputProps = { autoComplete: 'off' };
+
     return (
-      <form className="form-inline" onSubmit={this.addUserBySubmit}>
-        <div className="form-group">
-          <input
-            type="text"
-            name="username"
-            className="form-control input-sm"
-            placeholder={t('username')}
-            value={this.state.username}
-            onChange={this.changeUsername}
+      <div className="row">
+        <div className="col-xs-8 pr-0">
+          <AsyncTypeahead
+            {...this.props}
+            id="name-typeahead-asynctypeahead"
+            ref={(c) => { this.typeahead = c }}
+            inputProps={inputProps}
+            isLoading={this.state.isLoading}
+            labelKey={user => `${user.username} ${user.name} ${user.email}`}
+            minLength={0}
+            options={this.state.applicableUsers} // Search result
+            searchText={(this.state.isLoading ? 'Searching...' : this.getEmptyLabel())}
+            renderMenuItemChildren={this.renderMenuItemChildren}
+            align="left"
+            onChange={this.handleChange}
+            onSearch={this.handleSearch}
+            onKeyDown={this.onKeyDown}
+            caseSensitive={false}
+            clearButton
           />
         </div>
-        <button type="submit" className="btn btn-sm btn-success" disabled={!this.validateForm()}>{ t('add') }</button>
-      </form>
+        <div className="col-xs-2 pl-0">
+          <button
+            type="button"
+            className="btn btn-sm btn-success"
+            disabled={!this.validateForm()}
+            onClick={this.addUserBySubmit}
+          >
+            {t('add')}
+          </button>
+        </div>
+      </div>
     );
   }
 

src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -9,6 +9,8 @@ import UserGroupUserFormByInput from './UserGroupUserFormByInput';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import UserGroupDetailContainer from '../../../services/UserGroupDetailContainer';
+import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
+import CheckBoxForSerchUserOption from './CheckBoxForSerchUserOption';
 
 class UserGroupUserModal extends React.Component {
 
@@ -21,7 +23,51 @@ class UserGroupUserModal extends React.Component {
           { t('user_group_management.add_user') }
         </ModalHeader>
         <ModalBody>
-          <UserGroupUserFormByInput />
+          <div className="p-3">
+            <UserGroupUserFormByInput />
+          </div>
+          <h2 className="border-bottom">{t('user_group_management.search_option')}</h2>
+          <div className="row mt-4">
+            <div className="col-xs-6">
+              <div className="mb-5">
+                <CheckBoxForSerchUserOption
+                  option="Mail"
+                  checked={userGroupDetailContainer.state.isAlsoMailSearched}
+                  onChange={userGroupDetailContainer.switchIsAlsoMailSearched}
+                />
+              </div>
+              <div className="mb-5">
+                <CheckBoxForSerchUserOption
+                  option="Name"
+                  checked={userGroupDetailContainer.state.isAlsoNameSearched}
+                  onChange={userGroupDetailContainer.switchIsAlsoNameSearched}
+                />
+              </div>
+            </div>
+            <div className="col-xs-6">
+              <div className="mb-5">
+                <RadioButtonForSerchUserOption
+                  searchType="forward"
+                  checked={userGroupDetailContainer.state.searchType === 'forward'}
+                  onChange={() => { userGroupDetailContainer.switchSearchType('forward') }}
+                />
+              </div>
+              <div className="mb-5">
+                <RadioButtonForSerchUserOption
+                  searchType="partial"
+                  checked={userGroupDetailContainer.state.searchType === 'partial'}
+                  onChange={() => { userGroupDetailContainer.switchSearchType('partial') }}
+                />
+              </div>
+              <div className="mb-5">
+                <RadioButtonForSerchUserOption
+                  searchType="backward"
+                  checked={userGroupDetailContainer.state.searchType === 'backword'}
+                  onChange={() => { userGroupDetailContainer.switchSearchType('backword') }}
+                />
+              </div>
+            </div>
+          </div>
         </ModalBody>
       </Modal>
     );

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -648,13 +648,16 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   getNavbarItems() {
     return [
+      /* eslint-disable max-len */
       <Button
         key="nav-item-bold"
         size="sm"
         title="Bold"
         onClick={this.createReplaceSelectionHandler('**', '**')}
       >
-        <img src="/images/icons/editor/bold.svg" alt="icon-bold" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 10.9 14">
+          <path d="M0 0h5.6c3 0 4.7 1.1 4.7 3.4a3.1 3.1 0 0 1-2.5 3.1 3.7 3.7 0 0 1 3.1 3.5c0 2.9-1.4 4-4.2 4H0zm5.2 6.5c2.7 0 2.6-1.4 2.6-3.1S7.9.7 5.6.7H2.3v5.8zm-2.9 6.6h3.4c2.1 0 2.7-1.1 2.7-3.1s0-2.8-3.2-2.8H2.3z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-italic"
@@ -662,7 +665,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Italic"
         onClick={this.createReplaceSelectionHandler('*', '*')}
       >
-        <img src="/images/icons/editor/italic.svg" alt="icon-italic" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 8.6 13.9">
+          <path d="M8.1 0a.6.6 0 0 1 .5.6c0 .3-.2.6-.7.6H6.2L3.8 12.8h1.8c.2 0 .4.3.4.5a.7.7 0 0 1-.7.6H.5c-.3 0-.5-.4-.5-.6s.4-.6.7-.6h1.7L4.9 1.2H3.1a.5.5 0 0 1-.5-.5c0-.3.1-.7.8-.7z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-strikethrough"
@@ -670,7 +675,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Strikethrough"
         onClick={this.createReplaceSelectionHandler('~~', '~~')}
       >
-        <img src="/images/icons/editor/strikethrough.svg" alt="icon-strikethrough" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 19.5 14">
+          <path d="M5.8 6.2H9C7.2 5.7 6.3 5 6.3 3.8a2.2 2.2 0 0 1 .9-1.9 4.3 4.3 0 0 1 2.5-.7 4.3 4.3 0 0 1 2.5.7 3.1 3.1 0 0 1 1.1 1.6.7.7 0 0 0 .6.4h.3a.7.7 0 0 0 .4-.8A3.6 3.6 0 0 0 13.1 1a6.7 6.7 0 0 0-6-.5 3.1 3.1 0 0 0-1.7 1.3 3.6 3.6 0 0 0-.6 2 2.9 2.9 0 0 0 1 2.3zm7 2.5a2 2 0 0 1 .6 1.4 2.4 2.4 0 0 1-1 1.9 3.7 3.7 0 0 1-2.5.7 4.6 4.6 0 0 1-3-.8 3.7 3.7 0 0 1-1.2-2 .6.6 0 0 0-.6-.5h-.2a.7.7 0 0 0-.5.8 4.1 4.1 0 0 0 1.5 2.5A6 6 0 0 0 9.8 14a7.5 7.5 0 0 0 2.6-.5 4.9 4.9 0 0 0 1.8-1.4 4.3 4.3 0 0 0 .6-2.2 5 5 0 0 0-.2-1.2zM.4 7.9a.7.7 0 0 1-.4-.5.4.4 0 0 1 .4-.4h18.8a.4.4 0 0 1 .3.6c0 .1-.1.2-.2.3z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-header"
@@ -678,7 +685,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Heading"
         onClick={this.makeHeaderHandler}
       >
-        <img src="/images/icons/editor/header.svg" alt="icon-header" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 13.7 14">
+          <path d="M10.2 0h2.9a.6.6 0 0 1 .6.6.6.6 0 0 1-.6.6h-.8v11.6h.8a.6.6 0 0 1 .6.6.6.6 0 0 1-.6.6h-2.9a.6.6 0 0 1-.6-.6.6.6 0 0 1 .6-.6h.8V7.2H2.7v5.6h.8a.6.6 0 0 1 .6.6.6.6 0 0 1-.6.6H.6a.6.6 0 0 1-.6-.6.6.6 0 0 1 .6-.6h.7V1.2H.6A.6.6 0 0 1 0 .6.6.6 0 0 1 .6 0h2.9a.6.6 0 0 1 .6.6.6.6 0 0 1-.6.6h-.8v4.9H11V1.2h-.8a.6.6 0 0 1-.6-.6.6.6 0 0 1 .6-.6z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-code"
@@ -686,7 +695,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Inline Code"
         onClick={this.createReplaceSelectionHandler('`', '`')}
       >
-        <img src="/images/icons/editor/code.svg" alt="icon-code" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 18.1 14">
+          <path d="M17.8 7.9l-4 3.8a.5.5 0 0 1-.8 0 .5.5 0 0 1 0-.8L16.8 7 13 3.2a.6.6 0 0 1 0-.9.5.5 0 0 1 .8 0l4 3.8a1.3 1.3 0 0 1 0 1.8zM5.2 2.3a.7.7 0 0 1 0 .9L1.3 7l3.9 3.9a.6.6 0 0 1 0 .8.6.6 0 0 1-.9 0L.4 7.9a1.3 1.3 0 0 1 0-1.8l3.9-3.8a.6.6 0 0 1 .9 0zM11.5.8L7.8 13.6a.6.6 0 0 1-.7.4.6.6 0 0 1-.5-.8L10.3.4a.7.7 0 0 1 .8-.4.6.6 0 0 1 .4.8z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-quote"
@@ -694,7 +705,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Quote"
         onClick={this.createAddPrefixToEachLinesHandler('> ')}
       >
-        <img src="/images/icons/editor/quote.svg" alt="icon-quote" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 17 12">
+          <path d="M5 0H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a1.7 1.7 0 0 0 1-.3V10a.9.9 0 0 1-1 1H3v1h2a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 6H2a.9.9 0 0 1-1-1V2a.9.9 0 0 1 1-1h3a.9.9 0 0 1 1 1v3a.9.9 0 0 1-1 1zm10-6h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a1.7 1.7 0 0 0 1-.3V10a.9.9 0 0 1-1 1h-2v1h2a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 6h-3a.9.9 0 0 1-1-1V2a.9.9 0 0 1 1-1h3a.9.9 0 0 1 1 1v3a.9.9 0 0 1-1 1z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-ul"
@@ -702,7 +715,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="List"
         onClick={this.createAddPrefixToEachLinesHandler('- ')}
       >
-        <img src="/images/icons/editor/list-ul.svg" alt="icon-list-ul" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 21.6 13.5">
+          <path d="M6.4 1.5h14.5a.7.7 0 0 0 .7-.7.7.7 0 0 0-.7-.7H6.4a.8.8 0 0 0-.8.7.8.8 0 0 0 .8.7zm0 6h14.5a.7.7 0 0 0 .7-.7.7.7 0 0 0-.7-.7H6.4a.8.8 0 0 0-.8.7.8.8 0 0 0 .8.7zm0 6h14.5a.7.7 0 0 0 .7-.7.7.7 0 0 0-.7-.7H6.4a.8.8 0 0 0-.8.7.8.8 0 0 0 .8.7zM.9 1.5h1a.8.8 0 0 0 .9-.7.8.8 0 0 0-.9-.8h-1a.8.8 0 0 0-.9.7.8.8 0 0 0 .9.8zm0 6h1a.8.8 0 0 0 .9-.7.8.8 0 0 0-.9-.8h-1a.8.8 0 0 0-.9.7.8.8 0 0 0 .9.8zm0 6h1a.8.8 0 0 0 .9-.7.8.8 0 0 0-.9-.7h-1a.8.8 0 0 0-.9.7.8.8 0 0 0 .9.7z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-ol"
@@ -710,7 +725,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Numbered List"
         onClick={this.createAddPrefixToEachLinesHandler('1. ')}
       >
-        <img src="/images/icons/editor/list-ol.svg" alt="icon-list-ol" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 23.7 16">
+          <path d="M23.7 2a.8.8 0 0 1-.8.8H6.6a.8.8 0 0 1-.7-.8.7.7 0 0 1 .7-.7h16.3a.7.7 0 0 1 .8.7zM6.6 8.7h16.3a.7.7 0 0 0 .8-.7.8.8 0 0 0-.8-.8H6.6a.8.8 0 0 0-.7.8.7.7 0 0 0 .7.7zm0 5.9h16.3a.7.7 0 0 0 .8-.7.7.7 0 0 0-.8-.7H6.6a.7.7 0 0 0-.7.7.7.7 0 0 0 .7.7zM1.5.5V4h.6V0h-.5L.7.5v.4l.8-.4zM.9 9.6l.3-.3c.9-.9 1.4-1.5 1.4-2.2a1.2 1.2 0 0 0-1.3-1.2h-.1a1.4 1.4 0 0 0-1.2.6l.3.4a1.2 1.2 0 0 1 .9-.5.6.6 0 0 1 .8.6v.2c0 .6-.4 1.1-1.5 2.1l-.4.4v.3h2.6v-.4zm.9 4.1a1 1 0 0 0 .7-.9 1 1 0 0 0-1.1-1 2 2 0 0 0-1.1.3v.4l.8-.2c.5 0 .8.2.8.6s-.5.7-.9.7H.7v.4H1c.6 0 1.1.2 1.1.8a.8.8 0 0 1-.9.8l-.9-.3-.2.4a2 2 0 0 0 1.1.3c1 0 1.5-.6 1.5-1.2a1.2 1.2 0 0 0-.9-1.1z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-checkbox"
@@ -718,7 +735,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Check List"
         onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
       >
-        <img src="/images/icons/editor/check.svg" alt="icon-check" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 14.4 16">
+          <path d="M13.9 5.5a.5.5 0 0 1 .5.5v9a1.1 1.1 0 0 1-1.1 1H1a1.1 1.1 0 0 1-1-1V2.6a1.1 1.1 0 0 1 1-1h7.1a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5H1V15h12.3V6a.6.6 0 0 1 .6-.5zM3.6 8.3a.5.5 0 0 0 0 .7l2.5 2.5a.8.8 0 0 0 1.1 0h.1l7-10.7c.1-.2.1-.6-.2-.7a.5.5 0 0 0-.7.1L6.6 10.6 4.3 8.3a.5.5 0 0 0-.7 0z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-link"
@@ -726,7 +745,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Link"
         onClick={this.createReplaceSelectionHandler('[', ']()')}
       >
-        <img src="/images/icons/editor/link.svg" alt="icon-link" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 16 16">
+          <path d="M4.6 11.4l.4.2h.2v-.2l6.1-6.1a.4.4 0 0 0 .1-.3.5.5 0 0 0-.5-.5h-.3l-6 6.2a.6.6 0 0 0-.1.4c0 .1 0 .3.1.3zm2.8-1a2 2 0 0 1 0 1.1 4.1 4.1 0 0 1-.5.9l-2.1 1.9a1.9 1.9 0 0 1-1.5.7 2 2 0 0 1-1.6-.7 1.9 1.9 0 0 1-.7-1.5 2 2 0 0 1 .7-1.6l1.9-2.1a2 2 0 0 1 2.2-.5l.8-.8a3.2 3.2 0 0 0-1.4-.3 3.3 3.3 0 0 0-2.3.9L1 10.5A3.2 3.2 0 0 0 .9 15H1a2.9 2.9 0 0 0 2.3 1 3.2 3.2 0 0 0 2.3-1l2-1.9a4.6 4.6 0 0 0 .9-1.7 2.9 2.9 0 0 0-.3-1.8zM15 1a2.5 2.5 0 0 0-1-.8 3.1 3.1 0 0 0-3.5.8L8.4 2.9a3.1 3.1 0 0 0-.9 1.8 3.2 3.2 0 0 0 .3 1.9l.8-.8a2 2 0 0 1 0-1.1 2.2 2.2 0 0 1 .5-1.1l2.1-1.9.3-.3.4-.2.4-.2h.5a1.9 1.9 0 0 1 1.5.7 2 2 0 0 1 .7 1.6 1.9 1.9 0 0 1-.7 1.5l-2 2.1-.7.4a1.5 1.5 0 0 1-.9.2h-.4l-.8.8H12l1-.7 2-2.1A3 3 0 0 0 15 1z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-image"
@@ -734,7 +755,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Image"
         onClick={this.createReplaceSelectionHandler('![', ']()')}
       >
-        <img src="/images/icons/editor/picture.svg" alt="icon-picture" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 19 16">
+          <path d="M17.8 0H1.2A1.2 1.2 0 0 0 0 1.2v13.6A1.2 1.2 0 0 0 1.2 16h16.6a1.2 1.2 0 0 0 1.2-1.2V1.2a1.4 1.4 0 0 0-.2-.6.8.8 0 0 0-.4-.4zm0 14.8H1.2v-3.5l4.7-4.6 5 4.9.3.2.5-.2 2.1-1.9 3.9 4h.1v1.1zm0-2.8l-3.5-3.5-.4-.2h-.4l-2.2 2-4.9-4.8-.4-.2c-.2 0-.4 0-.5.2L1.2 9.7V1.2h16.6V12zm-4.2-6.1h.6a1.1 1.1 0 0 0 .6-1.1 1.2 1.2 0 0 0-1.2-1.1 1.3 1.3 0 0 0-1.2 1.2 1.2 1.2 0 0 0 .4.8 1.1 1.1 0 0 0 .8.3z" />
+        </svg>
       </Button>,
       <Button
         key="nav-item-table"
@@ -742,8 +765,11 @@ export default class CodeMirrorEditor extends AbstractEditor {
         title="Table"
         onClick={this.showHandsonTableHandler}
       >
-        <img src="/images/icons/editor/table.svg" alt="icon-table" height="13" />
+        <svg xmlns="http://www.w3.org/2000/svg" height="13" viewBox="0 0 20.3 16">
+          <path d="M19.1 16H1.2A1.2 1.2 0 0 1 0 14.8V1.2A1.2 1.2 0 0 1 1.2 0h17.9a1.2 1.2 0 0 1 1.2 1.2v13.6a1.2 1.2 0 0 1-1.2 1.2zm-5.2-4.3v3.2h5.3v-3.2zm-6.4 0v3.2h5.3v-3.2zm-6.4 0v3.2h5.3v-3.2zm12.8-4.2v3.2h5.3V7.5zm-6.4 0v3.2h5.3V7.5zm-6.4 0v3.2h5.3V7.5zm12.8-4.3v3.2h5.3V3.2zm-6.4 0v3.2h5.3V3.2zm-6.4 0v3.2h5.3V3.2z" />
+        </svg>
       </Button>,
+      /* eslint-able max-len */
     ];
   }
 

src/client/js/services/AdminAppContainer.js

@@ -0,0 +1,299 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+import { toastError } from '../util/apiNotification';
+
+const logger = loggerFactory('growi:appSettings');
+
+/**
+ * Service container for admin app setting page (AppSettings.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminAppContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      retrieveError: null,
+      title: '',
+      confidential: '',
+      globalLang: '',
+      fileUpload: '',
+      siteUrl: '',
+      envSiteUrl: '',
+      isSetSiteUrl: true,
+      fromAddress: '',
+      smtpHost: '',
+      smtpPort: '',
+      smtpUser: '',
+      smtpPassword: '',
+      region: '',
+      customEndpoint: '',
+      bucket: '',
+      accessKeyId: '',
+      secretKey: '',
+      isEnabledPlugins: true,
+    };
+
+    this.changeTitle = this.changeTitle.bind(this);
+    this.changeConfidential = this.changeConfidential.bind(this);
+    this.changeGlobalLang = this.changeGlobalLang.bind(this);
+    this.changeFileUpload = this.changeFileUpload.bind(this);
+    this.changeSiteUrl = this.changeSiteUrl.bind(this);
+    this.changeFromAddress = this.changeFromAddress.bind(this);
+    this.changeSmtpHost = this.changeSmtpHost.bind(this);
+    this.changeSmtpPort = this.changeSmtpPort.bind(this);
+    this.changeSmtpUser = this.changeSmtpUser.bind(this);
+    this.changeSmtpPassword = this.changeSmtpPassword.bind(this);
+    this.changeRegion = this.changeRegion.bind(this);
+    this.changeCustomEndpoint = this.changeCustomEndpoint.bind(this);
+    this.changeBucket = this.changeBucket.bind(this);
+    this.changeAccessKeyId = this.changeAccessKeyId.bind(this);
+    this.changeSecretKey = this.changeSecretKey.bind(this);
+    this.changeIsEnabledPlugins = this.changeIsEnabledPlugins.bind(this);
+    this.updateAppSettingHandler = this.updateAppSettingHandler.bind(this);
+    this.updateSiteUrlSettingHandler = this.updateSiteUrlSettingHandler.bind(this);
+    this.updateMailSettingHandler = this.updateMailSettingHandler.bind(this);
+    this.updateAwsSettingHandler = this.updateAwsSettingHandler.bind(this);
+    this.updatePluginSettingHandler = this.updatePluginSettingHandler.bind(this);
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'AdminAppContainer';
+  }
+
+  /**
+   * retrieve app sttings data
+   */
+  async retrieveAppSettingsData() {
+    try {
+      const response = await this.appContainer.apiv3.get('/app-settings/');
+      const { appSettingsParams } = response.data;
+
+      this.setState({
+        title: appSettingsParams.title,
+        confidential: appSettingsParams.confidential,
+        globalLang: appSettingsParams.globalLang,
+        fileUpload: appSettingsParams.fileUpload,
+        siteUrl: appSettingsParams.siteUrl,
+        envSiteUrl: appSettingsParams.envSiteUrl,
+        isSetSiteUrl: !!appSettingsParams.siteUrl,
+        fromAddress: appSettingsParams.fromAddress,
+        smtpHost: appSettingsParams.smtpHost,
+        smtpPort: appSettingsParams.smtpPort,
+        smtpUser: appSettingsParams.smtpUser,
+        smtpPassword: appSettingsParams.smtpPassword,
+        region: appSettingsParams.region,
+        customEndpoint: appSettingsParams.customEndpoint,
+        bucket: appSettingsParams.bucket,
+        accessKeyId: appSettingsParams.accessKeyId,
+        secretKey: appSettingsParams.secretKey,
+        isEnabledPlugins: appSettingsParams.isEnabledPlugins,
+      });
+
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(new Error('Failed to fetch data'));
+    }
+  }
+
+  /**
+   * Change title
+   */
+  changeTitle(title) {
+    this.setState({ title });
+  }
+
+  /**
+   * Change confidential
+   */
+  changeConfidential(confidential) {
+    this.setState({ confidential });
+  }
+
+  /**
+   * Change globalLang
+   */
+  changeGlobalLang(globalLang) {
+    this.setState({ globalLang });
+  }
+
+  /**
+   * Change fileUpload
+   */
+  changeFileUpload(fileUpload) {
+    this.setState({ fileUpload });
+  }
+
+  /**
+   * Change site url
+   */
+  changeSiteUrl(siteUrl) {
+    this.setState({ siteUrl });
+  }
+
+
+  /**
+   * Change from address
+   */
+  changeFromAddress(fromAddress) {
+    this.setState({ fromAddress });
+  }
+
+  /**
+   * Change smtp host
+   */
+  changeSmtpHost(smtpHost) {
+    this.setState({ smtpHost });
+  }
+
+  /**
+   * Change smtp port
+   */
+  changeSmtpPort(smtpPort) {
+    this.setState({ smtpPort });
+  }
+
+  /**
+   * Change smtp user
+   */
+  changeSmtpUser(smtpUser) {
+    this.setState({ smtpUser });
+  }
+
+  /**
+   * Change smtp password
+   */
+  changeSmtpPassword(smtpPassword) {
+    this.setState({ smtpPassword });
+  }
+
+  /**
+   * Change region
+   */
+  changeRegion(region) {
+    this.setState({ region });
+  }
+
+  /**
+   * Change custom endpoint
+   */
+  changeCustomEndpoint(customEndpoint) {
+    this.setState({ customEndpoint });
+  }
+
+  /**
+   * Change bucket name
+   */
+  changeBucket(bucket) {
+    this.setState({ bucket });
+  }
+
+  /**
+   * Change access key id
+   */
+  changeAccessKeyId(accessKeyId) {
+    this.setState({ accessKeyId });
+  }
+
+  /**
+   * Change secret key
+   */
+  changeSecretKey(secretKey) {
+    this.setState({ secretKey });
+  }
+
+  /**
+   * Change secret key
+   */
+  changeIsEnabledPlugins(isEnabledPlugins) {
+    this.setState({ isEnabledPlugins });
+  }
+
+  /**
+   * Update app setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateAppSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/app-setting', {
+      title: this.state.title,
+      confidential: this.state.confidential,
+      globalLang: this.state.globalLang,
+      fileUpload: this.state.fileUpload,
+    });
+    const { appSettingParams } = response.data;
+    return appSettingParams;
+  }
+
+
+  /**
+   * Update site url setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateSiteUrlSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/site-url-setting', {
+      siteUrl: this.state.siteUrl,
+    });
+    const { siteUrlSettingParams } = response.data;
+    return siteUrlSettingParams;
+  }
+
+  /**
+   * Update mail setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateMailSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/mail-setting', {
+      fromAddress: this.state.fromAddress,
+      smtpHost: this.state.smtpHost,
+      smtpPort: this.state.smtpPort,
+      smtpUser: this.state.smtpUser,
+      smtpPassword: this.state.smtpPassword,
+    });
+    const { mailSettingParams } = response.data;
+    return mailSettingParams;
+  }
+
+  /**
+   * Update AWS setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updateAwsSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/aws-setting', {
+      region: this.state.region,
+      customEndpoint: this.state.customEndpoint,
+      bucket: this.state.bucket,
+      accessKeyId: this.state.accessKeyId,
+      secretKey: this.state.secretKey,
+    });
+    const { awsSettingParams } = response.data;
+    return awsSettingParams;
+  }
+
+  /**
+   * Update plugin setting
+   * @memberOf AdminAppContainer
+   * @return {Array} Appearance
+   */
+  async updatePluginSettingHandler() {
+    const response = await this.appContainer.apiv3.put('/app-settings/plugin-setting', {
+      isEnabledPlugins: this.state.isEnabledPlugins,
+    });
+    const { pluginSettingParams } = response.data;
+    return pluginSettingParams;
+  }
+
+
+}

src/client/js/services/AdminCustomizeContainer.js

@@ -27,6 +27,7 @@ export default class AdminCustomizeContainer extends Container {
       isSavedStatesOfTabChanges: false,
       isEnabledAttachTitleHeader: false,
       currentRecentCreatedLimit: 10,
+      isEnabledStaleNotification: false,
       currentHighlightJsStyleId: '',
       isHighlightJsStyleBorderEnabled: false,
       currentCustomizeTitle: '',
@@ -74,6 +75,7 @@ export default class AdminCustomizeContainer extends Container {
         isSavedStatesOfTabChanges: customizeParams.isSavedStatesOfTabChanges,
         isEnabledAttachTitleHeader: customizeParams.isEnabledAttachTitleHeader,
         currentRecentCreatedLimit: customizeParams.recentCreatedLimit,
+        isEnabledStaleNotification: customizeParams.isEnabledStaleNotification,
         currentHighlightJsStyleId: customizeParams.styleName,
         isHighlightJsStyleBorderEnabled: customizeParams.styleBorder,
         currentCustomizeTitle: customizeParams.customizeTitle,
@@ -144,6 +146,13 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ currentRecentCreatedLimit: value });
   }
 
+  /**
+   * Switch enabledStaleNotification
+   */
+  switchEnableStaleNotification() {
+    this.setState({ isEnabledStaleNotification:  !this.state.isEnabledStaleNotification });
+  }
+
   /**
    * Switch highlightJsStyle
    */
@@ -228,6 +237,7 @@ export default class AdminCustomizeContainer extends Container {
       isSavedStatesOfTabChanges: this.state.isSavedStatesOfTabChanges,
       isEnabledAttachTitleHeader: this.state.isEnabledAttachTitleHeader,
       recentCreatedLimit: this.state.currentRecentCreatedLimit,
+      isEnabledStaleNotification: this.state.isEnabledStaleNotification,
     });
     const { customizedParams } = response.data;
     return customizedParams;

src/client/js/services/AdminMarkDownContainer.js

@@ -106,12 +106,16 @@ export default class AdminMarkDownContainer extends Container {
    * Update Xss Setting
    */
   async updateXssSetting() {
+    let { tagWhiteList, attrWhiteList } = this.state;
+
+    tagWhiteList = Array.isArray(tagWhiteList) ? tagWhiteList : tagWhiteList.split(',');
+    attrWhiteList = Array.isArray(attrWhiteList) ? attrWhiteList : attrWhiteList.split(',');
 
     const response = await this.appContainer.apiv3.put('/markdown-setting/xss', {
       isEnabledXss: this.state.isEnabledXss,
       xssOption: this.state.xssOption,
-      tagWhiteList: this.state.tagWhiteList,
-      attrWhiteList: this.state.attrWhiteList,
+      tagWhiteList,
+      attrWhiteList,
     });
 
     return response;

src/client/js/services/UserGroupDetailContainer.js

@@ -24,10 +24,15 @@ export default class UserGroupDetailContainer extends Container {
       userGroupRelations: [],
       relatedPages: [],
       isUserGroupUserModalOpen: false,
+      searchType: 'partial',
+      isAlsoMailSearched: false,
+      isAlsoNameSearched: false,
     };
 
     this.init();
 
+    this.switchIsAlsoMailSearched = this.switchIsAlsoMailSearched.bind(this);
+    this.switchIsAlsoNameSearched = this.switchIsAlsoNameSearched.bind(this);
     this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
     this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
     this.addUserByUsername = this.addUserByUsername.bind(this);
@@ -65,6 +70,27 @@ export default class UserGroupDetailContainer extends Container {
     }
   }
 
+  /**
+   * switch isAlsoMailSearched
+   */
+  switchIsAlsoMailSearched() {
+    this.setState({ isAlsoMailSearched: !this.state.isAlsoMailSearched });
+  }
+
+  /**
+   * switch isAlsoNameSearched
+   */
+  switchIsAlsoNameSearched() {
+    this.setState({ isAlsoNameSearched: !this.state.isAlsoNameSearched });
+  }
+
+  /**
+   * switch searchType
+   */
+  switchSearchType(searchType) {
+    this.setState({ searchType });
+  }
+
   /**
    * update user group
    *
@@ -99,6 +125,24 @@ export default class UserGroupDetailContainer extends Container {
     await this.setState({ isUserGroupUserModalOpen: false });
   }
 
+  /**
+   * search user for invitation
+   * @param {string} username username of the user to be searched
+   */
+  async fetchApplicableUsers(searchWord) {
+    const res = await this.appContainer.apiv3.get(`/user-groups/${this.state.userGroup._id}/unrelated-users`, {
+      searchWord,
+      searchType: this.state.searchType,
+      isAlsoMailSearched: this.state.isAlsoMailSearched,
+      isAlsoNameSearched: this.state.isAlsoNameSearched,
+    });
+
+    const { users } = res.data;
+
+    return users;
+  }
+
+
   /**
    * update user group
    *
@@ -107,6 +151,10 @@ export default class UserGroupDetailContainer extends Container {
    */
   async addUserByUsername(username) {
     const res = await this.appContainer.apiv3.post(`/user-groups/${this.state.userGroup._id}/users/${username}`);
+
+    // do not add users for ducaplicate
+    if (res.data.userGroupRelation == null) { return }
+
     const { userGroupRelation } = res.data;
 
     this.setState((prevState) => {

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

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

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

@@ -25,5 +25,9 @@ $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,3 +35,7 @@ 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,6 +73,10 @@ $bgcolor-inline-code: #0a121b;
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+.editor-container .navbar-editor svg {
+  fill: $bodytext;
+}
+
 /*
  * Tabs
  */

src/server/form/admin/app.js

@@ -1,10 +0,0 @@
-const form = require('express-form');
-
-const field = form.field;
-
-module.exports = form(
-  field('settingForm[app:title]').trim(),
-  field('settingForm[app:confidential]'),
-  field('settingForm[app:globalLang]'),
-  field('settingForm[app:fileUpload]').trim().toBooleanStrict(),
-);

src/server/form/admin/aws.js

@@ -1,11 +0,0 @@
-const form = require('express-form');
-
-const field = form.field;
-
-module.exports = form(
-  field('settingForm[aws:region]', 'リージョン').trim().is(/^[a-z]+-[a-z]+-\d+$/, 'リージョンには、AWSリージョン名を入力してください。 例: ap-northeast-1'),
-  field('settingForm[aws:customEndpoint]', 'カスタムエンドポイント').trim().is(/^(https?:\/\/[^/]+|)$/, 'カスタムエンドポイントは、http(s)://で始まるURLを指定してください。また、末尾の/は不要です。'),
-  field('settingForm[aws:bucket]', 'バケット名').trim(),
-  field('settingForm[aws:accessKeyId]', 'Access Key Id').trim().is(/^[\da-zA-Z]+$/),
-  field('settingForm[aws:secretAccessKey]', 'Secret Access Key').trim(),
-);

src/server/form/admin/customfeatures.js

@@ -8,4 +8,5 @@ module.exports = form(
   field('settingForm[customize:isSavedStatesOfTabChanges]').trim().toBooleanStrict(),
   field('settingForm[customize:isEnabledAttachTitleHeader]').trim().toBooleanStrict(),
   field('settingForm[customize:showRecentCreatedNumber]').trim().toInt(),
+  field('settingForm[customize:isEnabledStaleNotification]').trim().toBooleanStrict(),
 );

src/server/form/admin/mail.js

@@ -1,11 +0,0 @@
-const form = require('express-form');
-
-const field = form.field;
-
-module.exports = form(
-  field('settingForm[mail:from]', 'メールFrom').trim(),
-  field('settingForm[mail:smtpHost]', 'SMTPホスト').trim(),
-  field('settingForm[mail:smtpPort]', 'SMTPポート').trim().toInt(),
-  field('settingForm[mail:smtpUser]', 'SMTPユーザー').trim(),
-  field('settingForm[mail:smtpPassword]', 'SMTPパスワード').trim(),
-);

src/server/form/admin/plugin.js

@@ -1,7 +0,0 @@
-const form = require('express-form');
-
-const field = form.field;
-
-module.exports = form(
-  field('settingForm[plugin:isEnabledPlugins]').trim().toBooleanStrict(),
-);

src/server/form/admin/siteUrl.js

@@ -1,7 +0,0 @@
-const form = require('express-form');
-
-const field = form.field;
-
-module.exports = form(
-  field('settingForm[app:siteUrl]').trim().isUrl(),
-);

src/server/form/index.js

@@ -11,11 +11,6 @@ module.exports = {
     apiToken: require('./me/apiToken'),
   },
   admin: {
-    app: require('./admin/app'),
-    siteUrl: require('./admin/siteUrl'),
-    mail: require('./admin/mail'),
-    aws: require('./admin/aws'),
-    plugin: require('./admin/plugin'),
     securityGeneral: require('./admin/securityGeneral'),
     securityPassportLocal: require('./admin/securityPassportLocal'),
     securityPassportLdap: require('./admin/securityPassportLdap'),

src/server/models/config.js

@@ -102,6 +102,7 @@ module.exports = function(crowi) {
       'customize:isSavedStatesOfTabChanges' : true,
       'customize:isEnabledAttachTitleHeader' : false,
       'customize:showRecentCreatedNumber' : 10,
+      'customize:isEnabledStaleNotification': false,
 
       'importer:esa:team_name': undefined,
       'importer:esa:access_token': undefined,
@@ -201,6 +202,7 @@ module.exports = function(crowi) {
         NO_CDN: env.NO_CDN || null,
       },
       recentCreatedLimit: crowi.configManager.getConfig('crowi', 'customize:showRecentCreatedNumber'),
+      isEnabledStaleNotification: crowi.configManager.getConfig('crowi', 'customize:isEnabledStaleNotification'),
       isAclEnabled: crowi.aclService.isAclEnabled(),
       globalLang: crowi.configManager.getConfig('crowi', 'app:globalLang'),
     };

src/server/models/openapi/paginate-result.js

@@ -5,6 +5,7 @@
  *  components:
  *    schemas:
  *      PaginateResult:
+ *        description: PaginateResult
  *        type: object
  *        properties:
  *          docs:
@@ -45,4 +46,34 @@
  *          meta:
  *            type: number
  *            description: Object of pagination meta data (Default false).
+ *
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      V1PaginateResult:
+ *        description: Paginate result v1
+ *        type: object
+ *        properties:
+ *          meta:
+ *            type: object
+ *            properties:
+ *              total:
+ *                type: integer
+ *                description: Total number of documents in collection that match a query
+ *                example: 35
+ *              limit:
+ *                type: integer
+ *                description: Limit that was used
+ *                example: 10
+ *              offset:
+ *                type: integer
+ *                description: Only if specified or default page/offset values were used
+ *                example: 20
+ *          data:
+ *            type: object
+ *            description: Object of pagination meta data.
  */

src/server/models/openapi/v1-response.js

@@ -0,0 +1,19 @@
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      V1Response:
+ *        description: Response v1
+ *        type: object
+ *        properties:
+ *          ok:
+ *            type: boolean
+ *            description: API is succeeded
+ *            example: true
+ *    responses:
+ *      403:
+ *        description: 'Forbidden'
+ *      500:
+ *        description: 'Internal Server Error'
+ */

src/server/models/page.js

@@ -9,6 +9,7 @@ const urljoin = require('url-join');
 const mongoose = require('mongoose');
 const mongoosePaginate = require('mongoose-paginate-v2');
 const uniqueValidator = require('mongoose-unique-validator');
+const differenceInYears = require('date-fns/differenceInYears');
 
 const { pathUtils } = require('growi-commons');
 const templateChecker = require('@commons/util/template-checker');
@@ -488,6 +489,10 @@ module.exports = function(crowi) {
     }
   };
 
+  pageSchema.methods.getContentAge = function() {
+    return differenceInYears(new Date(), this.updatedAt);
+  };
+
 
   pageSchema.statics.updateCommentCount = function(pageId) {
     validateCrowi();

src/server/models/user-group-relation.js

@@ -194,15 +194,33 @@ class UserGroupRelation {
    * @returns {Promise<User>}
    * @memberof UserGroupRelation
    */
-  static findUserByNotRelatedGroup(userGroup) {
+  static findUserByNotRelatedGroup(userGroup, queryOptions) {
     const User = UserGroupRelation.crowi.model('User');
+    let searchWord = new RegExp(`${queryOptions.searchWord}`);
+    switch (queryOptions.searchType) {
+      case 'forward':
+        searchWord = new RegExp(`^${queryOptions.searchWord}`);
+        break;
+      case 'backword':
+        searchWord = new RegExp(`${queryOptions.searchWord}$`);
+        break;
+    }
+    const searthField = [
+      { username: searchWord },
+    ];
+    if (queryOptions.isAlsoMailSearched === 'true') { searthField.push({ email: searchWord }) }
+    if (queryOptions.isAlsoNameSearched === 'true') { searthField.push({ name: searchWord }) }
 
     return this.findAllRelationForUserGroup(userGroup)
       .then((relations) => {
         const relatedUserIds = relations.map((relation) => {
           return relation.relatedUser.id;
         });
-        const query = { _id: { $nin: relatedUserIds }, status: User.STATUS_ACTIVE };
+        const query = {
+          _id: { $nin: relatedUserIds },
+          status: User.STATUS_ACTIVE,
+          $or: searthField,
+        };
 
         debug('findUserByNotRelatedGroup ', query);
         return User.find(query).exec();
@@ -213,15 +231,15 @@ class UserGroupRelation {
    * get if the user has relation for group
    *
    * @static
-   * @param {User} userData
    * @param {UserGroup} userGroup
+   * @param {User} user
    * @returns {Promise<boolean>} is user related for group(or not)
    * @memberof UserGroupRelation
    */
-  static isRelatedUserForGroup(userData, userGroup) {
+  static isRelatedUserForGroup(userGroup, user) {
     const query = {
       relatedGroup: userGroup.id,
-      relatedUser: userData.id,
+      relatedUser: user.id,
     };
 
     return this

src/server/routes/admin.js

@@ -567,54 +567,6 @@ module.exports = function(crowi, app) {
   };
 
   actions.api = {};
-  actions.api.appSetting = async function(req, res) {
-    const form = req.form.settingForm;
-
-    if (req.form.isValid) {
-      debug('form content', form);
-
-      // mail setting ならここで validation
-      if (form['mail:from']) {
-        validateMailSetting(req, form, async(err, data) => {
-          debug('Error validate mail setting: ', err, data);
-          if (err) {
-            req.form.errors.push('SMTPを利用したテストメール送信に失敗しました。設定をみなおしてください。');
-            return res.json({ status: false, message: req.form.errors.join('\n') });
-          }
-
-          await configManager.updateConfigsInTheSameNamespace('crowi', form);
-          return res.json({ status: true });
-        });
-      }
-      else {
-        await configManager.updateConfigsInTheSameNamespace('crowi', form);
-        return res.json({ status: true });
-      }
-    }
-    else {
-      return res.json({ status: false, message: req.form.errors.join('\n') });
-    }
-  };
-
-  actions.api.asyncAppSetting = async(req, res) => {
-    const form = req.form.settingForm;
-
-    if (!req.form.isValid) {
-      return res.json({ status: false, message: req.form.errors.join('\n') });
-    }
-
-    debug('form content', form);
-
-    try {
-      await configManager.updateConfigsInTheSameNamespace('crowi', form);
-      return res.json({ status: true });
-    }
-    catch (err) {
-      logger.error(err);
-      return res.json({ status: false });
-    }
-  };
-
   actions.api.securitySetting = async function(req, res) {
     if (!req.form.isValid) {
       return res.json({ status: false, message: req.form.errors.join('\n') });
@@ -1063,33 +1015,6 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success());
   };
 
-  function validateMailSetting(req, form, callback) {
-    const mailer = crowi.mailer;
-    const option = {
-      host: form['mail:smtpHost'],
-      port: form['mail:smtpPort'],
-    };
-    if (form['mail:smtpUser'] && form['mail:smtpPassword']) {
-      option.auth = {
-        user: form['mail:smtpUser'],
-        pass: form['mail:smtpPassword'],
-      };
-    }
-    if (option.port === 465) {
-      option.secure = true;
-    }
-
-    const smtpClient = mailer.createSMTPClient(option);
-    debug('mailer setup for validate SMTP setting', smtpClient);
-
-    smtpClient.sendMail({
-      from: form['mail:from'],
-      to: req.user.email,
-      subject: 'Wiki管理設定のアップデートによるメール通知',
-      text: 'このメールは、WikiのSMTP設定のアップデートにより送信されています。',
-    }, callback);
-  }
-
   /**
    * validate setting form values for SAML
    *

src/server/routes/apiv3/app-settings.js

@@ -0,0 +1,479 @@
+const loggerFactory = require('@alias/logger');
+
+const logger = loggerFactory('growi:routes:apiv3:app-settings');
+
+const debug = require('debug')('growi:routes:admin');
+
+const express = require('express');
+
+const router = express.Router();
+
+const { body } = require('express-validator/check');
+const ErrorV3 = require('../../models/vo/error-apiv3');
+
+/**
+ * @swagger
+ *  tags:
+ *    name: AppSettings
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      AppSettingParams:
+ *        description: AppSettingParams
+ *        type: object
+ *        properties:
+ *          title:
+ *            type: string
+ *            description: site name show on page header and tilte of HTML
+ *          confidential:
+ *            type: string
+ *            description: confidential show on page header
+ *          globalLang:
+ *            type: string
+ *            description: language set when create user
+ *          fileUpload:
+ *            type: boolean
+ *            description: enable upload file except image file
+ *      SiteUrlSettingParams:
+ *        description: SiteUrlSettingParams
+ *        type: object
+ *        properties:
+ *          siteUrl:
+ *            type: string
+ *            description: Site URL. e.g. https://example.com, https://example.com:8080
+ *          envSiteUrl:
+ *            type: string
+ *            description: environment variable 'APP_SITE_URL'
+ *      MailSettingParams:
+ *        description: MailSettingParams
+ *        type: object
+ *        properties:
+ *          fromAddress:
+ *            type: string
+ *            description: e-mail address used as from address of mail which sent from GROWI app
+ *          smtpHost:
+ *            type: string
+ *            description: host name of client's smtp server
+ *          smtpPort:
+ *            type: string
+ *            description: port of client's smtp server
+ *          smtpUser:
+ *            type: string
+ *            description: user name of client's smtp server
+ *          smtpPassword:
+ *            type: string
+ *            description: password of client's smtp server
+ *      AwsSettingParams:
+ *        description: AwsSettingParams
+ *        type: object
+ *        properties:
+ *          region:
+ *            type: string
+ *            description: region of AWS S3
+ *          customEndpoint:
+ *            type: string
+ *            description: custom endpoint of AWS S3
+ *          bucket:
+ *            type: string
+ *            description: AWS S3 bucket name
+ *          accessKeyId:
+ *            type: string
+ *            description: accesskey id for authentification of AWS
+ *          secretKey:
+ *            type: string
+ *            description: secret key for authentification of AWS
+ *      PluginSettingParams:
+ *        description: PluginSettingParams
+ *        type: object
+ *        properties:
+ *          isEnabledPlugins:
+ *            type: string
+ *            description: enable use plugins
+ */
+
+module.exports = (crowi) => {
+  const accessTokenParser = require('../../middleware/access-token-parser')(crowi);
+  const loginRequired = require('../../middleware/login-required')(crowi);
+  const loginRequiredStrictly = require('../../middleware/login-required')(crowi);
+  const adminRequired = require('../../middleware/admin-required')(crowi);
+  const csrf = require('../../middleware/csrf')(crowi);
+
+  const { ApiV3FormValidator } = crowi.middlewares;
+
+  const validator = {
+    appSetting: [
+      body('title').trim(),
+      body('confidential'),
+      body('globalLang').isIn(['en-US', 'ja']),
+      body('fileUpload').isBoolean(),
+    ],
+    siteUrlSetting: [
+      body('siteUrl').trim().matches(/^(https?:\/\/[^/]+|)$/).isURL({ require_tld: false }),
+    ],
+    mailSetting: [
+      body('fromAddress').trim().isEmail(),
+      body('smtpHost').trim(),
+      body('smtpPort').trim().isPort(),
+      body('smtpUser').trim(),
+      body('smtpPassword').trim(),
+    ],
+    awsSetting: [
+      body('region').trim().matches(/^[a-z]+-[a-z]+-\d+$/).withMessage('リージョンには、AWSリージョン名を入力してください。 例: ap-northeast-1'),
+      body('customEndpoint').trim().matches(/^(https?:\/\/[^/]+|)$/).withMessage('カスタムエンドポイントは、http(s)://で始まるURLを指定してください。また、末尾の/は不要です。'),
+      body('bucket').trim(),
+      body('accessKeyId').trim().matches(/^[\da-zA-Z]+$/),
+      body('secretKey').trim(),
+    ],
+    pluginSetting: [
+      body('isEnabledPlugins').isBoolean(),
+    ],
+  };
+
+  /**
+   * @swagger
+   *
+   *    /_api/v3/app-settings:
+   *      get:
+   *        tags: [AppSettings, apiv3]
+   *        operationId: getAppSettings
+   *        summary: /_api/v3/app-settings
+   *        description: get app setting params
+   *        responses:
+   *          200:
+   *            description: Resources are available
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    appSettingsParams:
+   *                      type: object
+   *                      description: app settings params
+   */
+  router.get('/', accessTokenParser, loginRequired, adminRequired, async(req, res) => {
+    const appSettingsParams = {
+      title: crowi.configManager.getConfig('crowi', 'app:title'),
+      confidential: crowi.configManager.getConfig('crowi', 'app:confidential'),
+      globalLang: crowi.configManager.getConfig('crowi', 'app:globalLang'),
+      fileUpload: crowi.configManager.getConfig('crowi', 'app:fileUpload'),
+      siteUrl: crowi.configManager.getConfig('crowi', 'app:siteUrl'),
+      envSiteUrl: crowi.configManager.getConfigFromEnvVars('crowi', 'app:siteUrl'),
+      fromAddress: crowi.configManager.getConfig('crowi', 'mail:from'),
+      smtpHost: crowi.configManager.getConfig('crowi', 'mail:smtpHost'),
+      smtpPort: crowi.configManager.getConfig('crowi', 'mail:smtpPort'),
+      smtpUser: crowi.configManager.getConfig('crowi', 'mail:smtpUser'),
+      smtpPassword: crowi.configManager.getConfig('crowi', 'mail:smtpPassword'),
+      region: crowi.configManager.getConfig('crowi', 'aws:region'),
+      customEndpoint: crowi.configManager.getConfig('crowi', 'aws:customEndpoint'),
+      bucket: crowi.configManager.getConfig('crowi', 'aws:bucket'),
+      accessKeyId: crowi.configManager.getConfig('crowi', 'aws:accessKeyId'),
+      secretKey: crowi.configManager.getConfig('crowi', 'aws:secretKey'),
+      isEnabledPlugins: crowi.configManager.getConfig('crowi', 'plugin:isEnabledPlugins'),
+    };
+    return res.apiv3({ appSettingsParams });
+
+  });
+
+
+  /**
+   * @swagger
+   *
+   *    /_api/v3/app-settings/app-setting:
+   *      put:
+   *        tags: [AppSettings, apiv3]
+   *        summary: /_api/v3/app-settings/app-setting
+   *        operationId: updateAppSettings
+   *        description: Update app setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/AppSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update app setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/AppSettingParams'
+   */
+  router.put('/app-setting', loginRequiredStrictly, adminRequired, csrf, validator.appSetting, ApiV3FormValidator, async(req, res) => {
+    const requestAppSettingParams = {
+      'app:title': req.body.title,
+      'app:confidential': req.body.confidential,
+      'app:globalLang': req.body.globalLang,
+      'app:fileUpload': req.body.fileUpload,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestAppSettingParams);
+      const appSettingParams = {
+        title: crowi.configManager.getConfig('crowi', 'app:title'),
+        confidential: crowi.configManager.getConfig('crowi', 'app:confidential'),
+        globalLang: crowi.configManager.getConfig('crowi', 'app:globalLang'),
+        fileUpload: crowi.configManager.getConfig('crowi', 'app:fileUpload'),
+      };
+      return res.apiv3({ appSettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating app setting';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-appSetting-failed'));
+    }
+
+  });
+
+  /**
+   * @swagger
+   *
+   *    /_api/v3/app-settings/site-url-setting:
+   *      put:
+   *        tags: [AppSettings, apiv3]
+   *        operationId: updateAppSettingSiteUrlSetting
+   *        summary: /_api/v3/app-settings/site-url-setting
+   *        description: Update site url setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/SiteUrlSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update site url setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/SiteUrlSettingParams'
+   */
+  router.put('/site-url-setting', loginRequiredStrictly, adminRequired, csrf, validator.siteUrlSetting, ApiV3FormValidator, async(req, res) => {
+
+    const requestSiteUrlSettingParams = {
+      'app:siteUrl': req.body.siteUrl,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestSiteUrlSettingParams);
+      const siteUrlSettingParams = {
+        siteUrl: crowi.configManager.getConfig('crowi', 'app:siteUrl'),
+      };
+      return res.apiv3({ siteUrlSettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating site url setting';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-siteUrlSetting-failed'));
+    }
+
+  });
+
+  /**
+   * send mail (Promise wrapper)
+   */
+  async function sendMailPromiseWrapper(smtpClient, options) {
+    return new Promise((resolve, reject) => {
+      smtpClient.sendMail(options, (err, res) => {
+        if (err) {
+          reject(err);
+        }
+        else {
+          resolve(res);
+        }
+      });
+    });
+  }
+
+  /**
+   * validate mail setting send test mail
+   */
+  async function validateMailSetting(req) {
+    const mailer = crowi.mailer;
+    const option = {
+      host: req.body.smtpHost,
+      port: req.body.smtpPort,
+    };
+    if (req.body.smtpUser && req.body.smtpPassword) {
+      option.auth = {
+        user: req.body.smtpUser,
+        pass: req.body.smtpPassword,
+      };
+    }
+    if (option.port === 465) {
+      option.secure = true;
+    }
+
+    const smtpClient = mailer.createSMTPClient(option);
+    debug('mailer setup for validate SMTP setting', smtpClient);
+
+    const mailOptions = {
+      from: req.body.fromAddress,
+      to: req.user.email,
+      subject: 'Wiki管理設定のアップデートによるメール通知',
+      text: 'このメールは、WikiのSMTP設定のアップデートにより送信されています。',
+    };
+
+    await sendMailPromiseWrapper(smtpClient, mailOptions);
+  }
+
+  /**
+   * @swagger
+   *
+   *    /_api/v3/app-settings/mail-setting:
+   *      put:
+   *        tags: [AppSettings, apiv3]
+   *        operationId: updateAppSettingMailSetting
+   *        summary: /_api/v3/app-settings/site-url-setting
+   *        description: Update mail setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/MailSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update mail setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/MailSettingParams'
+   */
+  router.put('/mail-setting', loginRequiredStrictly, adminRequired, csrf, validator.mailSetting, ApiV3FormValidator, async(req, res) => {
+    // テストメール送信によるバリデート
+    try {
+      await validateMailSetting(req);
+    }
+    catch (err) {
+      const msg = 'SMTPを利用したテストメール送信に失敗しました。設定をみなおしてください。';
+      logger.error('Error', err);
+      debug('Error validate mail setting: ', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-mailSetting-failed'));
+    }
+
+
+    const requestMailSettingParams = {
+      'mail:from': req.body.fromAddress,
+      'mail:smtpHost': req.body.smtpHost,
+      'mail:smtpPort': req.body.smtpPort,
+      'mail:smtpUser': req.body.smtpUser,
+      'mail:smtpPassword': req.body.smtpPassword,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestMailSettingParams);
+      const mailSettingParams = {
+        fromAddress: crowi.configManager.getConfig('crowi', 'mail:from'),
+        smtpHost: crowi.configManager.getConfig('crowi', 'mail:smtpHost'),
+        smtpPort: crowi.configManager.getConfig('crowi', 'mail:smtpPort'),
+        smtpUser: crowi.configManager.getConfig('crowi', 'mail:smtpUser'),
+        smtpPassword: crowi.configManager.getConfig('crowi', 'mail:smtpPassword'),
+      };
+      return res.apiv3({ mailSettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating mail setting';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-mailSetting-failed'));
+    }
+  });
+
+  /**
+   * @swagger
+   *
+   *    /_api/v3/app-settings/aws-setting:
+   *      put:
+   *        tags: [AppSettings, apiv3]
+   *        operationId: updateAppSettingAwsSetting
+   *        summary: /_api/v3/app-settings/aws-setting
+   *        description: Update aws setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/AwsSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update aws setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/AwsSettingParams'
+   */
+  router.put('/aws-setting', loginRequiredStrictly, adminRequired, csrf, validator.awsSetting, ApiV3FormValidator, async(req, res) => {
+    const requestAwsSettingParams = {
+      'aws:region': req.body.region,
+      'aws:customEndpoint': req.body.customEndpoint,
+      'aws:bucket': req.body.bucket,
+      'aws:accessKeyId': req.body.accessKeyId,
+      'aws:secretKey': req.body.secretKey,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestAwsSettingParams);
+      const awsSettingParams = {
+        region: crowi.configManager.getConfig('crowi', 'aws:region'),
+        customEndpoint: crowi.configManager.getConfig('crowi', 'aws:customEndpoint'),
+        bucket: crowi.configManager.getConfig('crowi', 'aws:bucket'),
+        accessKeyId: crowi.configManager.getConfig('crowi', 'aws:accessKeyId'),
+        secretKey: crowi.configManager.getConfig('crowi', 'aws:secretKey'),
+      };
+      return res.apiv3({ awsSettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating aws setting';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-awsSetting-failed'));
+    }
+
+  });
+
+  /**
+   * @swagger
+   *
+   *    /_api/v3/app-settings/plugin-setting:
+   *      put:
+   *        tags: [AppSettings, apiv3]
+   *        operationId: updateAppSettingPluginSetting
+   *        summary: /_api/v3/app-settings/plugin-setting
+   *        description: Update plugin setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/PluginSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update plugin setting
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/PluginSettingParams'
+   */
+  router.put('/plugin-setting', loginRequiredStrictly, adminRequired, csrf, validator.pluginSetting, ApiV3FormValidator, async(req, res) => {
+    const requestPluginSettingParams = {
+      'plugin:isEnabledPlugins': req.body.isEnabledPlugins,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestPluginSettingParams);
+      const pluginSettingParams = {
+        isEnabledPlugins: crowi.configManager.getConfig('crowi', 'plugin:isEnabledPlugins'),
+      };
+      return res.apiv3({ pluginSettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating plugin setting';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-pluginSetting-failed'));
+    }
+
+  });
+
+  return router;
+};

src/server/routes/apiv3/customize-setting.js

@@ -22,6 +22,7 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *  components:
  *    schemas:
  *      CustomizeLayoutTheme:
+ *        description: CustomizeLayoutTheme
  *        type: object
  *        properties:
  *          layoutType:
@@ -29,11 +30,13 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *          themeType:
  *            type: string
  *      CustomizeBehavior:
+ *        description: CustomizeBehavior
  *        type: object
  *        properties:
  *          behaviorType:
  *            type: string
  *      CustomizeFunction:
+ *        description: CustomizeFunction
  *        type: object
  *        properties:
  *          isEnabledTimeline:
@@ -44,7 +47,10 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *            type: boolean
  *          recentCreatedLimit:
  *            type: number
+ *          isEnabledStaleNotification:
+ *            type: boolean
  *      CustomizeHighlight:
+ *        description: CustomizeHighlight
  *        type: object
  *        properties:
  *          styleName:
@@ -52,21 +58,25 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *          styleBorder:
  *            type: boolean
  *      CustomizeTitle:
+ *        description: CustomizeTitle
  *        type: object
  *        properties:
  *          customizeTitle:
  *            type: string
  *      CustomizeHeader:
+ *        description: CustomizeHeader
  *        type: object
  *        properties:
  *          customizeHeader:
  *            type: string
  *      CustomizeCss:
+ *        description: CustomizeCss
  *        type: object
  *        properties:
  *          customizeCss:
  *            type: string
  *      CustomizeScript:
+ *        description: CustomizeScript
  *        type: object
  *        properties:
  *          customizeScript:
@@ -96,6 +106,7 @@ module.exports = (crowi) => {
       body('isSavedStatesOfTabChanges').isBoolean(),
       body('isEnabledAttachTitleHeader').isBoolean(),
       body('recentCreatedLimit').isInt().isInt({ min: 1, max: 1000 }),
+      body('isEnabledStaleNotification').isBoolean(),
     ],
     customizeTitle: [
       body('customizeTitle').isString(),
@@ -120,9 +131,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/:
+   *    /_api/v3/customize-setting:
    *      get:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: getCustomizeSetting
+   *        summary: /_api/v3/customize-setting
    *        description: Get customize paramators
    *        responses:
    *          200:
@@ -145,6 +158,7 @@ module.exports = (crowi) => {
       isSavedStatesOfTabChanges: await crowi.configManager.getConfig('crowi', 'customize:isSavedStatesOfTabChanges'),
       isEnabledAttachTitleHeader: await crowi.configManager.getConfig('crowi', 'customize:isEnabledAttachTitleHeader'),
       recentCreatedLimit: await crowi.configManager.getConfig('crowi', 'customize:showRecentCreatedNumber'),
+      isEnabledStaleNotification: await crowi.configManager.getConfig('crowi', 'customize:isEnabledStaleNotification'),
       styleName: await crowi.configManager.getConfig('crowi', 'customize:highlightJsStyle'),
       styleBorder: await crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
       customizeTitle: await crowi.configManager.getConfig('crowi', 'customize:title'),
@@ -159,23 +173,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/layoutTheme:
+   *    /_api/v3/customize-setting/layoutTheme:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateLayoutThemeCustomizeSetting
+   *        summary: /_api/v3/customize-setting/layoutTheme
    *        description: Update layout and theme
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeLayoutTheme'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update layout and theme
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeLayoutTheme'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update layout and theme
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeLayoutTheme'
    */
   router.put('/layoutTheme', loginRequiredStrictly, adminRequired, csrf, validator.layoutTheme, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -201,23 +217,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/behavior:
+   *    /_api/v3/customize-setting/behavior:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateBehaviorCustomizeSetting
+   *        summary: /_api/v3/customize-setting/behavior
    *        description: Update behavior
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeBehavior'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update behavior
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeBehavior'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update behavior
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeBehavior'
    */
   router.put('/behavior', loginRequiredStrictly, adminRequired, csrf, validator.behavior, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -241,23 +259,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/function:
+   *    /_api/v3/customize-setting/function:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateFunctionCustomizeSetting
+   *        summary: /_api/v3/customize-setting/function
    *        description: Update function
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeFunction'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update function
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeFunction'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update function
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeFunction'
    */
   router.put('/function', loginRequiredStrictly, adminRequired, csrf, validator.function, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -265,6 +285,7 @@ module.exports = (crowi) => {
       'customize:isSavedStatesOfTabChanges': req.body.isSavedStatesOfTabChanges,
       'customize:isEnabledAttachTitleHeader': req.body.isEnabledAttachTitleHeader,
       'customize:showRecentCreatedNumber': req.body.recentCreatedLimit,
+      'customize:isEnabledStaleNotification': req.body.isEnabledStaleNotification,
     };
 
     try {
@@ -274,6 +295,7 @@ module.exports = (crowi) => {
         isSavedStatesOfTabChanges: await crowi.configManager.getConfig('crowi', 'customize:isSavedStatesOfTabChanges'),
         isEnabledAttachTitleHeader: await crowi.configManager.getConfig('crowi', 'customize:isEnabledAttachTitleHeader'),
         recentCreatedLimit: await crowi.configManager.getConfig('crowi', 'customize:showRecentCreatedNumber'),
+        isEnabledStaleNotification: await crowi.configManager.getConfig('crowi', 'customize:isEnabledStaleNotification'),
       };
       return res.apiv3({ customizedParams });
     }
@@ -287,23 +309,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/highlight:
+   *    /_api/v3/customize-setting/highlight:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateHighlightCustomizeSetting
+   *        summary: /_api/v3/customize-setting/highlight
    *        description: Update highlight
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeHighlight'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update highlight
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeHighlight'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update highlight
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeHighlight'
    */
   router.put('/highlight', loginRequiredStrictly, adminRequired, csrf, validator.highlight, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -329,9 +353,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/customizeTitle:
+   *    /_api/v3/customize-setting/customizeTitle:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateCustomizeTitleCustomizeSetting
+   *        summary: /_api/v3/customize-setting/customizeTitle
    *        description: Update customizeTitle
    *        requestBody:
    *          required: true
@@ -339,13 +365,13 @@ module.exports = (crowi) => {
    *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeTitle'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update customizeTitle
-   *          content:
-   *            application/json:
-   *              schema:
-   *                $ref: '#/components/schemas/CustomizeTitle'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update customizeTitle
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeTitle'
    */
   router.put('/customize-title', loginRequiredStrictly, adminRequired, csrf, validator.customizeTitle, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -370,23 +396,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/customizeHeader:
+   *    /_api/v3/customize-setting/customizeHeader:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateCustomizeHeaderCustomizeSetting
+   *        summary: /_api/v3/customize-setting/customizeHeader
    *        description: Update customizeHeader
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeHeader'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update customize header
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeHeader'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update customize header
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeHeader'
    */
   router.put('/customize-header', loginRequiredStrictly, adminRequired, csrf, validator.customizeHeader, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -409,23 +437,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/customizeCss:
+   *    /_api/v3/customize-setting/customizeCss:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateCustomizeCssCustomizeSetting
+   *        summary: /_api/v3/customize-setting/customizeCss
    *        description: Update customizeCss
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeCss'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update customize css
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeCss'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update customize css
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeCss'
    */
   router.put('/customize-css', loginRequiredStrictly, adminRequired, csrf, validator.customizeCss, ApiV3FormValidator, async(req, res) => {
     const requestParams = {
@@ -449,23 +479,25 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/customizeScript:
+   *    /_api/v3/customize-setting/customizeScript:
    *      put:
-   *        tags: [CustomizeSetting]
+   *        tags: [CustomizeSetting, apiv3]
+   *        operationId: updateCustomizeScriptCustomizeSetting
+   *        summary: /_api/v3/customize-setting/customizeScript
    *        description: Update customizeScript
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
-   *              schama:
-   *                $ref: '#/components/schemas/CustomizeScript'
-   *      responses:
-   *        200:
-   *          description: Succeeded to update customize script
-   *          content:
-   *            application/json:
    *              schema:
    *                $ref: '#/components/schemas/CustomizeScript'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update customize script
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/CustomizeScript'
    */
   router.put('/customize-script', loginRequiredStrictly, adminRequired, csrf, validator.customizeScript, ApiV3FormValidator, async(req, res) => {
     const requestParams = {

src/server/routes/apiv3/export.js

@@ -19,6 +19,7 @@ const router = express.Router();
  *  components:
  *    schemas:
  *      ExportStatus:
+ *        description: ExportStatus
  *        type: object
  *        properties:
  *          zipFileStats:
@@ -61,9 +62,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /export/status:
+   *  /_api/v3/export/status:
    *    get:
-   *      tags: [Export]
+   *      tags: [Export, apiv3]
+   *      operationId: getExportStatus
+   *      summary: /_api/v3/export/status
    *      description: get properties of stored zip files for export
    *      responses:
    *        200:
@@ -88,9 +91,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /export:
+   *  /_api/v3/export:
    *    post:
-   *      tags: [Export]
+   *      tags: [Export, apiv3]
+   *      operationId: createExport
+   *      summary: /_api/v3/export
    *      description: generate zipped jsons for collections
    *      responses:
    *        200:
@@ -124,9 +129,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /export/{fileName}:
+   *  /_api/v3/export/{fileName}:
    *    delete:
-   *      tags: [Export]
+   *      tags: [Export, apiv3]
+   *      operationId: deleteExport
+   *      summary: /_api/v3/export/{fileName}
    *      description: delete the file
    *      parameters:
    *        - name: fileName

src/server/routes/apiv3/healthcheck.js

@@ -18,9 +18,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /healthcheck:
+   *  /_api/v3/healthcheck:
    *    get:
-   *      tags: [Healthcheck]
+   *      tags: [Healthcheck, apiv3]
+   *      operationId: getHealthcheck
+   *      summary: /_api/v3/healthcheck
    *      description: Check whether the server is healthy or not
    *      parameters:
    *        - name: connectToMiddlewares

src/server/routes/apiv3/import.js

@@ -24,6 +24,7 @@ const router = express.Router();
  *  components:
  *    schemas:
  *      ImportStatus:
+ *        description: ImportStatus
  *        type: object
  *        properties:
  *          zipFileStat:
@@ -100,9 +101,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /import/status:
+   *  /_api/v3/import/status:
    *    get:
-   *      tags: [Import]
+   *      tags: [Import, apiv3]
+   *      operationId: getImportStatus
+   *      summary: /_api/v3/import/status
    *      description: Get properties of stored zip files for import
    *      responses:
    *        200:
@@ -127,9 +130,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /import:
+   *  /_api/v3/import:
    *    post:
-   *      tags: [Import]
+   *      tags: [Import, apiv3]
+   *      operationId: executeImport
+   *      summary: /_api/v3/import
    *      description: import a collection from a zipped json
    *      requestBody:
    *        required: true
@@ -236,9 +241,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /import/upload:
+   *  /_api/v3/import/upload:
    *    post:
-   *      tags: [Import]
+   *      tags: [Import, apiv3]
+   *      operationId: uploadImport
+   *      summary: /_api/v3/import/upload
    *      description: upload a zip file
    *      responses:
    *        200:
@@ -281,9 +288,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /import/all:
+   *  /_api/v3/import/all:
    *    delete:
-   *      tags: [Import]
+   *      tags: [Import, apiv3]
+   *      operationId: deleteImportAll
+   *      summary: /_api/v3/import/all
    *      description: Delete all zip files
    *      responses:
    *        200:

src/server/routes/apiv3/index.js

@@ -15,6 +15,8 @@ module.exports = (crowi) => {
 
   router.use('/markdown-setting', require('./markdown-setting')(crowi));
 
+  router.use('/app-settings', require('./app-settings')(crowi));
+
   router.use('/customize-setting', require('./customize-setting')(crowi));
 
   router.use('/users', require('./users')(crowi));

src/server/routes/apiv3/markdown-setting.js

@@ -21,8 +21,8 @@ const validator = {
   ],
   xssSetting: [
     body('isEnabledXss').isBoolean(),
-    body('tagWhiteList').toArray(),
-    body('attrWhiteList').toArray(),
+    body('tagWhiteList').isArray(),
+    body('attrWhiteList').isArray(),
   ],
 };
 
@@ -39,6 +39,7 @@ const validator = {
  *  components:
  *    schemas:
  *      LineBreakParams:
+ *        description: LineBreakParams
  *        type: object
  *        properties:
  *          isEnabledLinebreaks:
@@ -48,6 +49,7 @@ const validator = {
  *            type: boolean
  *            description: enable lineBreak in comment
  *      PresentationParams:
+ *        description: PresentationParams
  *        type: object
  *        properties:
  *          pageBreakSeparator:
@@ -57,6 +59,7 @@ const validator = {
  *            type: string
  *            description: string of pageBreakCustomSeparator
  *      XssParams:
+ *        description: XssParams
  *        type: object
  *        properties:
  *          isEnabledPrevention:
@@ -89,9 +92,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /markdown-setting/:
+   *    /_api/v3/markdown-setting:
    *      get:
-   *        tags: [MarkDownSettind]
+   *        tags: [MarkDownSetting, apiv3]
+   *        operationId: getMarkdownSetting
+   *        summary: /_api/v3/markdown-setting
    *        description: Get markdown paramators
    *        responses:
    *          200:
@@ -122,9 +127,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /markdown-setting/lineBreak:
+   *    /_api/v3/markdown-setting/lineBreak:
    *      put:
-   *        tags: [MarkDownSetting]
+   *        tags: [MarkDownSetting, apiv3]
+   *        operationId: updateLineBreakMarkdownSetting
+   *        summary: /_api/v3/markdown-setting/lineBreak
    *        description: Update lineBreak setting
    *        requestBody:
    *          required: true
@@ -166,9 +173,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /markdown-setting/presentation:
+   *    /_api/v3/markdown-setting/presentation:
    *      put:
-   *        tags: [MarkDownSetting]
+   *        tags: [MarkDownSetting, apiv3]
+   *        operationId: updatePresentationMarkdownSetting
+   *        summary: /_api/v3/markdown-setting/presentation
    *        description: Update presentation
    *        requestBody:
    *          required: true
@@ -213,9 +222,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /markdown-setting/xss:
+   *    /_api/v3/markdown-setting/xss:
    *      put:
-   *        tags: [MarkDownSetting]
+   *        tags: [MarkDownSetting, apiv3]
+   *        operationId: updateXssMarkdownSetting
+   *        summary: /_api/v3/markdown-setting/xss
    *        description: Update xss
    *        requestBody:
    *          required: true

src/server/routes/apiv3/mongo.js

@@ -17,9 +17,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /mongo/collections:
+   *  /_api/v3/mongo/collections:
    *    get:
-   *      tags: [Mongo]
+   *      tags: [Mongo, apiv3]
+   *      operationId: getMongoCollections
+   *      summary: /_api/v3/mongo/collections
    *      description: get mongodb collections names
    *      responses:
    *        200:

src/server/routes/apiv3/statistics.js

@@ -83,9 +83,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *  /statistics/user:
+   *  /_api/v3/statistics/user:
    *    get:
-   *      tags: [Statistics]
+   *      tags: [Statistics, apiv3]
+   *      operationId: getStatisticsUser
+   *      summary: /_api/v3/statistics/user
    *      description: Get statistics for user
    *      responses:
    *        200:

src/server/routes/apiv3/user-group-relation.js

@@ -23,9 +23,11 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *  paths:
-   *    /user-group-relations:
+   *    /_api/v3/user-group-relations:
    *      get:
-   *        tags: [UserGroupRelation]
+   *        tags: [UserGroupRelation, apiv3]
+   *        operationId: listUserGroupRelations
+   *        summary: /_api/v3/user-group-relations
    *        description: Gets the user group relations
    *        responses:
    *          200:

src/server/routes/apiv3/user-group.js

@@ -43,9 +43,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups:
+   *    /_api/v3/user-groups:
    *      get:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: getUserGroup
+   *        summary: /_api/v3/user-groups
    *        description: Get usergroups
    *        responses:
    *          200:
@@ -81,9 +83,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups:
+   *    /_api/v3/user-groups:
    *      post:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: createUserGroup
+   *        summary: /_api/v3/user-groups
    *        description: Adds userGroup
    *        requestBody:
    *          required: true
@@ -131,9 +135,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}:
+   *    /_api/v3/user-groups/{id}:
    *      delete:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: deleteUserGroup
+   *        summary: /_api/v3/user-groups/{id}
    *        description: Deletes userGroup
    *        parameters:
    *          - name: id
@@ -191,9 +197,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}:
+   *    /_api/v3/user-groups/{id}:
    *      put:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: updateUserGroups
+   *        summary: /_api/v3/user-groups/{id}
    *        description: Update userGroup
    *        parameters:
    *          - name: id
@@ -246,9 +254,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}/users:
+   *    /_api/v3/user-groups/{id}/users:
    *      get:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: getUsersUserGroups
+   *        summary: /_api/v3/user-groups/{id}/users
    *        description: Get users related to the userGroup
    *        parameters:
    *          - name: id
@@ -294,9 +304,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}/unrelated-users:
+   *    /_api/v3/user-groups/{id}/unrelated-users:
    *      get:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: getUnrelatedUsersUserGroups
+   *        summary: /_api/v3/user-groups/{id}/unrelated-users
    *        description: Get users unrelated to the userGroup
    *        parameters:
    *          - name: id
@@ -320,10 +332,17 @@ module.exports = (crowi) => {
    */
   router.get('/:id/unrelated-users', loginRequiredStrictly, adminRequired, async(req, res) => {
     const { id } = req.params;
+    const {
+      searchWord, searchType, isAlsoNameSearched, isAlsoMailSearched,
+    } = req.query;
+
+    const queryOptions = {
+      searchWord, searchType, isAlsoNameSearched, isAlsoMailSearched,
+    };
 
     try {
       const userGroup = await UserGroup.findById(id);
-      const users = await UserGroupRelation.findUserByNotRelatedGroup(userGroup);
+      const users = await UserGroupRelation.findUserByNotRelatedGroup(userGroup, queryOptions);
 
       return res.apiv3({ users });
     }
@@ -343,9 +362,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}/users:
+   *    /_api/v3/user-groups/{id}/users:
    *      post:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: addUserUserGroups
+   *        summary: /_api/v3/user-groups/{id}/users
    *        description: Add a user to the userGroup
    *        parameters:
    *          - name: id
@@ -381,6 +402,14 @@ module.exports = (crowi) => {
         User.findUserByUsername(username),
       ]);
 
+      // check for duplicate users in groups
+      const isRelatedUserForGroup = await UserGroupRelation.isRelatedUserForGroup(userGroup, user);
+
+      if (isRelatedUserForGroup) {
+        logger.warn('The user is already joined');
+        return res.apiv3();
+      }
+
       const userGroupRelation = await UserGroupRelation.createRelation(userGroup, user);
       await userGroupRelation.populate('relatedUser', User.USER_PUBLIC_FIELDS).execPopulate();
 
@@ -402,9 +431,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}/users:
+   *    /_api/v3/user-groups/{id}/users:
    *      delete:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: deleteUsersUserGroups
+   *        summary: /_api/v3/user-groups/{id}/users
    *        description: remove a user from the userGroup
    *        parameters:
    *          - name: id
@@ -462,9 +493,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}/user-group-relations:
+   *    /_api/v3/user-groups/{id}/user-group-relations:
    *      get:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: getUserGroupRelationsUserGroups
+   *        summary: /_api/v3/user-groups/{id}/user-group-relations
    *        description: Get the user group relations for the userGroup
    *        parameters:
    *          - name: id
@@ -514,9 +547,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /user-groups/{id}/pages:
+   *    /_api/v3/user-groups/{id}/pages:
    *      get:
-   *        tags: [UserGroup]
+   *        tags: [UserGroup, apiv3]
+   *        operationId: getPagesUserGroups
+   *        summary: /_api/v3/user-groups/{id}/pages
    *        description: Get closed pages for the userGroup
    *        parameters:
    *          - name: id

src/server/routes/apiv3/users.js

@@ -21,6 +21,49 @@ const validator = {};
  *    name: Users
  */
 
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      User:
+ *        description: User
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: user ID
+ *            example: 5ae5fccfc5577b0004dbd8ab
+ *          lang:
+ *            type: string
+ *            description: language
+ *            example: 'en-US'
+ *          status:
+ *            type: integer
+ *            description: status
+ *            example: 0
+ *          admin:
+ *            type: boolean
+ *            description: whether the admin
+ *            example: false
+ *          email:
+ *            type: string
+ *            description: E-Mail address
+ *            example: alice@aaa.aaa
+ *          username:
+ *            type: string
+ *            description: username
+ *            example: alice
+ *          name:
+ *            type: string
+ *            description: full name
+ *            example: Alice
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ */
+
 module.exports = (crowi) => {
   const loginRequiredStrictly = require('../../middleware/login-required')(crowi);
   const adminRequired = require('../../middleware/admin-required')(crowi);
@@ -40,7 +83,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users:
    *      get:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: listUsers
+   *        summary: /_api/v3/users
    *        description: Get users
    *        responses:
    *          200:
@@ -90,7 +135,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/invite:
    *      post:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: inviteUser
+   *        summary: /_api/v3/users/invite
    *        description: Create new users and send Emails
    *        parameters:
    *          - name: shapedEmailList
@@ -133,7 +180,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/{id}/giveAdmin:
    *      put:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: giveAdminUser
+   *        summary: /_api/v3/users/{id}/giveAdmin
    *        description: Give user admin
    *        parameters:
    *          - name: id
@@ -172,7 +221,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/{id}/removeAdmin:
    *      put:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: removeAdminUser
+   *        summary: /_api/v3/users/{id}/removeAdmin
    *        description: Remove user admin
    *        parameters:
    *          - name: id
@@ -211,7 +262,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/{id}/activate:
    *      put:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: activateUser
+   *        summary: /_api/v3/users/{id}/activate
    *        description: Activate user
    *        parameters:
    *          - name: id
@@ -258,7 +311,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/{id}/deactivate:
    *      put:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: deactivateUser
+   *        summary: /_api/v3/users/{id}/deactivate
    *        description: Deactivate user
    *        parameters:
    *          - name: id
@@ -297,7 +352,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/{id}/remove:
    *      delete:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: removeUser
+   *        summary: /_api/v3/users/{id}/remove
    *        description: Delete user
    *        parameters:
    *          - name: id
@@ -338,9 +395,11 @@ module.exports = (crowi) => {
    * @swagger
    *
    *  paths:
-   *    /_api/v3/users:
+   *    /_api/v3/users/external-accounts:
    *      get:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: listExternalAccountsUsers
+   *        summary: /_api/v3/users/external-accounts
    *        description: Get external-account
    *        responses:
    *          200:
@@ -372,7 +431,9 @@ module.exports = (crowi) => {
    *  paths:
    *    /_api/v3/users/external-accounts/{id}/remove:
    *      delete:
-   *        tags: [Users]
+   *        tags: [Users, apiv3]
+   *        operationId: removeExternalAccountUser
+   *        summary: /_api/v3/users/external-accounts/{id}/remove
    *        description: Delete ExternalAccount
    *        parameters:
    *          - name: id

src/server/routes/attachment.js

@@ -7,6 +7,65 @@ const fs = require('fs');
 
 const ApiResponse = require('../util/apiResponse');
 
+/**
+ * @swagger
+ *  tags:
+ *    name: Attachments
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      Attachment:
+ *        description: Attachment
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: attachment ID
+ *            example: 5e0734e072560e001761fa67
+ *          __v:
+ *            type: number
+ *            description: attachment version
+ *            example: 0
+ *          fileFormat:
+ *            type: string
+ *            description: file format in MIME
+ *            example: text/plain
+ *          fileName:
+ *            type: string
+ *            description: file name
+ *            example: 601b7c59d43a042c0117e08dd37aad0aimage.txt
+ *          originalName:
+ *            type: string
+ *            description: original file name
+ *            example: file.txt
+ *          filePath:
+ *            type: string
+ *            description: file path
+ *            example: attachment/5e07345972560e001761fa63/6b0b3facf3628699263d760e18efd446.txt
+ *          creator:
+ *            $ref: '#/components/schemas/User'
+ *          page:
+ *            type: string
+ *            description: page ID attached at
+ *            example: 5e07345972560e001761fa63
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ *          fileSize:
+ *            type: number
+ *            description: file size
+ *            example: 3494332
+ *          url:
+ *            type: string
+ *            description: attachment URL
+ *            example: http://localhost/files/5e0734e072560e001761fa67
+ */
+
 module.exports = function(crowi, app) {
   const Attachment = crowi.model('Attachment');
   const User = crowi.model('User');
@@ -185,6 +244,40 @@ module.exports = function(crowi, app) {
     return responseForAttachment(req, res, attachment);
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/attachments.list:
+   *      get:
+   *        tags: [Attachments, apiv1]
+   *        operationId: listAttachments
+   *        summary: /_api/attachments.list
+   *        description: Get list of attachments in page
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *            required: true
+   *        responses:
+   *          200:
+   *            description: Succeeded to get list of attachments.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    attachments:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/Attachment'
+   *                      description: attachment list
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /attachments.list Get attachments of the page
    * @apiName ListAttachments
@@ -219,6 +312,73 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(await fileUploader.checkLimit(fileSize)));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/attachments.add:
+   *      post:
+   *        tags: [Attachments, apiv1]
+   *        operationId: addAttachment
+   *        summary: /_api/attachments.add
+   *        description: Add attachment to the page
+   *        requestBody:
+   *          content:
+   *            "multipart/form-data":
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    nullable: true
+   *                    type: string
+   *                  path:
+   *                    nullable: true
+   *                    type: string
+   *                  file:
+   *                    type: string
+   *                    format: binary
+   *                    description: attachment data
+   *              encoding:
+   *                path:
+   *                  contentType: application/x-www-form-urlencoded
+   *            "*\/*":
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    nullable: true
+   *                    type: string
+   *                  path:
+   *                    nullable: true
+   *                    type: string
+   *                  file:
+   *                    type: string
+   *                    format: binary
+   *                    description: attachment data
+   *              encoding:
+   *                path:
+   *                  contentType: application/x-www-form-urlencoded
+   *        responses:
+   *          200:
+   *            description: Succeeded to add attachment.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *                    attachment:
+   *                      $ref: '#/components/schemas/Attachment'
+   *                    url:
+   *                      $ref: '#/components/schemas/Attachment/properties/url'
+   *                    pageCreated:
+   *                      type: boolean
+   *                      description: whether the page was created
+   *                      example: false
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /attachments.add Add attachment to the page
    * @apiName AddAttachments
@@ -320,6 +480,38 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(result));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/attachments.remove:
+   *      post:
+   *        tags: [Attachments, apiv1]
+   *        operationId: removeAttachment
+   *        summary: /_api/attachments.remove
+   *        description: Remove attachment
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  attachment_id:
+   *                    $ref: '#/components/schemas/Attachment/properties/_id'
+   *                required:
+   *                  - attachment_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to remove attachment.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /attachments.remove Remove attachments
    * @apiName RemoveAttachments

src/server/routes/bookmark.js

@@ -1,3 +1,36 @@
+/**
+ * @swagger
+ *  tags:
+ *    name: Bookmarks
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      Bookmark:
+ *        description: Bookmark
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: page ID
+ *            example: 5e07345972560e001761fa63
+ *          __v:
+ *            type: number
+ *            description: DB record version
+ *            example: 0
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ *          page:
+ *            $ref: '#/components/schemas/Page/properties/_id'
+ *          user:
+ *            $ref: '#/components/schemas/User/properties/_id'
+ */
+
 module.exports = function(crowi, app) {
   const debug = require('debug')('growi:routes:bookmark');
   const Bookmark = crowi.model('Bookmark');
@@ -7,6 +40,37 @@ module.exports = function(crowi, app) {
   const actions = {};
   actions.api = {};
 
+  /**
+   * @swagger
+   *
+   *    /_api/bookmarks.get:
+   *      get:
+   *        tags: [Bookmarks, apiv1]
+   *        operationId: getBookmark
+   *        summary: /_api/bookmarks.get
+   *        description: Get bookmark of the page with the user
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            required: true
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *        responses:
+   *          200:
+   *            description: Succeeded to get bookmark of the page with the user.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    bookmark:
+   *                      $ref: '#/components/schemas/Bookmark'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /bookmarks.get Get bookmark of the page with the user
    * @apiName GetBookmarks
@@ -30,8 +94,44 @@ module.exports = function(crowi, app) {
       });
   };
 
+
   /**
+   * @swagger
    *
+   *    /_api/bookmarks.list:
+   *      get:
+   *        tags: [Bookmarks, apiv1]
+   *        operationId: listBookmarks
+   *        summary: /_api/bookmarks.list
+   *        description: Get bookmark list of the page with the user
+   *        parameters:
+   *          - in: query
+   *            name: limit
+   *            schema:
+   *              $ref: '#/components/schemas/V1PaginateResult/properties/meta/properties/limit'
+   *          - in: query
+   *            name: offset
+   *            schema:
+   *              $ref: '#/components/schemas/V1PaginateResult/properties/meta/properties/offset'
+   *        responses:
+   *          200:
+   *            description: Succeeded to get bookmark of the page with the user.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    meta:
+   *                      $ref: '#/components/schemas/V1PaginateResult/properties/meta'
+   *                    data:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/V1PaginateResult/properties/meta'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
    */
   actions.api.list = function(req, res) {
     const paginateOptions = ApiPaginate.parseOptions(req.query);
@@ -46,6 +146,37 @@ module.exports = function(crowi, app) {
       });
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/bookmarks.add:
+   *      post:
+   *        tags: [Bookmarks, apiv1]
+   *        operationId: addBookmark
+   *        summary: /_api/bookmarks.add
+   *        description: Add bookmark of the page
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *            required: true
+   *        responses:
+   *          200:
+   *            description: Succeeded to add bookmark of the page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    bookmark:
+   *                      $ref: '#/components/schemas/Bookmark'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /bookmarks.add Add bookmark of the page
    * @apiName AddBookmark
@@ -70,6 +201,38 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(result));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/bookmarks.remove:
+   *      post:
+   *        tags: [Bookmarks, apiv1]
+   *        operationId: removeBookmark
+   *        summary: /_api/bookmarks.remove
+   *        description: Remove bookmark of the page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    $ref: '#/components/schemas/Page/properties/_id'
+   *                required:
+   *                  - page_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to remove bookmark of the page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /bookmarks.remove Remove bookmark of the page
    * @apiName RemoveBookmark

src/server/routes/comment.js

@@ -1,3 +1,46 @@
+/**
+ * @swagger
+ *  tags:
+ *    name: Comments
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      Comment:
+ *        description: Comment
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: revision ID
+ *            example: 5e079a0a0afa6700170a75fb
+ *          __v:
+ *            type: number
+ *            description: DB record version
+ *            example: 0
+ *          page:
+ *            $ref: '#/components/schemas/Page/properties/_id'
+ *          creator:
+ *            $ref: '#/components/schemas/User/properties/_id'
+ *          revision:
+ *            $ref: '#/components/schemas/Revision/properties/_id'
+ *          comment:
+ *            type: string
+ *            description: comment
+ *            example: good
+ *          commentPosition:
+ *            type: number
+ *            description: comment position
+ *            example: 0
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ */
+
 module.exports = function(crowi, app) {
   const logger = require('@alias/logger')('growi:routes:comment');
   const Comment = crowi.model('Comment');
@@ -16,6 +59,42 @@ module.exports = function(crowi, app) {
   actions.api = api;
   api.validators = {};
 
+  /**
+   * @swagger
+   *
+   *    /_api/comments.get:
+   *      get:
+   *        tags: [Comments, apiv1]
+   *        operationId: getComments
+   *        summary: /_api/comments.get
+   *        description: Get comments of the page of the revision
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *          - in: query
+   *            name: revision_id
+   *            schema:
+   *              $ref: '#/components/schemas/Revision/properties/_id'
+   *        responses:
+   *          200:
+   *            description: Succeeded to get comments of the page of the revision.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    comments:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/Comment'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /comments.get Get comments of the page of the revision
    * @apiName GetComments
@@ -74,6 +153,49 @@ module.exports = function(crowi, app) {
     return validator;
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/comments.add:
+   *      post:
+   *        tags: [Comments, apiv1]
+   *        operationId: addComment
+   *        summary: /_api/comments.add
+   *        description: Post comment for the page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  commentForm:
+   *                    type: object
+   *                    properties:
+   *                      page_id:
+   *                        $ref: '#/components/schemas/Page/properties/_id'
+   *                      revision_id:
+   *                        $ref: '#/components/schemas/Revision/properties/_id'
+   *                      comment:
+   *                        $ref: '#/components/schemas/Comment/properties/comment'
+   *                      comment_position:
+   *                        $ref: '#/components/schemas/Comment/properties/commentPosition'
+   *                required:
+   *                  - commentForm
+   *        responses:
+   *          200:
+   *            description: Succeeded to post comment for the page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    comment:
+   *                      $ref: '#/components/schemas/Comment'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /comments.add Post comment for the page
    * @apiName PostComment
@@ -160,6 +282,52 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/comments.update:
+   *      post:
+   *        tags: [Comments, apiv1]
+   *        operationId: updateComment
+   *        summary: /_api/comments.update
+   *        description: Update comment dody
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  form:
+   *                    type: object
+   *                    properties:
+   *                      commentForm:
+   *                        type: object
+   *                        properties:
+   *                          page_id:
+   *                            $ref: '#/components/schemas/Page/properties/_id'
+   *                          revision_id:
+   *                            $ref: '#/components/schemas/Revision/properties/_id'
+   *                          comment:
+   *                            $ref: '#/components/schemas/Comment/properties/comment'
+   *                          comment_position:
+   *                            $ref: '#/components/schemas/Comment/properties/commentPosition'
+   *                required:
+   *                  - form
+   *        responses:
+   *          200:
+   *            description: Succeeded to update comment dody.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    comment:
+   *                      $ref: '#/components/schemas/Comment'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /comments.update Update comment dody
    * @apiName UpdateComment
@@ -206,6 +374,40 @@ module.exports = function(crowi, app) {
     // process notification if needed
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/comments.remove:
+   *      post:
+   *        tags: [Comments, apiv1]
+   *        operationId: removeComment
+   *        summary: /_api/comments.remove
+   *        description: Remove specified comment
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  comment_id:
+   *                    $ref: '#/components/schemas/Comment/properties/_id'
+   *                required:
+   *                  - comment_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to remove specified comment.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    comment:
+   *                      $ref: '#/components/schemas/Comment'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /comments.remove Remove specified comment
    * @apiName RemoveComment

src/server/routes/index.js

@@ -59,11 +59,6 @@ module.exports = function(crowi, app) {
 
   app.get('/admin'                          , loginRequiredStrictly , adminRequired , admin.index);
   app.get('/admin/app'                      , loginRequiredStrictly , adminRequired , admin.app.index);
-  app.post('/_api/admin/settings/app'       , loginRequiredStrictly , adminRequired , csrf, form.admin.app, admin.api.appSetting);
-  app.post('/_api/admin/settings/siteUrl'   , loginRequiredStrictly , adminRequired , csrf, form.admin.siteUrl, admin.api.asyncAppSetting);
-  app.post('/_api/admin/settings/mail'      , loginRequiredStrictly , adminRequired , csrf, form.admin.mail, admin.api.appSetting);
-  app.post('/_api/admin/settings/aws'       , loginRequiredStrictly , adminRequired , csrf, form.admin.aws, admin.api.appSetting);
-  app.post('/_api/admin/settings/plugin'    , loginRequiredStrictly , adminRequired , csrf, form.admin.plugin, admin.api.appSetting);
 
   // security admin
   app.get('/admin/security'                     , loginRequiredStrictly , adminRequired , admin.security.index);

src/server/routes/page.js

@@ -1,3 +1,133 @@
+/**
+ * @swagger
+ *  tags:
+ *    name: Pages
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      Page:
+ *        description: Page
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: page ID
+ *            example: 5e07345972560e001761fa63
+ *          __v:
+ *            type: number
+ *            description: DB record version
+ *            example: 0
+ *          commentCount:
+ *            type: number
+ *            description: count of comments
+ *            example: 3
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ *          creator:
+ *            $ref: '#/components/schemas/User'
+ *          extended:
+ *            type: object
+ *            description: extend data
+ *            example: {}
+ *          grant:
+ *            type: number
+ *            description: grant
+ *            example: 1
+ *          grantedUsers:
+ *            type: array
+ *            description: granted users
+ *            items:
+ *              type: string
+ *              description: user ID
+ *            example: ["5ae5fccfc5577b0004dbd8ab"]
+ *          lastUpdateUser:
+ *            $ref: '#/components/schemas/User'
+ *          liker:
+ *            type: array
+ *            description: granted users
+ *            items:
+ *              type: string
+ *              description: user ID
+ *            example: []
+ *          path:
+ *            type: string
+ *            description: page path
+ *            example: /
+ *          redirectTo:
+ *            type: string
+ *            description: redirect path
+ *            example: ""
+ *          revision:
+ *            $ref: '#/components/schemas/Revision'
+ *          seenUsers:
+ *            type: array
+ *            description: granted users
+ *            items:
+ *              type: string
+ *              description: user ID
+ *            example: ["5ae5fccfc5577b0004dbd8ab"]
+ *          status:
+ *            type: string
+ *            description: status
+ *            enum:
+ *              - 'wip'
+ *              - 'published'
+ *              - 'deleted'
+ *              - 'deprecated'
+ *            example: published
+ *          updatedAt:
+ *            type: string
+ *            description: date updated at
+ *            example: 2010-01-01T00:00:00.000Z
+ *
+ *      UpdatePost:
+ *        description: UpdatePost
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: update post ID
+ *            example: 5e0734e472560e001761fa68
+ *          __v:
+ *            type: number
+ *            description: DB record version
+ *            example: 0
+ *          pathPattern:
+ *            type: string
+ *            description: path pattern
+ *            example: /test
+ *          patternPrefix:
+ *            type: string
+ *            description: patternPrefix prefix
+ *            example: /
+ *          patternPrefix2:
+ *            type: string
+ *            description: path
+ *            example: test
+ *          channel:
+ *            type: string
+ *            description: channel
+ *            example: general
+ *          provider:
+ *            type: string
+ *            description: provider
+ *            enum:
+ *              - slack
+ *            example: slack
+ *          creator:
+ *            $ref: '#/components/schemas/User'
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ */
+
 /* eslint-disable no-use-before-define */
 module.exports = function(crowi, app) {
   const debug = require('debug')('growi:routes:page');
@@ -512,6 +642,47 @@ module.exports = function(crowi, app) {
   const api = {};
   actions.api = api;
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.list:
+   *      get:
+   *        tags: [Pages, apiv1]
+   *        operationId: listPages
+   *        summary: /_api/pages.list
+   *        description: Get list of pages
+   *        parameters:
+   *          - in: query
+   *            name: path
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/path'
+   *          - in: query
+   *            name: user
+   *            schema:
+   *              $ref: '#/components/schemas/User/properties/username'
+   *          - in: query
+   *            name: offset
+   *            schema:
+   *              $ref: '#/components/schemas/V1PaginateResult/properties/meta/properties/offset'
+   *        responses:
+   *          200:
+   *            description: Succeeded to get list of pages.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    pages:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/Page'
+   *                      description: page list
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /pages.list List pages by user
    * @apiName ListPage
@@ -561,6 +732,45 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.create:
+   *      post:
+   *        tags: [Pages, apiv1]
+   *        operationId: createPage
+   *        summary: /_api/pages.create
+   *        description: Create page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  body:
+   *                    $ref: '#/components/schemas/Revision/properties/body'
+   *                  path:
+   *                    $ref: '#/components/schemas/Page/properties/path'
+   *                  grant:
+   *                    $ref: '#/components/schemas/Page/properties/grant'
+   *                required:
+   *                  - body
+   *                  - path
+   *        responses:
+   *          200:
+   *            description: Succeeded to create page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /pages.create Create new page
    * @apiName CreatePage
@@ -631,6 +841,47 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.update:
+   *      post:
+   *        tags: [Pages, apiv1]
+   *        operationId: updatePage
+   *        summary: /_api/pages.update
+   *        description: Update page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  body:
+   *                    $ref: '#/components/schemas/Revision/properties/body'
+   *                  page_id:
+   *                    $ref: '#/components/schemas/Page/properties/_id'
+   *                  revision_id:
+   *                    $ref: '#/components/schemas/Revision/properties/_id'
+   *                  grant:
+   *                    $ref: '#/components/schemas/Page/properties/grant'
+   *                required:
+   *                  - body
+   *                  - page_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to update page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /pages.update Update page
    * @apiName UpdatePage
@@ -718,6 +969,44 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.get:
+   *      get:
+   *        tags: [Pages, apiv1]
+   *        operationId: getPage
+   *        summary: /_api/pages.get
+   *        description: Get page data
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *          - in: query
+   *            name: path
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/path'
+   *          - in: query
+   *            name: revision_id
+   *            schema:
+   *              $ref: '#/components/schemas/Revision/properties/_id'
+   *        responses:
+   *          200:
+   *            description: Succeeded to get page data.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /pages.get Get page data
    * @apiName GetPage
@@ -804,6 +1093,40 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(result));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.seen:
+   *      post:
+   *        tags: [Pages, apiv1]
+   *        operationId: seenPage
+   *        summary: /_api/pages.seen
+   *        description: Mark as seen user
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    $ref: '#/components/schemas/Page/properties/_id'
+   *                required:
+   *                  - page_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to be page seen.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    seenUser:
+   *                      $ref: '#/components/schemas/Page/properties/seenUsers'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /pages.seen Mark as seen user
    * @apiName SeenPage
@@ -839,6 +1162,40 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(result));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/likes.add:
+   *      post:
+   *        tags: [Pages, apiv1]
+   *        operationId: addLike
+   *        summary: /_api/likes.add
+   *        description: Like page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    $ref: '#/components/schemas/Page/properties/_id'
+   *                required:
+   *                  - page_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to be page liked.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /likes.add Like page
    * @apiName LikePage
@@ -881,6 +1238,40 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/likes.remove:
+   *      post:
+   *        tags: [Pages, apiv1]
+   *        operationId: removeLike
+   *        summary: /_api/likes.remove
+   *        description: Unlike page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    $ref: '#/components/schemas/Page/properties/_id'
+   *                required:
+   *                  - page_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to not be page liked.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /likes.remove Unlike page
    * @apiName UnlikePage
@@ -915,6 +1306,36 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(result));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.updatePost:
+   *      get:
+   *        tags: [Pages, apiv1]
+   *        operationId: getUpdatePostPage
+   *        summary: /_api/pages.updatePost
+   *        description: Get UpdatePost setting list
+   *        parameters:
+   *          - in: query
+   *            name: path
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/path'
+   *        responses:
+   *          200:
+   *            description: Succeeded to get UpdatePost setting list.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    updatePost:
+   *                      $ref: '#/components/schemas/UpdatePost'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /pages.updatePost
    * @apiName Get UpdatePost setting list
@@ -1053,6 +1474,51 @@ module.exports = function(crowi, app) {
     return res.json(ApiResponse.success(result));
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/pages.rename:
+   *      post:
+   *        tags: [Pages, apiv1]
+   *        operationId: renamePage
+   *        summary: /_api/pages.rename
+   *        description: Rename page
+   *        requestBody:
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  page_id:
+   *                    $ref: '#/components/schemas/Page/properties/_id'
+   *                  path:
+   *                    $ref: '#/components/schemas/Page/properties/path'
+   *                  revision_id:
+   *                    $ref: '#/components/schemas/Revision/properties/_id'
+   *                  new_path:
+   *                    type: string
+   *                    description: new path
+   *                    example: /user/alice/new_test
+   *                  create_redirect:
+   *                    type: boolean
+   *                    description: whether redirect page
+   *                required:
+   *                  - page_id
+   *        responses:
+   *          200:
+   *            description: Succeeded to rename page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    page:
+   *                      $ref: '#/components/schemas/Page'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {post} /pages.rename Rename page
    * @apiName RenamePage

src/server/routes/revision.js

@@ -1,3 +1,49 @@
+/**
+ * @swagger
+ *  tags:
+ *    name: Revisions
+ */
+
+/**
+ * @swagger
+ *
+ *  components:
+ *    schemas:
+ *      Revision:
+ *        description: Revision
+ *        type: object
+ *        properties:
+ *          _id:
+ *            type: string
+ *            description: revision ID
+ *            example: 5e0734e472560e001761fa68
+ *          __v:
+ *            type: number
+ *            description: DB record version
+ *            example: 0
+ *          author:
+ *            $ref: '#/components/schemas/User/properties/_id'
+ *          body:
+ *            type: string
+ *            description: content body
+ *            example: |
+ *              # test
+ *
+ *              test
+ *          format:
+ *            type: string
+ *            description: format
+ *            example: markdown
+ *          path:
+ *            type: string
+ *            description: path
+ *            example: /user/alice/test
+ *          createdAt:
+ *            type: string
+ *            description: date created at
+ *            example: 2010-01-01T00:00:00.000Z
+ */
+
 module.exports = function(crowi, app) {
   const debug = require('debug')('growi:routes:revision');
   const logger = require('@alias/logger')('growi:routes:revision');
@@ -9,6 +55,42 @@ module.exports = function(crowi, app) {
   const actions = {};
   actions.api = {};
 
+  /**
+   * @swagger
+   *
+   *    /_api/revisions.get:
+   *      get:
+   *        tags: [Revisions, apiv1]
+   *        operationId: /_api/revisions.get
+   *        summary: /_api/revisions.get
+   *        description: Get revision
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *            required: true
+   *          - in: query
+   *            name: revision_id
+   *            schema:
+   *              $ref: '#/components/schemas/Revision/properties/_id'
+   *            required: true
+   *        responses:
+   *          200:
+   *            description: Succeeded to get revision.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    revision:
+   *                      $ref: '#/components/schemas/Revision'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /revisions.get Get revision
    * @apiName GetRevision
@@ -41,6 +123,39 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/revisions.ids:
+   *      get:
+   *        tags: [Revisions, apiv1]
+   *        operationId: /_api/revisions.ids
+   *        summary: /_api/revisions.ids
+   *        description: Get revision id list of the page
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *            required: true
+   *        responses:
+   *          200:
+   *            description: Succeeded to get revision id list of the page.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    revisions:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/Revision'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /revisions.ids Get revision id list of the page
    * @apiName ids
@@ -69,6 +184,44 @@ module.exports = function(crowi, app) {
     }
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/revisions.list:
+   *      get:
+   *        tags: [Revisions, apiv1]
+   *        operationId: /_api/revisions.list
+   *        summary: /_api/revisions.list
+   *        description: Get revisions
+   *        parameters:
+   *          - in: query
+   *            name: page_id
+   *            schema:
+   *              $ref: '#/components/schemas/Page/properties/_id'
+   *          - in: query
+   *            name: revision_ids
+   *            schema:
+   *              type: string
+   *              description: revision ids
+   *              example: 5e0734e472560e001761fa68,5e079a0a0afa6700170a75fb
+   *        responses:
+   *          200:
+   *            description: Succeeded to get revisions.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    revisions:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/Revision'
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /revisions.list Get revisions
    * @apiName ListRevision

src/server/routes/user.js

@@ -36,6 +36,41 @@ module.exports = function(crowi, app) {
       });
   };
 
+  /**
+   * @swagger
+   *
+   *    /_api/users.list:
+   *      get:
+   *        tags: [Users, apiv1]
+   *        operationId: listUsersV1
+   *        summary: /_api/users.list
+   *        description: Get list of users
+   *        parameters:
+   *          - in: query
+   *            name: user_ids
+   *            schema:
+   *              type: string
+   *              description: user IDs
+   *              example: 5e06fcc7516d64004dbf4da6,5e098d53baa2ac004e7d24ad
+   *        responses:
+   *          200:
+   *            description: Succeeded to get list of users.
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    ok:
+   *                      $ref: '#/components/schemas/V1Response/properties/ok'
+   *                    users:
+   *                      type: array
+   *                      items:
+   *                        $ref: '#/components/schemas/User'
+   *                      description: user list
+   *          403:
+   *            $ref: '#/components/responses/403'
+   *          500:
+   *            $ref: '#/components/responses/500'
+   */
   /**
    * @api {get} /users.list Get user list
    * @apiName GetUserList

src/server/service/passport.js

@@ -3,7 +3,7 @@ const urljoin = require('url-join');
 const passport = require('passport');
 const LocalStrategy = require('passport-local').Strategy;
 const LdapStrategy = require('passport-ldapauth');
-const GoogleStrategy = require('passport-google-auth').Strategy;
+const GoogleStrategy = require('passport-google-oauth20').Strategy;
 const GitHubStrategy = require('passport-github').Strategy;
 const TwitterStrategy = require('passport-twitter').Strategy;
 const OidcStrategy = require('openid-client').Strategy;
@@ -340,7 +340,7 @@ class PassportService {
     passport.use(
       new GoogleStrategy(
         {
-          clientId: configManager.getConfig('crowi', 'security:passport-google:clientId'),
+          clientID: configManager.getConfig('crowi', 'security:passport-google:clientId'),
           clientSecret: configManager.getConfig('crowi', 'security:passport-google:clientSecret'),
           callbackURL: (this.crowi.appService.getSiteUrl() != null)
             ? urljoin(this.crowi.appService.getSiteUrl(), '/passport/google/callback') // auto-generated with v3.2.4 and above

src/server/views/admin/app.html

@@ -28,406 +28,14 @@
     {{ emessage }}
   </div>
   {% endif %}
-
   <div class="row">
     <div class="col-md-3">
       {% include './widget/menu.html' with {current: 'app'} %}
     </div>
-    <div class="col-md-9">
-
-      <form action="/_api/admin/settings/app" method="post" class="form-horizontal" id="appSettingForm" role="form">
-      <fieldset>
-        <legend>{{ t('App settings') }}</legend>
-        <div class="form-group">
-          <label for="settingForm[app:title]" class="col-xs-3 control-label">{{ t('app_setting.Site Name') }}</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[app:title]"
-                   type="text"
-                   name="settingForm[app:title]"
-                   value="{{ getConfig('crowi', 'app:title') | default('') }}"
-                   placeholder="GROWI">
-            <p class="help-block">{{ t("app_setting.sitename_change") }}</p>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="settingForm[app:confidential]" class="col-xs-3 control-label">{{ t('app_setting.Confidential name') }}</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[app:confidential]"
-                   type="text"
-                   name="settingForm[app:confidential]"
-                   value="{{ getConfig('crowi', 'app:confidential') | default('') }}"
-                   placeholder="{{ t('app_setting. ex&rpar;: internal use only') }}">
-            <p class="help-block">{{ t("app_setting.header_content") }}</p>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="col-xs-3 control-label">{{ t('app_setting.Default Language for new users') }}</label>
-          <div class="col-xs-6">
-            <div class="radio radio-primary radio-inline">
-                <input type="radio"
-                       id="radioLangEn"
-                       name="settingForm[app:globalLang]"
-                       value="{{ consts.language.LANG_EN_US }}"
-                       {% if getConfig('crowi', 'app:globalLang') == consts.language.LANG_EN_US %}checked="checked"{% endif %}>
-                <label for="radioLangEn">{{ t('English') }}</label>
-            </div>
-            <div class="radio radio-primary radio-inline">
-                <input type="radio"
-                       id="radioLangJa"
-                       name="settingForm[app:globalLang]"
-                       value="{{ consts.language.LANG_JA }}"
-                       {% if getConfig('crowi', 'app:globalLang') == consts.language.LANG_JA %}checked="checked"{% endif %}>
-                <label for="radioLangJa">{{ t('Japanese') }}</label>
-            </div>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="col-xs-3 control-label">{{ t('app_setting.File Uploading') }}</label>
-          <div class="col-xs-6">
-            <div class="checkbox checkbox-info">
-              <input type="checkbox"
-                     id="cbFileUpload"
-                     name="settingForm[app:fileUpload]"
-                     value="1"
-                     {% if getConfig('crowi', 'app:fileUpload') %}checked{% endif %}
-                     {% if not fileUploadService.getIsUploadable() %}disabled="disabled"{% endif %}>
-              <label for="cbFileUpload">
-                {{ t("app_setting.enable_files_except_image") }}
-              </label>
-            </div>
-
-              <p class="help-block">
-                {{ t("app_setting.enable_files_except_image") }}<br>
-                {{ t("app_setting.attach_enable") }}
-              </p>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-xs-offset-3 col-xs-6">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t('app_setting.Update') }}</button>
-          </div>
-        </div>
-      </fieldset>
-      </form>
-
-      <form action="/_api/admin/settings/siteUrl" method="post" class="form-horizontal" id="siteUrlSettingForm" role="form">
-        <fieldset>
-          <legend>{{ t('Site URL settings') }}</legend>
-          <p class="well">{{ t('app_setting.Site URL desc') }}</p>
-          {% if !getConfig('crowi', 'app:siteUrl') %}
-            <p class="alert alert-danger"><i class="icon-exclamation"></i> {{ t('app_setting.Site URL warn') }}</p>
-          {% endif %}
-
-          <div class="col-xs-offset-3">
-            <table class="table settings-table">
-              <colgroup>
-                <col class="from-db">
-                <col class="from-env-vars">
-              </colgroup>
-              <thead>
-              <tr><th>Database</th><th>Environment variables</th></tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <input class="form-control"
-                           type="text"
-                           name="settingForm[app:siteUrl]"
-                           value="{{ getConfigFromDB('crowi', 'app:siteUrl') | default('') }}"
-                           placeholder="e.g. https://my.growi.org">
-                    <p class="help-block">{{ t("app_setting.siteurl_help") }}</p>
-                  </td>
-                  <td>
-                    <input class="form-control"
-                           type="text"
-                           value="{{ getConfigFromEnvVars('crowi', 'app:siteUrl') | default('') }}"
-                           readonly>
-                    <p class="help-block">
-                      {{ t("app_setting.Use env var if empty", "APP_SITE_URL") }}
-                    </p>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div class="form-group">
-            <div class="col-xs-offset-3 col-xs-6">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <button type="submit" class="btn btn-primary">{{ t('app_setting.Update') }}</button>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-
-
-      <form action="/_api/admin/settings/mail" method="post" class="form-horizontal" id="mailSettingForm" role="form">
-      <fieldset>
-      <legend>{{ t('app_setting.Mail settings') }}</legend>
-      <p class="well">{{ t("app_setting.SMTP_used") }} {{ t("app_setting.SMTP_but_AWS") }}<br>{{ t("app_setting.neihter_of") }}</p>
-
-        <div class="form-group">
-          <label for="settingForm[mail.from]" class="col-xs-3 control-label">{{ t('app_setting.From e-mail address') }}</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[mail.from]"
-                   type="text"
-                   name="settingForm[mail:from]"
-                   placeholder="{{ t('eg') }} mail@growi.org"
-                   value="{{ getConfig('crowi', 'mail:from') | default('') }}">
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="col-xs-3 control-label">{{ t('app_setting.SMTP settings') }}</label>
-          <div class="col-xs-4">
-            <label>{{ t('app_setting.Host') }}</label>
-            <input class="form-control"
-                   type="text"
-                   name="settingForm[mail:smtpHost]"
-                   value="{{ getConfig('crowi', 'mail:smtpHost') | default('') }}">
-          </div>
-          <div class="col-xs-2">
-            <label>{{ t('app_setting.Port') }}</label>
-            <input class="form-control"
-                   type="text"
-                   name="settingForm[mail:smtpPort]"
-                   value="{{ getConfig('crowi', 'mail:smtpPort') | default('') }}">
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-xs-3 col-xs-offset-3">
-            <label>{{ t('app_setting.User') }}</label>
-            <input class="form-control"
-                   type="text"
-                   name="settingForm[mail:smtpUser]"
-                   value="{{ getConfig('crowi', 'mail:smtpUser') | default('') }}">
-          </div>
-          <div class="col-xs-3">
-            <label>{{ t('Password') }}</label>
-            <input class="form-control"
-                   type="password"
-                   name="settingForm[mail:smtpPassword]"
-                   value="{{ getConfig('crowi', 'mail:smtpPassword') | default('') }}">
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-xs-offset-3 col-xs-6">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t('app_setting.Update') }}</button>
-          </div>
-        </div>
-
-      </fieldset>
-      </form>
-
-      <form action="/_api/admin/settings/aws" method="post" class="form-horizontal" id="awsSettingForm" role="form">
-      <fieldset>
-      <legend>{{ t('app_setting.AWS settings') }}</legend>
-        <p class="well">{{ t("app_setting.AWS_access") }}<br>
-        {{ t("app_setting.No_SMTP_setting") }}<br>
-          <br>
-
-          <span class="text-danger"><i class="ti-unlink"></i> {{ t("app_setting.change_setting") }}</span>
-        </p>
-
-        <div class="form-group">
-          <label for="settingForm[app:region]" class="col-xs-3 control-label">{{ t('app_setting.region') }}</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[app:region]"
-                   type="text"
-                   name="settingForm[aws:region]"
-                   placeholder="例: ap-northeast-1"
-                   value="{{ getConfig('crowi', 'aws:region') | default('') }}">
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="settingForm[aws:customEndpoint]" class="col-xs-3 control-label">{{ t('app_setting.custom endpoint') }}</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[aws:customEndpoint]"
-                   type="text"
-                   name="settingForm[aws:customEndpoint]"
-                   placeholder="例: http://localhost:9000"
-                   value="{{ getConfig('crowi', 'aws:customEndpoint') | default('') }}">
-                   <p class="help-block">{{ t("app_setting.custom_endpoint_change") }}</p>
-          </div>
-        </div>
 
-        <div class="form-group">
-          <label for="settingForm[aws:bucket]" class="col-xs-3 control-label">{{ t('app_setting.bucket name') }}</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[aws:bucket]"
-                   type="text"
-                   name="settingForm[aws:bucket]"
-                   placeholder="例: crowi"
-                   value="{{ getConfig('crowi', 'aws:bucket') | default('') }}">
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label for="settingForm[aws:accessKeyId]" class="col-xs-3 control-label">Access Key ID</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[aws:accessKeyId]"
-                   type="text"
-                   name="settingForm[aws:accessKeyId]"
-                   value="{{ getConfig('crowi', 'aws:accessKeyId') | default('') }}">
-          </div>
-
-        </div>
-
-        <div class="form-group">
-          <label for="settingForm[aws:secretAccessKey]" class="col-xs-3 control-label">Secret Access Key</label>
-          <div class="col-xs-6">
-            <input class="form-control"
-                   id="settingForm[aws:secretAccessKey]"
-                   type="text"
-                   name="settingForm[aws:secretAccessKey]"
-                   value="{{ getConfig('crowi', 'aws:secretAccessKey') | default('') }}">
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-xs-offset-3 col-xs-6">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t('app_setting.Update') }}</button>
-          </div>
-        </div>
-
-      </fieldset>
-      </form>
-
-      <form action="/_api/admin/settings/plugin" method="post" class="form-horizontal" id="pluginSettingForm" role="form">
-      <fieldset>
-      <legend>{{ t('app_setting.Plugin settings') }}</legend>
-        <p class="well">{{ t('app_setting.Enable plugin loading') }}</p>
-
-        <div class="form-group">
-          <label class="col-xs-3 control-label">{{ t('app_setting.Load plugins') }}</label>
-          <div class="col-xs-6">
-
-            <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn btn-default btn-rounded btn-outline {% if getConfig('crowi', 'plugin:isEnabledPlugins') %}active{% endif %}" data-active-class="primary">
-                <input name="settingForm[plugin:isEnabledPlugins]"
-                       value="true"
-                       type="radio"
-                       {% if true === getConfig('crowi', 'plugin:isEnabledPlugins') %}checked{% endif %}>
-                ON
-              </label>
-              <label class="btn btn-default btn-rounded btn-outline {% if !getConfig('crowi', 'plugin:isEnabledPlugins') %}active{% endif %}" data-active-class="default">
-                <input name="settingForm[plugin:isEnabledPlugins]"
-                       value="false"
-                       type="radio"
-                       {% if !getConfig('crowi', 'plugin:isEnabledPlugins') %}checked{% endif %}>
-                OFF
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-xs-offset-3 col-xs-6">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t('app_setting.Update') }}</button>
-          </div>
-        </div>
-
-      </fieldset>
-      </form>
-
-    </div>
+    <div class="col-md-9" id="admin-app"></div>
   </div>
 
-  <script>
-    $('#appSettingForm, #siteUrlSettingForm, #mailSettingForm, #awsSettingForm, #pluginSettingForm').each(function() {
-      $(this).submit(function()
-      {
-        function showMessage(formId, msg, status) {
-          $('#' + formId + ' .alert').remove();
-
-          if (!status) {
-            status = 'success';
-          }
-          var $message = $('<p class="alert"></p>');
-          $message.addClass('alert-' + status);
-          $message.html(msg.replace(/\n/g, '<br>'));
-          $message.insertAfter('#' + formId + ' legend');
-
-          if (status == 'success') {
-            setTimeout(function()
-            {
-              $message.fadeOut({
-                complete: function() {
-                  $message.remove();
-                }
-              });
-            }, 5000);
-          }
-        }
-
-        var $form = $(this);
-        var $id = $form.attr('id');
-        var $button = $('button', this);
-        $button.attr('disabled', 'disabled');
-        var jqxhr = $.post($form.attr('action'), $form.serialize(), function(data)
-          {
-            if (data.status) {
-              showMessage($id, '更新しました');
-            } else {
-              showMessage($id, data.message, 'danger');
-            }
-          })
-          .fail(function() {
-            showMessage($id, 'エラーが発生しました', 'danger');
-          })
-          .always(function() {
-            $button.prop('disabled', false);
-        });
-        return false;
-      });
-    });
-
-    /**
-     * The following script sets the class name 'unused' to the cell in from-env-vars column
-     * when the value of the corresponding cell from the database is not empty.
-     * It is used to indicate that the system does not use a value from the environment variables by setting a css style.
-     *
-     * TODO The following script is duplicated from saml.html. It is desirable to integrate those in the future.
-     */
-    $('.settings-table tbody tr').each(function(_, element) {
-      const inputElemFromDB      = $('td:nth-of-type(1) input[type="text"], td:nth-of-type(1) textarea', element);
-      const inputElemFromEnvVars = $('td:nth-of-type(2) input[type="text"], td:nth-of-type(2) textarea', element);
-
-      // initialize
-      addClassToUnusedInputElemFromEnvVars(inputElemFromDB, inputElemFromEnvVars);
-
-      // set keyup event handler
-      inputElemFromDB.keyup(function () { addClassToUnusedInputElemFromEnvVars(inputElemFromDB, inputElemFromEnvVars) });
-    });
-
-    function addClassToUnusedInputElemFromEnvVars(inputElemFromDB, inputElemFromEnvVars) {
-      if (inputElemFromDB.val() === '') {
-        inputElemFromEnvVars.parent().removeClass('unused');
-      }
-      else {
-        inputElemFromEnvVars.parent().addClass('unused');
-      }
-    };
-  </script>
-
 </div>
 {% endblock content_main %}
 

src/server/views/widget/page_alerts.html

@@ -13,6 +13,21 @@
       </p>
     {% endif %}
 
+    {% if getConfig('crowi', 'customize:isEnabledStaleNotification') %}
+      {% if page && page.updatedAt && page.getContentAge() > 0 %}
+        {% if page.getContentAge() == 1 %}
+        <div class="alert alert-info">
+        {% elseif page.getContentAge() == 2 %}
+        <div class="alert alert-warning">
+        {% else %}
+        <div class="alert alert-danger">
+        {% endif %}
+          <i class="icon-fw icon-hourglass"></i>
+          <strong>{{ t('page_page.notice.stale', { count: page.getContentAge() }) }}</strong>
+        </div>
+      {% endif %}
+    {% endif %}
+
     {% if redirectFrom or req.query.renamed or req.query.redirectFrom %}
     <div class="alert alert-info alert-moved d-flex align-items-center justify-content-between">
       <span>