Merge branch 'support/apply-nextjs-2' into support/create-UsersHomePageFooter-integrate

packages/app/config/rate-limiter.ts

@@ -33,7 +33,7 @@ export const defaultConfig: IApiRateLimitEndpointMap = {
     maxRequests: MAX_REQUESTS_TIER_1,
     usersPerIpProspection: 100,
   },
-  '/login/activateInvited': {
+  '/invited/activateInvited': {
     method: 'POST',
     maxRequests: MAX_REQUESTS_TIER_2,
   },

packages/app/public/static/locales/en_US/translation.json

@@ -674,6 +674,10 @@
     "Registration successful": "Registration successful",
     "Setup": "Setup"
   },
+  "invited": {
+    "discription_heading": "Create Account",
+    "discription": "Create an your account with the invited email address"
+  },
   "export_bulk": {
     "failed_to_export": "Failed to export",
     "failed_to_count_pages": "Failed to count pages",

packages/app/public/static/locales/ja_JP/translation.json

@@ -665,6 +665,10 @@
     "Registration successful": "登録完了",
     "Setup": "セットアップ"
   },
+  "invited": {
+    "discription_heading": "アカウント作成",
+    "discription": "招待を受け取ったメールアドレスでアカウントを作成します"
+  },
   "export_bulk": {
     "failed_to_export": "ページのエクスポートに失敗しました",
     "failed_to_count_pages": "ページ数の取得に失敗しました",

packages/app/public/static/locales/zh_CN/translation.json

@@ -721,6 +721,10 @@
 		"Registration successful": "注册成功",
 		"Setup": "安装程序"
 	},
