Merge branch 'master' into imprv/refactor-i18n

# Conflicts:
#	resource/locales/en-US/translation.json
#	resource/locales/ja/translation.json
#	src/client/js/components/Admin/MarkdownSetting/WhiteListInput.jsx
#	src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

.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,11 +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
-======================
-
-- [GROWI Docs Environment Variables](https://docs.growi.org/en/admin-guide/admin-cookbook/env-vars.html)
-
 Documentation
 ==============
 

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",
@@ -35,7 +35,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 +78,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 +124,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 +176,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 +198,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 +209,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": "^0.32.1",
     "react-bootstrap-typeahead": "^3.4.2",
@@ -227,6 +227,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/admin/markdown_setting.json

@@ -30,6 +30,6 @@
     "custom_whitelist": "Custom Whitelist",
     "tag_names": "Tag names",
     "tag_attributes": "Tag attributes",
-    "import_recommended": "Import recommended"
+    "import_recommended": "Import recommended {{target}}"
   }
 }

resource/locales/en-US/translation.json

@@ -223,7 +223,9 @@
       "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": {
@@ -371,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.",
@@ -398,7 +400,10 @@
     "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",
@@ -575,7 +580,7 @@
     }
   },
   "customize_page": {
-    "recommended":"Recommended",
+    "recommended": "Recommended",
     "Behavior": "Behavior",
     "Layout": "Layout",
     "Function": "Function",
@@ -604,6 +609,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",
@@ -612,29 +619,29 @@
     "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": {

resource/locales/ja/admin/customize_setting.json

@@ -0,0 +1,63 @@
+{
+  "recommended": "おすすめ",
+  "Behavior": "動作",
+  "Layout": "レイアウト",
+  "Function": "機能",
+  "function_choose": "機能の有効/無効を選択できます。",
+  "Timeline function": "タイムライン機能",
+  "Code Highlight": "コードハイライト",
+  "Theme": "テーマ",
+  "subpage_display": "配下ページのタイムラインを表示できます。",
+  "performance_decrease": "配下ページが多い場合はページロード時のパフォーマンスが落ちます。",
+  "list_page_display": "無効化することでリストページの表示を高速化できます。",
+  "tab_switch": "タブ変更をブラウザ履歴に保存",
+  "save_edit": "編集タブやヒストリータブ等の切り替えをブラウザ履歴に保存し、ブラウザの戻る/進む操作の対象にします。",
+  "by_invalidating": "無効化することで、ページ遷移のみを戻る/進む操作の対象にすることができます。",
+  "nocdn_desc": "この機能は、環境変数 <code>NO_CDN=true</code> の時は無効化されます。<br>GitHub スタイルが適用されています。",
+  "custom_title": "カスタム Title",
+  "custom_title_detail": "<code>%s</code>タグのコンテンツをカスタマイズできます。<br><code>%s</code>がサイト名、<code>%s</code>がページ名またはページパスに置換されます。",
+  "custom_header": "カスタム HTML Header",
+  "custom_header_detail": "システム全体に適用される HTML を記述できます。<code>&lt;header&gt;</code> タグ内の他の <code>&lt;script&gt;</code> タグ読み込み前に展開されます。<br>変更の反映はページの更新が必要です。",
+  "Custom CSS": "カスタム CSS",
+  "write_CSS": " システム全体に適用されるCSSを記述できます。",
+  "reflect_change": "変更の反映はページの更新が必要です。",
+  "ctrl_space": "Ctrl+Space でコード補完",
+  "Custom script": "カスタムスクリプト",
+  "write_java": "システム全体に適用されるJavaScriptを記述できます。",
+  "attach_title_header": "新規ページ作成時の h1 セクション自動挿入",
+  "attach_title_header_desc": "新規作成したページの1行目に、ページのパスを h1 セクションとして挿入します。",
+  "recent_created__n_draft_num_desc": "最近作成したページと下書きの表示数",
+  "recently_created_n_draft_num_desc": "ホーム画面の Recently Created での、1ページの表示数を設定します。",
+  "update_layout_success": "レイアウトを更新しました",
+  "update_behavior_success": "動作を更新しました",
+  "update_function_success": "機能を更新しました",
+  "update_highlight_success": "コードハイライトを更新しました",
+  "update_customTitle_success": "カスタムタイトルを更新しました",
+  "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": "ページ情報はサイドバーに表示されます。"
+  },
+  "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> では配下のページリストを表示します。"
+  }
+}

