apps/oauthapp/src/views/docs/password.ejs

<div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md">
    <h2 class="text-2xl font-bold mb-4">4. Resource Owner Password Credentials (ROPC) Flow</h2>
    
    <div class="mb-6">
        <h3 class="text-xl font-semibold mb-2">Overview</h3>
        <p class="mb-4">
            In the ROPC Flow, the user provides their credentials (username and password) directly to the application, which then exchanges them for an access token. This flow is only recommended for highly trusted applications, such as first-party applications.
        </p>
        <img src="/images/oauth-ropc-flow.png" alt="OAuth ROPC Flow" class="mb-6 w-full h-auto rounded-md shadow-sm">
    </div>

    <div class="mb-6">
        <h3 class="text-xl font-semibold mb-2">Steps</h3>
        <ol class="list-decimal pl-6 space-y-2">
            <li>The client requests a token by calling the token endpoint.</li>
            <pre class="bg-gray-800 text-white p-4 rounded-md">
# For client authentication method set to none:
curl --location --request POST \
--url "https://$TENANT_ID.$REGION_ID.authz.cloudentity.io/$TENANT_ID/$WORKSPACE_ID/oauth2/token" \
--header "Content-Type: application/x-www-form-urlencoded" \
--data-raw "grant_type=password&client_id=$CLIENT_ID&username=$USER_NAME&password=$USER_PASSWORD"

# For client authentication method set to client secret post or basic:
curl --location --request POST \
--url "https://$TENANT_ID.$REGION_ID.authz.cloudentity.io/$TENANT_ID/$WORKSPACE_ID/oauth2/token" \
--header "Content-Type: application/x-www-form-urlencoded" \
--data-raw "grant_type=password&client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&username=$USER_NAME&password=$USER_PASSWORD"
            </pre>
            <li>Authorization server validates user credentials.</li>
            <li>Authorization server returns the access and ID tokens.</li>
            <li>User gets authenticated.</li>
        </ol>
    </div>

    <div class="mb-6">
        <h3 class="text-xl font-semibold mb-2">Use Case</h3>
        <p class="mb-4">
            <strong>Highly trusted applications:</strong> Suitable when the application and the resource owner have a high level of trust, such as first-party applications.
        </p>
    </div>

    <div>
        <h3 class="text-xl font-semibold mb-2">Security</h3>
        <ul class="list-disc pl-6 space-y-2">
            <li><strong>Low security:</strong> The application handles user credentials directly, increasing the risk of exposure and misuse.</li>
        </ul>
    </div>
</div>

<div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md mt-10">
    <h2 class="text-2xl font-bold mb-4">5. Device Authorization Flow</h2>
    
    <div class="mb-6">
        <h3 class="text-xl font-semibold mb-2">Overview</h3>
        <p class="mb-4">
            The Device Authorization Flow is tailored for devices with limited input capabilities, such as smart TVs or IoT devices. The device prompts the user to visit a URL on a secondary device and enter a code to authorize access.
        </p>
    </div>

    <div class="mb-6">
        <h3 class="text-xl font-semibold mb-2">Steps</h3>
        <ol class="list-decimal pl-6 space-y-2">
            <li><strong>User Code:</strong> The device requests a user code and instructs the user to visit a URL.</li>
            <li><strong>User Authorization:</strong> The user authorizes access on a secondary device.</li>
            <li><strong>Token Polling:</strong> The device polls the authorization server to exchange the user code for an access token.</li>
        </ol>
    </div>

    <div class="mb-6">
        <h3 class="text-xl font-semibold mb-2">Use Case</h3>
        <p class="mb-4">
            <strong>Devices with limited input capabilities:</strong> Suitable for smart TVs, IoT devices, or other devices where user input is limited.
        </p>
    </div>

    <div>
        <h3 class="text-xl font-semibold mb-2">Security</h3>
        <ul class="list-disc pl-6 space-y-2">
            <li><strong>High security:</strong> The user authorizes access on a secondary device, reducing the risk of interception.</li>
        </ul>
    </div>
</div>