add LOGIN_NOTE env variables https://github.com/ohmyform/ohmyform/issues/30 and fix lint problems

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

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',

components/form/admin/types/yes_no.type.tsx

@@ -1,5 +1,4 @@
-import { Form, Input, Switch } from 'antd'
+import { Form, Switch } from 'antd'
-import moment, { Moment } from 'moment'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AdminFieldTypeProps } from './type.props'

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
+    }
   }
 `

locales/en/login.json

@@ -1,5 +1,6 @@
 {
   "invalidLoginCredentials": "username \/ password are invalid",
+  "note": "Note",
   "loginNow": "Login Now",
   "passwordPlaceholder": "Password",
   "usernamePlaceholder": "Username",

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 {

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 {

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 (

pages/login/index.tsx

@@ -1,5 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, useQuery } from '@apollo/react-hooks'
-import { Button, Form, Input, message } from 'antd'
+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'}>
+          {(!data || !data.disabledSignUp.value) && (
-            <Button type={'link'} ghost>
+            <Link href={'/register'}>
-              {t('register')}
+              <Button type={'link'} ghost>
-            </Button>
+                {t('register')}
-          </Link>
+              </Button>
+            </Link>
+          )}
           <Link href={'/login/recover'}>
             <Button type={'link'} ghost>
               {t('recover')}

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 (

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'