okta · shuowu-okta · Jun 2, 2022
diff --git a/test/apps/react-oie-generic-remediator/.gitignore b/test/apps/react-oie-generic-remediator/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/test/apps/react-oie-generic-remediator/index.html b/test/apps/react-oie-generic-remediator/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/test/apps/react-oie-generic-remediator/package.json b/test/apps/react-oie-generic-remediator/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@okta/test.app.react-oie-generic-remediator",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "prestart": "vite build",
+    "start": "vite preview --port 8080",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@okta/odyssey-react": "^0.14.0",
+    "@okta/okta-auth-js": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9",
+    "rollup-plugin-visualizer": "^5.5.4"
+  },
+  "workspaces": {
+    "nohoist": [
+      "**/react/**",
+      "**/react-dom/**"
+    ]
+  }
+}
diff --git a/test/apps/react-oie-generic-remediator/src/App.tsx b/test/apps/react-oie-generic-remediator/src/App.tsx
@@ -0,0 +1,110 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { OktaAuth, IdxTransaction, IdxStatus, IdxMessage } from '@okta/okta-auth-js';
+import { transformIdxTransaction } from './transformer';
+import Form from './components/Form';
+import Spinner from './components/Spinner';
+import { WidgetContext } from './contexts';
+import oidcConfig from './config';
+import { usePolling } from './hooks/usePolling';
+
+const authClient = new OktaAuth(Object.assign({}, oidcConfig, {
+  idx: { useGenericRemediator: true }
+}));
+
+function App() {
+  const [idxTransaction, setIdxTransaction] = useState<IdxTransaction | undefined>();
+  const [messages, setMessages] = useState<IdxMessage[]>([]);
+  const pollingTransaction = usePolling(idxTransaction);
+
+  // Derived value from idxTransaction
+  const uischema = useMemo(() => {
+    if (!idxTransaction) {
+      return undefined;
+    }
+
+    return transformIdxTransaction(idxTransaction);
+  }, [idxTransaction]);
+
+  const bootstrap = useCallback(async () => {
+    const transaction = await authClient.idx.start();
+    setIdxTransaction(transaction);
+  }, [authClient, setIdxTransaction]);
+
+  const resume = useCallback(async () => {
+    const transaction = await authClient.idx.proceed();
+    setIdxTransaction(transaction);
+  }, [authClient, setIdxTransaction]);
+
+  useEffect(() => {
+    if (authClient.idx.canProceed()) {
+      resume();
+    } else {
+      bootstrap();
+    }
+  }, [authClient, setIdxTransaction, bootstrap, resume]);
+
+  // Update idxTransaction when new status comes back from polling
+  useEffect(() => {
+    if (!idxTransaction || !pollingTransaction) {
+      return;
+    }
+
+    if (pollingTransaction.nextStep?.name !== idxTransaction.nextStep?.name) {
+      setIdxTransaction(pollingTransaction);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    pollingTransaction, // only watch on pollingTransaction changes
+  ]);
+
+  useEffect(() => {
+    if (!idxTransaction) {
+      return;
+    }
+
+    const { messages: newMessages, status } = idxTransaction;
+    switch (status) {
+      case (IdxStatus.PENDING): {
+        // Handle global errors or warnings
+        if (newMessages) {
+          setMessages(newMessages);
+        }
+
+        break;
+      }
+      case (IdxStatus.SUCCESS): {
+        // setDisplayState(IdxStatus.SUCCESS);
+        break;
+      }
+      case (IdxStatus.CANCELED): {
+        // clear idxTransaction to start loading state
+        setIdxTransaction(undefined);
+        break;
+      }
+      default: {
+        // error statuses: TERMINAL or FAILURE.
+        // setDisplayState(status);
+        if (newMessages) {
+          // Set error.
+          setMessages(newMessages);
+        }
+      }
+    }
+  }, [idxTransaction]);
+
+  return (
+    <WidgetContext.Provider value={{
+      authClient,
+      idxTransaction,
+      setIdxTransaction,
+    }}>
+      {
+        uischema
+          ? <Form uischema={uischema} />
+          : <Spinner />
+      }
+    </WidgetContext.Provider>
+  );
+};
+
+export default App
diff --git a/...ator/src/components/ChallengeSecurityQuestionContext/ChallengeSecurityQuestionContext.tsx b/...ator/src/components/ChallengeSecurityQuestionContext/ChallengeSecurityQuestionContext.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Box, Heading, Text } from '@okta/odyssey-react';
+
+import { UISchemaElementComponent } from '../../types';
+
+export const ChallengeSecurityQuestionContext: UISchemaElementComponent = ({
+  uischema,
+}) => {
+  const {
+    title,
+    contextualData: {
+      enrolledQuestion,
+    } = {},
+  } = uischema.options;
+
+  return (
+    // @ts-ignore OKTA-471233
+    <Box
+      display="flex"
+      flexDirection="column"
+    >
+      { /* @ts-ignore OKTA-471233 */}
+      <Box
+        display="flex"
+        justifyContent="flex-start"
+        marginBottom="s"
+      >
+        <Heading
+          level="2"
+          visualLevel="3"
+        >
+          {title}
+        </Heading>
+      </Box>
+
+      <Text as="strong">{enrolledQuestion?.question}</Text>
+    </Box>
+  );
+};
diff --git a/...pps/react-oie-generic-remediator/src/components/ChallengeSecurityQuestionContext/index.ts b/...pps/react-oie-generic-remediator/src/components/ChallengeSecurityQuestionContext/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ChallengeSecurityQuestionContext } from './ChallengeSecurityQuestionContext';
+
+export default ChallengeSecurityQuestionContext;
diff --git a/test/apps/react-oie-generic-remediator/src/components/Checkbox/Checkbox.tsx b/test/apps/react-oie-generic-remediator/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Checkbox as CheckboxOdyssey } from '@okta/odyssey-react';
+
+import { useOnChange, useValue } from '../../hooks';
+import { UISchemaElementComponent } from '../../types';
+
+const Checkbox: UISchemaElementComponent = ({ uischema }) => {
+  const onChangeHandler = useOnChange(uischema);
+  const value = useValue(uischema);
+
+  const { name, label } = uischema.options;
+  return (
+    <CheckboxOdyssey
+      label={label}
+      id={name}
+      name={name}
+      checked={value}
+      onChange={onChangeHandler}
+    />
+  );
+};
+
+export default Checkbox;
diff --git a/test/apps/react-oie-generic-remediator/src/components/Checkbox/index.ts b/test/apps/react-oie-generic-remediator/src/components/Checkbox/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import Checkbox from './Checkbox';
+
+export default Checkbox;
diff --git a/test/apps/react-oie-generic-remediator/src/components/CtaButton/CtaButton.tsx b/test/apps/react-oie-generic-remediator/src/components/CtaButton/CtaButton.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Button } from '@okta/odyssey-react';
+
+import { useWidgetContext } from '../../contexts';
+
+const CTAButton = ({
+  uischema,
+}) => {
+  const { setIdxTransaction } = useWidgetContext();
+  const {
+    // @ts-ignore update cta uischema to use options as ExtendedInput
+    action, type, variant, text, id,
+  } = uischema.options;
+
+  const handleClick = async (e) => {
+    e.preventDefault();
+
+    const transaction = await action();
+    setIdxTransaction(transaction);
+  };
+
+  return (
+    <Button
+      data-testid={id}
+      size="m"
+      type={type ?? 'button'}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...(type !== 'submit' && { onClick: handleClick })}
+      variant={variant ?? 'primary'}
+      wide
+    >
+      {text}
+    </Button>
+  );
+};
+
+export default CTAButton;
diff --git a/test/apps/react-oie-generic-remediator/src/components/CtaButton/index.ts b/test/apps/react-oie-generic-remediator/src/components/CtaButton/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import CTAButton from './CtaButton';
+
+export default CTAButton;