feat(console): onboarding flow (#5225)

Implements an onboarding UI for users
2025-08-13 02:39:25 +00:00 · 2023-02-24 18:01:05 +01:00
parent a7cc907ab7
commit f8ddc844f8
39 changed files with 1248 additions and 26 deletions
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -42,6 +42,41 @@
      "ADD": "Zum Hinzufügen Kachel halten und ziehen"
    }
  },
+  "ONBOARDING": {
+    "DESCRIPTION": "Dein Onboarding-prozess",
+    "COMPLETED": "abgeschlossen",
+    "DISMISS": "schließen",
+    "CARD": {
+      "TITLE": "Bringe deine Instanz zum Laufen",
+      "DESCRIPTION": "Diese Checkliste hilft bei der Einrichtung Ihrer Instanz und führt Sie durch die wichtigsten Schritte"
+    },
+    "EVENTS": {
+      "instance.policy.label.added": {
+        "title": "Branding anpassen",
+        "description": "Definiere Farben und Form des Login-UIs und uploade deine Logos und Icons."
+      },
+      "instance.smtp.config.added": {
+        "title": "SMTP Benachrichtigungseinstellungen",
+        "description": "Konfiguriere deinen Mailserver."
+      },
+      "project.added": {
+        "title": "Erstelle ein Projekt",
+        "description": "Erstelle dein erstes Projekt und definiere Rollen"
+      },
+      "project.application.added": {
+        "title": "Erstelle eine App",
+        "description": "Erstelle deine erste Web-, native, API oder SAML-applikation und konfiguriere den Authentification-flow."
+      },
+      "user.human.added": {
+        "title": "Erfasse Benutzer",
+        "description": "Erstelle Benutzer die später deine Apps nutzen können."
+      },
+      "user.grant.added": {
+        "title": "Berechtige Benutzer",
+        "description": "Erlaube es deinen Nutzern auf deine Apps zuzugreifen und gebe ihnen Rollen."
+      }
+    }
+  },
  "MENU": {
    "INSTANCE": "Instance",
    "DASHBOARD": "Home",
@@ -1725,6 +1760,8 @@
      "ID": "ID",
      "DESCRIPTION": "Hier kannst Du Deine Applikationen bearbeiten und deren Konfiguration anpassen.",
      "CREATE": "Applikation erstellen",
+      "CREATE_SELECT_PROJECT": "Wähle zuerst dein Projekt aus",
+      "CREATE_NEW_PROJECT": "oder erstelle ein neues <a href='{{url}}' title='Create project'>hier</a>.",
      "CREATE_DESC_TITLE": "Gebe die Daten der Anwendung Schritt für Schritt ein.",
      "CREATE_DESC_SUB": "Es wird automatisch eine empfohlene Konfiguration generiert.",
      "STATE": "Status",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -42,6 +42,41 @@
      "ADD": "Hold and drag a tile to add"
    }
  },
+  "ONBOARDING": {
+    "DESCRIPTION": "Your onboarding process",
+    "COMPLETED": "completed",
+    "DISMISS": "No thanks, I'm a pro.",
+    "CARD": {
+      "TITLE": "Get your ZITADEL running",
+      "DESCRIPTION": "This checklist helps to setup your instance and guides your through the most essential steps"
+    },
+    "EVENTS": {
+      "instance.policy.label.added": {
+        "title": "Setup your brand",
+        "description": "Define coloring and shape of your login and upload your logo and icons."
+      },
+      "instance.smtp.config.added": {
+        "title": "Setup your SMTP settings",
+        "description": "Set your own mail server settings."
+      },
+      "project.added": {
+        "title": "Create your first project",
+        "description": "Add your first project and define its roles and authorizations."
+      },
+      "project.application.added": {
+        "title": "Create your first application",
+        "description": "Create a web, native, api or saml application and setup your authentication flow."
+      },
+      "user.human.added": {
+        "title": "Add users",
+        "description": "Add your application users"
+      },
+      "user.grant.added": {
+        "title": "Grant users",
+        "description": "Allow users to access your application and setup their role."
+      }
+    }
+  },
  "MENU": {
    "INSTANCE": "Instance",
    "DASHBOARD": "Home",
@@ -124,6 +159,7 @@
    "NEXT": "Next",
    "MORE": "more",
    "STEP": "Step",
+    "SETUP": "Setup",
    "TABLE": {
      "SHOWUSER": "Show user {{value}}"
    }
@@ -1725,6 +1761,8 @@
      "ID": "ID",
      "DESCRIPTION": "Here you can edit your application data and it's configuration.",
      "CREATE": "Create application",
+      "CREATE_SELECT_PROJECT": "Select your project first",
+      "CREATE_NEW_PROJECT": "or create a new one <a href='{{url}}' title='Create project'>here</a>.",
      "CREATE_DESC_TITLE": "Enter Your Application Details Step by Step",
      "CREATE_DESC_SUB": "A recommended configuration will be automatically generated.",
      "STATE": "Status",
--- a/console/src/assets/i18n/fr.json
+++ b/console/src/assets/i18n/fr.json
@@ -42,6 +42,41 @@
      "ADD": "Maintenir et faire glisser une tuile pour ajouter"
    }
  },
