fix(console): refine onboarding styles and behavior, i18n (#5616)

* fix: console onboarding styles and behavior, i18n * action-row classes * fix: only consider real user events in the onboarding view (#5617) * fix(onboarding): only human events * explicitly exclude system api events --------- Co-authored-by: Max Peintner <max@caos.ch> --------- Co-authored-by: Elio Bischof <eliobischof@gmail.com> Co-authored-by: Elio Bischof <elio@zitadel.com>
2025-08-13 02:39:25 +00:00 · 2023-04-06 14:02:46 +02:00
parent 698f46fe6a
commit 2ee7b9c381
18 changed files with 364 additions and 100 deletions
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "Dein Onboarding-prozess",
+    "MOREDESCRIPTION": "mehr Shortcuts",
    "COMPLETED": "abgeschlossen",
    "DISMISS": "schließen",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "Branding anpassen",
-        "description": "Definiere Farben und Form des Login-UIs und uploade deine Logos und Icons."
+        "description": "Definiere Farben und Form des Login-UIs und uploade deine Logos und Icons.",
+        "action": "Branding anpassen"
      },
      "instance.smtp.config.added": {
        "title": "SMTP Benachrichtigungseinstellungen",
-        "description": "Konfiguriere deinen Mailserver."
+        "description": "Konfiguriere deinen Mailserver.",
+        "action": "SMTP einrichten"
      },
      "project.added": {
        "title": "Erstelle ein Projekt",
-        "description": "Erstelle dein erstes Projekt und definiere Rollen"
+        "description": "Erstelle dein erstes Projekt und definiere Rollen",
+        "action": "Projekt erstellen"
      },
      "project.application.added": {
        "title": "Erstelle eine App",
-        "description": "Erstelle deine erste Web-, native, API oder SAML-applikation und konfiguriere den Authentification-flow."
+        "description": "Erstelle deine erste Web-, native, API oder SAML-applikation und konfiguriere den Authentification-flow.",
+        "action": "App erstellen"
      },
      "user.human.added": {
        "title": "Erfasse Benutzer",
-        "description": "Erstelle Benutzer die später deine Apps nutzen können."
+        "description": "Erstelle Benutzer die später deine Apps nutzen können.",
+        "action": "Benutzer erfassen"
      },
      "user.grant.added": {
        "title": "Berechtige Benutzer",
-        "description": "Erlaube es deinen Nutzern auf deine Apps zuzugreifen und gebe ihnen Rollen."
+        "description": "Erlaube es deinen Nutzern auf deine Apps zuzugreifen und gebe ihnen Rollen.",
+        "action": "Benutzer berechtigen"
      }
    }
  },
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "Your onboarding process",
+    "MOREDESCRIPTION": "more shortcuts",
    "COMPLETED": "completed",
    "DISMISS": "No thanks, I'm a pro.",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "Setup your brand",
-        "description": "Define coloring and shape of your login and upload your logo and icons."
+        "description": "Define coloring and shape of your login and upload your logo and icons.",
+        "action": "Setup branding"
      },
      "instance.smtp.config.added": {
        "title": "Setup your SMTP settings",
-        "description": "Set your own mail server settings."
+        "description": "Set your own mail server settings.",
+        "action": "Setup SMTP"
      },
      "project.added": {
-        "title": "Create your first project",
-        "description": "Add your first project and define its roles and authorizations."
+        "title": "Create a project",
+        "description": "Add a project and define its roles and authorizations.",
+        "action": "Create project"
      },
      "project.application.added": {
-        "title": "Create your first application",
-        "description": "Create a web, native, api or saml application and setup your authentication flow."
+        "title": "Create an application",
+        "description": "Create a web, native, api or saml application and setup your authentication flow.",
+        "action": "Create app"
      },
      "user.human.added": {
        "title": "Add users",
-        "description": "Add your application users"
+        "description": "Add your application users",
+        "action": "Add user"
      },
      "user.grant.added": {
        "title": "Grant users",
-        "description": "Allow users to access your application and setup their role."
+        "description": "Allow users to access your application and setup their role.",
+        "action": "Grant user"
      }
    }
  },
--- a/console/src/assets/i18n/fr.json
+++ b/console/src/assets/i18n/fr.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "Votre processus d'intégration",
+    "MOREDESCRIPTION": "plus de raccourcis",
    "COMPLETED": "terminé",
    "DISMISS": "fermer",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "Créez votre marque",
