Reactjs todo dv new

reactjs-todo-dv/.env.example

@@ -0,0 +1,8 @@
+API_URL=$API_URL
+DEBUGGER_OFF=true
+DEVELOPMENT=$DEVELOPMENT
+PORT=$PORT
+CLIENT_ID=$CLIENT_ID
+REDIRECT_URI=$REDIRECT_URI
+SCOPE="openid profile email phone"
+BASE_URL=$BASE_URL

reactjs-todo-dv/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  ignorePatterns: [
+    '**/node_modules/**',
+    '**/dist/**',
+    'public',
+    'playwright-report',
+    'test-results',
+  ],
+  extends: ['standard', 'plugin:react/recommended', 'prettier'],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'react/prop-types': 'off',
+    'no-debugger': 'off',
+  },
+};

reactjs-todo-dv/.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

reactjs-todo-dv/README.md

@@ -0,0 +1,117 @@
+# React JS Todo Sample App
+
+## Disclaimers
+
+This sample code is provided "as is" and is not a supported product of ForgeRock. It's purpose is solely to demonstrate how the ForgeRock JavaScript SDK can be implemented within a React application. Also, this is not a demonstration of React itself or instructional for _how_ to build a React app. There are many aspects to routing, state management, tooling and other aspects to building a React app that are outside of the scope of this project. For information about creating a React app, [visit React's official documentation](https://reactjs.org/docs/create-a-new-react-app.html).
+
+## Requirements
+
+1. A PingOne tenant with SSO and DaVinci services enabled
+2. Node >= 14.2.0 (recommended: install via [official package installer](https://nodejs.org/en/))
+3. Knowledge of using the Terminal/Command Line
+4. This project "cloned" to your computer
+
+## Setup
+
+Once you have the requirements above met, we can build the project.
+
+### Setup Your PingOne application
+
+1. Create a new OIDC Web App
+
+#### Configuration
+
+1. CORS Allowed origins: `http://localhost:8443`
+2. Token Auth Method: None
+3. Signoff URLs: http://localhost:8443/login
+4. Redirect URIs: http://localhost:8443/login
+5. Response Type: Code
+6. Grant Type: Authorization Code
+
+#### Resources (scopes)
+
+1. email phone profile
+
+#### Policies
+
+1. DaVinci Policies: Select your DaVinci application
+
+### Configure Your `.env` File
+
+Change the name of `.env.example` to `.env` and replace the bracketed values (e.g. `<<<helper-text>>>`) with your values.
+
+Example with annotations:
+
+```text
+API_URL=http://localhost:9443
+DEBUGGER_OFF=false
+DEVELOPMENT=true
+PORT=8443
+CLIENT_ID=<<PingOne application client id>>
+REDIRECT_URI=http://localhost:8443/login
+SCOPE="openid profile email phone"
+BASE_URL=https://auth.pingone.com/<<PingOne environment id>>/
+```
+
+### Installing Dependencies and Run Build
+
+#### NOTE:a new workspace for this sample app has not been added at this point. TODO: update before releasing 
+#### Todo Api was modified to work with PingOne endpoints and token properties. Those modifications are not yet in this repo.
+
+**Run from root of repo**: since this sample app uses npm's workspaces, we recommend running the npm commands from the root of the repo.
+
+```sh
+# Install all dependencies (no need to pass the -w option)
+npm install
+```
+
+### Run the Servers
+
+Now, run the below commands to start the processes needed for building the application and running the servers for both client and API server:
+
+```sh
+# In one terminal window, run the following watch command from the root of the repository
+npm run start:reactjs-todo
+```
+
+Now, you should be able to visit `http://localhost:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance, (the Authorization Server in OAuth terms), which will be running on whatever domain you set, and `http://localhost:9443` as the REST API for your todos (the Resource Server).
+
+## Learn About Integration Touchpoints
+
+This project has a debugging statements that can be activated which causes the app to pause execution at each SDK integration point. It will have a comment above the `debugger` statement explaining the purpose of the integration.
+
+If you'd like to use this feature as a learning tool, [open the live app](https://fr-react-todos.crbrl.io/) and then open the developer tools of your browser. Rerun the app with the developer tools open, and it will automatically pause at these points of integration.
+
+For local development, if you want to turn these debuggers off, you can set the environment variable of `DEBUGGER_OFF` to true.
+
+## Modifying This Project
+
+### React Client
+
+To modify the client portion of this project, you'll need to be familiar with the following React patterns:
+
+1. [Functional components and composition](https://reactjs.org/docs/components-and-props.html)
+2. [Hooks (including custom hooks)](https://reactjs.org/docs/hooks-intro.html)
+3. [Context API](https://reactjs.org/docs/hooks-reference.html#usecontext)
+4. [React Router](https://reactrouter.com/)
+
+You'll also want a [basic understanding of Webpack](https://webpack.js.org/concepts/) and the following:
+
+1. [Babel transformation for React](https://webpack.js.org/loaders/babel-loader/#root)
+2. [Plugins for Sass-to-CSS processing](https://webpack.js.org/loaders/sass-loader/#root)
+
+#### Styling and CSS
+
+We heavily leveraged [Twitter Bootstrap](https://getbootstrap.com/) and [it's utility classes](https://getbootstrap.com/docs/5.0/utilities/api/), but you will see classes with the prefix `cstm_`. These are custom classes, hence the `cstm` shorthand, and they are explicitly used to denote an additional style application on top of Bootstrap's styling.
+
+### REST API Server
+
+To modify the API server, you'll need a [basic understanding of Node](https://nodejs.org/en/about/) as well as the following things:
+
+1. [Express](https://expressjs.com/)
+2. [PouchDB](https://pouchdb.com/)
+3. [Superagent](https://www.npmjs.com/package/superagent)
+
+## TypeScript?
+
+The ForgeRock Javascript SDK is developed with TypeScript, so type definitions are available. This sample application does not utilize TypeScript, but if you'd like to see a version of this written in TypeScript, let us know.

reactjs-todo-dv/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-react'],
+};

reactjs-todo-dv/client/README.md

@@ -0,0 +1,117 @@
+# React JS Todo Sample App
+
+## Disclaimers
+
+This sample code is provided "as is" and is not a supported product of ForgeRock. It's purpose is solely to demonstrate how the ForgeRock JavaScript SDK can be implemented within a React application. Also, this is not a demonstration of React itself or instructional for _how_ to build a React app. There are many aspects to routing, state management, tooling and other aspects to building a React app that are outside of the scope of this project. For information about creating a React app, [visit React's official documentation](https://reactjs.org/docs/create-a-new-react-app.html).
+
+## Requirements
+
+1. A PingOne tenant with SSO and DaVinci services enabled
+2. Node >= 14.2.0 (recommended: install via [official package installer](https://nodejs.org/en/))
+3. Knowledge of using the Terminal/Command Line
+4. This project "cloned" to your computer
+
+## Setup
+
+Once you have the requirements above met, we can build the project.
+
+### Setup Your PingOne application
+
+1. Create a new OIDC Web App
+
+#### Configuration
+
+1. CORS Allowed origins: `http://localhost:8443`
+2. Token Auth Method: None
+3. Signoff URLs: http://localhost:8443/login
+4. Redirect URIs: http://localhost:8443/login
+5. Response Type: Code
+6. Grant Type: Authorization Code
+
+#### Resources (scopes)
+
+1. email phone profile
+
+#### Policies
+
+1. DaVinci Policies: Select your DaVinci application
+
+### Configure Your `.env` File
+
+Change the name of `.env.example` to `.env` and replace the bracketed values (e.g. `<<<helper-text>>>`) with your values.
+
+Example with annotations:
+
+```text
+API_URL=http://localhost:9443
+DEBUGGER_OFF=false
+DEVELOPMENT=true
+PORT=8443
+CLIENT_ID=<<PingOne application client id>>
+REDIRECT_URI=http://localhost:8443/login
+SCOPE="openid profile email phone"
+BASE_URL=https://auth.pingone.com/<<PingOne environment id>>/
+```
+
+### Installing Dependencies and Run Build
+
+#### NOTE:a new workspace for this sample app has not been added at this point. TODO: update before releasing 
+#### Todo Api was modified to work with PingOne endpoints and token properties. Those modifications are not yet in this repo.
+
+**Run from root of repo**: since this sample app uses npm's workspaces, we recommend running the npm commands from the root of the repo.
+
+```sh
+# Install all dependencies (no need to pass the -w option)
+npm install
+```
+
+### Run the Servers
+
+Now, run the below commands to start the processes needed for building the application and running the servers for both client and API server:
+
+```sh
+# In one terminal window, run the following watch command from the root of the repository
+npm run start:reactjs-todo
+```
+
+Now, you should be able to visit `http://localhost:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance, (the Authorization Server in OAuth terms), which will be running on whatever domain you set, and `http://localhost:9443` as the REST API for your todos (the Resource Server).
+
+## Learn About Integration Touchpoints
+
+This project has a debugging statements that can be activated which causes the app to pause execution at each SDK integration point. It will have a comment above the `debugger` statement explaining the purpose of the integration.
+
+If you'd like to use this feature as a learning tool, [open the live app](https://fr-react-todos.crbrl.io/) and then open the developer tools of your browser. Rerun the app with the developer tools open, and it will automatically pause at these points of integration.
+
+For local development, if you want to turn these debuggers off, you can set the environment variable of `DEBUGGER_OFF` to true.
+
+## Modifying This Project
+
+### React Client
+
+To modify the client portion of this project, you'll need to be familiar with the following React patterns:
+
+1. [Functional components and composition](https://reactjs.org/docs/components-and-props.html)
+2. [Hooks (including custom hooks)](https://reactjs.org/docs/hooks-intro.html)
+3. [Context API](https://reactjs.org/docs/hooks-reference.html#usecontext)
+4. [React Router](https://reactrouter.com/)
+
+You'll also want a [basic understanding of Webpack](https://webpack.js.org/concepts/) and the following:
+
+1. [Babel transformation for React](https://webpack.js.org/loaders/babel-loader/#root)
+2. [Plugins for Sass-to-CSS processing](https://webpack.js.org/loaders/sass-loader/#root)
+
+#### Styling and CSS
+
+We heavily leveraged [Twitter Bootstrap](https://getbootstrap.com/) and [it's utility classes](https://getbootstrap.com/docs/5.0/utilities/api/), but you will see classes with the prefix `cstm_`. These are custom classes, hence the `cstm` shorthand, and they are explicitly used to denote an additional style application on top of Bootstrap's styling.
+
+### REST API Server
+
+To modify the API server, you'll need a [basic understanding of Node](https://nodejs.org/en/about/) as well as the following things:
+
+1. [Express](https://expressjs.com/)
+2. [PouchDB](https://pouchdb.com/)
+3. [Superagent](https://www.npmjs.com/package/superagent)
+
+## TypeScript?
+
+The ForgeRock Javascript SDK is developed with TypeScript, so type definitions are available. This sample application does not utilize TypeScript, but if you'd like to see a version of this written in TypeScript, let us know.

reactjs-todo-dv/client/components/README.md

@@ -0,0 +1,3 @@
+# Components
+
+These are React based units of code that could potentially be used anywhere, to an extent. They are the units that compose a view. These could be actual React components or custom React hooks.