+  "ONBOARDING": {
+    "DESCRIPTION": "Votre processus d'intégration",
+    "COMPLETED": "terminé",
+    "DISMISS": "fermer",
+    "CARD": {
+      "TITLE": "Faites fonctionner votre ZITADEL",
+      "DESCRIPTION": "Cette liste de contrôle vous aide à configurer votre instance et vous guide à travers les étapes les plus essentielles."
+    },
+    "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."
+      },
+      "instance.smtp.config.added": {
+        "title": "Configurez vos paramètres SMTP",
+        "description": "Définissez vos propres paramètres de serveur de messagerie"
+      },
+      "project.added": {
+        "title": "Créez votre premier projet",
+        "description": "Ajoutez votre premier projet et définissez ses rôles et autorisations."
+      },
+      "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."
+      },
+      "user.human.added": {
+        "title": "Ajouter des utilisateurs",
+        "description": "Ajouter les utilisateurs de votre application"
+      },
+      "user.grant.added": {
+        "title": "Utilisateurs de subventions",
+        "description": "Autorisez les utilisateurs à accéder à votre application et définissez leur rôle."
+      }
+    }
+  },
  "MENU": {
    "INSTANCE": "Instance",
    "DASHBOARD": "Accueil",
@@ -1724,9 +1759,11 @@
      "TITLE": "Application",
      "ID": "ID",
      "DESCRIPTION": "Ici vous pouvez modifier les données de votre application et sa configuration.",
-      "CREATE_OIDC": "Application OIDC",
-      "CREATE_OIDC_DESC_TITLE": "Entrez les détails de votre application étape par étape",
-      "CREATE_OIDC_DESC_SUB": "Une configuration recommandée sera automatiquement générée.",
+      "CREATE": "Application OIDC",
+      "CREATE_SELECT_PROJECT": "Sélectionnez d'abord votre projet",
+      "CREATE_NEW_PROJECT": "ou créez-en un nouveau <a href='{{url}}' title='Create project'>here</a>.",
+      "CREATE_DESC_TITLE": "Entrez les détails de votre application étape par étape",
+      "CREATE_DESC_SUB": "Une configuration recommandée sera automatiquement générée.",
      "STATE": "Statut",
      "DATECREATED": "Créé",
      "DATECHANGED": "Modifié",
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@@ -42,6 +42,41 @@
      "ADD": "Per aggiungere, tieni premuto e trascina il riquadro"
    }
  },
+  "ONBOARDING": {
+    "DESCRIPTION": "Your onboarding process",
+    "COMPLETED": "completed",
+    "DISMISS": "chiudi",
+    "CARD": {
+      "TITLE": "Fate funzionare il vostro ZITADEL",
+      "DESCRIPTION": "Questa lista di azioni aiuta a configurare la vostra istanza e vi guida attraverso i passaggi più essenziali."
+    },
+    "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."
+      },
+      "instance.smtp.config.added": {
+        "title": "Configura le impostazioni SMTP",
+        "description": "Imposta il proprio server di posta"
+      },
+      "project.added": {
+        "title": "Crea il tuo primo progetto",
+        "description": "Aggiungere il primo progetto e definire i ruoli e le autorizzazioni."
+      },
+      "project.application.added": {
+        "title": "Crea la tua prima applicazione",
+        "description": "Crea un'applicazione web, nativa, api o saml e imposta il flusso di autenticazione."
+      },
+      "user.human.added": {
+        "title": "Aggiungi utenti",
+        "description": "Aggiungi gli utenti dell'applicazione"
+      },
+      "user.grant.added": {
+        "title": "Crea autorizzazioni per gli utenti",
+        "description": "Consenti agli utenti di accedere alla tua applicazione e imposta il loro ruolo."
+      }
+    }
+  },
  "MENU": {
    "INSTANCE": "Istanza",
    "DASHBOARD": "Pagina iniziale",
@@ -1726,6 +1761,8 @@
      "ID": "ID",
      "DESCRIPTION": "Qui puoi modificare i dati della tua applicazione e la sua configurazione.",
      "CREATE": "Crea Applicazione",
+      "CREATE_SELECT_PROJECT": "Seleziona il tuo progetto",
+      "CREATE_NEW_PROJECT": "o crea uno nuovo <a href='{{url}}' title='Crea progetto'>qui</a>.",
      "CREATE_DESC_TITLE": "Inserisci i dettagli della tua applicazione passo dopo passo",
      "CREATE_DESC_SUB": "Una configurazione raccomandata sar\u00e0 generata automaticamente.",
      "STATE": "Stato",
--- a/console/src/assets/i18n/pl.json
+++ b/console/src/assets/i18n/pl.json
@@ -42,6 +42,41 @@
      "ADD": "Przytrzymaj i przeciągnij kafel, aby go dodać"
    }
  },
