add Create under form

src/client/js/app.jsx

@@ -67,8 +67,6 @@ Object.assign(componentMappings, {
   // 'revision-history': <PageHistory pageId={pageId} />,
   'tags-page': <TagsList crowi={appContainer} />,
 
-  'create-page-name-input': <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} addTrailingSlash />,
-
   'page-editor': <PageEditor />,
   'page-editor-path-nav': <PagePathNavForEditor />,
   'page-editor-options-selector': <OptionsSelector crowi={appContainer} />,

src/client/js/components/PageCreateModal.jsx

@@ -12,15 +12,21 @@ import { format } from 'date-fns';
 import { userPageRoot } from '@commons/util/path-utils';
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
+import PagePathAutoComplete from './PagePathAutoComplete';
 
 const PageCreateModal = (props) => {
-  const { t, appContainer } = props;
+  const { t, appContainer, pageContainer } = props;
+
+  const config = appContainer.getConfig();
+  const isReachable = config.isSearchServiceReachable;
 
   const [todayInput1, setTodayInput1] = useState(t('Memo'));
   const [todayInput2, setTodayInput2] = useState('');
+  const [pageNameInput, setPageNameInput] = useState('');
 
   /**
-   * onmemo
+   * change todayInput1
    * @param {string} value
    */
   function onChangeTodayInput1(value) {
@@ -28,13 +34,20 @@ const PageCreateModal = (props) => {
   }
 
   /**
-   * onmemo
+   * change todayInput2
    * @param {string} value
    */
   function onChangeTodayInput2(value) {
     setTodayInput2(value);
   }
 
+  /**
+   * change pageNameInput
+   * @param {string} value
+   */
+  function onChangePageNameInput(value) {
+    setPageNameInput(value);
+  }
 
   return (
     <Modal size="lg" isOpen={appContainer.state.isPageCreateModalShown} toggle={appContainer.closePageCreateModal}>
@@ -70,6 +83,32 @@ const PageCreateModal = (props) => {
             </div>
           </fieldset>
         </div>
+
+        <div className="row form-group">
+          <fieldset className="col-12 mb-4">
+            <h3 className="grw-modal-head pb-2">{ t('Create under') }</h3>
+            <div className="d-flex create-page-input-container">
+              <div className="create-page-input-row d-flex align-items-center">
+                {isReachable
+                  ? <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} addTrailingSlash />
+                  : (
+                    <input
+                      type="text"
+                      value="{{ parentPath(path) }}"
+                      className="page-name-input form-control"
+                      placeholder={t('Input page name')}
+                      onChange={e => onChangePageNameInput(e.target.value)}
+                      required
+                    />
+                  )}
+              </div>
+              <div className="create-page-button-container">
+                <button type="submit" className="btn btn-outline-primary rounded-pill"><i className="icon-fw icon-doc"></i>{ t('Create') }</button>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+
       </ModalBody>
       <ModalFooter>
       </ModalFooter>
@@ -83,13 +122,14 @@ const PageCreateModal = (props) => {
  * Wrapper component for using unstated
  */
 const ModalControlWrapper = (props) => {
-  return createSubscribedElement(PageCreateModal, props, [AppContainer]);
+  return createSubscribedElement(PageCreateModal, props, [AppContainer, PageContainer]);
 };
 
 
 PageCreateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
 export default withTranslation()(ModalControlWrapper);

src/server/views/modal/create_page.html

@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
-      <!-- <div class="modal-header bg-primary">
+      <div class="modal-header bg-primary">
         <div class="modal-title text-white">{{ t('New Page') }}</div>
         <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
-      </div> -->
+      </div>
 
       <div class="modal-body">