|
|
@@ -0,0 +1,133 @@
|
|
|
+import React from 'react';
|
|
|
+
|
|
|
+import {
|
|
|
+ NextPage, GetServerSideProps, GetServerSidePropsContext,
|
|
|
+} from 'next';
|
|
|
+import { useTranslation } from 'next-i18next';
|
|
|
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
|
|
+import { useRouter } from 'next/router';
|
|
|
+
|
|
|
+import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
|
|
|
+import {
|
|
|
+ CommonProps, getServerSideCommonProps, getNextI18NextConfig,
|
|
|
+} from '~/pages/utils/commons';
|
|
|
+
|
|
|
+
|
|
|
+type Props = CommonProps;
|
|
|
+const classNames: string[] = ['login-page'];
|
|
|
+
|
|
|
+const LoginPage: NextPage<CommonProps> = () => {
|
|
|
+
|
|
|
+ const { t } = useTranslation();
|
|
|
+ const router = useRouter();
|
|
|
+ const { message } = router.query;
|
|
|
+
|
|
|
+
|
|
|
+ let loginErrorElm;
|
|
|
+
|
|
|
+ const ApprovalPendingUserError = () => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div className="alert alert-warning">
|
|
|
+ <h2>{ t('login.sign_in_error') }</h2>
|
|
|
+ </div>
|
|
|
+ <p>Wait for approved by administrators.</p>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const SuspendedUserError = () => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div className="alert alert-warning">
|
|
|
+ <h2>{ t('login.sign_in_error') }</h2>
|
|
|
+ </div>
|
|
|
+ <p>This account is suspended.</p>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const PasswordResetOrderError = () => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div className="alert alert-warning mb-3">
|
|
|
+ <h2>{ t('forgot_password.incorrect_token_or_expired_url') }</h2>
|
|
|
+ </div>
|
|
|
+ <a href="/forgot-password" className="link-switch">
|
|
|
+ <i className="icon-key"></i> { t('forgot_password.forgot_password') }
|
|
|
+ </a>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const DefaultLoginError = () => {
|
|
|
+ return (
|
|
|
+ <div className="alert alert-warning">
|
|
|
+ <h2>{ t('login.sign_in_error') }</h2>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ switch (message) {
|
|
|
+ case 'registered':
|
|
|
+ loginErrorElm = <ApprovalPendingUserError />;
|
|
|
+ break;
|
|
|
+ case 'suspended':
|
|
|
+ loginErrorElm = <SuspendedUserError />;
|
|
|
+ break;
|
|
|
+ case 'password-reset-order':
|
|
|
+ loginErrorElm = <PasswordResetOrderError />;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ loginErrorElm = <DefaultLoginError />;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <NoLoginLayout className={classNames.join(' ')}>
|
|
|
+ <div className="mb-4 login-form-errors text-center">
|
|
|
+ <div className='noLogin-dialog pb-4 mx-auto'>
|
|
|
+ <div className="col-12">
|
|
|
+ {loginErrorElm}
|
|
|
+ </div>
|
|
|
+ {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
|
|
|
+ <a href='/login'>
|
|
|
+ <i className="icon-login mr-1" />{t('Sign in is here')}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </NoLoginLayout>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 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 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;
|
|
|
+
|
|
|
+ await injectNextI18NextConfigurations(context, props, ['translation']);
|
|
|
+
|
|
|
+ return {
|
|
|
+ props,
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+export default LoginPage;
|
Kaori Tokashiki