+  "ONBOARDING": {
+    "DESCRIPTION": "Twój proces wprowadzania na rynek",
+    "COMPLETED": "zakończone",
+    "DISMISS": "zamknąć",
+    "CARD": {
+      "TITLE": "Uruchom swój ZITADEL",
+      "DESCRIPTION": "Ta lista kontrolna pomoże Ci skonfigurować instancję i poprowadzi Cię przez najważniejsze kroki."
+    },
+    "EVENTS": {
+      "instance.policy.label.added": {
+        "title": "Skonfiguruj swoją markę",
+        "description": "Zdefiniuj kolorystykę i kształt swojego loginu oraz wgraj swoje logo i ikony."
+      },
+      "instance.smtp.config.added": {
+        "title": "Ustawienia SMTP",
+        "description": "Ustawienie własnego serwera pocztowego"
+      },
+      "project.added": {
+        "title": "Stwórz swój pierwszy projekt",
+        "description": "Dodaj swój pierwszy projekt i określ jego role i uprawnienia."
+      },
+      "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."
+      },
+      "user.human.added": {
+        "title": "Dodaj użytkowników",
+        "description": "Dodaj użytkowników aplikacji"
+      },
+      "user.grant.added": {
+        "title": "Użytkownicy dotacji",
+        "description": "Pozwól użytkownikom na dostęp do Twojej aplikacji i ustaw ich rolę."
+      }
+    }
+  },
  "MENU": {
    "INSTANCE": "Instancja",
    "DASHBOARD": "Strona główna",
@@ -1725,6 +1760,8 @@
      "ID": "ID",
      "DESCRIPTION": "Tutaj możesz edytować dane swojej aplikacji i jej konfigurację.",
      "CREATE": "Utwórz aplikację",
+      "CREATE_SELECT_PROJECT": "Najpierw wybierz swój projekt",
+      "CREATE_NEW_PROJECT": "lub utworzyć nowy <a href='{{url}}' title='Utwórz projekt'>tutaj</a>.",
      "CREATE_DESC_TITLE": "Wprowadź szczegóły swojej aplikacji krok po kroku",
      "CREATE_DESC_SUB": "Automatycznie zostanie wygenerowana zalecana konfiguracja.",
      "STATE": "Status",
--- a/console/src/assets/i18n/zh.json
+++ b/console/src/assets/i18n/zh.json
@@ -42,6 +42,41 @@
      "ADD": "按住并拖动来添加"
    }
  },
+  "ONBOARDING": {
+    "DESCRIPTION": "你的入职过程",
+    "COMPLETED": "已完成",
+    "DISMISS": "隐藏",
+    "CARD": {
+      "TITLE": "让你的ZITADEL运转起来",
+      "DESCRIPTION": "这份清单有助于设置你的实例，并指导你完成最重要的步骤"
+    },
+    "EVENTS": {
+      "instance.policy.label.added": {
+        "title": "设置你的品牌",
+        "description": "定义你的登录的颜色和形状，上传你的标志和图标。"
+      },
+      "instance.smtp.config.added": {
+        "title": "SMTP设置",
+        "description": "设置你自己的邮件服务器设置"
+      },
+      "project.added": {
+        "title": "创建你的第一个项目",
+        "description": "添加你的第一个项目并定义其角色和授权。"
+      },
+      "project.application.added": {
+        "title": "创建你的第一个应用程序",
+        "description": "创建一个web、native、api或saml应用程序并设置你的认证流程。"
+      },
+      "user.human.added": {
+        "title": "添加用户",
+        "description": "添加你的应用程序用户"
+      },
+      "user.grant.added": {
+        "title": "授予用户",
+        "description": "允许用户访问你的应用程序并设置他们的角色。"
+      }
+    }
+  },
  "MENU": {
    "INSTANCE": "实例",
    "DASHBOARD": "首页",
@@ -1723,9 +1758,11 @@
      "TITLE": "应用",
      "ID": "ID",
      "DESCRIPTION": "在这里您可以编辑您的应用程序数据及其配置。",
-      "CREATE_OIDC": "OIDC 应用",
-      "CREATE_OIDC_DESC_TITLE": "逐步输入您的应用详情",
-      "CREATE_OIDC_DESC_SUB": "将自动生成推荐的配置。",
+      "CREATE": "OIDC 应用",
+      "CREATE_SELECT_PROJECT": "首先选择你的项目",
+      "CREATE_NEW_PROJECT": "或创建一个新的<a href='{url}}' title='创建项目'>这里</a>。",
+      "CREATE_DESC_TITLE": "逐步输入您的应用详情",
+      "CREATE_DESC_SUB": "将自动生成推荐的配置。",
      "STATE": "状态",
      "DATECREATED": "创建于",
      "DATECHANGED": "修改于",