-
-
+
-
Browse
diff --git a/client/src/components/SideNavChannel.tsx b/client/components/SideNavChannel.tsx similarity index 100% rename from client/src/components/SideNavChannel.tsx rename to client/components/SideNavChannel.tsx diff --git a/client/src/components/SignupForm.tsx b/client/components/SignupForm.tsx similarity index 81% rename from client/src/components/SignupForm.tsx rename to client/components/SignupForm.tsx index c1b9715..634596f 100644 --- a/client/src/components/SignupForm.tsx +++ b/client/components/SignupForm.tsx @@ -1,8 +1,10 @@ import { zodResolver } from '@hookform/resolvers/zod'; -import { FC } from 'react'; +import { SelfServiceRegistrationFlow } from '@ory/client'; +import { FC, useEffect, useState } from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import { z } from 'zod'; + import FormField from './FormField'; import InlineLink from './InlineLink'; import SubmitButton from './SubmitButton'; @@ -24,12 +26,15 @@ const SignupFormSchema = z type SignupFormValues = z.infer; const SignupForm: FC = () => { + // const navigate = useNavigate(); + // const { flow: flowId, return_to: returnTo } = useParams<{ flow?: string; return_to?: string }>(); + // const [flow, setFlow] = useState (); const { register, handleSubmit } = useForm ({ resolver: zodResolver(SignupFormSchema), }); - const onSubmit: SubmitHandler = (data) => { - console.log({ data }); + const onSubmit: SubmitHandler = async (data) => { + console.log({data}) }; return ( @@ -63,7 +68,7 @@ const SignupForm: FC = () => { /> By clicking Sign Up, you are agreeing to twitch-clone's{' '} -
+ Terms of Service . diff --git a/client/src/components/SubmitButton.tsx b/client/components/SubmitButton.tsx similarity index 100% rename from client/src/components/SubmitButton.tsx rename to client/components/SubmitButton.tsx diff --git a/client/config/index.ts b/client/config/index.ts new file mode 100644 index 0000000..5421cc1 --- /dev/null +++ b/client/config/index.ts @@ -0,0 +1,2 @@ +export const API_URL = 'http://localhost:5000'; +export const KRATOS_URL = 'http://127.0.0.1:4433'; diff --git a/client/cypress.config.ts b/client/cypress.config.ts deleted file mode 100644 index 7ecbaa1..0000000 --- a/client/cypress.config.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineConfig } from 'cypress'; - -export default defineConfig({ - component: { - devServer: { - framework: 'react', - bundler: 'vite', - }, - }, - - e2e: { - setupNodeEvents(on, config) { - // implement node event listeners here - }, - }, -}); diff --git a/client/cypress.json b/client/cypress.json new file mode 100644 index 0000000..17ef242 --- /dev/null +++ b/client/cypress.json @@ -0,0 +1,3 @@ +{ + "baseUrl": "http://localhost:3000" +} diff --git a/client/cypress/integration/pages.spec.js b/client/cypress/integration/pages.spec.js new file mode 100644 index 0000000..b819f19 --- /dev/null +++ b/client/cypress/integration/pages.spec.js @@ -0,0 +1,64 @@ +const randomString = () => (Math.random() + 1).toString(36).substring(7) +const randomPassword = () => randomString() + randomString() +const randomEmail = () => randomString() + '@' + randomString() + '.com' + +const login = (email, password) => { + cy.visit('/api/.ory/ui/login') + cy.get('[name="identifier"]').type(email) + cy.get('[name="password"]').type(password) + cy.get('[name="method"]').click() + loggedIn(email) +} + +const loggedIn = (email) => { + cy.location('pathname').should('eq', '/') + cy.get('[data-testid="session-content"]').should('contain.text', email) + cy.get('[data-testid="logout"]').should('have.attr', 'aria-disabled', 'false') +} + +context('Basic UI interactions', () => { + const email = randomEmail() + const password = randomPassword() + + beforeEach(() => { + cy.clearCookies({ domain: null }) + }) + + it('can load the start page', () => { + cy.visit('/') + cy.get('a[href="/api/.ory/self-service/login/browser"]').should('exist') + cy.get('a[href="/api/.ory/self-service/registration/browser"]').should( + 'exist' + ) + }) + + it('redirects to login when accessing settings without session', () => { + cy.visit('/api/.ory/ui/settings') + cy.location('pathname').should('contain', 'api/.ory/ui/login') + cy.get('[name="method"]').should('exist') + }) + + it('can submit registration', () => { + cy.visit('/api/.ory/ui/registration') + cy.get('[name="traits.email"]').type(email) + cy.get('[name="password"]').type(password) + cy.get('[name="method"]').click() + loggedIn(email) + }) + + it('can load the login page', () => { + login(email, password) + }) + + it('goes to registration and clicks on log in and redirect works', () => { + cy.visit('/api/.ory/ui/registration') + cy.get('[data-testid="cta-link"]').click() + login(email, password) + }) + + it('can log out', () => { + login(email, password) + cy.get('a[data-testid="logout"]').click() + cy.get('[data-testid="logout"]').should('not.exist') + }) +}) diff --git a/client/cypress/plugins/index.js b/client/cypress/plugins/index.js new file mode 100644 index 0000000..59b2bab --- /dev/null +++ b/client/cypress/plugins/index.js @@ -0,0 +1,22 @@ +///+// *********************************************************** +// 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 +} diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js new file mode 100644 index 0000000..119ab03 --- /dev/null +++ b/client/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) => { ... }) diff --git a/client/cypress/support/index.js b/client/cypress/support/index.js new file mode 100644 index 0000000..022e323 --- /dev/null +++ b/client/cypress/support/index.js @@ -0,0 +1,19 @@ +// *********************************************************** +// 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') diff --git a/client/index.html b/client/index.html deleted file mode 100644 index e0d1c84..0000000 --- a/client/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + React + TS - - - - - - diff --git a/client/next-env.d.ts b/client/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/client/next-env.d.ts @@ -0,0 +1,5 @@ +///+/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/client/next.config.js b/client/next.config.js new file mode 100644 index 0000000..baa1337 --- /dev/null +++ b/client/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +module.exports = { + reactStrictMode: true +} diff --git a/client/package.json b/client/package.json index 4cc71a6..1d8870a 100644 --- a/client/package.json +++ b/client/package.json @@ -1,53 +1,47 @@ { - "name": "client", + "name": "kratos-nextjs-react-example", + "version": "0.1.0", "private": true, - "version": "0.0.0", - "type": "module", + "config": { + "prettierTarget": "{cypress,pages,styles,public,}{/**/,}*.{tsx,ts,json,md,js,css}" + }, "scripts": { - "dev": "vite", - "build": "tsc && vite build --outDir ../dist", - "preview": "vite preview", - "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore", - "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"", - "cypress": "cypress" + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "format": "prettier --write ${npm_package_config_prettierTarget}", + "format:check": "prettier --check ${npm_package_config_prettierTarget}", + "test": "cypress run", + "test:dev": "cypress open" }, "dependencies": { - "@headlessui/react": "^1.7.2", - "@heroicons/react": "^2.0.11", + "@headlessui/react": "^1.7.3", + "@heroicons/react": "^2.0.12", "@hookform/resolvers": "^2.9.8", - "axios": "^0.27.2", + "@ory/client": "0.0.1-alpha.169", + "@ory/integrations": "0.2.5", + "axios": "^1.1.2", "clsx": "^1.2.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-hook-form": "^7.36.1", - "react-router-dom": "^6.4.1", - "tailwind-scrollbar": "^2.0.1", + "next": "12.1.5", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-hook-form": "^7.37.0", + "tailwind-scrollbar": "2.1.0-preview.0", "zod": "^3.19.1" }, "devDependencies": { - "@testing-library/cypress": "^8.0.3", - "@types/react": "^18.0.17", - "@types/react-dom": "^18.0.6", - "@typescript-eslint/eslint-plugin": "^5.39.0", - "@typescript-eslint/parser": "^5.39.0", - "@vitejs/plugin-react": "^2.1.0", + "@trivago/prettier-plugin-sort-imports": "^2.0.2", + "@types/node": "16.11.6", + "@types/react": "17.0.33", "autoprefixer": "^10.4.12", - "cypress": "^10.9.0", - "eslint": "^8.24.0", - "eslint-config-prettier": "^8.5.0", - "eslint-import-resolver-typescript": "^3.5.1", - "eslint-plugin-cypress": "^2.12.1", - "eslint-plugin-import": "^2.26.0", - "eslint-plugin-jest-dom": "^4.0.2", - "eslint-plugin-jsx-a11y": "^6.6.1", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.31.8", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-testing-library": "^5.7.2", - "postcss": "^8.4.16", - "prettier": "^2.7.1", + "cypress": "^9.6.0", + "eslint": "7.32.0", + "eslint-config-next": "12.0.1", + "ory-prettier-styles": "^1.1.2", + "postcss": "^8.4.18", + "prettier": "^2.3.2", "tailwindcss": "^3.1.8", - "typescript": "^4.6.4", - "vite": "^3.1.0" + "typescript": "4.4.4" } -} \ No newline at end of file +} diff --git a/client/src/pages/ChannelPage.tsx b/client/pages/[channel]/index.tsx similarity index 84% rename from client/src/pages/ChannelPage.tsx rename to client/pages/[channel]/index.tsx index 7d01202..b58dcab 100644 --- a/client/src/pages/ChannelPage.tsx +++ b/client/pages/[channel]/index.tsx @@ -1,15 +1,18 @@ import { ArrowRightIcon, HeartIcon, UserIcon } from '@heroicons/react/24/outline'; -import Button from '../components/Button'; -import ChatMessage from '../components/ChatMessage'; -import Input from '../components/Input'; -import { numFormatter } from '../utils/format'; -import streams from '../placeholder/GetStreams'; +import Button from '../../components/Button'; +import ChatMessage from '../../components/ChatMessage'; +import Input from '../../components/Input'; +import { numFormatter } from '../../utils/format'; +import streams from '../../placeholder/GetStreams'; +import { NextPage } from 'next'; +import BrowseLayout from '../../components/BrowseLayout'; -function ChannelPage() { +const ChannelPage: NextPage = () => { const stream = streams.data[1]; return ( + @@ -58,6 +61,7 @@ function ChannelPage() {