Merge pull request #4014 from weseek/imprv/gw6757-create-mail-submit-route

Imprv/gw6757 create mail submit route and the UI

src/client/js/components/LoginForm.jsx

@@ -268,8 +268,7 @@ class LoginForm extends React.Component {
                 {isRegistrationEnabled && (
                 <div className="row">
                   <div className="col-12 text-right py-2">
-                    {/* TODO switch to password resetting form */}
-                    <a href="#reset-password" id="reset-password" className="d-block link-switch mb-1">
+                    <a href="/forgot-password" className="d-block link-switch mb-1">
                       <i className="icon-key"></i> {t('forgot_password')}
                     </a>
                     <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>

src/client/js/components/PasswordResetRequestForm.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+
+const PasswordResetRequestForm = (props) => {
+  // const { t } = props;
+
+  return (
+    <>
+      {/* TODO: show Password Reset Request Form by GW-6789 */}
+      Password Reset Request Form
+    </>
+  );
+};
+
+PasswordResetRequestForm.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+};
+
+export default withTranslation()(PasswordResetRequestForm);

src/client/js/nologin.jsx

@@ -9,6 +9,7 @@ import AppContainer from './services/AppContainer';
 
 import InstallerForm from './components/InstallerForm';
 import LoginForm from './components/LoginForm';
+import PasswordResetRequestForm from './components/PasswordResetRequestForm';
 
 const i18n = i18nFactory();
 
@@ -77,3 +78,15 @@ if (loginFormElem) {
     loginFormElem,
   );
 }
+
+// render PasswordResetRequestForm
+const passwordResetRequestFormElem = document.getElementById('password-reset-request-form');
+if (passwordResetRequestFormElem) {
+
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <PasswordResetRequestForm />
+    </I18nextProvider>,
+    passwordResetRequestFormElem,
+  );
+}

src/server/routes/forgot-password.js

@@ -0,0 +1,9 @@
+module.exports = function(crowi, app) {
+  const actions = {};
+
+  actions.forgotPassword = async function(req, res) {
+    return res.render('forgot-password');
+  };
+
+  return actions;
+};

src/server/routes/index.js

@@ -28,6 +28,7 @@ module.exports = function(crowi, app) {
   const tag = require('./tag')(crowi, app);
   const search = require('./search')(crowi, app);
   const hackmd = require('./hackmd')(crowi, app);
+  const forgotPassword = require('./forgot-password')(crowi, app);
 
   const isInstalled = crowi.configManager.getConfig('crowi', 'app:installed');
 
@@ -175,6 +176,8 @@ module.exports = function(crowi, app) {
   app.post('/_api/hackmd.discard'        , accessTokenParser , loginRequiredStrictly , csrf, hackmd.validateForApi, hackmd.discard);
   app.post('/_api/hackmd.saveOnHackmd'   , accessTokenParser , loginRequiredStrictly , csrf, hackmd.validateForApi, hackmd.saveOnHackmd);
 
+  app.get('/forgot-password', forgotPassword.forgotPassword);
+
   app.get('/share/:linkId', page.showSharedPage);
 
   app.get('/*/$'                   , loginRequired , page.showPageWithEndOfSlash, page.notFound);

src/server/views/forgot-password.html

@@ -0,0 +1,34 @@
+{% extends './layout/layout.html' %}
+
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('forgot_password')) }}{% endblock %}
+
+
+{#
+  # Remove default contents
+  #}
+ {% block html_head_loading_legacy %}
+ {% endblock %}
+ {% block html_head_loading_app %}
+ {% endblock %}
+ {% block layout_head_nav %}
+ {% endblock %}
+ {% block sidebar %}
+ {% endblock %}
+ {% block head_warn_alert_siteurl_undefined %}
+ {% endblock %}
+ {% block fixed-controls %}
+ {% endblock %}
+
+ {% block html_additional_headers %}
+   <script src="{{ webpack_asset('js/nologin.js') }}" defer></script>
+ {% endblock %}
+
+{% block layout_main %}
+
+  <div id="main" class="main">
+    <div id="content-main" class="content-main container-lg">
+      <div id="password-reset-request-form"></div>
+    </div>
+  </div>
+
+{% endblock %}