App styling + oauth tuto (#317)

docs/advanced/1_self_host/index.mdx

@@ -44,7 +44,7 @@ The rule of thumb is 1 worker per 1vCPU and 1/2GB of RAM. Cloud providers have m
 
 Windmill is compatible with [AWS Aurora](https://aws.amazon.com/rds/aurora/), [GCP Cloud SQL](https://cloud.google.com/sql), [Azure](https://azure.microsoft.com/en-us) and [Neon](https://neon.tech/) serverless database.
 
-Use the managed load balancer to point to your instance on the port you have chosen to expose in the caddy section of the docker-compose (by default 80). We recommend doing TLS termination and associating your domain on your managed load balancer. Once the domain name is chosen, set BASE_URL accordingly in `.env`. That is it for a minimal setup. Read about [Worker groups](../../core_concepts/9_worker_groups/index.mdx) to configure more finely your workers on more nodes and with different resources. Once done, be sure to setup [SSO login](../../misc/2_setup_oauth/index.md) with Azure AD, Google Workspace or Github if relevant.
+Use the managed load balancer to point to your instance on the port you have chosen to expose in the caddy section of the docker-compose (by default 80). We recommend doing TLS termination and associating your domain on your managed load balancer. Once the domain name is chosen, set BASE_URL accordingly in `.env`. That is it for a minimal setup. Read about [Worker groups](../../core_concepts/9_worker_groups/index.mdx) to configure more finely your workers on more nodes and with different resources. Once done, be sure to setup [SSO login](../../misc/2_setup_oauth/index.mdx) with Azure AD, Google Workspace or Github if relevant.
 
 :::tip AWS ECS
 
@@ -414,7 +414,7 @@ In the Admin Workspace execute the New User Setup App. This will import the defa
 
 ### Authentication and user management
 
-We recommend setting up [SSO with OAuth](../../misc/2_setup_oauth/index.md) if you want to avoid adding users manually.
+We recommend setting up [SSO with OAuth](../../misc/2_setup_oauth/index.mdx) if you want to avoid adding users manually.
 
 If not using OAuth SSO, we recommend setting up SMTP to send invites and email to manually added users.
 

docs/apps/4_app_configuration_settings/4_app_styling.mdx

@@ -4,8 +4,25 @@ import DocCard from '@site/src/components/DocCard';
 
 Styling on the app editor can be managed at the component and app-level.
 
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/app_styling.mp4"
+/>
+
 ## Component level
 
+Styling can be defined at the conmponent-level. CSS settings can be turned to [global level](#global-styling).
+
+Component-level CSS has priority over the global level.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/styling_component.mp4"
+/>
+
 ### Pre-set
 
 Some components have pre-set options for styling. They can be configured from the `Components settings` tab in the `Configuration` section.
@@ -26,7 +43,6 @@ You can configure manually your own classes with our Rich Editor.
 
 <video
     className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
     controls
     src="/videos/rich_editor.mp4"
 />
@@ -39,6 +55,12 @@ Elements like background color (incl. shadow, opacity), border (incl. stlye, rad
 
 For complex apps, you may not want to repeat the styling configuration on each component.
 
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/global_styling.mp4"
+/>
+
 ### CSS Editor
 
 The [Global CSS Editor](../../misc/15_css_editor/index.md) is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
@@ -47,7 +69,6 @@ The Global CSS Editor is a feature exclusive to [Enterprise Edition](../../misc/
 
 <video
   className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-  autoPlay
   controls
   src="/videos/global-css.mp4"
 />
@@ -71,7 +92,6 @@ Just click on `Convert to global CSS`.
 
 <video
     className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
     controls
     src="/videos/copy_style_global_css.mp4"
-/>
+/>

docs/core_concepts/15_authentification/index.mdx

@@ -14,7 +14,7 @@ Windmill provides flexible authentication options to ensure secure access to the
 
 ## Restricted Domain Authentication
 
-Windmill supports authentication [through SSO](../../misc/2_setup_oauth/index.md) for users with email addresses from a restricted domain. This allows organizations to control access to Windmill based on their domain policy. Users with email addresses from the authorized domain can authenticate seamlessly using their SSO credentials.
+Windmill supports authentication [through SSO](../../misc/2_setup_oauth/index.mdx) for users with email addresses from a restricted domain. This allows organizations to control access to Windmill based on their domain policy. Users with email addresses from the authorized domain can authenticate seamlessly using their SSO credentials.
 
 To enable restricted domain authentication, an administrator can configure the authorized domain in the OAuth configuration by setting 'allowed_domains' to the desired domains (e.g: 'windmill.dev' to accept only Google/Microsoft logins with a [email protected] address). Once configured, users with email addresses from the authorized domain will be able to log in using their SSO provider.
 

docs/core_concepts/index.mdx

@@ -4,6 +4,8 @@ import DocCard from '@site/src/components/DocCard';
 
 On top of its editors to build endpoints, flows and apps, Windmill comes with a set of features.
 
+## Windmill Features
+
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
 		title="Auto-generated UIs"

docs/integrations/0_integrations_on_windmill.mdx

@@ -48,7 +48,7 @@ Just [reach out to us](../misc/6_getting_help/index.mdx), we'll be happy to list
 
 ### OAuth APIs
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating OAuth APIs will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating OAuth APIs will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 | Service Provider                              | Description                                                                                                               |
 | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |

docs/integrations/gcal.md

@@ -13,7 +13,7 @@
 
 The [Google Calendar](https://calendar.google.com/) integration is done through OAuth. You just need to sign in from your Google account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::tip
 

docs/integrations/gdrive.md

@@ -13,7 +13,7 @@
 
 The [Google Drive](https://drive.google.com/drive/my-drive?hl=fr) integration is done through OAuth. You just need to sign in from your Google account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::tip
 

docs/integrations/github.mdx

@@ -15,7 +15,7 @@ import DocCard from '@site/src/components/DocCard';
 
 The [GitHub](https://github.com/) integration is done through OAuth. You just need to sign in from your GitHub account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 You might also look for how to [version control from GitHub / GitLab](../advanced/9_deploy_gh_gl/index.md).
 

docs/integrations/gitlab.mdx

@@ -4,7 +4,7 @@ import DocCard from '@site/src/components/DocCard';
 
 The [GitLab](https://about.gitlab.com/) integration is done through OAuth. You just need to sign in from your GitLab account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 ![Add GitLab Resource](../assets/integrations/add-gitlab.png.webp)
 

docs/integrations/gmail.md

@@ -13,7 +13,7 @@
 
 The [Gmail](https://mail.google.com/mail/) integration is done through OAuth. You just need to sign in from your Google account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::tip
 

docs/integrations/gsheets.md

@@ -13,7 +13,7 @@
 
 The [Google Sheets](https://www.google.com/sheets/about/) integration is done through OAuth. You just need to sign in from your Google account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::tip
 

docs/integrations/linkedin.md

@@ -13,7 +13,7 @@
 
 The [LinkedIn](https://www.linkedin.com/) integration is done through OAuth. You just need to sign in from your LinkedIn account on your browser. The access will be automatically saved to the workspace as a [resource](../core_concepts/3_resources_and_types/index.mdx).
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::tip
 

docs/integrations/slack.mdx

@@ -32,7 +32,7 @@ select the "Slack Command" tab. On there, click "Connect to Slack".
 
 :::info Self-hosted
 
-The Slack integration is done through OAuth. On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+The Slack integration is done through OAuth. On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::
 
@@ -186,7 +186,7 @@ back to Windmill, where you can name your Slack Resource and Save it.
 
 :::note
 
-On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.md).
+On [self-hosted instances](../advanced/1_self_host/index.mdx), integrating an OAuth API will require [Setup OAuth and SSO](../misc/2_setup_oauth/index.mdx).
 
 :::
 

docs/misc/0_note_of_intent/index.md

@@ -69,7 +69,7 @@ Windmill embeds:
 - an **enterprise-grade platform** with tight permissioning, secret management,
   groups and folders enabling
   [RBAC permissions](../../core_concepts/16_roles_and_permissions/index.mdx),
-  [OAuth handling](../2_setup_oauth/index.md) for fetching and
+  [OAuth handling](../2_setup_oauth/index.mdx) for fetching and
   refreshing credentials
 - **[webhooks](../../core_concepts/4_webhooks/index.md)** for every scripts and flows to
   be triggered externally and an open api to be easily embedded into your

docs/misc/2_setup_oauth/index.md → docs/misc/2_setup_oauth/index.mdx

@@ -1,9 +1,19 @@
+import DocCard from '@site/src/components/DocCard';
+
 # Setup OAuth and SSO
 
 Windmill supports Single Sign-On for [Microsoft](#microsoft), [Google](#google-login), [GitHub](#github), [GitLab](#gitlab), [Okta](#okta), and domain restriction.
 
 On [self-hosted instances](../../advanced/1_self_host/index.mdx), OAuth configuration are set in the instance settings available from the superadmin settings.
 
+<div class="grid grid-cols-2 gap-6 mb-4">
+	<DocCard
+		title="Self Host Windmill"
+		description="Self host Windmill in 2 minutes."
+		href="/docs/advanced/self_host/"
+	/>
+</div>
+
 ## OAuth SSO
 
 ![Setup SSO](./setup_sso.png)
@@ -12,6 +22,18 @@ We recommend using a private navigation tab to test the new settings as soon as
 
 ### Google login
 
+<iframe
+	width="560"
+	height="315"
+	src="https://www.youtube.com/embed/jSpuBsRv0yM"
+	title="YouTube video player"
+	frameborder="0"
+	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+	allowfullscreen="true"
+></iframe>
+
+<br/>
+
 **Create Google OAuth keys**
 
 First, you need to create a Google OAuth Client:
@@ -25,24 +47,22 @@ First, you need to create a Google OAuth Client:
 - Click Create.
 - Copy the **Client ID** and **Client Secret** from the "OAuth Client" modal.
 
-See screenshot above:
-
-Superadmin Settings -> Instance Settings -> SSO -> Toggle "google" -> set client id, org and client secret
+Superadmin Settings -> Instance Settings -> SSO -> Toggle "Google" -> set client id, org and client secret.
 
 ### Microsoft
 
 Redirect URI: https://<YOUR_INSTANCE>/user/login_callback/microsoft
 Login: https://<YOUR_INSTANCE>/user/login
 
-Create a new OAuth 2.0 Client [in microsoft portal](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade)
+Create a new OAuth 2.0 Client in [Microsoft portal](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade).
 
-and in the "Authentication" tab, set the redirect URI to `BASE_URL/user/login_callback/microsoft`, the logout channel to
+In the "Authentication" tab, set the redirect URI to `BASE_URL/user/login_callback/microsoft`, the logout channel to
 `BASE_URL/auth/logout` where BASE_URL is what you configured as core BASE_URL.
 Also set "Accounts in any organizational directory (Any Microsoft Entra ID tenant -
 Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)", you can restrict the
 emails directly in windmill using the "allowed_domains" setting.
 
-Superadmin Settings -> Instance Settings -> SSO -> Toggle "microsoft" -> set client id, org and client secret
+Superadmin Settings -> Instance Settings -> SSO -> Toggle "microsoft" -> set client id, org and client secret.
 
 ### Keycloak
 
@@ -64,41 +84,43 @@ Attribute Mapping, Standard Scopes: Check Email
 
 Add the proper groups then click save. You should see your Client ID and Client Secret on the next screen then add the following entry "jumpcloud":
 
-Superadmin Settings -> Instance Settings -> SSO -> Toggle "jumpcloud" -> set client id and client secret
+Superadmin Settings -> Instance Settings -> SSO -> Toggle "jumpcloud" -> set client id and client secret.
 
 ![Jumpcloud](./jumpcloud.png.webp)
 
 ### Okta
 
-From your Admin page, setup windmill using the service flow
+From your Admin page, setup Windmill using the service flow:
 
-1. `Create a new app integration`
-   a. For "sign-in method" select "OIDC - Open ID Connect"
-   b. For "application type" select "Web Appliction"
-2. Select all of the following options for Grant type of "Client acting on behalf of a user"
+1. `Create a new app integration`:
+
+   a. For "sign-in method" select "OIDC - Open ID Connect".
+
+   b. For "application type" select "Web Appliction".
+2. Select all of the following options for Grant type of "Client acting on behalf of a user":
 
-- Authorization Code
-- Refresh Token
-- Implicit (hybrid)
-- Allow ID Token with implicit grant type
-- Allow Access Token with implicit grant type
+   - Authorization Code
+   - Refresh Token
+   - Implicit (hybrid)
+   - Allow ID Token with implicit grant type
+   - Allow Access Token with implicit grant type
 
-3. For Refresh Token, select "Rotate token after every use"
+3. For Refresh Token, select "Rotate token after every use".
 4. Under "LOGIN", set the following:
 
-- "Sign-in redirect URIs" `https://<your windmill's public hostname as configured in values.yaml>/user/login_callback/okta/`
-- "Sign-out redirect URIs" `https://<your windmill's public hostname as configured in values.yaml>`
-- "Login initiated by" `App Only`
-- "Initiate login URI" `https://<your windmill's public hostname as configured in values.yaml>/user/login`
+   - "Sign-in redirect URIs" `https://<your windmill's public hostname as configured in values.yaml>/user/login_callback/okta/`
+   - "Sign-out redirect URIs" `https://<your windmill's public hostname as configured in values.yaml>`
+   - "Login initiated by" `App Only`
+   - "Initiate login URI" `https://<your windmill's public hostname as configured in values.yaml>/user/login`
 
-Superadmin Settings -> Instance Settings -> SSO -> Toggle "okta" -> set client id, org and client secret
+Superadmin Settings -> Instance Settings -> SSO -> Toggle "okta" -> set client id, org and client secret.
 
 ### GitHub
 
 Redirect URI: https://<YOUR_INSTANCE>/user/login_callback/github
 Login: https://<YOUR_INSTANCE>/user/login
 
-Superadmin Settings -> Instance Settings -> SSO -> Toggle "github" -> set client id, org and client secret
+Superadmin Settings -> Instance Settings -> SSO -> Toggle "github" -> set client id, org and client secret.
 
 ### GitLab
 
@@ -107,11 +129,11 @@ Login: https://<YOUR_INSTANCE>/user/login
 
 GitLab's Single Sign-On integration is supported by Windmill. Detailed steps for setting up GitLab as an OAuth SSO provider will be provided in the upcoming documentation but the entry for the oauth.json is as following:
 
-Superadmin Settings -> Instance Settings -> SSO -> Toggle "gitlab" -> set client id, org and client secret
+Superadmin Settings -> Instance Settings -> SSO -> Toggle "gitlab" -> set client id, org and client secret.
 
 ### Custom OAuth
 
-You can use other custom OAuths as resources using the "Add OAuth" button in: Superadmin Settings -> Instance Settings -> Resources -> Add OAuth
+You can use other custom OAuths as resources using the "Add OAuth" button in: Superadmin Settings -> Instance Settings -> Resources -> Add OAuth.
 
 ## OAuth Resources
 
@@ -244,7 +266,7 @@ settings:
 
 See screenshot above:
 
-Superadmin Settings -> Instance Settings -> Resources -> Toggle "slack" -> set client id and client secret
+Superadmin Settings -> Instance Settings -> Resources -> Toggle "slack" -> set client id and client secret.
 
 ### Google Sheet
 
@@ -263,4 +285,4 @@ Superadmin Settings -> Instance Settings -> Resources -> Toggle "slack" -> set c
 - Copy the **Client ID** and **Client Secret** from the "OAuth Client" modal.
 - Superadmin Settings -> Instance Settings -> Resources -> Add OAuth "gsheet" -> set client id and client secret
 
-The same steps apply to enable more APIs (**gmail**, **gdrive**, etc) on your Google Account to set up the resources in WindMill.
+The same steps apply to enable more APIs (**gmail**, **gdrive**, etc) on your Google Account to set up the resources in Windmill.