Moved the M3O-UI package to this repo. (#94)

* Added the packages over from m3o-ui

* Added fixes for the imports

* Added prettier

.gitignore

@@ -5,3 +5,7 @@ redoc-static.html
 node_modules
 postman.json
 .npmrc
+.turbo
+.next
+.env.local
+dist

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true
+}

apps/nextjs-auth-example/.env.local.example

@@ -0,0 +1,3 @@
+M3O_KEY=
+M3O_USER_SESSION_COOKIE_NAME=
+NEXT_PUBLIC_API_FOLDER_NAME=

apps/nextjs-auth-example/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('eslint/eslint-preset')

apps/nextjs-auth-example/components/Header.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { useUser, useLogout } from '@m3o/auth'
+
+export function Header() {
+  const { user, isAuthenticating } = useUser()
+  const router = useRouter()
+
+  const { logout } = useLogout({
+    onSuccess: () => {
+      router.push('/')
+    }
+  })
+
+  return (
+    <>
+      <header className="header">
+        <div className="container flex header-container">
+          <h1 className="title">
+            <Link href="/">
+              <a>Auth Example</a>
+            </Link>
+          </h1>
+          {isAuthenticating ? (
+            <p>Loading...</p>
+          ) : (
+            <div>
+              {user ? (
+                <button className="btn" onClick={logout} data-testid="logout">
+                  Logout
+                </button>
+              ) : (
+                <Link href="/login">
+                  <a className="m3o-button" data-testid="login">
+                    Login
+                  </a>
+                </Link>
+              )}
+            </div>
+          )}
+        </div>
+      </header>
+      <style jsx>{`
+        .header {
+          padding: 1rem;
+          border-bottom: 1px solid #dedede;
+          background: white;
+        }
+
+        .header-container {
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .title {
+          font-size: 1rem;
+        }
+      `}</style>
+    </>
+  )
+}

apps/nextjs-auth-example/components/Layout.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement, PropsWithChildren } from 'react'
+import { Header } from './Header'
+
+export function Layout({ children }: PropsWithChildren<{}>): ReactElement {
+  return (
+    <div>
+      <Header />
+      <div className="container">{children}</div>
+      <style jsx global>{`
+        .container {
+          max-width: 77.5rem;
+          margin: 0 auto;
+        }
+
+        .flex {
+          display: flex;
+        }
+      `}</style>
+      <style jsx global>{`
+        body {
+          margin: 0;
+          color: #333;
+          font-family: ui-sans-serif, system-ui, -apple-system,
+            BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+            Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+            Segoe UI Symbol, Noto Color Emoji;
+        }
+      `}</style>
+    </div>
+  )
+}

apps/nextjs-auth-example/cypress.json

@@ -0,0 +1,12 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "chromeWebSecurity": false,
+  "viewportWidth": 1000,
+  "viewportHeight": 1000,
+  "fixturesFolder": false,
+  "pluginsFile": false,
+  "reporter": "junit",
+  "retries": {
+    "runMode": 3
+  }
+}

apps/nextjs-auth-example/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/nextjs-auth-example/cypress/integration/user/smoke.test.js

@@ -0,0 +1,91 @@
+/// <reference types="cypress" />
+
+import Chance from 'chance'
+
+const chance = new Chance()
+const EMAIL = Cypress.env('USER_EMAIL')
+const PASSWORD = Cypress.env('USER_PASSWORD')
+
+if (!EMAIL || !PASSWORD) {
+  throw new Error(
+    'You must provide CYPRESS_USER_EMAIL and CYPRESS_USER_PASSWORD environment variables'
+  )
+}
+
+function login(email = EMAIL, password = PASSWORD) {
+  cy.get('[data-testid=login]').click()
+  cy.get('[name=email]').type(email)
+  cy.get('[name=password]').type(password)
+  cy.get('[data-testid=submit-button').click()
+  cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+  cy.get('[data-testid=logged-in-email]').contains(email)
+  cy.get('[data-testid=login]').should('not.exist')
+  cy.get('[data-testid=logout]').should('exist')
+}
+
+describe('smoke tests', () => {
+  beforeEach(() => {
+    cy.intercept('POST', '/api/user/send-password-reset-email', {
+      statusCode: 200,
+      body: {}
+    }).as('sendPasswordResetEmail')
+
+    cy.intercept('POST', '/api/user/reset-password', {
+      statusCode: 200,
+      body: {}
+    }).as('resetPassword')
+  })
+
+  it('should login and provider the username on the landing page', () => {
+    cy.visit('/')
+    login()
+    cy.get('[data-testid=logged-in-email]').contains(EMAIL)
+    cy.get('[data-testid=login]').should('not.exist')
+    cy.get('[data-testid=logout]').should('exist')
+  })
+
+  it('should register a new user', () => {
+    cy.visit('/sign-up')
+    const email = chance.email()
+    const password = chance.string({ length: 8 })
+    cy.get('[name="profile.firstName"]').type(chance.first())
+    cy.get('[name="profile.lastName"]').type(chance.last())
+    cy.get('[name=email]').type(email)
+    cy.get('[name=password]').type(password)
+    cy.get('[data-testid=sign-up-button]').click()
+    cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+    login(email, password)
+  })
+
+  it('should show the correct errors on the login screen', () => {
+    cy.visit('/')
+    cy.get('[data-testid=login]').click()
+    cy.get('[name=email]').type(EMAIL)
+    cy.get('[name=password]').type(PASSWORD + '1')
+    cy.get('[data-testid=submit-button').click()
+    cy.get('.error-alert').contains('Incorrect password')
+  })
+
+  it('should not allow unauthorized users to view the "private-server" page', () => {
+    cy.visit('/private-server')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+  })
+
+  it('should not allow unauthorized users to view the "private-client" page', () => {
+    cy.visit('/private-client')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+  })
+
+  it('should allow authorized users to view the "private-server" page', () => {
+    login()
+    cy.visit('/private-server')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/private-server`)
+  })
+
+  it('should allow authorized users to view the "private-client" page', () => {
+    cy.visit('/')
+    login()
+    cy.visit('/private-client')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/private-client`)
+  })
+})

apps/nextjs-auth-example/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

apps/nextjs-auth-example/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

apps/nextjs-auth-example/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

apps/nextjs-auth-example/lib/constants.ts

@@ -0,0 +1,2 @@
+export const EMAIL_REGEX =
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

apps/nextjs-auth-example/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/nextjs-auth-example/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true
+}