-        "description": "Définissez la couleur et la forme de votre connexion et téléchargez votre logo et vos icônes."
+        "description": "Définissez la couleur et la forme de votre connexion et téléchargez votre logo et vos icônes.",
+        "action": "Définissez"
      },
      "instance.smtp.config.added": {
-        "title": "Configurez vos paramètres SMTP",
-        "description": "Définissez vos propres paramètres de serveur de messagerie"
+        "title": "Configurez paramètres SMTP",
+        "description": "Définissez paramètres de serveur de messagerie",
+        "action": "Configurez"
      },
      "project.added": {
-        "title": "Créez votre premier projet",
-        "description": "Ajoutez votre premier projet et définissez ses rôles et autorisations."
+        "title": "Créez projet",
+        "description": "Ajoutez projet et définissez ses rôles et autorisations.",
+        "action": "Créez projet"
      },
      "project.application.added": {
        "title": "Créez votre première application",
-        "description": "Créez une application web, native, api ou saml et configurez votre flux d'authentification."
+        "description": "Créez une application web, native, api ou saml et configurez votre flux d'authentification.",
+        "action": "Créez application"
      },
      "user.human.added": {
        "title": "Ajouter des utilisateurs",
-        "description": "Ajouter les utilisateurs de votre application"
+        "description": "Ajouter les utilisateurs de application",
+        "action": "Ajuter utilisateur"
      },
      "user.grant.added": {
        "title": "Utilisateurs de subventions",
-        "description": "Autorisez les utilisateurs à accéder à votre application et définissez leur rôle."
+        "description": "Autorisez les utilisateurs à accéder à votre application et définissez leur rôle.",
+        "action": "Autorisez"
      }
    }
  },
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "Il tuo processo di onboarding",
+    "MOREDESCRIPTION": "più scorciatoie",
    "COMPLETED": "completato",
    "DISMISS": "chiudi",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "Imposta il tuo marchio",
-        "description": "Definisci la colorazione e il design del vostro login e caricate il vostro logo e le vostre icone."
+        "description": "Definisci la colorazione e il design del vostro login e caricate il vostro logo e le vostre icone.",
+        "action": "Imposta marchio"
      },
      "instance.smtp.config.added": {
        "title": "Configura le impostazioni SMTP",
-        "description": "Imposta il proprio server di posta"
+        "description": "Imposta il proprio server di posta",
+        "action": "Configura SMTP"
      },
      "project.added": {
        "title": "Crea il tuo primo progetto",
-        "description": "Aggiungere il primo progetto e definire i ruoli e le autorizzazioni."
+        "description": "Aggiungere il primo progetto e definire i ruoli e le autorizzazioni.",
+        "action": "Crea progetto"
      },
      "project.application.added": {
        "title": "Crea la tua prima applicazione",
-        "description": "Crea un'applicazione web, nativa, api o saml e imposta il flusso di autenticazione."
+        "description": "Crea un'applicazione web, nativa, api o saml e imposta il flusso di autenticazione.",
+        "action": "Crea applicazione"
      },
      "user.human.added": {
        "title": "Aggiungi utenti",
-        "description": "Aggiungi gli utenti dell'applicazione"
+        "description": "Aggiungi gli utenti dell'applicazione",
+        "action": "Aggiungi utente"
      },
      "user.grant.added": {
        "title": "Crea autorizzazioni per gli utenti",
-        "description": "Consenti agli utenti di accedere alla tua applicazione e imposta il loro ruolo."
+        "description": "Consenti agli utenti di accedere alla tua applicazione e imposta il loro ruolo.",
+        "action": "Crea autorizzazione"
      }
    }
  },
--- a/console/src/assets/i18n/ja.json
+++ b/console/src/assets/i18n/ja.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "オンボーディングの手順",
+    "MOREDESCRIPTION": "より多くのショートカット",
    "COMPLETED": "完了",
    "DISMISS": "いいえ、私はプロです。",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "ブランドをセットアップする",
-        "description": "ログインの色と形状を定義し、ロゴとアイコンをアップロードします。"
+        "description": "ログインの色と形状を定義し、ロゴとアイコンをアップロードします。",
+        "action": "ブランディングの設定"
      },
      "instance.smtp.config.added": {
        "title": "SMTP設定をセットアップする",
-        "description": "独自のメールサーバーを設定します。"
+        "description": "独自のメールサーバーを設定します。",
+        "action": "SMTP 設定を設定する"
      },
      "project.added": {
        "title": "最初のプロジェクトを作成する",
-        "description": "最初のプロジェクトを追加し、ロールと認証を定義します。"
+        "description": "最初のプロジェクトを追加し、ロールと認証を定義します。",
+        "action": "プロジェクトを作成"
      },
      "project.application.added": {
        "title": "最初のアプリケーションを作成する",
-        "description": "Web、ネイティブ、API、またはSAMLアプリケーションを作成し、認証フローをセットアップします。"
+        "description": "Web、ネイティブ、API、またはSAMLアプリケーションを作成し、認証フローをセットアップします。",
+        "action": "アプリケーションを作成"
      },
      "user.human.added": {
        "title": "ユーザーを追加する",
-        "description": "アプリケーションユーザーを追加します。"
+        "description": "アプリケーションユーザーを追加します。",
+        "action": "ユーザーを作成"
      },
      "user.grant.added": {
        "title": "ユーザーにグラントする",
-        "description": "ユーザーがアプリケーションにアクセスし、ロールをセットアップできるようにします。"
+        "description": "ユーザーがアプリケーションにアクセスし、ロールをセットアップできるようにします。",
+        "action": "承認の作成"
      }
    }
  },