resource/locales/ja/admin/markdown_setting.json

@@ -28,8 +28,8 @@
     "ignore_all_tags_desc": "すべてのHTMLタグと属性を使用不可にします",
     "recommended_setting": "おすすめ設定",
     "custom_whitelist": "カスタムホワイトリスト",
-    "tag_names": "タグ名のホワイトリスト",
-    "tag_attributes": "タグ属性のホワイトリスト",
-    "import_recommended": "おすすめをインポート"
+    "tag_names": "タグ名",
+    "tag_attributes": "タグ属性",
+    "import_recommended": "{{target}} のおすすめをインポート"
   }
 }

resource/locales/ja/translation.json

@@ -222,7 +222,8 @@
       "redirected": "リダイレクト元 >> <code>%s</code>",
       "duplicated": "このページは <code>%s</code> から複製されました。",
       "unlinked": "このページへのリダイレクトは削除されました。",
-      "restricted": "このページの閲覧は制限されています"
+      "restricted": "このページの閲覧は制限されています",
+      "stale": "このページは最終更新日から{{count}}年以上が経過しています。"
     }
   },
   "page_edit": {
@@ -370,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": "許可をしている場合、画像以外のファイルをページに添付可能になります。",
@@ -397,7 +398,10 @@
     "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": "ゲストユーザーのアクセス",
@@ -588,6 +592,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": "機能を更新しました",

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';
@@ -167,6 +169,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:xss_options.import_recommended')}
-      </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:xss_options.import_recommended')}
-      </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="m-t-15">
           <div className="d-flex justify-content-between">
             {t('markdown_setting:xss_options.tag_names')}
-            {customizable && this.renderRecommendTagBtn()}
+            <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={this.onClickRecommendTagButton}>
+              {t('markdown_setting:xss_options.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="m-t-15">
           <div className="d-flex justify-content-between">
             {t('markdown_setting:xss_options.tag_attributes')}
-            {customizable && this.renderRecommendAttrBtn()}
+            <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={this.onClickRecommendAttrButton}>
+              {t('markdown_setting:xss_options.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"
@@ -66,7 +67,32 @@ class XssForm extends React.Component {
           />
           <label htmlFor="xssOption2">
             <p className="font-weight-bold">{t('markdown_setting:xss_options.recommended_setting')}</p>
-            <WhiteListInput customizable={false} />
+            <div className="m-t-15">
+              <div className="d-flex justify-content-between">
+                {t('markdown_setting:xss_options.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:xss_options.tag_attributes')}
+              </div>
+              <textarea
+                className="form-control xss-list"
+                name="recommendedAttrs"
+                rows="6"
+                cols="40"
+                readOnly
+                defaultValue={attrs}
+              />
+            </div>
           </label>
         </div>
 
@@ -80,7 +106,7 @@ class XssForm extends React.Component {
           />
           <label htmlFor="xssOption3">
             <p className="font-weight-bold">{t('markdown_setting:xss_options.custom_whitelist')}</p>
-            <WhiteListInput customizable />
+            <WhiteListInput />
           </label>
         </div>
       </fieldset>

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/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/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/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,460 @@
+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:
+ *        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:
+ *        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:
+ *        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:
+ *        type: object
+ *          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:
+ *        type: object
+ *          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
+   *
+   *    /app-settings/:
+   *      get:
+   *        tags: [AppSettings]
+   *        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
+   *
+   *    /app-settings/app-setting:
+   *      put:
+   *        tags: [AppSettings]
+   *        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
+   *
+   *    /app-settings/site-url-setting:
+   *      put:
+   *        tags: [AppSettings]
+   *        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
+   *
+   *    /app-settings/site-url-setting:
+   *      put:
+   *        tags: [AppSettings]
+   *        description: Update site url setting
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/MailSettingParams'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update site url 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
+   *
+   *    /app-settings/aws-setting:
+   *      put:
+   *        tags: [AppSettings]
+   *        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
+   *
+   *    /app-settings/plugin-setting:
+   *      put:
+   *        tags: [AppSettings]
+   *        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

@@ -44,6 +44,8 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *            type: boolean
  *          recentCreatedLimit:
  *            type: number
+ *          isEnabledStaleNotification:
+ *            type: boolean
  *      CustomizeHighlight:
  *        type: object
  *        properties:
@@ -96,6 +98,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(),
@@ -145,6 +148,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'),
@@ -265,6 +269,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 +279,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 });
     }

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(),
   ],
 };
 

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/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>