get server side props is mailer setup

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

@@ -698,7 +698,8 @@
     "success_to_send_email": "Success to send email",
     "feature_is_unavailable": "This feature is unavailable.",
     "incorrect_token_or_expired_url": "The token is incorrect or the URL has expired. Please resend a password reset request via the link below.",
-    "password_and_confirm_password_does_not_match": "Password and confirm password does not match"
+    "password_and_confirm_password_does_not_match": "Password and confirm password does not match",
+    "please_enable_mailer_alert": "The password reset feature is disabled because email setup has not been completed. Please ask administrator to complete the email setup."
   },
   "emoji" :{
     "title": "Pick an Emoji",

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

@@ -698,7 +698,8 @@
     "success_to_send_email": "メールを送信しました",
     "feature_is_unavailable": "この機能を利用することはできません。",
     "incorrect_token_or_expired_url":"トークンが正しくないか、URLの有効期限が切れています。 以下のリンクからパスワードリセットリクエストを再送信してください。",
-    "password_and_confirm_password_does_not_match": "パスワードと確認パスワードが一致しません"
+    "password_and_confirm_password_does_not_match": "パスワードと確認パスワードが一致しません",
+    "please_enable_mailer_alert": "メール設定が完了していないため、パスワード再設定機能が無効になっています。メール設定を完了させるよう管理者に依頼してください。"
   },
   "emoji" :{
     "title": "絵文字を選択",

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

@@ -703,7 +703,8 @@
     "success_to_send_email": "我发了一封电子邮件",
     "feature_is_unavailable": "此功能不可用",
     "incorrect_token_or_expired_url":"令牌不正确或 URL 已过期。 请通过以下链接重新发送密码重置请求",
-    "password_and_confirm_password_does_not_match": "密码和确认密码不匹配"
+    "password_and_confirm_password_does_not_match": "密码和确认密码不匹配",
+    "please_enable_mailer_alert": "密码重置功能被禁用，因为电子邮件设置尚未完成。请要求管理员完成电子邮件的设置。"
   },
   "emoji" :{
     "title": "选择一个表情符号",

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -34,33 +34,38 @@ const PasswordResetRequestForm: FC = () => {
 
   return (
     <form onSubmit={sendPasswordResetRequestMail}>
-      {!isMailerSetup && (
+      {!isMailerSetup ? (
         <div className="alert alert-danger">
-          {t('commons:alert.password_reset_please_enable_mailer')}
+          {t('forgot_password.please_enable_mailer_alert')}
         </div>
+      ) : (
+        <>
+          <h1><i className="icon-lock large"></i></h1>
+          <h1 className="text-center">{ t('forgot_password.forgot_password') }</h1>
+          <h3>{t('forgot_password.password_reset_request_desc')}</h3>
+          <div className="form-group">
+            <div className="input-group">
+              <input
+                name="email"
+                placeholder="E-mail Address"
+                className="form-control"
+                type="email"
+                disabled={!isMailerSetup}
+                onChange={e => changeEmail(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="form-group">
+            <button
+              className="btn btn-lg btn-primary btn-block"
+              type="submit"
+              disabled={!isMailerSetup}
+            >
+              {t('forgot_password.send')}
+            </button>
+          </div>
+        </>
       )}
-      <h3>{t('forgot_password.password_reset_request_desc')}</h3>
-      <div className="form-group">
-        <div className="input-group">
-          <input
-            name="email"
-            placeholder="E-mail Address"
-            className="form-control"
-            type="email"
-            disabled={!isMailerSetup}
-            onChange={e => changeEmail(e.target.value)}
-          />
-        </div>
-      </div>
-      <div className="form-group">
-        <button
-          className="btn btn-lg btn-primary btn-block"
-          type="submit"
-          disabled={!isMailerSetup}
-        >
-          {t('forgot_password.send')}
-        </button>
-      </div>
       <Link href='/login' prefetch={false}>
         <i className="icon-login mr-1" />{t('forgot_password.return_to_login')}
       </Link>

apps/app/src/pages/forgot-password.page.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 
 import { NextPage, GetServerSideProps, GetServerSidePropsContext } from 'next';
-import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 
+import { CrowiRequest } from '~/interfaces/crowi-request';
+import { useIsMailerSetup } from '~/stores/context';
+
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps,
 } from './utils/commons';
 
 const PasswordResetRequestForm = dynamic(() => import('~/components/PasswordResetRequestForm'), { ssr: false });
 
-const ForgotPasswordPage: NextPage = () => {
-  const { t } = useTranslation();
+type Props = CommonProps & {
+  isMailerSetup: boolean,
+};
+
+const ForgotPasswordPage: NextPage<Props> = (props: Props) => {
+  useIsMailerSetup(props.isMailerSetup);
 
   return (
     <div id="main" className="main">
@@ -21,8 +27,6 @@ const ForgotPasswordPage: NextPage = () => {
           <div className="row justify-content-md-center">
             <div className="col-md-6 mt-5">
               <div className="text-center">
-                <h1><i className="icon-lock large"></i></h1>
-                <h1 className="text-center">{ t('forgot_password.forgot_password') }</h1>
                 <PasswordResetRequestForm />
               </div>
             </div>
@@ -34,11 +38,19 @@ const ForgotPasswordPage: NextPage = () => {
 };
 
 // eslint-disable-next-line max-len
-async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: CommonProps, namespacesRequired?: string[] | undefined): Promise<void> {
+async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
   const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired);
   props._nextI18Next = nextI18NextConfig._nextI18Next;
 }
 
+const injectServerConfigurations = async(context: GetServerSidePropsContext, props: Props): Promise<void> => {
+  const req: CrowiRequest = context.req as CrowiRequest;
+  const { crowi } = req;
+  const { mailService } = crowi;
+
+  props.isMailerSetup = mailService.isMailerSetup;
+};
+
 export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
   const result = await getServerSideCommonProps(context);
 
@@ -48,8 +60,9 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
     throw new Error('invalid getSSP result');
   }
 
-  const props: CommonProps = result.props as CommonProps;
+  const props: Props = result.props as Props;
 
+  injectServerConfigurations(context, props);
   await injectNextI18NextConfigurations(context, props, ['translation', 'commons']);
 
   return {