✨ Style Login Page (#15)

rebase with upstream

i dont understand why

refactor backgrounds, adjust responsive

update unit tests

again

fix conflicts

fix readme dups and lock conflict

update scripts

rebase

fix merge

fix readme dups and lock conflict

add missing scripts

another

Adjust workflows, fix codeql (#18)

* test codeql

* tweak workflows to follow github docs
fix conflicts

fix readme dups and lock conflict

rebase

more cleanup

fix e2e

all up to date. hopefully

.eslintignore

@@ -7,3 +7,5 @@ scripts/*
 web/playwright-report
 *pw.json
 .yarnrc.yml
+web/config/storybook*
+web/public

.prettierignore

@@ -5,6 +5,7 @@ tmp
 api/types/*
 web/playwright-report/*
 web/types/*
+web/public/*
 .github
 .yarn
 ./index.js

README.md

@@ -33,6 +33,8 @@ yarn rw dev
 ---
 
 ### Testing
+
+
 ```terminal
 # both api and web
 yarn test
@@ -44,6 +46,20 @@ yarn test:nowatch
 yarn test:e2e
 ```
 
+### Storybook
+
+the config files are located in web/config/storybok*
+when reading the [storybook docs](https://storybook.js.org/docs/react/get-started/introduction) they will reference config files not found in this project. The list below provides the interface for these. Note: these configs will override any defaults that redwood has set. You can read more [here](https://redwoodjs.com/docs/storybook#getting-started-with-storybook)
+
+- storybook.config.js -> main.js
+- storybook.manager.js -> manager.js
+- storybook.preview.js -> preview.js
+
+```terminal
+# for development run without a cache
+yarn rw storybook --no-manager-cache
+```
+
 ---
 
 ### Notes

api/src/functions/auth.ts

@@ -128,8 +128,8 @@ export const handler = async (event, context) => {
         data: {
           username: username,
           email: userAttributes.email,
-          hashedPassword: hashedPassword,
-          salt: salt,
+          hashedPassword,
+          salt,
           verifyToken: randomUUID(),
         },
       })
@@ -158,7 +158,7 @@ export const handler = async (event, context) => {
 
   const authHandler = new DbAuthHandler(event, context, {
     // Provide prisma db client
-    db: db,
+    db,
 
     // The name of the property you'd call on `db` to access your user table.
     // i.e. if your Prisma model is named `User` this value would be `user`, as in `db.user`
@@ -170,6 +170,8 @@ export const handler = async (event, context) => {
     authFields: {
       id: 'id',
       username: 'username',
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       email: 'email',
       hashedPassword: 'hashedPassword',
       salt: 'salt',

package.json

@@ -35,10 +35,12 @@
     "lint": "yarn eslint && yarn pretty",
     "eslint": "npx eslint .",
     "pretty": "npx prettier --check .",
-    "dev": "./scripts/dev.sh",
-    "playwright": "npx playwright test -c web/playwright.config.ts --debug",
-    "test:e2e": "./scripts/e2e.ts",
+    "pretty:fix": "npx prettier -c -w .",
+    "dev": "scripts/dev.sh",
+    "storybook": "yarn rw storybook",
+    "storybook:nocache": "yarn storybook --no-manager-cache",
     "test": "yarn rw test",
+    "test:e2e": "./scripts/e2e.ts",
     "schema:format": "npx prisma format",
     "db:setup": "yarn rw prisma migrate dev && yarn rw prisma db seed"
   },

web/config/storybook.config.js

@@ -0,0 +1,7 @@
+// merges with storybook main.js
+module.exports = {
+  /**
+   * @see {@link https://storybook.js.org/addons/tag/essentials}
+   */
+  addons: ['@storybook/addon-essentials'],
+}

web/config/storybook.manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import { themes } from '@storybook/theming'
+
+addons.setConfig({
+  theme: themes.dark,
+})

web/config/storybook.preview.jsx

@@ -0,0 +1,9 @@
+import '../src/index.css'
+
+export const decorators = [
+  (Story) => (
+    <div style={{ margin: '1em' }}>
+      <Story />
+    </div>
+  ),
+]

web/config/tailwind.config.js

@@ -1,9 +1,19 @@
 module.exports = {
   content: ['src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    fontSize: {
+      xs: '0.6rem',
+      sm: '0.8rem',
+      base: '1rem',
+      xl: '1.25rem',
+      '2xl': '1.563rem',
+      '3xl': '1.953rem',
+      '4xl': '2.441rem',
+      '5xl': '3.052rem',
+    },
     extend: {
       backgroundImage: {
-        bg: "url('./images/bg.jpg')",
+        bg: "url('./assets/bg.jpg')",
       },
       backgroundSize: {
         half: '50% 100%',
@@ -22,6 +32,7 @@ module.exports = {
         eternity: '##2d2d2b', // almost black
         sonicSilver: '#747474', // mid gray
       },
+      spacing: {},
     },
     fontFamily: {
       sans: ['Montserrat', 'sans-serif'],

web/package.json

@@ -26,6 +26,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.29.1",
+    "@storybook/addons": "^6.5.15",
+    "@storybook/theming": "^6.5.15",
     "@testing-library/user-event": "^14.4.3",
     "@types/crypto-js": "^4.1.1",
     "autoprefixer": "^10.4.13",

web/playwright.config.ts

@@ -43,7 +43,6 @@ const BROWSERS_TO_RUN = process.env.BROWSERS?.split(',')
 const config: PlaywrightTestConfig = {
   globalSetup: require.resolve('./playwright.setup.ts'),
   testDir: './tests',
-
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,

web/playwright.setup.ts

@@ -7,16 +7,18 @@ async function globalSetup() {
   const adminLogin = await browser.newPage()
   await adminLogin.goto(`${BASE_URL}/login`)
 
-  const usernameInput = adminLogin.getByLabel('username')
+  const usernameInput = adminLogin.getByRole('textbox', { name: 'Username' })
   await usernameInput.click()
   await usernameInput.fill('admin')
 
-  const passwordInput = adminLogin.getByLabel('password')
+  const passwordInput = adminLogin.getByRole('textbox', { name: 'Password' })
   await passwordInput.click()
   await passwordInput.fill('password')
 
   await adminLogin.getByRole('button', { name: 'Login' }).click()
   await adminLogin.waitForURL(BASE_URL, { waitUntil: 'domcontentloaded' })
+  await adminLogin.getByRole('button', { name: 'Log in' }).click()
+  await adminLogin.waitForURL(BASE_URL, { waitUntil: 'domcontentloaded' })
 
   await adminLogin
     .context()
@@ -31,6 +33,18 @@ async function globalSetup() {
   await userLogin.locator('input[name="password"]').fill('password')
   await userLogin.getByRole('button', { name: 'Login' }).click()
   await userLogin.waitForURL(BASE_URL, { waitUntil: 'domcontentloaded' })
+  const usersUserInput = userLogin.getByRole('textbox', { name: 'Username' })
+  await usersUserInput.click()
+  await usersUserInput.fill('user')
+
+  const usersPasswordInput = userLogin.getByRole('textbox', {
+    name: 'Password',
+  })
+  await usersPasswordInput.click()
+  await usersPasswordInput.fill('password')
+
+  await userLogin.getByRole('button', { name: 'Log in' }).click()
+  await userLogin.waitForURL(BASE_URL, { waitUntil: 'domcontentloaded' })
 
   await userLogin
     .context()

web/src/App.tsx

@@ -1,5 +1,6 @@
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
+import { Toaster } from '@redwoodjs/web/dist/toast'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
@@ -14,6 +15,7 @@ const App = () => (
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
         <RedwoodApolloProvider useAuth={useAuth}>
+          <Toaster toastOptions={{ className: 'bg-white', duration: 6000 }} />
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>

web/src/Routes.tsx

@@ -6,7 +6,7 @@ import { AdminLayout } from './layouts/Admin/AdminLayout'
 import { RolesLayout } from './layouts/Admin/RolesLayout'
 import { TeamsLayout } from './layouts/Admin/TeamsLayout'
 import { UsersLayout } from './layouts/Admin/UsersLayout'
-import { MainLayout } from './layouts/MainLayout/MainLayout'
+import { MainLayout } from './layouts/MainLayout'
 import { ProfileLayout } from './layouts/ProfileLayout'
 
 const Routes = () => {