+  "invited": {
+    "discription_heading": "创建账户",
+    "discription": "用被邀请的电子邮件地址创建一个你的账户"
+  },
   "export_bulk": {
     "failed_to_export": "导出失败",
     "failed_to_count_pages": "页面计数失败",

packages/app/src/client/services/ContextExtractor.tsx

@@ -145,7 +145,7 @@ const ContextExtractorOnce: FC = () => {
   useIsIdenticalPath(isIdenticalPath);
   useIsNotCreatable(isNotCreatable);
   useIsForbidden(isForbidden);
-  useIsTrashPage(isTrashPage);
+  // useIsTrashPage(isTrashPage);
   useIsUserPage(isUserPage);
   useLastUpdateUsername(lastUpdateUsername);
   useCurrentPageId(pageId);

packages/app/src/components/Common/ClosableTextInput.tsx

@@ -30,7 +30,8 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
 
   const [inputText, setInputText] = useState(props.value);
   const [currentAlertInfo, setAlertInfo] = useState<AlertInfo | null>(null);
-  const [isAbleToShowAlert, setIsAbleToShowAlert] = useState<boolean>(false);
+  const [isAbleToShowAlert, setIsAbleToShowAlert] = useState(false);
+  const [isComposing, setComposing] = useState(false);
 
   const createValidation = async(inputText: string) => {
     if (props.inputValidator != null) {
@@ -63,6 +64,10 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
   const onKeyDownHandler = (e) => {
     switch (e.key) {
       case 'Enter':
+        // Do nothing when composing
+        if (isComposing) {
+          return;
+        }
         onPressEnter();
         break;
       default:
@@ -107,7 +112,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
 
 
   return (
-    <div className="d-block flex-fill">
+    <div>
       <input
         value={inputText || ''}
         ref={inputRef}
@@ -115,9 +120,12 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
         className="form-control"
         placeholder={props.placeholder}
         name="input"
+        data-testid="closable-text-input"
         onFocus={onFocusHandler}
         onChange={onChangeHandler}
         onKeyDown={onKeyDownHandler}
+        onCompositionStart={() => setComposing(true)}
+        onCompositionEnd={() => setComposing(false)}
         onBlur={onBlurHandler}
         autoFocus={false}
       />

packages/app/src/components/EmptyTrashButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -12,7 +12,7 @@ import { useEmptyTrashModal } from '~/stores/modal';
 import { useSWRxDescendantsPageListForCurrrentPath, useSWRxPageInfoForList } from '~/stores/page-listing';
 
 
-const EmptyTrashButton = () => {
+const EmptyTrashButton: FC = () => {
   const { t } = useTranslation();
   const { open: openEmptyTrashModal } = useEmptyTrashModal();
   const { data: pagingResult, mutate } = useSWRxDescendantsPageListForCurrrentPath();
@@ -40,7 +40,6 @@ const EmptyTrashButton = () => {
   }, [t, mutate]);
 
   const emptyTrashClickHandler = () => {
-    if (deletablePages.length === 0) { return }
     openEmptyTrashModal(deletablePages, { onEmptiedTrash: onEmptiedTrashHandler, canDelepeAllPages: pagingResult?.totalCount === deletablePages.length });
   };
 
@@ -49,6 +48,7 @@ const EmptyTrashButton = () => {
       <button
         type="button"
         className="btn btn-outline-secondary rounded-pill text-danger d-flex align-items-center"
+        disabled={deletablePages.length === 0}
         onClick={() => emptyTrashClickHandler()}
       >
         <i className="icon-fw icon-trash"></i>

packages/app/src/components/IdenticalPathPage.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { DevidedPagePath } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 
-import { useCurrentPagePath, useIsSharedUser } from '~/stores/context';
+import { useCurrentPathname, useIsSharedUser } from '~/stores/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
 import { useSWRxPageInfoForList, useSWRxPagesByPath } from '~/stores/page-listing';
 
@@ -52,7 +52,7 @@ const IdenticalPathAlert : FC<IdenticalPathAlertProps> = (props: IdenticalPathAl
 export const IdenticalPathPage = (): JSX.Element => {
   const { t } = useTranslation();
 
-  const { data: currentPath } = useCurrentPagePath();
+  const { data: currentPath } = useCurrentPathname();
   const { data: isSharedUser } = useIsSharedUser();
 
   const { data: pages } = useSWRxPagesByPath(currentPath);

packages/app/src/components/InvitedForm.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { useCsrfToken, useCurrentUser } from '../stores/context';
+
+export type InvitedFormProps = {
+  invitedFormUsername: string,
+  invitedFormName: string,
+}
+
+export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
+  const { t } = useTranslation();
+  const { data: csrfToken } = useCsrfToken();
+  const { data: user } = useCurrentUser();
+
+  const { invitedFormUsername, invitedFormName } = props;
+
+  if (user == null) {
+    return <></>;
+  }
+
+  return (
+    <div className="noLogin-dialog p-3 mx-auto" id="noLogin-dialog">
+      <p className="alert alert-success">
+        <strong>{ t('invited.discription_heading') }</strong><br></br>
+        <small>{ t('invited.discription') }</small>
+      </p>
+      <form role="form" action="/invited/activateInvited" method="post" id="invited-form">
+        {/* Email Form */}
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-envelope"></i>
+            </span>
+          </div>
+          <input
+            type="text"
+            className="form-control"
+            disabled
+            placeholder={t('Email')}
+            name="invitedForm[email]"
+            defaultValue={user.email}
+            required
+          />
+        </div>
+        {/* UserID Form */}
+        <div className="input-group" id="input-group-username">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-user"></i>
+            </span>
+          </div>
+          <input
+            type="text"
+            className="form-control"
+            placeholder={t('User ID')}
+            name="invitedForm[username]"
+            value={invitedFormUsername}
+            required
+          />
+        </div>
+        {/* Name Form */}
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-tag"></i>
+            </span>
+          </div>
+          <input
+            type="text"
+            className="form-control"
+            placeholder={t('Name')}
+            name="invitedForm[name]"
+            value={invitedFormName}
+            required
+          />
+        </div>
+        {/* Password Form */}
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-lock"></i>
+            </span>
+          </div>
+          <input
+            type="password"
+            className="form-control"
+            placeholder={t('Password')}
+            name="invitedForm[password]"
+            required
+          />
+        </div>
+        {/* Create Button */}
+        <div className="input-group justify-content-center d-flex mt-5">
+          <input type="hidden" name="_csrf" value={csrfToken} />
+          <button type="submit" className="btn btn-fill" id="register">
+            <div className="eff"></div>
+            <span className="btn-label"><i className="icon-user-follow"></i></span>
+            <span className="btn-label-text">{t('Create')}</span>
+          </button>
+        </div>
+      </form>
+      <div className="input-group mt-5 d-flex justify-content-center">
+        <a href="https://growi.org" className="link-growi-org">
+          <span className="growi">GROWI</span>.<span className="org">ORG</span>
+        </a>
+      </div>
+    </div>
+  );
+};

packages/app/src/components/Layout/NoLoginLayout.tsx

@@ -34,10 +34,9 @@ export const NoLoginLayout = ({
                     <h1 className="my-3">GROWI</h1>
                     <div className="noLogin-form-errors px-3"></div>
                   </div>
+                  {children}
                 </div>
 
-                {children}
-
               </div>
             </div>
           </div>

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -19,15 +19,13 @@ import { HasChildren } from '../../interfaces/common';
 import GrowiLogo from '../Icons/GrowiLogo';
 
 import { GlobalSearchProps } from './GlobalSearch';
-import PersonalDropdown from './PersonalDropdown';
 
 import styles from './GrowiNavbar.module.scss';
 
+const PersonalDropdown = dynamic(() => import('./PersonalDropdown'), { ssr: false });
 const InAppNotificationDropdown = dynamic(() => import('../InAppNotification/InAppNotificationDropdown')
   .then(mod => mod.InAppNotificationDropdown), { ssr: false });
 const AppearanceModeDropdown = dynamic(() => import('./AppearanceModeDropdown').then(mod => mod.AppearanceModeDropdown), { ssr: false });
-const GlobalSearch = dynamic<GlobalSearchProps>(() => import('./GlobalSearch').then(mod => mod.GlobalSearch), { ssr: false });
-
 
 const NavbarRight = memo((): JSX.Element => {
   const { t } = useTranslation();
@@ -72,7 +70,7 @@ const NavbarRight = memo((): JSX.Element => {
         </li>
       </>
     );
-  }, [isAuthenticated, openCreateModal, currentPagePath]);
+  }, [t, isAuthenticated, openCreateModal, currentPagePath]);
 
   const notAuthenticatedNavItem = useMemo(() => {
     return (
@@ -123,6 +121,8 @@ Confidential.displayName = 'Confidential';
 
 export const GrowiNavbar = (): JSX.Element => {
 
+  const GlobalSearch = dynamic<GlobalSearchProps>(() => import('./GlobalSearch').then(mod => mod.GlobalSearch), { ssr: false });
+
   const { data: appTitle } = useAppTitle();
   const { data: confidential } = useConfidential();
   const { data: isSearchServiceConfigured } = useIsSearchServiceConfigured();
@@ -144,14 +144,18 @@ export const GrowiNavbar = (): JSX.Element => {
         {appTitle}
       </div>
 
+
       {/* Navbar Right  */}
       <ul className="navbar-nav ml-auto">
         <NavbarRight />
         <Confidential confidential={confidential} />
       </ul>
-      <div className="grw-global-search-container position-absolute">
-        { isSearchServiceConfigured && !isDeviceSmallerThanMd && !isSearchPage && (<GlobalSearch />) }
-      </div>
+
+      { isSearchServiceConfigured && !isDeviceSmallerThanMd && !isSearchPage && (
+        <div className="grw-global-search-container position-absolute">
+          <GlobalSearch />
+        </div>
+      ) }
     </nav>
   );
 

packages/app/src/components/PagePathNav.tsx

@@ -1,15 +1,15 @@
 import React, { FC } from 'react';
 
-import { DevidedPagePath } from '@growi/core';
+import { DevidedPagePath, pagePathUtils } from '@growi/core';
 import dynamic from 'next/dynamic';
 
 import { useIsNotFound } from '~/stores/context';
 
 import LinkedPagePath from '../models/linked-page-path';
 
-const PagePathHierarchicalLink = dynamic(() => import('./PagePathHierarchicalLink'), { ssr: false });
-const CopyDropdown = dynamic(() => import('./Page/CopyDropdown'), { ssr: false });
+import PagePathHierarchicalLink from './PagePathHierarchicalLink';
 
+const { isTrashPage } = pagePathUtils;
 
 type Props = {
   pagePath: string,
@@ -18,28 +18,32 @@ type Props = {
   isCompactMode?:boolean,
 }
 
+const CopyDropdown = dynamic(() => import('./Page/CopyDropdown'), { ssr: false });
+
 const PagePathNav: FC<Props> = (props: Props) => {
   const {
     pageId, pagePath, isSingleLineMode, isCompactMode,
   } = props;
+  const dPagePath = new DevidedPagePath(pagePath, false, true);
 
   const { data: isNotFound } = useIsNotFound();
 
-  const dPagePath = new DevidedPagePath(pagePath, false, true);
+  const isInTrash = isTrashPage(pagePath);
 
   let formerLink;
   let latterLink;
+
   // one line
   if (dPagePath.isRoot || dPagePath.isFormerRoot || isSingleLineMode) {
     const linkedPagePath = new LinkedPagePath(pagePath);
-    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
+    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} isInTrash={isInTrash} />;
   }
   // two line
   else {
     const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
     const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
-    formerLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} />;
-    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} />;
+    formerLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} isInTrash={isInTrash} />;
+    latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} isInTrash={isInTrash} />;
   }
 
   const copyDropdownId = `copydropdown${isCompactMode ? '-subnav-compact' : ''}-${pageId}`;
@@ -47,7 +51,7 @@ const PagePathNav: FC<Props> = (props: Props) => {
 
   return (
     <div className="grw-page-path-nav">
-      { formerLink }
+      {formerLink}
       <span className="d-flex align-items-center">
         <h1 className="m-0">{latterLink}</h1>
         { pageId != null && !isNotFound && (

packages/app/src/components/ShareLink/ShareLink.tsx

@@ -9,7 +9,7 @@ import { apiv3Delete } from '~/client/util/apiv3-client';
 import { useCurrentPageId } from '~/stores/context';
 import { useSWRxSharelink } from '~/stores/share-link';
 
-import ShareLinkForm from './ShareLinkForm';
+import { ShareLinkForm } from './ShareLinkForm';
 import ShareLinkList from './ShareLinkList';
 
 const ShareLink = (): JSX.Element => {

packages/app/src/components/ShareLink/ShareLinkForm.jsx

@@ -1,277 +0,0 @@
-import React from 'react';
-
-import { isInteger } from 'core-js/fn/number';
-import { format, parse } from 'date-fns';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'next-i18next';
-
-import PageContainer from '~/client/services/PageContainer';
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import { apiv3Post } from '~/client/util/apiv3-client';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-
-class ShareLinkForm extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      expirationType: 'unlimited',
-      numberOfDays: '7',
-      description: '',
-      customExpirationDate: format(new Date(), 'yyyy-MM-dd'),
-      customExpirationTime: format(new Date(), 'HH:mm'),
-    };
-
-    this.handleChangeExpirationType = this.handleChangeExpirationType.bind(this);
-    this.handleChangeNumberOfDays = this.handleChangeNumberOfDays.bind(this);
-    this.handleChangeDescription = this.handleChangeDescription.bind(this);
-    this.handleIssueShareLink = this.handleIssueShareLink.bind(this);
-  }
-
-  /**
-   * change expirationType
-   * @param {string} expirationType
-   */
-  handleChangeExpirationType(expirationType) {
-    this.setState({ expirationType });
-  }
-
-  /**
-   * change numberOfDays
-   * @param {string} numberOfDays
-   */
-  handleChangeNumberOfDays(numberOfDays) {
-    this.setState({ numberOfDays });
-  }
-
-  /**
-   * change description
-   * @param {string} description
-   */
-  handleChangeDescription(description) {
-    this.setState({ description });
-  }
-
-  /**
-   * change customExpirationDate
-   * @param {date} customExpirationDate
-   */
-  handleChangeCustomExpirationDate(customExpirationDate) {
-    this.setState({ customExpirationDate });
-  }
-
-  /**
-   * change customExpirationTime
-   * @param {date} customExpirationTime
-   */
-  handleChangeCustomExpirationTime(customExpirationTime) {
-    this.setState({ customExpirationTime });
-  }
-
-  /**
-   * Generate expiredAt by expirationType
-   */
-  generateExpired() {
-    const { t } = this.props;
-    const { expirationType } = this.state;
-    let expiredAt;
-
-    if (expirationType === 'unlimited') {
-      return null;
-    }
-
-    if (expirationType === 'numberOfDays') {
-      if (!isInteger(Number(this.state.numberOfDays))) {
-        throw new Error(t('share_links.Invalid_Number_of_Date'));
-      }
-      const date = new Date();
-      date.setDate(date.getDate() + Number(this.state.numberOfDays));
-      expiredAt = date;
-    }
-
-    if (expirationType === 'custom') {
-      const { customExpirationDate, customExpirationTime } = this.state;
-      expiredAt = parse(`${customExpirationDate}T${customExpirationTime}`, "yyyy-MM-dd'T'HH:mm", new Date());
-    }
-
-    return expiredAt;
-  }
-
-  closeForm() {
-    const { onCloseForm } = this.props;
-
-    if (onCloseForm == null) {
-      return;
-    }
-    onCloseForm();
-  }
-
-  async handleIssueShareLink() {
-    const {
-      t, pageContainer,
-    } = this.props;
-    const { pageId } = pageContainer.state;
-    const { description } = this.state;
-
-    let expiredAt;
-
-    try {
-      expiredAt = this.generateExpired();
-    }
-    catch (err) {
-      return toastError(err);
-    }
-
-    try {
-      await apiv3Post('/share-links/', { relatedPage: pageId, expiredAt, description });
-      this.closeForm();
-      toastSuccess(t('toaster.issue_share_link'));
-    }
-    catch (err) {
-      toastError(err);
-    }
-
-  }
-
-  renderExpirationTypeOptions() {
-    const { expirationType } = this.state;
-    const { t } = this.props;
-
-    return (
-      <div className="form-group row">
-        <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.expire')}</label>
-        <div className="col-md-7">
-
-
-          <div className="custom-control custom-radio form-group ">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="customRadio1"
-              name="expirationType"
-              value="customRadio1"
-              checked={expirationType === 'unlimited'}
-              onChange={() => { this.handleChangeExpirationType('unlimited') }}
-            />
-            <label className="custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
-          </div>
-
-          <div className="custom-control custom-radio  form-group">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="customRadio2"
-              value="customRadio2"
-              checked={expirationType === 'numberOfDays'}
-              onChange={() => { this.handleChangeExpirationType('numberOfDays') }}
-              name="expirationType"
-            />
-            <label className="custom-control-label" htmlFor="customRadio2">
-              <div className="row align-items-center m-0">
-                <input
-                  type="number"
-                  min="1"
-                  className="col-4"
-                  name="expirationType"
-                  value={this.state.numberOfDays}
-                  onFocus={() => { this.handleChangeExpirationType('numberOfDays') }}
-                  onChange={e => this.handleChangeNumberOfDays(Number(e.target.value))}
-                />
-                <span className="col-auto">{t('share_links.Days')}</span>
-              </div>
-            </label>
-          </div>
-
-          <div className="custom-control custom-radio form-group text-nowrap mb-0">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="customRadio3"
-              name="expirationType"
-              value="customRadio3"
-              checked={expirationType === 'custom'}
-              onChange={() => { this.handleChangeExpirationType('custom') }}
-            />
-            <label className="custom-control-label" htmlFor="customRadio3">
-              {t('share_links.Custom')}
-            </label>
-            <div className="d-inline-flex flex-wrap">
-              <input
-                type="date"
-                className="ml-3 mb-2"
-                name="customExpirationDate"
-                value={this.state.customExpirationDate}
-                onFocus={() => { this.handleChangeExpirationType('custom') }}
-                onChange={e => this.handleChangeCustomExpirationDate(e.target.value)}
-              />
-              <input
-                type="time"
-                className="ml-3 mb-2"
-                name="customExpiration"
-                value={this.state.customExpirationTime}
-                onFocus={() => { this.handleChangeExpirationType('custom') }}
-                onChange={e => this.handleChangeCustomExpirationTime(e.target.value)}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderDescriptionForm() {
-    const { t } = this.props;
-    return (
-      <div className="form-group row">
-        <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.description')}</label>
-        <div className="col-md-4">
-          <input
-            type="text"
-            className="form-control"
-            id="inputDesc"
-            placeholder={t('share_links.enter_desc')}
-            value={this.state.description}
-            onChange={e => this.handleChangeDescription(e.target.value)}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <div className="share-link-form p-3">
-        <h3 className="grw-modal-head pb-2"> { t('share_links.share_settings') }</h3>
-        <div className=" p-3">
-          {this.renderExpirationTypeOptions()}
-          {this.renderDescriptionForm()}
-          <button type="button" className="btn btn-primary d-block mx-auto px-5" onClick={this.handleIssueShareLink}>
-            {t('share_links.Issue')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-ShareLinkForm.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  onCloseForm: PropTypes.func,
-};
-
-const ShareLinkFormWrapperFC = (props) => {
-  const { t } = useTranslation();
-  return <ShareLinkForm t={t} {...props} />;
-};
-
-/**
- * Wrapper component for using unstated
- */
-const ShareLinkFormWrapper = withUnstatedContainers(ShareLinkFormWrapperFC, [PageContainer]);
-
-export default ShareLinkFormWrapper;

packages/app/src/components/ShareLink/ShareLinkForm.tsx

@@ -0,0 +1,212 @@
+import React, { FC, useState, useCallback } from 'react';
+
+import { isInteger } from 'core-js/fn/number';
+import { format, parse } from 'date-fns';
+import { useTranslation } from 'next-i18next';
+
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import { apiv3Post } from '~/client/util/apiv3-client';
+import { useCurrentPageId } from '~/stores/context';
+
+
+const ExpirationType = {
+  UNLIMITED: 'unlimited',
+  CUSTOM: 'custom',
+  NUMBER_OF_DAYS: 'numberOfDays',
+} as const;
+
+type ExpirationType = typeof ExpirationType[keyof typeof ExpirationType];
+
+type Props = {
+  onCloseForm: () => void,
+}
+
+export const ShareLinkForm: FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
+  const { onCloseForm } = props;
+
+  const [expirationType, setExpirationType] = useState<ExpirationType>(ExpirationType.UNLIMITED);
+  const [numberOfDays, setNumberOfDays] = useState<number>(7);
+  const [description, setDescription] = useState<string>('');
+  const [customExpirationDate, setCustomExpirationDate] = useState<Date>(new Date());
+  const [customExpirationTime, setCustomExpirationTime] = useState<Date>(new Date());
+
+  const { data: currentPageId } = useCurrentPageId();
+
+  const handleChangeExpirationType = useCallback((expirationType: ExpirationType) => {
+    setExpirationType(expirationType);
+  }, []);
+
+  const handleChangeNumberOfDays = useCallback((numberOfDays: number) => {
+    setNumberOfDays(numberOfDays);
+  }, []);
+
+  const handleChangeDescription = useCallback((description: string) => {
+    setDescription(description);
+  }, []);
+
+  const handleChangeCustomExpirationDate = useCallback((customExpirationDate: string) => {
+    const parsedDate = parse(customExpirationDate, 'yyyy-MM-dd', new Date());
+    setCustomExpirationDate(parsedDate);
+  }, []);
+
+  const handleChangeCustomExpirationTime = useCallback((customExpirationTime: string) => {
+    const parsedTime = parse(customExpirationTime, 'HH:mm', new Date());
+    setCustomExpirationTime(parsedTime);
+  }, []);
+
+  const generateExpired = useCallback(() => {
+    let expiredAt;
+
+    if (expirationType === ExpirationType.UNLIMITED) {
+      return null;
+    }
+
+    if (expirationType === ExpirationType.NUMBER_OF_DAYS) {
+      if (!isInteger(Number(numberOfDays))) {
+        throw new Error(t('share_links.Invalid_Number_of_Date'));
+      }
+      const date = new Date();
+      date.setDate(date.getDate() + Number(numberOfDays));
+      expiredAt = date;
+    }
+
+    if (expirationType === ExpirationType.CUSTOM) {
+      expiredAt = parse(`${customExpirationDate}T${customExpirationTime}`, "yyyy-MM-dd'T'HH:mm", new Date());
+    }
+
+    return expiredAt;
+  }, [t, customExpirationTime, customExpirationDate, expirationType, numberOfDays]);
+
+  const closeForm = useCallback(() => {
+    if (onCloseForm == null) {
+      return;
+    }
+    onCloseForm();
+  }, [onCloseForm]);
+
+  const handleIssueShareLink = useCallback(async() => {
+    let expiredAt;
+
+    try {
+      expiredAt = generateExpired();
+    }
+    catch (err) {
+      return toastError(err);
+    }
+
+    try {
+      await apiv3Post('/share-links/', { relatedPage: currentPageId, expiredAt, description });
+      closeForm();
+      toastSuccess(t('toaster.issue_share_link'));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [t, currentPageId, description, closeForm, generateExpired]);
+
+  return (
+    <div className="share-link-form p-3">
+      <h3 className="grw-modal-head pb-2"> { t('share_links.share_settings') }</h3>
+      <div className=" p-3">
+
+        {/* ExpirationTypeOptions */}
+        <div className="form-group row">
+          <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.expire')}</label>
+          <div className="col-md-7">
+
+            <div className="custom-control custom-radio form-group ">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="customRadio1"
+                name="expirationType"
+                value="customRadio1"
+                checked={expirationType === ExpirationType.UNLIMITED}
+                onChange={() => { handleChangeExpirationType(ExpirationType.UNLIMITED) }}
+              />
+              <label className="custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
+            </div>
+
+            <div className="custom-control custom-radio  form-group">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="customRadio2"
+                value="customRadio2"
+                checked={expirationType === ExpirationType.NUMBER_OF_DAYS}
+                onChange={() => { handleChangeExpirationType(ExpirationType.NUMBER_OF_DAYS) }}
+                name="expirationType"
+              />
+              <label className="custom-control-label" htmlFor="customRadio2">
+                <div className="row align-items-center m-0">
+                  <input
+                    type="number"
+                    min="1"
+                    className="col-4"
+                    name="expirationType"
+                    value={numberOfDays}
+                    onFocus={() => { handleChangeExpirationType(ExpirationType.NUMBER_OF_DAYS) }}
+                    onChange={e => handleChangeNumberOfDays(Number(e.target.value))}
+                  />
+                  <span className="col-auto">{t('share_links.Days')}</span>
+                </div>
+              </label>
+            </div>
+
+            <div className="custom-control custom-radio form-group text-nowrap mb-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="customRadio3"
+                name="expirationType"
+                value="customRadio3"
+                checked={expirationType === ExpirationType.CUSTOM}
+                onChange={() => { handleChangeExpirationType(ExpirationType.CUSTOM) }}
+              />
+              <label className="custom-control-label" htmlFor="customRadio3">
+                {t('share_links.Custom')}
+              </label>
+              <div className="d-inline-flex flex-wrap">
+                <input
+                  type="date"
+                  className="ml-3 mb-2"
+                  name="customExpirationDate"
+                  value={format(customExpirationDate, 'yyyy-MM-dd')}
+                  onFocus={() => { handleChangeExpirationType(ExpirationType.CUSTOM) }}
+                  onChange={e => handleChangeCustomExpirationDate(e.target.value)}
+                />
+                <input
+                  type="time"
+                  className="ml-3 mb-2"
+                  name="customExpiration"
+                  value={format(customExpirationTime, 'HH:mm')}
+                  onFocus={() => { handleChangeExpirationType(ExpirationType.CUSTOM) }}
+                  onChange={e => handleChangeCustomExpirationTime(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* DescriptionForm */}
+        <div className="form-group row">
+          <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.description')}</label>
+          <div className="col-md-4">
+            <input
+              type="text"
+              className="form-control"
+              id="inputDesc"
+              placeholder={t('share_links.enter_desc')}
+              value={description}
+              onChange={e => handleChangeDescription(e.target.value)}
+            />
+          </div>
+        </div>
+        <button type="button" className="btn btn-primary d-block mx-auto px-5" onClick={handleIssueShareLink}>
+          {t('share_links.Issue')}
+        </button>
+      </div>
+    </div>
+  );
+};

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useState, FC, useEffect,
+  useCallback, useState, FC, useEffect, ReactNode,
 } from 'react';
 
 import nodePath from 'path';
@@ -94,6 +94,15 @@ const isDroppable = (fromPage?: Partial<IPageHasId>, newParentPage?: Partial<IPa
   return pagePathUtils.canMoveByPath(fromPage.path, newPathAfterMoved) && !pagePathUtils.isUsersTopPage(newParentPage.path);
 };
 
+// Component wrapper to make a child element not draggable
+// https://github.com/react-dnd/react-dnd/issues/335
+type NotDraggableProps = {
+  children: ReactNode,
+};
+const NotDraggableForClosableTextInput = (props: NotDraggableProps): JSX.Element => {
+  return <div draggable onDragStart={e => e.preventDefault()}>{props.children}</div>;
+};
+
 
 const Item: FC<ItemProps> = (props: ItemProps) => {
   const { t } = useTranslation();
@@ -440,13 +449,17 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         </div>
         { isRenameInputShown
           ? (
-            <ClosableTextInput
-              value={nodePath.basename(page.path ?? '')}
-              placeholder={t('Input page name')}
-              onClickOutside={() => { setRenameInputShown(false) }}
-              onPressEnter={onPressEnterForRenameHandler}
-              inputValidator={inputValidator}
-            />
+            <div className="flex-fill">
+              <NotDraggableForClosableTextInput>
+                <ClosableTextInput
+                  value={nodePath.basename(page.path ?? '')}
+                  placeholder={t('Input page name')}
+                  onClickOutside={() => { setRenameInputShown(false) }}
+                  onPressEnter={onPressEnterForRenameHandler}
+                  inputValidator={inputValidator}
+                />
+              </NotDraggableForClosableTextInput>
+            </div>
           )
           : (
             <>
@@ -502,12 +515,16 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       </li>
 
       {isEnableActions && isNewPageInputShown && (
-        <ClosableTextInput
-          placeholder={t('Input page name')}
-          onClickOutside={() => { setNewPageInputShown(false) }}
-          onPressEnter={onPressEnterForCreateHandler}
-          inputValidator={inputValidator}
-        />
+        <div className="flex-fill">
+          <NotDraggableForClosableTextInput>
+            <ClosableTextInput
+              placeholder={t('Input page name')}
+              onClickOutside={() => { setNewPageInputShown(false) }}
+              onPressEnter={onPressEnterForCreateHandler}
+              inputValidator={inputValidator}
+            />
+          </NotDraggableForClosableTextInput>
+        </div>
       )}
       {
         isOpen && hasChildren() && currentChildren.map((node, index) => (

packages/app/src/pages/[[...path]].page.tsx

@@ -242,7 +242,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
 
   useCurrentPageId(pageId);
   useSWRxCurrentPage(undefined, pageWithMeta?.data); // store initial data
-  useIsTrashPage(_isTrashPage(pagePath));
   useIsUserPage(isUserPage(pagePath));
   useIsNotCreatable(props.isForbidden || !isCreatablePage(pagePath)); // TODO: need to include props.isIdentical
   useCurrentPagePath(pagePath);

packages/app/src/pages/installer.page.tsx

@@ -47,10 +47,8 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
 
   return (
     <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-      <div className="col-md-12">
-        <div id="installer-form-container">
-          <InstallerForm />
-        </div>
+      <div id="installer-form-container">
+        <InstallerForm />
       </div>
     </NoLoginLayout>
   );

packages/app/src/pages/invited.page.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { IUserHasId, IUser } from '@growi/core';
+import { NextPage, GetServerSideProps, GetServerSidePropsContext } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import dynamic from 'next/dynamic';
+
+import { InvitedFormProps } from '~/components/InvitedForm';
+import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
+import { CrowiRequest } from '~/interfaces/crowi-request';
+
+import { useCsrfToken, useCurrentPathname, useCurrentUser } from '../stores/context';
+
+import {
+  CommonProps, getServerSideCommonProps, useCustomTitle, getNextI18NextConfig,
+} from './utils/commons';
+
+const InvitedForm = dynamic<InvitedFormProps>(() => import('~/components/InvitedForm').then(mod => mod.InvitedForm), { ssr: false });
+
+type Props = CommonProps & {
+  currentUser: IUser,
+  invitedFormUsername: string,
+  invitedFormName: string,
+}
+
+const InvitedPage: NextPage<Props> = (props: Props) => {
+
+  useCsrfToken(props.csrfToken);
+  useCurrentPathname(props.currentPathname);
+  useCurrentUser(props.currentUser);
+
+  const classNames: string[] = ['invited-page'];
+
+  return (
+    <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
+      <InvitedForm invitedFormUsername={props.invitedFormUsername} invitedFormName={props.invitedFormName} />
+    </NoLoginLayout>
+  );
+
+};
+
+async function injectServerConfigurations(context: GetServerSidePropsContext, props: Props): Promise<void> {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { body: invitedForm } = req;
+
+  if (props.invitedFormUsername != null) {
+    props.invitedFormUsername = invitedForm.username;
+  }
+  if (props.invitedFormName != null) {
+    props.invitedFormName = invitedForm.name;
+  }
+}
+
+/**
+ * for Server Side Translations
+ * @param context
+ * @param props
+ * @param namespacesRequired
+ */
+async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
+  const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired);
+  props._nextI18Next = nextI18NextConfig._nextI18Next;
+}
+
+export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
+  const req = context.req as CrowiRequest<IUserHasId & any>;
+  const { user } = req;
+  const result = await getServerSideCommonProps(context);
+
+  // check for presence
+  // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
+  if (!('props' in result)) {
+    throw new Error('invalid getSSP result');
+  }
+  const props: Props = result.props as Props;
+
+  if (user != null) {
+    props.currentUser = user.toObject();
+  }
+
+  await injectServerConfigurations(context, props);
+  await injectNextI18NextConfigurations(context, props, ['translation']);
+
+  return { props };
+};
+
+export default InvitedPage;

packages/app/src/pages/login.page.tsx

@@ -19,6 +19,8 @@ import {
   CommonProps, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
+const LoginForm = dynamic(() => import('~/components/LoginForm'), { ssr: false });
+
 type Props = CommonProps & {
 
   pageWithMetaStr: string,
@@ -37,16 +39,10 @@ const LoginPage: NextPage<Props> = (props: Props) => {
 
   const classNames: string[] = ['login-page'];
 
-  const LoginForm = dynamic(() => import('~/components/LoginForm'), {
-    ssr: false,
-  });
-
   return (
     <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-      <div className="col-md-12">
-        <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} isLocalStrategySetup={true} isLdapStrategySetup={true}
-          isRegistrationEnabled={true} registrationWhiteList={props.registrationWhiteList} isPasswordResetEnabled={true} />
-      </div>
+      <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} isLocalStrategySetup={true} isLdapStrategySetup={true}
+        isRegistrationEnabled={true} registrationWhiteList={props.registrationWhiteList} isPasswordResetEnabled={true} />
     </NoLoginLayout>
   );
 };

packages/app/src/pages/trash.page.tsx

@@ -1,18 +1,19 @@
+import React from 'react';
+
 import {
   IUser, IUserHasId,
 } from '@growi/core';
-
-import dynamic from 'next/dynamic';
 import { NextPage, GetServerSideProps, GetServerSidePropsContext } from 'next';
+import dynamic from 'next/dynamic';
 
-import GrowiContextualSubNavigation from '~/components/Navbar/GrowiContextualSubNavigation';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 import { IUserUISettings } from '~/interfaces/user-ui-settings';
 import UserUISettings from '~/server/models/user-ui-settings';
 
 import { BasicLayout } from '../components/Layout/BasicLayout';
+import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import {
-  useCurrentUser, useIsTrashPage, useCurrentPagePath, useCurrentPathname,
+  useCurrentUser, useCurrentPageId, useCurrentPagePath, useCurrentPathname,
   useIsSearchServiceConfigured, useIsSearchServiceReachable,
   useIsSearchScopeChildrenAsDefault,
 } from '../stores/context';
@@ -21,6 +22,10 @@ import {
   CommonProps, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
+const TrashPageList = dynamic(() => import('~/components/TrashPageList').then(mod => mod.TrashPageList), { ssr: false });
+const EmptyTrashModal = dynamic(() => import('~/components/EmptyTrashModal'), { ssr: false });
+const PutbackPageModal = dynamic(() => import('~/components/PutbackPageModal'), { ssr: false });
+
 type Props = CommonProps & {
   currentUser: IUser,
   isSearchServiceConfigured: boolean,
@@ -30,15 +35,13 @@ type Props = CommonProps & {
 };
 
 const TrashPage: NextPage<CommonProps> = (props: Props) => {
-  const TrashPageList = dynamic(() => import('~/components/TrashPageList').then(mod => mod.TrashPageList), { ssr: false });
-
   useCurrentUser(props.currentUser ?? null);
 
   useIsSearchServiceConfigured(props.isSearchServiceConfigured);
   useIsSearchServiceReachable(props.isSearchServiceReachable);
   useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
 
-  useIsTrashPage(true);
+  useCurrentPageId(null);
   useCurrentPathname('/trash');
   useCurrentPagePath('/trash');
 
@@ -48,10 +51,16 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
         <header className="py-0 position-relative">
           <GrowiContextualSubNavigation isLinkSharingDisabled={false} />
         </header>
+
         <div className="grw-container-convertible mb-5 pb-5">
           <TrashPageList />
         </div>
+
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
       </BasicLayout>
+
+      <EmptyTrashModal />
+      <PutbackPageModal />
     </>
   );
 };

packages/app/src/server/crowi/dev.js

@@ -1,5 +1,7 @@
 import path from 'path';
 
+import express from 'express';
+
 import { i18n } from '^/config/next-i18next.config';
 
 import loggerFactory from '~/utils/logger';
@@ -27,7 +29,6 @@ class CrowiDev {
     this.requireForAutoReloadServer();
 
     this.initPromiseRejectionWarningHandler();
-    this.initSwig();
   }
 
   initPromiseRejectionWarningHandler() {
@@ -35,10 +36,6 @@ class CrowiDev {
     process.on('unhandledRejection', console.dir); // eslint-disable-line no-console
   }
 
-  initSwig() {
-    swig.setDefaults({ cache: false });
-  }
-
   /**
    * require files for node-dev auto reloading
    */
@@ -58,6 +55,8 @@ class CrowiDev {
     const port = this.crowi.port;
     let server = app;
 
+    this.setupExpressBeforeListening(app);
+
     // for log
     let serverUrl = `http://localhost:${port}}`;
 
@@ -90,12 +89,11 @@ class CrowiDev {
     return server;
   }
 
-  /**
-   *
-   * @param {any} app express
-   */
+  setupExpressBeforeListening(app) {
+    this.setupNextBundleAnalyzer(app);
+  }
+
   setupExpressAfterListening(app) {
-    // this.setupHeaderDebugger(app);
     // this.setupBrowserSync(app);
     this.setupWebpackHmr(app);
     this.setupNextjsStackFrame(app);
@@ -128,6 +126,11 @@ class CrowiDev {
   //   app.use(require('connect-browser-sync')(bs));
   // }
 
+  setupNextBundleAnalyzer(app) {
+    const next = nextFactory(this.crowi);
+    app.use('/analyze', express.static(path.resolve(__dirname, '../../../.next/analyze')));
+  }
+
   setupWebpackHmr(app) {
     const next = nextFactory(this.crowi);
     app.all('/_next/webpack-hmr', next.delegateToNext);

packages/app/src/server/middlewares/login-required.js

@@ -27,7 +27,7 @@ module.exports = (crowi, isGuestAllowed = false, fallback = null) => {
         return res.redirect('/login/error/suspended');
       }
       if (req.user.status === User.STATUS_INVITED) {
-        return res.redirect('/login/invited');
+        return res.redirect('/invited');
       }
     }
 

packages/app/src/server/routes/index.js

@@ -80,15 +80,15 @@ module.exports = function(crowi, app) {
 
   app.get('/login/error/:reason'      , applicationInstalled, login.error);
   app.get('/login'                    , applicationInstalled, login.preLogin, next.delegateToNext);
-  app.get('/login/invited'            , applicationInstalled, login.invited);
-  app.post('/login/activateInvited'   , applicationInstalled, loginFormValidator.inviteRules(), loginFormValidator.inviteValidation, csrfProtection, login.invited);
+  app.get('/invited'                  , applicationInstalled, next.delegateToNext);
+  app.post('/invited/activateInvited' , applicationInstalled, loginFormValidator.inviteRules(), loginFormValidator.inviteValidation, csrfProtection, login.invited);
   app.post('/login'                   , applicationInstalled, loginFormValidator.loginRules(), loginFormValidator.loginValidation, csrfProtection,  addActivity, loginPassport.loginWithLocal, loginPassport.loginWithLdap, loginPassport.loginFailure);
 
   app.post('/register'                , applicationInstalled, registerFormValidator.registerRules(), registerFormValidator.registerValidation, csrfProtection, addActivity, login.register);
   app.get('/register'                 , applicationInstalled, login.preLogin, login.register);
 
   app.get('/admin/*'                    , applicationInstalled, loginRequiredStrictly , adminRequired , next.delegateToNext);
-  // app.get('/admin'                    , applicationInstalled, loginRequiredStrictly , adminRequired , admin.index);
+  app.get('/admin'                    , applicationInstalled, loginRequiredStrictly , adminRequired , next.delegateToNext);
   // app.get('/admin/app'                , applicationInstalled, loginRequiredStrictly , adminRequired , admin.app.index);
 
   // installer

packages/app/test/cypress/integration/50-sidebar/access-to-side-bar.spec.ts

@@ -102,7 +102,7 @@ context('Access to sidebar', () => {
     });
 
     cy.get('.grw-pagetree-item-children').eq(0).within(() => {
-      cy.get('.flex-fill > input').type('_newname');
+      cy.getByTestid('closable-text-input').type('_newname');
     });
 
     cy.getByTestid('grw-contextual-navigation-sub').screenshot(`${ssPrefix}page-tree-6-rename-page`);

packages/app/test/integration/middlewares/login-required.test.js

@@ -47,7 +47,7 @@ describe('loginRequired', () => {
         userStatus  | expectedPath
         ${1}        | ${'/login/error/registered'}
         ${3}        | ${'/login/error/suspended'}
-        ${5}        | ${'/login/invited'}
+        ${5}        | ${'/invited'}
       `('redirect to \'$expectedPath\' when user.status is \'$userStatus\'', ({ userStatus, expectedPath }) => {
 
         req.user = {
@@ -122,7 +122,7 @@ describe('loginRequired', () => {
         userStatus  | expectedPath
         ${1}        | ${'/login/error/registered'}
         ${3}        | ${'/login/error/suspended'}
-        ${5}        | ${'/login/invited'}
+        ${5}        | ${'/invited'}
       `('redirect to \'$expectedPath\' when user.status is \'$userStatus\'', ({ userStatus, expectedPath }) => {
 
         req.user = {
@@ -248,7 +248,7 @@ describe('loginRequired', () => {
       userStatus  | expectedPath
       ${1}        | ${'/login/error/registered'}
       ${3}        | ${'/login/error/suspended'}
-      ${5}        | ${'/login/invited'}
+      ${5}        | ${'/invited'}
     `('redirect to \'$expectedPath\' when user.status is \'$userStatus\'', ({ userStatus, expectedPath }) => {
       req.user = {
         _id: 'user id',