fix(pages/api): escape html in send-email

.github/workflows/Divlo.yml

@@ -2,9 +2,9 @@ name: 'Divlo'
 
 on:
   push:
-    branches: [master, development]
+    branches: [master]
   pull_request:
-    branches: [master, development]
+    branches: [master]
 
 jobs:
   ci:

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,28 @@
+name: 'CodeQL'
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  analyze:
+    name: 'Analyze'
+    runs-on: 'ubuntu-latest'
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript']
+
+    steps:
+      - uses: 'actions/checkout@v2'
+
+      - name: 'Initialize CodeQL'
+        uses: 'github/codeql-action/init@v1'
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: 'Perform CodeQL Analysis'
+        uses: 'github/codeql-action/analyze@v1'

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: 'release'
+name: 'Release'
 
 on:
   workflow_run:

.gitignore

@@ -26,10 +26,21 @@ coverage
 # debug
 npm-debug.log*
 
-# editors
-.vscode
-.theia
-.idea
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 .DS_Store

.gitpod.yml

@@ -0,0 +1,27 @@
+image: 'gitpod/workspace-full'
+
+tasks:
+  - name: 'docker-daemon'
+    init: 'cp .env.example .env && npm install --global npm@7 && npm ci'
+    command: 'sudo docker-up'
+  - name: 'docker-container'
+    init: 'echo "Waiting for docker daemon to start" &&
+      until docker info &> /dev/null; do sleep 1; done;'
+    command: 'docker-compose up'
+
+ports:
+  - port: 3000
+    onOpen: 'open-preview'
+
+  - port: 1080
+    onOpen: 'notify'
+
+github:
+  prebuilds:
+    master: true
+    branches: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addComment: true
+    addBadge: true
+    addLabel: true

.releaserc.json

@@ -1,11 +1,11 @@
 {
-  "release": {
-    "branches": ["master"]
-  },
   "plugins": [
-    ["@semantic-release/commit-analyzer", {
+    [
+      "@semantic-release/commit-analyzer",
+      {
         "preset": "conventionalcommits"
-    }],
+      }
+    ],
     "@semantic-release/release-notes-generator",
     "@semantic-release/github"
   ]

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "divlo.vscode-styled-jsx-syntax",
+    "divlo.vscode-styled-jsx-languageserver",
+    "standard.vscode-standard",
+    "mikestead.dotenv",
+    "editorconfig.editorconfig",
+    "coenraads.bracket-pair-colorizer",
+    "davidanson.vscode-markdownlint",
+    "syler.sass-indented"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "standard.enable": true,
+  "standard.engine": "ts-standard",
+  "standard.treatErrorsAsWarnings": true,
+  "standard.usePackageJson": true,
+  "standard.autoFixOnSave": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

CONTRIBUTING.md

@@ -47,6 +47,8 @@ Scopes define what part of the code changed.
 
 ## Getting Started
 
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Divlo/Divlo)
+
 ### Installation
 
 ```sh

__test__/pages/404.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import Error404 from 'pages/404'
+
+describe('GET /404', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Error404 />)
+    expect(getByText('404')).toBeInTheDocument()
+  })
+})

__test__/pages/500.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import Error500 from 'pages/500'
+
+describe('GET /500', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Error500 />)
+    expect(getByText('500')).toBeInTheDocument()
+  })
+})

components/ErrorPage.tsx

@@ -16,7 +16,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = props => {
         {t('errors:error')} <span className='important'>{statusCode}</span>
       </h1>
       <p className='text-center'>
-        {message} <Link href='/'>{t('returnToHomePage')}</Link>
+        {message} <Link href='/'>{t('errors:returnToHomePage')}</Link>
       </p>
 
       <style jsx global>{`

components/Header/__test__/Header.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Header } from '..'
+
+describe('<Header />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Header />)
+    expect(getByText('Divlo')).toBeInTheDocument()
+  })
+})

components/__test__/ErrorPage.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+
+import { ErrorPage } from '../ErrorPage'
+
+describe('<ErrorPage />', () => {
+  it('should render the message and statusCode', async () => {
+    const messageContent = 'message content'
+    const statusCode = 404
+    const { getByText } = render(
+      <ErrorPage statusCode={statusCode} message={messageContent} />
+    )
+    expect(getByText(messageContent)).toBeInTheDocument()
+    expect(getByText(statusCode)).toBeInTheDocument()
+  })
+})

components/__test__/Footer.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Footer } from '../Footer'
+
+describe('<Footer />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Footer />)
+    expect(getByText('Divlo')).toBeInTheDocument()
+  })
+})

components/design/__test__/Input.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+
+import { Input } from '../Input'
+
+describe('<Input />', () => {
+  it('should render the label', async () => {
+    const labelContent = 'label content'
+    const { getByText } = render(<Input label={labelContent} />)
+    expect(getByText(labelContent)).toBeInTheDocument()
+  })
+})

jest.config.js

@@ -18,7 +18,8 @@ module.exports = {
     '!**/next.config.js',
     '!**/postcss.config.js',
     '!**/workbox-*.js',
-    '!**/sw.js'
+    '!**/sw.js',
+    '!**/jest.config.js'
   ],
   coverageDirectory: './coverage',
   coverageReporters: ['text', 'cobertura']

package.json

@@ -56,7 +56,7 @@
     "react-component-form": "1.3.0",
     "react-dom": "17.0.2",
     "universal-cookie": "4.0.4",
-    "validator": "13.5.2"
+    "validator": "13.6.0"
   },
   "devDependencies": {
     "@commitlint/cli": "12.1.1",

pages/api/send-email.ts

@@ -17,21 +17,19 @@ const emailTransporter = nodemailer.createTransport({
   }
 })
 
-export default async (
+const handler = async (
   request: NextApiRequest,
   response: NextApiResponse
 ): Promise<any> => {
   if (request.method !== 'POST') {
     return response.redirect('/404')
   }
-
-  let { name, email, subject, message } = request.body as {
+  const { name, email, subject, message } = request.body as {
     name: string
     email: string
     subject: string
     message: string
   }
-
   if (
     validator.isEmpty(name) ||
     validator.isEmpty(email) ||
@@ -40,26 +38,18 @@ export default async (
   ) {
     return response.status(400).json({ type: 'requiredFields' })
   }
-
   if (!validator.isEmail(email)) {
     return response.status(400).json({ type: 'invalidEmail' })
   }
-
-  email = validator.normalizeEmail(email) as string
-  message = validator.trim(message)
-  message = validator.escape(message)
-  subject = validator.trim(subject)
-  subject = validator.escape(subject)
-
   try {
     await emailTransporter.sendMail({
       from: '"Divlo" <contact@divlo.fr>',
       to: email,
-      subject: `Contact - ${subject}`,
+      subject: `Contact - ${validator.escape(subject)}`,
       html: `
-                <b>Name:</b> ${name} <br/>
-                <b>Email:</b> ${email} <br/>
-                <b>Message:</b> ${message}
+                <b>Name:</b> ${validator.escape(name)} <br/>
+                <b>Email:</b> ${validator.escape(email)} <br/>
+                <b>Message:</b> ${validator.escape(message)}
             `
     })
     return response.status(201).json({ type: 'success' })
@@ -67,3 +57,5 @@ export default async (
     return response.status(500).json({ type: 'serverError' })
   }
 }
+
+export default handler