Updated readme.md changes and fixed example.md code snippet for few r…

…elease2 screens (#29)
auth0 · Feb 10, 2025 · e866148 · e866148
1 parent d733422
commit e866148
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -19,8 +19,8 @@ It simplifies integrating authentication screens (login, signup, passwordless, p
 
 ## Documentation
 
-- [Quickstart](https://auth0.com/docs/customize) - our guide for setting up the SDK on your app.
-- [Guides](https://auth0.com/docs/customize) - more guides for common use cases
+- [Quickstart](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) - our guide for setting up the SDK on your app.
+- [Guides](https://auth0.com/docs/customize/login-pages/advanced-customizations/screens) - more guides for common use cases
 - [Examples](packages/auth0-acul-js/examples/) - code snippets for different customization use cases.
 - [FAQs](packages/auth0-acul-js/FAQ.md) - Find answers to frequently asked questions about the Auth0 ACUL JS SDK.
 - [Boilerplate app](https://github.com/auth0/auth0-acul-react-boilerplate) - Get up and running quickly with our boilerplate starter template
@@ -38,7 +38,7 @@ Before starting, ensure that you have the following setup:
 
 1. **Custom Domain**: Ensure that a custom domain is configured for your Auth0 tenant.
 2. **Screen Configuration**: Set up the required authentication screens within your Auth0 flow.  
-   For detailed steps, refer to the [Management API documentation](https://auth0.com/docs/customize).
+   For detailed steps, refer to the [Configure ACUL Screens](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens).
 
 ### Installation
 

diff --git a/packages/auth0-acul-js/README.md b/packages/auth0-acul-js/README.md
@@ -16,8 +16,8 @@ It simplifies integrating authentication screens (login, signup, passwordless, p
 
 ##  Documentation
 
-- [Quickstart](https://auth0.com/docs/customize) - our guide for setting up the SDK on your app.
-- [Guides](https://auth0.com/docs/customize) - more guides for common use cases
+- [Quickstart](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) - our guide for setting up the SDK on your app.
+- [Guides](https://auth0.com/docs/customize/login-pages/advanced-customizations/screens) - more guides for common use cases
 - [Examples](https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-js/examples) - code snippets for different customization use cases.
 - [FAQs](FAQ.md) - Find answers to frequently asked questions about the Auth0 ACUL JS SDK.
 
@@ -40,7 +40,7 @@ Before starting, ensure that you have the following setup:
 
 1. **Custom Domain**: Ensure that a custom domain is configured for your Auth0 tenant.
 2. **Screen Configuration**: Set up the required authentication screens within your Auth0 flow.  
-   For detailed steps, refer to the [Management API documentation](https://auth0.com/docs/customize).
+   For detailed steps, refer to the [Configure ACUL Screens](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens).
 
 ### Installation
 

diff --git a/packages/auth0-acul-js/examples/reset-password-error.md b/packages/auth0-acul-js/examples/reset-password-error.md
@@ -1,8 +1,37 @@
+```js 
 import ResetPasswordError from '@auth0/auth0-acul-js/reset-password-error';
-
 const resetPasswordError = new ResetPasswordError();
 
 const { screen } = resetPasswordError;
-const data = screen.data;
-
+const data = screen.texts?.description;
 console.log(data);
+```
+
+
+##  React Component Example with TailwindCSS
+
+```typescript
+import React from 'react';
+import ResetPasswordError from '@auth0/auth0-acul-js/reset-password-error';
+
+const ResetPasswordErrorComponent: React.FC = () => {
+  const resetPasswordSuccessManager = new ResetPasswordError();
+  const { screen } = resetPasswordErrorManager;
+  const data = screen.texts?.description;
+
+  return (
+    <div className="w-[100vw] flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
+        <h2 className="text-2xl font-bold mb-6">Reset Password Error Screen</h2>
+        {data && (
+          <div className="mb-4">
+            <p>Screen Name: {data.name}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ResetPasswordErrorComponent;
+```
diff --git a/packages/auth0-acul-js/examples/reset-password-request.md b/packages/auth0-acul-js/examples/reset-password-request.md
@@ -1,24 +1,20 @@
 
-## reset-password-request screen
+##  React Component Example with TailwindCSS
 ```jsx
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import ResetPasswordRequest from '@auth0/auth0-acul-js/reset-password-request';
 
 const ResetPasswordRequestScreen = () => {
   const [username, setUsername] = useState('');
-  const [resetPasswordRequest, setResetPasswordRequest] = useState(null);
+  const resetPasswordRequest = new ResetPasswordRequest();
 
-  useEffect(() => {
-    setResetPasswordRequest(new ResetPasswordRequest());
-  }, []);
-
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     await resetPasswordRequest.resetPassword({ username });
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+    <div className="w-[100vw] min-h-screen bg-gray-100 flex items-center justify-center p-4">
       <div className="w-full max-w-md">
         <h2 className="text-3xl font-bold text-center mb-8">
           Reset your password
@@ -43,7 +39,7 @@ const ResetPasswordRequestScreen = () => {
             <div className="space-y-3">
               <button
                 type="submit"
-                className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                className="w-full py-2 px-4 bg-blue-600 text-gray-700 rounded-md hover:bg-blue-700"
               >
                 Continue
               </button>

diff --git a/packages/auth0-acul-js/examples/reset-password-success.md b/packages/auth0-acul-js/examples/reset-password-success.md
@@ -1,14 +1,16 @@
+##  React Component Example with TailwindCSS
+
 ```typescript
 import React from 'react';
 import ResetPasswordSuccess from '@auth0/auth0-acul-js/reset-password-success';
 
 const ResetPasswordSuccessComponent: React.FC = () => {
   const resetPasswordSuccessManager = new ResetPasswordSuccess();
   const { screen } = resetPasswordSuccessManager;
-  const data = screen.data;
+  const data = screen.texts?.description;
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <div className="w-[100vw] flex flex-col items-center justify-center min-h-screen bg-gray-100">
       <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
         <h2 className="text-2xl font-bold mb-6">Reset Password Success Screen</h2>
         {data && (