From 38cadd23f83621ec2ae5d4c855bb9cbb2889b4e4 Mon Sep 17 00:00:00 2001
From: Michael Schramm <michael.schramm@gmail.com>
Date: Thu, 11 Jun 2020 10:36:36 +0200
Subject: [PATCH] add LOGIN_NOTE env variables
 https://github.com/ohmyform/ohmyform/issues/30 and fix lint problems

---
 CHANGELOG.md                                |  1 +
 components/auth/layout.tsx                  |  2 +-
 components/form/admin/types/yes_no.type.tsx |  3 +-
 graphql/query/settings.query.ts             |  6 ++++
 locales/en/login.json                       |  1 +
 pages/form/[id]/index.tsx                   |  2 +-
 pages/index.tsx                             |  2 +-
 pages/login/confirm/[code].tsx              |  2 +-
 pages/login/index.tsx                       | 33 ++++++++++++++++-----
 pages/login/recover.tsx                     |  2 +-
 pages/register.tsx                          |  2 +-
 11 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2fa879..90e604a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - mobile improvements for lists and home page
 - markdown support for page paragraphs and field description
 - omf badge
+- login notes
 
 ### Changed
 ### Fixed
diff --git a/components/auth/layout.tsx b/components/auth/layout.tsx
index 2e6d30f..40e6011 100644
--- a/components/auth/layout.tsx
+++ b/components/auth/layout.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export const AuthLayout: React.FC<Props> = (props) => {
   return (
-    <Spin spinning={props.loading}>
+    <Spin spinning={props.loading || false}>
       <Layout
         style={{
           height: '100vh',
diff --git a/components/form/admin/types/yes_no.type.tsx b/components/form/admin/types/yes_no.type.tsx
index 3f7bb13..30d1d9f 100644
--- a/components/form/admin/types/yes_no.type.tsx
+++ b/components/form/admin/types/yes_no.type.tsx
@@ -1,5 +1,4 @@
-import { Form, Input, Switch } from 'antd'
-import moment, { Moment } from 'moment'
+import { Form, Switch } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AdminFieldTypeProps } from './type.props'
diff --git a/graphql/query/settings.query.ts b/graphql/query/settings.query.ts
index 68b0df6..6c98540 100644
--- a/graphql/query/settings.query.ts
+++ b/graphql/query/settings.query.ts
@@ -4,6 +4,9 @@ export interface SettingsQueryData {
   disabledSignUp: {
     value: boolean
   }
+  loginNote: {
+    value: string
+  }
 }
 
 export const SETTINGS_QUERY = gql`
@@ -11,5 +14,8 @@ export const SETTINGS_QUERY = gql`
     disabledSignUp: getSetting(key: "SIGNUP_DISABLED") {
       value: isTrue
     }
+    loginNote: getSetting(key: "LOGIN_NOTE") {
+      value
+    }
   }
 `
diff --git a/locales/en/login.json b/locales/en/login.json
index 11dda6c..05c1866 100644
--- a/locales/en/login.json
+++ b/locales/en/login.json
@@ -1,5 +1,6 @@
 {
   "invalidLoginCredentials": "username \/ password are invalid",
+  "note": "Note",
   "loginNow": "Login Now",
   "passwordPlaceholder": "Password",
   "usernamePlaceholder": "Username",
diff --git a/pages/form/[id]/index.tsx b/pages/form/[id]/index.tsx
index 787bef0..183670e 100644
--- a/pages/form/[id]/index.tsx
+++ b/pages/form/[id]/index.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import Swiper from 'react-id-swiper'
 import { ReactIdSwiperProps } from 'react-id-swiper/lib/types'
 import * as OriginalSwiper from 'swiper'
-import {Omf} from '../../../components/omf'
+import { Omf } from '../../../components/omf'
 import { useSubmission } from '../../../components/use.submission'
 
 interface Props {
diff --git a/pages/index.tsx b/pages/index.tsx
index a6dab5b..06dcd3b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LoadingPage } from '../components/loading.page'
-import {Omf} from '../components/omf'
+import { Omf } from '../components/omf'
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { publicRuntimeConfig } = getConfig() as {
diff --git a/pages/login/confirm/[code].tsx b/pages/login/confirm/[code].tsx
index ae0b95b..0ba0ae8 100644
--- a/pages/login/confirm/[code].tsx
+++ b/pages/login/confirm/[code].tsx
@@ -3,7 +3,7 @@ import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
 import { NextPage } from 'next'
 import React from 'react'
-import {Omf} from '../../../components/omf'
+import { Omf } from '../../../components/omf'
 
 const Index: NextPage = () => {
   return (
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index b6f12cb..320c068 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -1,5 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
-import { Button, Form, Input, message } from 'antd'
+import { useMutation, useQuery } from '@apollo/react-hooks'
+import { Alert, Button, Form, Input, message } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
@@ -14,7 +14,9 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {Omf} from '../../components/omf'
+import ReactMarkdown from 'react-markdown'
+import { Omf } from '../../components/omf'
+import { SETTINGS_QUERY, SettingsQueryData } from '../../graphql/query/settings.query'
 import scss from './index.module.scss'
 
 const Index: NextPage = () => {
@@ -23,6 +25,7 @@ const Index: NextPage = () => {
   const router = useRouter()
   const [loading, setLoading] = useState(false)
   const [login] = useMutation<LoginMutationData, LoginMutationVariables>(LOGIN_MUTATION)
+  const { data } = useQuery<SettingsQueryData>(SETTINGS_QUERY)
 
   const finish = async (data: LoginMutationVariables) => {
     setLoading(true)
@@ -73,6 +76,18 @@ const Index: NextPage = () => {
           }}
         />
 
+        {data && (
+          <Alert
+            type="warning"
+            showIcon
+            message={t('login:note')}
+            description={<ReactMarkdown escapeHtml={false} source={data.loginNote.value} />}
+            style={{
+              marginBottom: 24,
+            }}
+          />
+        )}
+
         <Form.Item
           name="username"
           rules={[{ required: true, message: t('validation:usernameRequired') }]}
@@ -94,11 +109,13 @@ const Index: NextPage = () => {
         </Form.Item>
 
         <Button.Group className={scss.otherActions}>
-          <Link href={'/register'}>
-            <Button type={'link'} ghost>
-              {t('register')}
-            </Button>
-          </Link>
+          {(!data || !data.disabledSignUp.value) && (
+            <Link href={'/register'}>
+              <Button type={'link'} ghost>
+                {t('register')}
+              </Button>
+            </Link>
+          )}
           <Link href={'/login/recover'}>
             <Button type={'link'} ghost>
               {t('recover')}
diff --git a/pages/login/recover.tsx b/pages/login/recover.tsx
index cde947c..fecd79f 100644
--- a/pages/login/recover.tsx
+++ b/pages/login/recover.tsx
@@ -3,7 +3,7 @@ import { AuthFooter } from 'components/auth/footer'
 import { AuthLayout } from 'components/auth/layout'
 import { NextPage } from 'next'
 import React from 'react'
-import {Omf} from '../../components/omf'
+import { Omf } from '../../components/omf'
 
 const Recover: NextPage = () => {
   return (
diff --git a/pages/register.tsx b/pages/register.tsx
index 0908f78..fd93c5e 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -16,7 +16,7 @@ import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ErrorPage } from '../components/error.page'
-import {Omf} from '../components/omf'
+import { Omf } from '../components/omf'
 import { SETTINGS_QUERY, SettingsQueryData } from '../graphql/query/settings.query'
 import scss from './register.module.scss'