Add the first page

v-client/package.json

@@ -15,10 +15,26 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.3",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@vitejs/plugin-react": "^2.2.0",
+    "eslint": "^8.27.0",
+    "eslint-config-react-app": "^7.0.1",
+    "jest": "^29.3.1",
+    "prettier": "^2.7.1",
+    "sass": "^1.56.1",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.6.4",
     "vite": "^3.2.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   }
 }

v-client/src/App.tsx

@@ -1,34 +1,12 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import Authentication from "./pages/Authentication/Authentication";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <Authentication />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

v-client/src/pages/Authentication/Authentication.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Authentication from "./Authentication";
+
+test("prompts the user for the invitation URL", () => {
+  render(<Authentication />);
+
+  expect(screen.getByText("Please enter your invitation URL")).toBeDefined();
+});

v-client/src/pages/Authentication/Authentication.tsx

@@ -0,0 +1,10 @@
+import "./Authentication.scss";
+
+const Authentication = () => (
+  <div>
+    <p>Please enter your invitation URL</p>
+    <input type="text" placeholder="Invitation URL" />
+  </div>
+);
+
+export default Authentication;