--- a/console/src/assets/i18n/pl.json
+++ b/console/src/assets/i18n/pl.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "Twój proces wprowadzania na rynek",
+    "MOREDESCRIPTION": "więcej skrótów",
    "COMPLETED": "zakończone",
    "DISMISS": "zamknąć",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "Skonfiguruj swoją markę",
-        "description": "Zdefiniuj kolorystykę i kształt swojego loginu oraz wgraj swoje logo i ikony."
+        "description": "Zdefiniuj kolorystykę i kształt swojego loginu oraz wgraj swoje logo i ikony.",
+        "action": "Skonfiguruj branding"
      },
      "instance.smtp.config.added": {
        "title": "Ustawienia SMTP",
-        "description": "Ustawienie własnego serwera pocztowego"
+        "description": "Ustawienie własnego serwera pocztowego",
+        "action": "skonfiguruj ustawienia SMTP"
      },
      "project.added": {
        "title": "Stwórz swój pierwszy projekt",
-        "description": "Dodaj swój pierwszy projekt i określ jego role i uprawnienia."
+        "description": "Dodaj swój pierwszy projekt i określ jego role i uprawnienia.",
+        "action": "Utwórz projekt"
      },
      "project.application.added": {
        "title": "Utwórz swoją pierwszą aplikację",
-        "description": "Utwórz aplikację internetową, natywną, api lub saml i skonfiguruj swój przepływ uwierzytelniania."
+        "description": "Utwórz aplikację internetową, natywną, api lub saml i skonfiguruj swój przepływ uwierzytelniania.",
+        "action": "Utwórz aplikację"
      },
      "user.human.added": {
        "title": "Dodaj użytkowników",
-        "description": "Dodaj użytkowników aplikacji"
+        "description": "Dodaj użytkowników aplikacji",
+        "action": "Stwórz użytkownika"
      },
      "user.grant.added": {
        "title": "Użytkownicy dotacji",
-        "description": "Pozwól użytkownikom na dostęp do Twojej aplikacji i ustaw ich rolę."
+        "description": "Pozwól użytkownikom na dostęp do Twojej aplikacji i ustaw ich rolę.",
+        "action": "Utwórz autoryzację"
      }
    }
  },
--- a/console/src/assets/i18n/zh.json
+++ b/console/src/assets/i18n/zh.json
@@ -44,6 +44,7 @@
  },
  "ONBOARDING": {
    "DESCRIPTION": "你的入职过程",
+    "MOREDESCRIPTION": "更多捷径",
    "COMPLETED": "已完成",
    "DISMISS": "隐藏",
    "CARD": {
@@ -53,27 +54,33 @@
    "EVENTS": {
      "instance.policy.label.added": {
        "title": "设置你的品牌",
-        "description": "定义你的登录的颜色和形状，上传你的标志和图标。"
+        "description": "定义你的登录的颜色和形状，上传你的标志和图标。",
+        "action": "设置品牌"
      },
      "instance.smtp.config.added": {
        "title": "SMTP设置",
-        "description": "设置你自己的邮件服务器设置"
+        "description": "设置你自己的邮件服务器设置",
+        "action": "设置 SMTP 设置"
      },
      "project.added": {
        "title": "创建你的第一个项目",
-        "description": "添加你的第一个项目并定义其角色和授权。"
+        "description": "添加你的第一个项目并定义其角色和授权。",
+        "action": "创建项目"
      },
      "project.application.added": {
        "title": "创建你的第一个应用程序",
-        "description": "创建一个web、native、api或saml应用程序并设置你的认证流程。"
+        "description": "创建一个web、native、api或saml应用程序并设置你的认证流程。",
+        "action": "创建应用程序"
      },
      "user.human.added": {
        "title": "添加用户",
-        "description": "添加你的应用程序用户"
+        "description": "添加你的应用程序用户",
+        "action": "创建用户"
      },
      "user.grant.added": {
        "title": "授予用户",
-        "description": "允许用户访问你的应用程序并设置他们的角色。"
+        "description": "允许用户访问你的应用程序并设置他们的角色。",
+        "action": "创建授权"
      }
    }
  },