mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-01 08:34:53 +02:00
Merge branch 'dev' into clients-pops
This commit is contained in:
Owen
commit
459bc32f9d
149 changed files with 13888 additions and 5083 deletions
3
crowdin.yml
Normal file
3
crowdin.yml
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
files:
|
||||||
|
- source: /messages/en-US.json
|
||||||
|
translation: /messages/%locale%.json
|
||||||
|
|
@ -1,287 +0,0 @@
|
||||||
## Authentication Site
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| -------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------- |
|
|
||||||
| Powered by [Pangolin](https://github.com/fosrl/pangolin) | Bereitgestellt von [Pangolin](https://github.com/fosrl/pangolin) | |
|
|
||||||
| Authentication Required | Authentifizierung erforderlich | |
|
|
||||||
| Choose your preferred method to access {resource} | Wählen Sie Ihre bevorzugte Methode, um auf {resource} zuzugreifen | |
|
|
||||||
| PIN | PIN | |
|
|
||||||
| User | Benutzer | |
|
|
||||||
| 6-digit PIN Code | 6-stelliger PIN-Code | pin login |
|
|
||||||
| Login in with PIN | Mit PIN anmelden | pin login |
|
|
||||||
| Email | E-Mail | user login |
|
|
||||||
| Enter your email | Geben Sie Ihre E-Mail-Adresse ein | user login |
|
|
||||||
| Password | Passwort | user login |
|
|
||||||
| Enter your password | Geben Sie Ihr Passwort ein | user login |
|
|
||||||
| Forgot your password? | Passwort vergessen? | user login |
|
|
||||||
| Log in | Anmelden | user login |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Login site
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| --------------------- | ---------------------------------- | ----------- |
|
|
||||||
| Welcome to Pangolin | Willkommen bei Pangolin | |
|
|
||||||
| Log in to get started | Melden Sie sich an, um zu beginnen | |
|
|
||||||
| Email | E-Mail | |
|
|
||||||
| Enter your email | Geben Sie Ihre E-Mail-Adresse ein | placeholder |
|
|
||||||
| Password | Passwort | |
|
|
||||||
| Enter your password | Geben Sie Ihr Passwort ein | placeholder |
|
|
||||||
| Forgot your password? | Passwort vergessen? | |
|
|
||||||
| Log in | Anmelden | |
|
|
||||||
|
|
||||||
# Ogranization site after successful login
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ----------------------------------------- | -------------------------------------------- | ----- |
|
|
||||||
| Welcome to Pangolin | Willkommen bei Pangolin | |
|
|
||||||
| You're a member of {number} organization. | Sie sind Mitglied von {number} Organisation. | |
|
|
||||||
|
|
||||||
## Shared Header, Navbar and Footer
|
|
||||||
##### Header
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------- | ------------------- | ----- |
|
|
||||||
| Documentation | Dokumentation | |
|
|
||||||
| Support | Support | |
|
|
||||||
| Organization {name} | Organisation {name} | |
|
|
||||||
##### Organization selector
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ---------------- | ----------------- | ----- |
|
|
||||||
| Search… | Suchen… | |
|
|
||||||
| Create | Erstellen | |
|
|
||||||
| New Organization | Neue Organisation | |
|
|
||||||
| Organizations | Organisationen | |
|
|
||||||
|
|
||||||
##### Navbar
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| --------------- | ----------------- | ----- |
|
|
||||||
| Sites | Websites | |
|
|
||||||
| Resources | Ressourcen | |
|
|
||||||
| User & Roles | Benutzer & Rollen | |
|
|
||||||
| Shareable Links | Teilbare Links | |
|
|
||||||
| General | Allgemein | |
|
|
||||||
##### Footer
|
|
||||||
| EN | DE | |
|
|
||||||
| ------------------------- | --------------------------- | ------------------- |
|
|
||||||
| Page {number} of {number} | Seite {number} von {number} | |
|
|
||||||
| Rows per page | Zeilen pro Seite | |
|
|
||||||
| Pangolin | Pangolin | unten auf der Seite |
|
|
||||||
| Built by Fossorial | Erstellt von Fossorial | unten auf der Seite |
|
|
||||||
| Open Source | Open Source | unten auf der Seite |
|
|
||||||
| Documentation | Dokumentation | unten auf der Seite |
|
|
||||||
| {version} | {version} | unten auf der Seite |
|
|
||||||
|
|
||||||
## Main “Sites”
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----- |
|
|
||||||
| Newt (Recommended) | Newt (empfohlen) | |
|
|
||||||
| For the best user experience, use Newt. It uses WireGuard under the hood and allows you to address your private resources by their LAN address on your private network from within the Pangolin dashboard. | Für das beste Benutzererlebnis verwenden Sie Newt. Es nutzt WireGuard im Hintergrund und ermöglicht es Ihnen, auf Ihre privaten Ressourcen über ihre LAN-Adresse in Ihrem privaten Netzwerk direkt aus dem Pangolin-Dashboard zuzugreifen. | |
|
|
||||||
| Runs in Docker | Läuft in Docker | |
|
|
||||||
| Runs in shell on macOS, Linux, and Windows | Läuft in der Shell auf macOS, Linux und Windows | |
|
|
||||||
| Install Newt | Newt installieren | |
|
|
||||||
| Basic WireGuard<br> | Verwenden Sie einen beliebigen WireGuard-Client, um eine Verbindung herzustellen. Sie müssen auf Ihre internen Ressourcen über die Peer-IP-Adresse zugreifen. | |
|
|
||||||
| Compatible with all WireGuard clients<br> | Kompatibel mit allen WireGuard-Clients<br> | |
|
|
||||||
| Manual configuration required | Manuelle Konfiguration erforderlich<br> | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| --------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------- |
|
|
||||||
| Manage Sites | Seiten verwalten | |
|
|
||||||
| Allow connectivity to your network through secure tunnels | Ermöglichen Sie die Verbindung zu Ihrem Netzwerk über ein sicheren Tunnel | |
|
|
||||||
| Search sites | Seiten suchen | placeholder |
|
|
||||||
| Add Site | Seite hinzufügen | |
|
|
||||||
| Name | Name | table header |
|
|
||||||
| Online | Status | table header |
|
|
||||||
| Site | Seite | table header |
|
|
||||||
| Data In | Eingehende Daten | table header |
|
|
||||||
| Data Out | Ausgehende Daten | table header |
|
|
||||||
| Connection Type | Verbindungstyp | table header |
|
|
||||||
| Online | Online | site state |
|
|
||||||
| Offline | Offline | site state |
|
|
||||||
| Edit → | Bearbeiten → | |
|
|
||||||
| View settings | Einstellungen anzeigen | Popup after clicking “…” on site |
|
|
||||||
| Delete | Löschen | Popup after clicking “…” on site |
|
|
||||||
##### Add Site Popup
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------ | ----------------------------------------------------------- | ----------- |
|
|
||||||
| Create Site | Seite erstellen | |
|
|
||||||
| Create a new site to start connection for this site | Erstellen Sie eine neue Seite, um die Verbindung zu starten | |
|
|
||||||
| Name | Name | |
|
|
||||||
| Site name | Seiten-Name | placeholder |
|
|
||||||
| This is the name that will be displayed for this site. | So wird Ihre Seite angezeigt | desc |
|
|
||||||
| Method | Methode | |
|
|
||||||
| Local | Lokal | |
|
|
||||||
| Newt | Newt | |
|
|
||||||
| WireGuard | WireGuard | |
|
|
||||||
| This is how you will expose connections. | So werden Verbindungen freigegeben. | |
|
|
||||||
| You will only be able to see the configuration once. | Diese Konfiguration können Sie nur einmal sehen. | |
|
|
||||||
| Learn how to install Newt on your system | Erfahren Sie, wie Sie Newt auf Ihrem System installieren | |
|
|
||||||
| I have copied the config | Ich habe die Konfiguration kopiert | |
|
|
||||||
| Create Site | Website erstellen | |
|
|
||||||
| Close | Schließen | |
|
|
||||||
|
|
||||||
## Main “Resources”
|
|
||||||
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----- |
|
|
||||||
| Resources | Ressourcen | |
|
|
||||||
| Ressourcen sind Proxy-Server für Anwendungen, die in Ihrem privaten Netzwerk laufen. Erstellen Sie eine Ressource für jede HTTP- oder HTTPS-Anwendung in Ihrem privaten Netzwerk. Jede Ressource muss mit einer Website verbunden sein, um eine private und sichere Verbindung über den verschlüsselten WireGuard-Tunnel zu ermöglichen. | Ressourcen sind Proxy-Server für Anwendungen, die in Ihrem privaten Netzwerk laufen. Erstellen Sie eine Ressource für jede HTTP- oder HTTPS-Anwendung in Ihrem privaten Netzwerk. Jede Ressource muss mit einer Website verbunden sein, um eine private und sichere Verbindung über den verschlüsselten WireGuard-Tunnel zu ermöglichen. | |
|
|
||||||
| Secure connectivity with WireGuard encryption | Sichere Verbindung mit WireGuard-Verschlüsselung | |
|
|
||||||
| Configure multiple authentication methods | Konfigurieren Sie mehrere Authentifizierungsmethoden | |
|
|
||||||
| User and role-based access control | Benutzer- und rollenbasierte Zugriffskontrolle | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| -------------------------------------------------- | ---------------------------------------------------------- | -------------------- |
|
|
||||||
| Manage Resources | Ressourcen verwalten | |
|
|
||||||
| Create secure proxies to your private applications | Erstellen Sie sichere Proxys für Ihre privaten Anwendungen | |
|
|
||||||
| Search resources | Ressourcen durchsuchen | placeholder |
|
|
||||||
| Name | Name | |
|
|
||||||
| Site | Website | |
|
|
||||||
| Full URL | Vollständige URL | |
|
|
||||||
| Authentication | Authentifizierung | |
|
|
||||||
| Not Protected | Nicht geschützt | authentication state |
|
|
||||||
| Protected | Geschützt | authentication state |
|
|
||||||
| Edit → | Bearbeiten → | |
|
|
||||||
| Add Resource | Ressource hinzufügen | |
|
|
||||||
##### Add Resource Popup
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------- |
|
|
||||||
| Create Resource | Ressource erstellen | |
|
|
||||||
| Create a new resource to proxy request to your app | Erstellen Sie eine neue Ressource, um Anfragen an Ihre App zu proxen | |
|
|
||||||
| Name | Name | |
|
|
||||||
| My Resource | Neue Ressource | name placeholder |
|
|
||||||
| This is the name that will be displayed for this resource. | Dies ist der Name, der für diese Ressource angezeigt wird | |
|
|
||||||
| Subdomain | Subdomain | |
|
|
||||||
| Enter subdomain | Subdomain eingeben | |
|
|
||||||
| This is the fully qualified domain name that will be used to access the resource. | Dies ist der vollständige Domainname, der für den Zugriff auf die Ressource verwendet wird. | |
|
|
||||||
| Site | Website | |
|
|
||||||
| Search site… | Website suchen… | Site selector popup |
|
|
||||||
| This is the site that will be used in the dashboard. | Dies ist die Website, die im Dashboard verwendet wird. | |
|
|
||||||
| Create Resource | Ressource erstellen | |
|
|
||||||
| Close | Schließen | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “User & Roles”
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------------- |
|
|
||||||
| Manage User & Roles | Benutzer & Rollen verwalten | |
|
|
||||||
| Invite users and add them to roles to manage access to your organization | Laden Sie Benutzer ein und weisen Sie ihnen Rollen zu, um den Zugriff auf Ihre Organisation zu verwalten | |
|
|
||||||
| Users | Benutzer | sidebar item |
|
|
||||||
| Roles | Rollen | sidebar item |
|
|
||||||
| **User tab** | | |
|
|
||||||
| Search users | Benutzer suchen | placeholder |
|
|
||||||
| Invite User | Benutzer einladen | addbutton |
|
|
||||||
| Email | E-Mail | table header |
|
|
||||||
| Status | Status | table header |
|
|
||||||
| Role | Rolle | table header |
|
|
||||||
| Confirmed | Bestätigt | account status |
|
|
||||||
| Not confirmed (?) | Nicht bestätigt (?) | unknown for me account status |
|
|
||||||
| Owner | Besitzer | role |
|
|
||||||
| Admin | Administrator | role |
|
|
||||||
| Member | Mitglied | role |
|
|
||||||
| **Roles Tab** | | |
|
|
||||||
| Search roles | Rollen suchen | placeholder |
|
|
||||||
| Add Role | Rolle hinzufügen | addbutton |
|
|
||||||
| Name | Name | table header |
|
|
||||||
| Description | Beschreibung | table header |
|
|
||||||
| Admin | Administrator | role |
|
|
||||||
| Member | Mitglied | role |
|
|
||||||
| Admin role with the most permissions | Administratorrolle mit den meisten Berechtigungen | admin role desc |
|
|
||||||
| Members can only view resources | Mitglieder können nur Ressourcen anzeigen | member role desc |
|
|
||||||
|
|
||||||
##### Invite User popup
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ----------------- | ------------------------------------------------------- | ----------- |
|
|
||||||
| Invite User | Geben Sie neuen Benutzern Zugriff auf Ihre Organisation | |
|
|
||||||
| Email | E-Mail | |
|
|
||||||
| Enter an email | E-Mail eingeben | placeholder |
|
|
||||||
| Role | Rolle | |
|
|
||||||
| Select role | Rolle auswählen | placeholder |
|
|
||||||
| Gültig für | Gültig bis | |
|
|
||||||
| 1 day | Tag | |
|
|
||||||
| 2 days | 2 Tage | |
|
|
||||||
| 3 days | 3 Tage | |
|
|
||||||
| 4 days | 4 Tage | |
|
|
||||||
| 5 days | 5 Tage | |
|
|
||||||
| 6 days | 6 Tage | |
|
|
||||||
| 7 days | 7 Tage | |
|
|
||||||
| Create Invitation | Einladung erstellen | |
|
|
||||||
| Close | Schließen | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “Shareable Links”
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----- |
|
|
||||||
| Shareable Links | Teilbare Links | |
|
|
||||||
| Create shareable links to your resources. Links provide temporary or unlimited access to your resource. You can configure the expiration duration of the link when you create one. | Erstellen Sie teilbare Links zu Ihren Ressourcen. Links bieten temporären oder unbegrenzten Zugriff auf Ihre Ressource. Sie können die Gültigkeitsdauer des Links beim Erstellen konfigurieren. | |
|
|
||||||
| Easy to create and share | Einfach zu erstellen und zu teilen | |
|
|
||||||
| Configurable expiration duration | Konfigurierbare Gültigkeitsdauer | |
|
|
||||||
| Secure and revocable | Sicher und widerrufbar | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------- |
|
|
||||||
| Manage Shareable Links | Teilbare Links verwalten | |
|
|
||||||
| Create shareable links to grant temporary or permanent access to your resources | Erstellen Sie teilbare Links, um temporären oder permanenten Zugriff auf Ihre Ressourcen zu gewähren | |
|
|
||||||
| Search links | Links suchen | placeholder |
|
|
||||||
| Create Share Link | Neuen Link erstellen | addbutton |
|
|
||||||
| Resource | Ressource | table header |
|
|
||||||
| Title | Titel | table header |
|
|
||||||
| Created | Erstellt | table header |
|
|
||||||
| Expires | Gültig bis | table header |
|
|
||||||
| No links. Create one to get started. | Keine Links. Erstellen Sie einen, um zu beginnen. | table placeholder |
|
|
||||||
|
|
||||||
##### Create Shareable Link popup
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------- |
|
|
||||||
| Create Shareable Link | Teilbaren Link erstellen | |
|
|
||||||
| Anyone with this link can access the resource | Jeder mit diesem Link kann auf die Ressource zugreifen | |
|
|
||||||
| Resource | Ressource | |
|
|
||||||
| Select resource | Ressource auswählen | |
|
|
||||||
| Search resources… | Ressourcen suchen… | resource selector popup |
|
|
||||||
| Title (optional) | Titel (optional) | |
|
|
||||||
| Enter title | Titel eingeben | placeholder |
|
|
||||||
| Expire in | Gültig bis | |
|
|
||||||
| Minutes | Minuten | |
|
|
||||||
| Hours | Stunden | |
|
|
||||||
| Days | Tage | |
|
|
||||||
| Months | Monate | |
|
|
||||||
| Years | Jahre | |
|
|
||||||
| Never expire | Nie ablaufen | |
|
|
||||||
| Expiration time is how long the link will be usable and provide access to the resource. After this time, the link will no longer work, and users who used this link will lose access to the resource. | Die Gültigkeitsdauer bestimmt, wie lange der Link nutzbar ist und Zugriff auf die Ressource bietet. Nach Ablauf dieser Zeit funktioniert der Link nicht mehr, und Benutzer, die diesen Link verwendet haben, verlieren den Zugriff auf die Ressource. | |
|
|
||||||
| Create Link | Link erstellen | |
|
|
||||||
| Close | Schließen | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “General”
|
|
||||||
|
|
||||||
| EN | DE | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------ |
|
|
||||||
| General | Allgemein | |
|
|
||||||
| Configure your organization’s general settings | Konfigurieren Sie die allgemeinen Einstellungen Ihrer Organisation | |
|
|
||||||
| General | Allgemein | sidebar item |
|
|
||||||
| Organization Settings | Organisationseinstellungen | |
|
|
||||||
| Manage your organization details and configuration | Verwalten Sie die Details und Konfiguration Ihrer Organisation | |
|
|
||||||
| Name | Name | |
|
|
||||||
| This is the display name of the org | Dies ist der Anzeigename Ihrer Organisation | |
|
|
||||||
| Save Settings | Einstellungen speichern | |
|
|
||||||
| Danger Zone | Gefahrenzone | |
|
|
||||||
| Once you delete this org, there is no going back. Please be certain. | Wenn Sie diese Organisation löschen, gibt es kein Zurück. Bitte seien Sie sicher. | |
|
|
||||||
| Delete Organization Data | Organisationsdaten löschen | |
|
|
||||||
|
|
@ -1,291 +0,0 @@
|
||||||
## Authentication Site
|
|
||||||
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| -------------------------------------------------------- | ------------------------------------------------------------ | ---------- |
|
|
||||||
| Powered by [Pangolin](https://github.com/fosrl/pangolin) | Desarrollado por [Pangolin](https://github.com/fosrl/pangolin) | |
|
|
||||||
| Authentication Required | Se requiere autenticación | |
|
|
||||||
| Choose your preferred method to access {resource} | Elije tu método requerido para acceder a {resource} | |
|
|
||||||
| PIN | PIN | |
|
|
||||||
| User | Usuario | |
|
|
||||||
| 6-digit PIN Code | Código PIN de 6 dígitos | pin login |
|
|
||||||
| Login in with PIN | Registrate con PIN | pin login |
|
|
||||||
| Email | Email | user login |
|
|
||||||
| Enter your email | Introduce tu email | user login |
|
|
||||||
| Password | Contraseña | user login |
|
|
||||||
| Enter your password | Introduce tu contraseña | user login |
|
|
||||||
| Forgot your password? | ¿Olvidaste tu contraseña? | user login |
|
|
||||||
| Log in | Iniciar sesión | user login |
|
|
||||||
|
|
||||||
|
|
||||||
## Login site
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| --------------------- | ---------------------------------- | ----------- |
|
|
||||||
| Welcome to Pangolin | Binvenido a Pangolin | |
|
|
||||||
| Log in to get started | Registrate para comenzar | |
|
|
||||||
| Email | Email | |
|
|
||||||
| Enter your email | Introduce tu email | placeholder |
|
|
||||||
| Password | Contraseña | |
|
|
||||||
| Enter your password | Introduce tu contraseña | placeholder |
|
|
||||||
| Forgot your password? | ¿Olvidaste tu contraseña? | |
|
|
||||||
| Log in | Iniciar sesión | |
|
|
||||||
|
|
||||||
# Ogranization site after successful login
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ----------------------------------------- | -------------------------------------------- | ----- |
|
|
||||||
| Welcome to Pangolin | Binvenido a Pangolin | |
|
|
||||||
| You're a member of {number} organization. | Eres miembro de la organización {number}. | |
|
|
||||||
|
|
||||||
## Shared Header, Navbar and Footer
|
|
||||||
##### Header
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------- | ------------------- | ----- |
|
|
||||||
| Documentation | Documentación | |
|
|
||||||
| Support | Soporte | |
|
|
||||||
| Organization {name} | Organización {name} | |
|
|
||||||
##### Organization selector
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ---------------- | ----------------- | ----- |
|
|
||||||
| Search… | Buscar… | |
|
|
||||||
| Create | Crear | |
|
|
||||||
| New Organization | Nueva Organización| |
|
|
||||||
| Organizations | Organizaciones | |
|
|
||||||
|
|
||||||
##### Navbar
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| --------------- | -----------------------| ----- |
|
|
||||||
| Sites | Sitios | |
|
|
||||||
| Resources | Recursos | |
|
|
||||||
| User & Roles | Usuarios y roles | |
|
|
||||||
| Shareable Links | Enlaces para compartir | |
|
|
||||||
| General | General | |
|
|
||||||
|
|
||||||
##### Footer
|
|
||||||
| EN | ES | |
|
|
||||||
| ------------------------- | --------------------------- | -------|
|
|
||||||
| Page {number} of {number} | Página {number} de {number} | footer |
|
|
||||||
| Rows per page | Filas por página | footer |
|
|
||||||
| Pangolin | Pangolin | footer |
|
|
||||||
| Built by Fossorial | Construido por Fossorial | footer |
|
|
||||||
| Open Source | Código abierto | footer |
|
|
||||||
| Documentation | Documentación | footer |
|
|
||||||
| {version} | {version} | footer |
|
|
||||||
|
|
||||||
## Main “Sites”
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----- |
|
|
||||||
| Newt (Recommended) | Newt (Recomendado) | |
|
|
||||||
| For the best user experience, use Newt. It uses WireGuard under the hood and allows you to address your private resources by their LAN address on your private network from within the Pangolin dashboard. | Para obtener la mejor experiencia de usuario, utiliza Newt. Utiliza WireGuard internamente y te permite abordar tus recursos privados mediante tu dirección LAN en tu red privada desde el panel de Pangolin. | |
|
|
||||||
| Runs in Docker | Se ejecuta en Docker | |
|
|
||||||
| Runs in shell on macOS, Linux, and Windows | Se ejecuta en shell en macOS, Linux y Windows | |
|
|
||||||
| Install Newt | Instalar Newt | |
|
|
||||||
| Basic WireGuard<br> | WireGuard básico<br> | |
|
|
||||||
| Compatible with all WireGuard clients<br> | Compatible con todos los clientes WireGuard<br> | |
|
|
||||||
| Manual configuration required | Se requiere configuración manual | |
|
|
||||||
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| --------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------- |
|
|
||||||
| Manage Sites | Administrar sitios | |
|
|
||||||
| Allow connectivity to your network through secure tunnels | Permitir la conectividad a tu red a través de túneles seguros| |
|
|
||||||
| Search sites | Buscar sitios | placeholder |
|
|
||||||
| Add Site | Agregar sitio | |
|
|
||||||
| Name | Nombre | table header |
|
|
||||||
| Online | Conectado | table header |
|
|
||||||
| Site | Sitio | table header |
|
|
||||||
| Data In | Datos en | table header |
|
|
||||||
| Data Out | Datos de salida | table header |
|
|
||||||
| Connection Type | Tipo de conexión | table header |
|
|
||||||
| Online | Conectado | site state |
|
|
||||||
| Offline | Desconectado | site state |
|
|
||||||
| Edit → | Editar → | |
|
|
||||||
| View settings | Ver configuración | Popup after clicking “…” on site |
|
|
||||||
| Delete | Borrar | Popup after clicking “…” on site |
|
|
||||||
|
|
||||||
##### Add Site Popup
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------ | ----------------------------------------------------------- | ----------- |
|
|
||||||
| Create Site | Crear sitio | |
|
|
||||||
| Create a new site to start connection for this site | Crear un nuevo sitio para iniciar la conexión para este sitio | |
|
|
||||||
| Name | Nombre | |
|
|
||||||
| Site name | Nombre del sitio | placeholder |
|
|
||||||
| This is the name that will be displayed for this site. | Este es el nombre que se mostrará para este sitio. | desc |
|
|
||||||
| Method | Método | |
|
|
||||||
| Local | Local | |
|
|
||||||
| Newt | Newt | |
|
|
||||||
| WireGuard | WireGuard | |
|
|
||||||
| This is how you will expose connections. | Así es como expondrás las conexiones. | |
|
|
||||||
| You will only be able to see the configuration once. | Solo podrás ver la configuración una vez. | |
|
|
||||||
| Learn how to install Newt on your system | Aprende a instalar Newt en tu sistema | |
|
|
||||||
| I have copied the config | He copiado la configuración | |
|
|
||||||
| Create Site | Crear sitio | |
|
|
||||||
| Close | Cerrar | |
|
|
||||||
|
|
||||||
## Main “Resources”
|
|
||||||
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----- |
|
|
||||||
| Resources | Recursos | |
|
|
||||||
| Ressourcen sind Proxy-Server für Anwendungen, die in Ihrem privaten Netzwerk laufen. Erstellen Sie eine Ressource für jede HTTP- oder HTTPS-Anwendung in Ihrem privaten Netzwerk. Jede Ressource muss mit einer Website verbunden sein, um eine private und sichere Verbindung über den verschlüsselten WireGuard-Tunnel zu ermöglichen. |Los recursos son servidores proxy para aplicaciones que se ejecutan en su red privada. Cree un recurso para cada aplicación HTTP o HTTPS en su red privada. Cada recurso debe estar conectado a un sitio web para proporcionar una conexión privada y segura a través del túnel cifrado WireGuard. | |
|
|
||||||
| Secure connectivity with WireGuard encryption | Conectividad segura con encriptación WireGuard | |
|
|
||||||
| Configure multiple authentication methods | Configura múltiples métodos de autenticación | |
|
|
||||||
| User and role-based access control | Control de acceso basado en usuarios y roles | |
|
|
||||||
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| -------------------------------------------------- | ---------------------------------------------------------- | -------------------- |
|
|
||||||
| Manage Resources | Administrar recursos | |
|
|
||||||
| Create secure proxies to your private applications | Crea servidores proxy seguros para tus aplicaciones privadas | |
|
|
||||||
| Search resources | Buscar recursos | placeholder |
|
|
||||||
| Name | Nombre | |
|
|
||||||
| Site | Sitio | |
|
|
||||||
| Full URL | URL completa | |
|
|
||||||
| Authentication | Autenticación | |
|
|
||||||
| Not Protected | No protegido | authentication state |
|
|
||||||
| Protected | Protegido | authentication state |
|
|
||||||
| Edit → | Editar → | |
|
|
||||||
| Add Resource | Agregar recurso | |
|
|
||||||
|
|
||||||
##### Add Resource Popup
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------- |
|
|
||||||
| Create Resource | Crear recurso | |
|
|
||||||
| Create a new resource to proxy request to your app | Crea un nuevo recurso para enviar solicitudes a tu aplicación | |
|
|
||||||
| Name | Nombre | |
|
|
||||||
| My Resource | Mi recurso | name placeholder |
|
|
||||||
| This is the name that will be displayed for this resource. | Este es el nombre que se mostrará para este recurso. | |
|
|
||||||
| Subdomain | Subdominio | |
|
|
||||||
| Enter subdomain | Ingresar subdominio | |
|
|
||||||
| This is the fully qualified domain name that will be used to access the resource. | Este es el nombre de dominio completo que se utilizará para acceder al recurso. | |
|
|
||||||
| Site | Sitio | |
|
|
||||||
| Search site… | Buscar sitio… | Site selector popup |
|
|
||||||
| This is the site that will be used in the dashboard. | Este es el sitio que se utilizará en el panel de control. | |
|
|
||||||
| Create Resource | Crear recurso | |
|
|
||||||
| Close | Cerrar | |
|
|
||||||
|
|
||||||
## Main “User & Roles”
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------------- |
|
|
||||||
| Manage User & Roles | Administrar usuarios y roles | |
|
|
||||||
| Invite users and add them to roles to manage access to your organization | Invita a usuarios y agrégalos a roles para administrar el acceso a tu organización | |
|
|
||||||
| Users | Usuarios | sidebar item |
|
|
||||||
| Roles | Roles | sidebar item |
|
|
||||||
| **User tab** | **Pestaña de usuario** | |
|
|
||||||
| Search users | Buscar usuarios | placeholder |
|
|
||||||
| Invite User | Invitar usuario | addbutton |
|
|
||||||
| Email | Email | table header |
|
|
||||||
| Status | Estado | table header |
|
|
||||||
| Role | Role | table header |
|
|
||||||
| Confirmed | Confirmado | account status |
|
|
||||||
| Not confirmed (?) | No confirmado (?) | unknown for me account status |
|
|
||||||
| Owner | Dueño | role |
|
|
||||||
| Admin | Administrador | role |
|
|
||||||
| Member | Miembro | role |
|
|
||||||
| **Roles Tab** | **Pestaña Roles** | |
|
|
||||||
| Search roles | Buscar roles | placeholder |
|
|
||||||
| Add Role | Agregar rol | addbutton |
|
|
||||||
| Name | Nombre | table header |
|
|
||||||
| Description | Descripción | table header |
|
|
||||||
| Admin | Administrador | role |
|
|
||||||
| Member | Miembro | role |
|
|
||||||
| Admin role with the most permissions | Rol de administrador con más permisos | admin role desc |
|
|
||||||
| Members can only view resources | Los miembros sólo pueden ver los recursos | member role desc |
|
|
||||||
|
|
||||||
##### Invite User popup
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ----------------- | ------------------------------------------------------- | ----------- |
|
|
||||||
| Invite User | Invitar usuario | |
|
|
||||||
| Email | Email | |
|
|
||||||
| Enter an email | Introduzca un email | placeholder |
|
|
||||||
| Role | Rol | |
|
|
||||||
| Select role | Seleccionar rol | placeholder |
|
|
||||||
| Gültig für | Válido para | |
|
|
||||||
| 1 day | 1 día | |
|
|
||||||
| 2 days | 2 días | |
|
|
||||||
| 3 days | 3 días | |
|
|
||||||
| 4 days | 4 días | |
|
|
||||||
| 5 days | 5 días | |
|
|
||||||
| 6 days | 6 días | |
|
|
||||||
| 7 days | 7 días | |
|
|
||||||
| Create Invitation | Crear invitación | |
|
|
||||||
| Close | Cerrar | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “Shareable Links”
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----- |
|
|
||||||
| Shareable Links | Enlaces para compartir | |
|
|
||||||
| Create shareable links to your resources. Links provide temporary or unlimited access to your resource. You can configure the expiration duration of the link when you create one. | Crear enlaces que se puedan compartir a tus recursos. Los enlaces proporcionan acceso temporal o ilimitado a tu recurso. Puedes configurar la duración de caducidad del enlace cuando lo creas. | |
|
|
||||||
| Easy to create and share | Fácil de crear y compartir | |
|
|
||||||
| Configurable expiration duration | Duración de expiración configurable | |
|
|
||||||
| Secure and revocable | Seguro y revocable | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------- |
|
|
||||||
| Manage Shareable Links | Administrar enlaces compartibles | |
|
|
||||||
| Create shareable links to grant temporary or permanent access to your resources | Crear enlaces compartibles para otorgar acceso temporal o permanente a tus recursos | |
|
|
||||||
| Search links | Buscar enlaces | placeholder |
|
|
||||||
| Create Share Link | Crear enlace para compartir | addbutton |
|
|
||||||
| Resource | Recurso | table header |
|
|
||||||
| Title | Título | table header |
|
|
||||||
| Created | Creado | table header |
|
|
||||||
| Expires | Caduca | table header |
|
|
||||||
| No links. Create one to get started. | No hay enlaces. Crea uno para comenzar. | table placeholder |
|
|
||||||
|
|
||||||
##### Create Shareable Link popup
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------- |
|
|
||||||
| Create Shareable Link | Crear un enlace para compartir | |
|
|
||||||
| Anyone with this link can access the resource | Cualquier persona con este enlace puede acceder al recurso. | |
|
|
||||||
| Resource | Recurso | |
|
|
||||||
| Select resource | Seleccionar recurso | |
|
|
||||||
| Search resources… | Buscar recursos… | resource selector popup |
|
|
||||||
| Title (optional) | Título (opcional) | |
|
|
||||||
| Enter title | Introducir título | placeholder |
|
|
||||||
| Expire in | Caduca en | |
|
|
||||||
| Minutes | Minutos | |
|
|
||||||
| Hours | Horas | |
|
|
||||||
| Days | Días | |
|
|
||||||
| Months | Meses | |
|
|
||||||
| Years | Años | |
|
|
||||||
| Never expire | Nunca caduca | |
|
|
||||||
| Expiration time is how long the link will be usable and provide access to the resource. After this time, the link will no longer work, and users who used this link will lose access to the resource. | El tiempo de expiración es el tiempo durante el cual el enlace se podrá utilizar y brindará acceso al recurso. Después de este tiempo, el enlace dejará de funcionar y los usuarios que lo hayan utilizado perderán el acceso al recurso. | |
|
|
||||||
| Create Link | Crear enlace | |
|
|
||||||
| Close | Cerrar | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “General”
|
|
||||||
|
|
||||||
| EN | ES | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------ |
|
|
||||||
| General | General | |
|
|
||||||
| Configure your organization’s general settings | Configura los ajustes generales de tu organización | |
|
|
||||||
| General | General | sidebar item |
|
|
||||||
| Organization Settings | Configuración de la organización | |
|
|
||||||
| Manage your organization details and configuration | Administra los detalles y la configuración de tu organización| |
|
|
||||||
| Name | Nombre | |
|
|
||||||
| This is the display name of the org | Este es el nombre para mostrar de la organización. | |
|
|
||||||
| Save Settings | Guardar configuración | |
|
|
||||||
| Danger Zone | Zona de peligro | |
|
|
||||||
| Once you delete this org, there is no going back. Please be certain. | Una vez que elimines esta organización, no habrá vuelta atrás. Asegúrate de hacerlo. | |
|
|
||||||
| Delete Organization Data | Eliminar datos de la organización | |
|
|
||||||
|
|
@ -1,287 +0,0 @@
|
||||||
## Authentication Site
|
|
||||||
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| -------------------------------------------------------- | ------------------------------------------------------------ | ---------- |
|
|
||||||
| Powered by [Pangolin](https://github.com/fosrl/pangolin) | Zasilane przez [Pangolin](https://github.com/fosrl/pangolin) | |
|
|
||||||
| Authentication Required | Wymagane uwierzytelnienie | |
|
|
||||||
| Choose your preferred method to access {resource} | Wybierz preferowaną metodę dostępu do {resource} | |
|
|
||||||
| PIN | PIN | |
|
|
||||||
| User | Zaloguj | |
|
|
||||||
| 6-digit PIN Code | 6-cyfrowy kod PIN | pin login |
|
|
||||||
| Login in with PIN | Zaloguj się PIN’em | pin login |
|
|
||||||
| Email | Email | user login |
|
|
||||||
| Enter your email | Wprowadź swój email | user login |
|
|
||||||
| Password | Hasło | user login |
|
|
||||||
| Enter your password | Wprowadź swoje hasło | user login |
|
|
||||||
| Forgot your password? | Zapomniałeś hasła? | user login |
|
|
||||||
| Log in | Zaloguj | user login |
|
|
||||||
|
|
||||||
|
|
||||||
## Login site
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| --------------------- | ------------------------------ | ----------- |
|
|
||||||
| Welcome to Pangolin | Witaj w Pangolin | |
|
|
||||||
| Log in to get started | Zaloguj się, aby rozpocząć<br> | |
|
|
||||||
| Email | Email | |
|
|
||||||
| Enter your email | Wprowadź swój adres e-mail<br> | placeholder |
|
|
||||||
| Password | Hasło | |
|
|
||||||
| Enter your password | Wprowadź swoje hasło | placeholder |
|
|
||||||
| Forgot your password? | Nie pamiętasz hasła? | |
|
|
||||||
| Log in | Zaloguj | |
|
|
||||||
|
|
||||||
# Ogranization site after successful login
|
|
||||||
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ----------------------------------------- | ------------------------------------------ | ----- |
|
|
||||||
| Welcome to Pangolin | Witaj w Pangolin | |
|
|
||||||
| You're a member of {number} organization. | Jesteś użytkownikiem {number} organizacji. | |
|
|
||||||
|
|
||||||
## Shared Header, Navbar and Footer
|
|
||||||
##### Header
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ------------------- | ------------------ | ----- |
|
|
||||||
| Documentation | Dokumentacja | |
|
|
||||||
| Support | Wsparcie | |
|
|
||||||
| Organization {name} | Organizacja {name} | |
|
|
||||||
##### Organization selector
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ---------------- | ---------------- | ----- |
|
|
||||||
| Search… | Szukaj… | |
|
|
||||||
| Create | Utwórz | |
|
|
||||||
| New Organization | Nowa organizacja | |
|
|
||||||
| Organizations | Organizacje | |
|
|
||||||
|
|
||||||
##### Navbar
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| --------------- | ---------------------- | ----- |
|
|
||||||
| Sites | Witryny | |
|
|
||||||
| Resources | Zasoby | |
|
|
||||||
| User & Roles | Użytkownicy i Role | |
|
|
||||||
| Shareable Links | Łącza do udostępniania | |
|
|
||||||
| General | Ogólne | |
|
|
||||||
##### Footer
|
|
||||||
| EN | PL | |
|
|
||||||
| ------------------------- | -------------------------- | -------------- |
|
|
||||||
| Page {number} of {number} | Strona {number} z {number} | |
|
|
||||||
| Rows per page | Wierszy na stronę | |
|
|
||||||
| Pangolin | Pangolin | bottom of site |
|
|
||||||
| Built by Fossorial | Stworzone przez Fossorial | bottom of site |
|
|
||||||
| Open Source | Open source | bottom of site |
|
|
||||||
| Documentation | Dokumentacja | bottom of site |
|
|
||||||
| {version} | {version} | bottom of site |
|
|
||||||
## Main “Sites”
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- |
|
|
||||||
| Newt (Recommended) | Newt (zalecane) | |
|
|
||||||
| For the best user experience, use Newt. It uses WireGuard under the hood and allows you to address your private resources by their LAN address on your private network from within the Pangolin dashboard. | Aby zapewnić najlepsze doświadczenie użytkownika, korzystaj z Newt. Wykorzystuje on technologię WireGuard w tle i pozwala na dostęp do Twoich prywatnych zasobów za pomocą ich adresu LAN w prywatnej sieci bezpośrednio z poziomu pulpitu nawigacyjnego Pangolin. | |
|
|
||||||
| Runs in Docker | Działa w Dockerze | |
|
|
||||||
| Runs in shell on macOS, Linux, and Windows | Działa w powłoce na systemach macOS, Linux i Windows | |
|
|
||||||
| Install Newt | Zainstaluj Newt | |
|
|
||||||
| Podstawowy WireGuard<br> | Użyj dowolnego klienta WireGuard, aby się połączyć. Będziesz musiał uzyskiwać dostęp do swoich wewnętrznych zasobów za pomocą adresu IP równorzędnego | |
|
|
||||||
| Compatible with all WireGuard clients<br> | Kompatybilny ze wszystkimi klientami WireGuard<br> | |
|
|
||||||
| Manual configuration required | Wymagana ręczna konfiguracja<br> | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| --------------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------- |
|
|
||||||
| Manage Sites | Zarządzanie witrynami | |
|
|
||||||
| Allow connectivity to your network through secure tunnels | Zezwalaj na łączność z Twoją siecią za pośrednictwem bezpiecznych tuneli | |
|
|
||||||
| Search sites | Szukaj witryny | placeholder |
|
|
||||||
| Add Site | Dodaj witrynę | |
|
|
||||||
| Name | Nazwa | table header |
|
|
||||||
| Online | Status | table header |
|
|
||||||
| Site | Witryna | table header |
|
|
||||||
| Data In | Dane wchodzące | table header |
|
|
||||||
| Data Out | Dane wychodzące | table header |
|
|
||||||
| Connection Type | Typ połączenia | table header |
|
|
||||||
| Online | Online | site state |
|
|
||||||
| Offline | Poza siecią | site state |
|
|
||||||
| Edit → | Edytuj → | |
|
|
||||||
| View settings | Pokaż ustawienia | Popup after clicking “…” on site |
|
|
||||||
| Delete | Usuń | Popup after clicking “…” on site |
|
|
||||||
##### Add Site Popup
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ------------------------------------------------------ | --------------------------------------------------- | ----------- |
|
|
||||||
| Create Site | Utwórz witrynę | |
|
|
||||||
| Create a new site to start connection for this site | Utwórz nową witrynę aby rozpocząć połączenie | |
|
|
||||||
| Name | Nazwa | |
|
|
||||||
| Site name | Nazwa witryny | placeholder |
|
|
||||||
| This is the name that will be displayed for this site. | Tak będzie wyświetlana twoja witryna | desc |
|
|
||||||
| Method | Metoda | |
|
|
||||||
| Local | Lokalna | |
|
|
||||||
| Newt | Newt | |
|
|
||||||
| WireGuard | WireGuard | |
|
|
||||||
| This is how you will expose connections. | Tak będą eksponowane połączenie. | |
|
|
||||||
| You will only be able to see the configuration once. | Tą konfigurację możesz zobaczyć tylko raz. | |
|
|
||||||
| Learn how to install Newt on your system | Dowiedz się jak zainstalować Newt na twoim systemie | |
|
|
||||||
| I have copied the config | Skopiowałem konfigurację | |
|
|
||||||
| Create Site | Utwórz witrynę | |
|
|
||||||
| Close | Zamknij | |
|
|
||||||
|
|
||||||
## Main “Resources”
|
|
||||||
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- |
|
|
||||||
| Resources | Zasoby | |
|
|
||||||
| Zasoby to serwery proxy dla aplikacji działających w Twojej prywatnej sieci. Utwórz zasób dla dowolnej aplikacji HTTP lub HTTPS w swojej prywatnej sieci. Każdy zasób musi być połączony z witryną, aby umożliwić prywatne i bezpieczne połączenie przez szyfrowany tunel WireGuard. | Zasoby to serwery proxy dla aplikacji działających w Twojej prywatnej sieci. Utwórz zasób dla dowolnej aplikacji HTTP lub HTTPS w swojej prywatnej sieci. Każdy zasób musi być połączony z witryną, aby umożliwić prywatne i bezpieczne połączenie przez szyfrowany tunel WireGuard. | |
|
|
||||||
| Secure connectivity with WireGuard encryption | Bezpieczna łączność z szyfrowaniem WireGuard | |
|
|
||||||
| Configure multiple authentication methods | Konfigurowanie wielu metod uwierzytelniania | |
|
|
||||||
| User and role-based access control | Kontrola dostępu oparta na użytkownikach i rolach | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| -------------------------------------------------- | -------------------------------------------------------------- | -------------------- |
|
|
||||||
| Manage Resources | Zarządzaj zasobami | |
|
|
||||||
| Create secure proxies to your private applications | Twórz bezpieczne serwery proxy dla swoich prywatnych aplikacji | |
|
|
||||||
| Search resources | Szukaj w zasobach | placeholder |
|
|
||||||
| Name | Nazwa | |
|
|
||||||
| Site | Witryna | |
|
|
||||||
| Full URL | Pełny URL | |
|
|
||||||
| Authentication | Uwierzytelnianie | |
|
|
||||||
| Not Protected | Niezabezpieczony | authentication state |
|
|
||||||
| Protected | Zabezpieczony | authentication state |
|
|
||||||
| Edit → | Edytuj → | |
|
|
||||||
| Add Resource | Dodaj zasób | |
|
|
||||||
##### Add Resource Popup
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------- |
|
|
||||||
| Create Resource | Utwórz zasób | |
|
|
||||||
| Create a new resource to proxy request to your app | Utwórz nowy zasób, aby przekazywać żądania do swojej aplikacji | |
|
|
||||||
| Name | Nazwa | |
|
|
||||||
| My Resource | Nowy zasób | name placeholder |
|
|
||||||
| This is the name that will be displayed for this resource. | To jest nazwa, która będzie wyświetlana dla tego zasobu | |
|
|
||||||
| Subdomain | Subdomena | |
|
|
||||||
| Enter subdomain | Wprowadź subdomenę | |
|
|
||||||
| This is the fully qualified domain name that will be used to access the resource. | To jest pełna nazwa domeny, która będzie używana do dostępu do zasobu. | |
|
|
||||||
| Site | Witryna | |
|
|
||||||
| Search site… | Szukaj witryny… | Site selector popup |
|
|
||||||
| This is the site that will be used in the dashboard. | To jest witryna, która będzie używana w pulpicie nawigacyjnym. | |
|
|
||||||
| Create Resource | Utwórz zasób | |
|
|
||||||
| Close | Zamknij | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “User & Roles”
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------------------------- |
|
|
||||||
| Manage User & Roles | Zarządzanie użytkownikami i rolami | |
|
|
||||||
| Invite users and add them to roles to manage access to your organization | Zaproś użytkowników i przypisz im role, aby zarządzać dostępem do Twojej organizacji | |
|
|
||||||
| Users | Użytkownicy | sidebar item |
|
|
||||||
| Roles | Role | sidebar item |
|
|
||||||
| **User tab** | | |
|
|
||||||
| Search users | Wyszukaj użytkownika | placeholder |
|
|
||||||
| Invite User | Zaproś użytkownika | addbutton |
|
|
||||||
| Email | Email | table header |
|
|
||||||
| Status | Status | table header |
|
|
||||||
| Role | Rola | table header |
|
|
||||||
| Confirmed | Zatwierdzony | account status |
|
|
||||||
| Not confirmed (?) | Niezatwierdzony (?) | unknown for me account status |
|
|
||||||
| Owner | Właściciel | role |
|
|
||||||
| Admin | Administrator | role |
|
|
||||||
| Member | Użytkownik | role |
|
|
||||||
| **Roles Tab** | | |
|
|
||||||
| Search roles | Wyszukaj role | placeholder |
|
|
||||||
| Add Role | Dodaj role | addbutton |
|
|
||||||
| Name | Nazwa | table header |
|
|
||||||
| Description | Opis | table header |
|
|
||||||
| Admin | Administrator | role |
|
|
||||||
| Member | Użytkownik | role |
|
|
||||||
| Admin role with the most permissions | Rola administratora z najszerszymi uprawnieniami | admin role desc |
|
|
||||||
| Members can only view resources | Członkowie mogą jedynie przeglądać zasoby | member role desc |
|
|
||||||
|
|
||||||
##### Invite User popup
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ----------------- | ------------------------------------------ | ----------- |
|
|
||||||
| Invite User | Give new users access to your organization | |
|
|
||||||
| Email | Email | |
|
|
||||||
| Enter an email | Wprowadź email | placeholder |
|
|
||||||
| Role | Rola | |
|
|
||||||
| Select role | Wybierz role | placeholder |
|
|
||||||
| Vaild for | Ważne do | |
|
|
||||||
| 1 day | Dzień | |
|
|
||||||
| 2 days | 2 dni | |
|
|
||||||
| 3 days | 3 dni | |
|
|
||||||
| 4 days | 4 dni | |
|
|
||||||
| 5 days | 5 dni | |
|
|
||||||
| 6 days | 6 dni | |
|
|
||||||
| 7 days | 7 dni | |
|
|
||||||
| Create Invitation | Utwórz zaproszenie | |
|
|
||||||
| Close | Zamknij | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “Shareable Links”
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
|
|
||||||
| Shareable Links | Łącza do udostępniania | |
|
|
||||||
| Create shareable links to your resources. Links provide temporary or unlimited access to your resource. You can configure the expiration duration of the link when you create one. | Twórz linki do udostępniania swoich zasobów. Linki zapewniają tymczasowy lub nieograniczony dostęp do zasobu. Możesz skonfigurować czas wygaśnięcia linku podczas jego tworzenia. | |
|
|
||||||
| Easy to create and share | Łatwe tworzenie i udostępnianie | |
|
|
||||||
| Configurable expiration duration | Konfigurowalny czas wygaśnięcia | |
|
|
||||||
| Secure and revocable | Bezpieczne i odwołalne | |
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------- |
|
|
||||||
| Manage Shareable Links | Zarządzaj łączami do udostępniania | |
|
|
||||||
| Create shareable links to grant temporary or permament access to your resources | Utwórz łącze do udostępniania w celu przyznania tymczasowego lub stałego dostępu do zasobów | |
|
|
||||||
| Search links | Szukaj łączy | placeholder |
|
|
||||||
| Create Share Link | Utwórz nowe łącze | addbutton |
|
|
||||||
| Resource | Zasób | table header |
|
|
||||||
| Title | Tytuł | table header |
|
|
||||||
| Created | Utworzone | table header |
|
|
||||||
| Expires | Wygasa | table header |
|
|
||||||
| No links. Create one to get started. | Brak łączy. Utwórz, aby rozpocząć. | table placeholder |
|
|
||||||
|
|
||||||
##### Create Shareable Link popup
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
|
|
||||||
| Create Shareable Link | Utwórz łącze do udostępnienia | |
|
|
||||||
| Anyone with this link can access the resource | Każdy kto ma ten link może korzystać z zasobu | |
|
|
||||||
| Resource | Zasób | |
|
|
||||||
| Select resource | Wybierz zasób | |
|
|
||||||
| Search resources… | Szukaj zasobów… | resource selector popup |
|
|
||||||
| Title (optional) | Tytuł (opcjonalny) | |
|
|
||||||
| Enter title | Wprowadź tytuł | placeholder |
|
|
||||||
| Expire in | Wygasa za | |
|
|
||||||
| Minutes | Minut | |
|
|
||||||
| Hours | Godzin | |
|
|
||||||
| Days | Dni | |
|
|
||||||
| Months | Miesięcy | |
|
|
||||||
| Years | Lat | |
|
|
||||||
| Never expire | Nie wygasa | |
|
|
||||||
| Expiration time is how long the link will be usable and provide access to the resource. After this time, the link will no longer work, and users who used this link will lose access to the resource. | Czas wygaśnięcia to okres, przez który link będzie aktywny i zapewni dostęp do zasobu. Po upływie tego czasu link przestanie działać, a użytkownicy, którzy go użyli, stracą dostęp do zasobu. | |
|
|
||||||
| Create Link | Utwórz łącze | |
|
|
||||||
| Close | Zamknij | |
|
|
||||||
|
|
||||||
|
|
||||||
## Main “General”
|
|
||||||
|
|
||||||
| EN | PL | Notes |
|
|
||||||
| -------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------ |
|
|
||||||
| General | Ogólne | |
|
|
||||||
| Configure your organization’s general settings | Zarządzaj ogólnymi ustawieniami twoich organizacji | |
|
|
||||||
| General | Ogólne | sidebar item |
|
|
||||||
| Organization Settings | Ustawienia organizacji | |
|
|
||||||
| Manage your organization details and configuration | Zarządzaj szczegółami i konfiguracją organizacji | |
|
|
||||||
| Name | Nazwa | |
|
|
||||||
| This is the display name of the org | To jest wyświetlana nazwa Twojej organizacji | |
|
|
||||||
| Save Settings | Zapisz ustawienia | |
|
|
||||||
| Danger Zone | Niebezpieczna strefa | |
|
|
||||||
| Once you delete this org, there is no going back. Please be certain. | Jeśli usuniesz swoją tą organizację, nie ma odwrotu. Bądź ostrożny! | |
|
|
||||||
| Delete Organization Data | Usuń dane organizacji | |
|
|
||||||
|
|
@ -1,310 +0,0 @@
|
||||||
## Authentication Site
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| -------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------- |
|
|
||||||
| Powered by [Pangolin](https://github.com/fosrl/pangolin) | Pangolin Tarafından Destekleniyor | |
|
|
||||||
| Authentication Required | Kimlik Doğrulaması Gerekli | |
|
|
||||||
| Choose your preferred method to access {resource} | {resource}'a erişmek için tercih ettiğiniz yöntemi seçin | |
|
|
||||||
| PIN | PIN | |
|
|
||||||
| User | Kullanıcı | |
|
|
||||||
| 6-digit PIN Code | 6 haneli PIN Kodu | pin login |
|
|
||||||
| Login in with PIN | PIN ile Giriş Yap | pin login |
|
|
||||||
| Email | E-posta | user login |
|
|
||||||
| Enter your email | E-postanızı girin | user login |
|
|
||||||
| Password | Şifre | user login |
|
|
||||||
| Enter your password | Şifrenizi girin | user login |
|
|
||||||
| Forgot your password? | Şifrenizi mi unuttunuz? | user login |
|
|
||||||
| Log in | Giriş Yap | user login |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Login site
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| --------------------- | ------------------------------------------------------ | ----------- |
|
|
||||||
| Welcome to Pangolin | Pangolin'e Hoşgeldiniz | |
|
|
||||||
| Log in to get started | Başlamak için giriş yapın | |
|
|
||||||
| Email | E-posta | |
|
|
||||||
| Enter your email | E-posta adresinizi girin | placeholder |
|
|
||||||
| Password | Şifre | |
|
|
||||||
| Enter your password | Şifrenizi girin | placeholder |
|
|
||||||
| Forgot your password? | Şifrenizi mi unuttunuz? | |
|
|
||||||
| Log in | Giriş Yap | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Organization site after successful login
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ----------------------------------------- | ------------------------------------------------------------------- | ----- |
|
|
||||||
| Welcome to Pangolin | Pangolin'e Hoşgeldiniz | |
|
|
||||||
| You're a member of {number} organization. | {number} organizasyonunun üyesiniz. | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Shared Header, Navbar and Footer
|
|
||||||
|
|
||||||
##### Header
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------- | -------------------------- | ----- |
|
|
||||||
| Documentation | Dokümantasyon | |
|
|
||||||
| Support | Destek | |
|
|
||||||
| Organization {name} | Organizasyon {name} | |
|
|
||||||
|
|
||||||
##### Organization selector
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ---------------- | ---------------------- | ----- |
|
|
||||||
| Search… | Ara… | |
|
|
||||||
| Create | Oluştur | |
|
|
||||||
| New Organization | Yeni Organizasyon | |
|
|
||||||
| Organizations | Organizasyonlar | |
|
|
||||||
|
|
||||||
##### Navbar
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| --------------- | ------------------------------- | ----- |
|
|
||||||
| Sites | Siteler | |
|
|
||||||
| Resources | Kaynaklar | |
|
|
||||||
| User & Roles | Kullanıcılar ve Roller | |
|
|
||||||
| Shareable Links | Paylaşılabilir Linkler | |
|
|
||||||
| General | Genel | |
|
|
||||||
|
|
||||||
##### Footer
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------- | ------------------------------------------------ | -------------------- |
|
|
||||||
| Page {number} of {number} | Sayfa {number} / {number} | |
|
|
||||||
| Rows per page | Sayfa başına satırlar | |
|
|
||||||
| Pangolin | Pangolin | Footer'da yer alır |
|
|
||||||
| Built by Fossorial | Fossorial tarafından oluşturuldu | Footer'da yer alır |
|
|
||||||
| Open Source | Açık Kaynak | Footer'da yer alır |
|
|
||||||
| Documentation | Dokümantasyon | Footer'da yer alır |
|
|
||||||
| {version} | {version} | Footer'da yer alır |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Main “Sites”
|
|
||||||
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ----- |
|
|
||||||
| Newt (Recommended) | Newt (Tavsiye Edilen) | |
|
|
||||||
| For the best user experience, use Newt. It uses WireGuard under the hood and allows you to address your private resources by their LAN address on your private network from within the Pangolin dashboard. | En iyi kullanıcı deneyimi için Newt'i kullanın. Newt, arka planda WireGuard kullanır ve Pangolin kontrol paneli üzerinden özel ağınızdaki kaynaklarınıza LAN adresleriyle erişmenizi sağlar. | |
|
|
||||||
| Runs in Docker | Docker üzerinde çalışır | |
|
|
||||||
| Runs in shell on macOS, Linux, and Windows | macOS, Linux ve Windows’ta komut satırında çalışır | |
|
|
||||||
| Install Newt | Newt'i Yükle | |
|
|
||||||
| Basic WireGuard<br> | Temel WireGuard<br> | |
|
|
||||||
| Compatible with all WireGuard clients<br> | Tüm WireGuard istemcileriyle uyumlu<br> | |
|
|
||||||
| Manual configuration required | Manuel yapılandırma gereklidir | |
|
|
||||||
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| --------------------------------------------------------- | --------------------------------------------------------------------------- | ------------ |
|
|
||||||
| Manage Sites | Siteleri Yönet | |
|
|
||||||
| Allow connectivity to your network through secure tunnels | Güvenli tüneller aracılığıyla ağınıza bağlantı sağlayın | |
|
|
||||||
| Search sites | Siteleri ara | placeholder |
|
|
||||||
| Add Site | Site Ekle | |
|
|
||||||
| Name | Ad | Table Header |
|
|
||||||
| Online | Çevrimiçi | Table Header |
|
|
||||||
| Site | Site | Table Header |
|
|
||||||
| Data In | Gelen Veri | Table Header |
|
|
||||||
| Data Out | Giden Veri | Table Header |
|
|
||||||
| Connection Type | Bağlantı Türü | Table Header |
|
|
||||||
| Online | Çevrimiçi | Site state |
|
|
||||||
| Offline | Çevrimdışı | Site state |
|
|
||||||
| Edit → | Düzenle → | |
|
|
||||||
| View settings | Ayarları Görüntüle | Popup |
|
|
||||||
| Delete | Sil | Popup |
|
|
||||||
|
|
||||||
##### Add Site Popup
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ----------- |
|
|
||||||
| Create Site | Site Oluştur | |
|
|
||||||
| Create a new site to start connection for this site | Bu site için bağlantıyı başlatmak amacıyla yeni bir site oluşturun | |
|
|
||||||
| Name | Ad | |
|
|
||||||
| Site name | Site adı | placeholder |
|
|
||||||
| This is the name that will be displayed for this site. | Bu, site için görüntülenecek addır. | desc |
|
|
||||||
| Method | Yöntem | |
|
|
||||||
| Local | Yerel | |
|
|
||||||
| Newt | Newt | |
|
|
||||||
| WireGuard | WireGuard | |
|
|
||||||
| This is how you will expose connections. | Bağlantılarınızı bu şekilde açığa çıkaracaksınız. | |
|
|
||||||
| You will only be able to see the configuration once. | Yapılandırmayı yalnızca bir kez görüntüleyebilirsiniz. | |
|
|
||||||
| Learn how to install Newt on your system | Sisteminizde Newt'in nasıl kurulacağını öğrenin | |
|
|
||||||
| I have copied the config | Yapılandırmayı kopyaladım | |
|
|
||||||
| Create Site | Site Oluştur | |
|
|
||||||
| Close | Kapat | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Main “Resources”
|
|
||||||
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ----- |
|
|
||||||
| Resources | Kaynaklar | |
|
|
||||||
| Ressourcen sind Proxy-Server für Anwendungen, die in Ihrem privaten Netzwerk laufen. Erstellen Sie eine Ressource für jede HTTP- oder HTTPS-Anwendung in Ihrem privaten Netzwerk. Jede Ressource muss mit einer Website verbunden sein, um eine private und sichere Verbindung über den verschlüsselten WireGuard-Tunnel zu ermöglichen. | Kaynaklar, özel ağınızda çalışan uygulamalar için proxy sunucularıdır. Özel ağınızdaki her HTTP veya HTTPS uygulaması için bir kaynak oluşturun. Her kaynağın, şifrelenmiş WireGuard tüneli üzerinden özel ve güvenli bağlantı sağlamak üzere bir siteyle ilişkili olması gerekir. | |
|
|
||||||
| Secure connectivity with WireGuard encryption | WireGuard şifrelemesiyle güvenli bağlantı | |
|
|
||||||
| Configure multiple authentication methods | Birden çok kimlik doğrulama yöntemini yapılandırın | |
|
|
||||||
| User and role-based access control | Kullanıcı ve role dayalı erişim kontrolü | |
|
|
||||||
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| -------------------------------------------------- | ------------------------------------------------------------- | -------------------- |
|
|
||||||
| Manage Resources | Kaynakları Yönet | |
|
|
||||||
| Create secure proxies to your private applications | Özel uygulamalarınız için güvenli proxy’ler oluşturun | |
|
|
||||||
| Search resources | Kaynakları ara | placeholder |
|
|
||||||
| Name | Ad | |
|
|
||||||
| Site | Site | |
|
|
||||||
| Full URL | Tam URL | |
|
|
||||||
| Authentication | Kimlik Doğrulama | |
|
|
||||||
| Not Protected | Korunmayan | authentication state |
|
|
||||||
| Protected | Korunan | authentication state |
|
|
||||||
| Edit → | Düzenle → | |
|
|
||||||
| Add Resource | Kaynak Ekle | |
|
|
||||||
|
|
||||||
##### Add Resource Popup
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | ------------- |
|
|
||||||
| Create Resource | Kaynak Oluştur | |
|
|
||||||
| Create a new resource to proxy request to your app | Uygulamanıza gelen istekleri yönlendirmek için yeni bir kaynak oluşturun | |
|
|
||||||
| Name | Ad | |
|
|
||||||
| My Resource | Kaynağım | name placeholder |
|
|
||||||
| This is the name that will be displayed for this resource. | Bu, kaynağın görüntülenecek adıdır. | |
|
|
||||||
| Subdomain | Alt alan adı | |
|
|
||||||
| Enter subdomain | Alt alan adını girin | |
|
|
||||||
| This is the fully qualified domain name that will be used to access the resource. | Kaynağa erişmek için kullanılacak tam nitelikli alan adıdır. | |
|
|
||||||
| Site | Site | |
|
|
||||||
| Search site… | Site ara… | Site selector popup |
|
|
||||||
| This is the site that will be used in the dashboard. | Kontrol panelinde kullanılacak sitedir. | |
|
|
||||||
| Create Resource | Kaynak Oluştur | |
|
|
||||||
| Close | Kapat | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Main “User & Roles”
|
|
||||||
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------------------------- |
|
|
||||||
| Manage User & Roles | Kullanıcılar ve Rolleri Yönet | |
|
|
||||||
| Invite users and add them to roles to manage access to your organization | Organizasyonunuza erişimi yönetmek için kullanıcıları davet edin ve rollere atayın | |
|
|
||||||
| Users | Kullanıcılar | sidebar item |
|
|
||||||
| Roles | Roller | sidebar item |
|
|
||||||
| **User tab** | **Kullanıcı Sekmesi** | |
|
|
||||||
| Search users | Kullanıcıları ara | placeholder |
|
|
||||||
| Invite User | Kullanıcı Davet Et | addbutton |
|
|
||||||
| Email | E-posta | table header |
|
|
||||||
| Status | Durum | table header |
|
|
||||||
| Role | Rol | table header |
|
|
||||||
| Confirmed | Onaylandı | account status |
|
|
||||||
| Not confirmed (?) | Onaylanmadı (?) | account status |
|
|
||||||
| Owner | Sahip | role |
|
|
||||||
| Admin | Yönetici | role |
|
|
||||||
| Member | Üye | role |
|
|
||||||
| **Roles Tab** | **Roller Sekmesi** | |
|
|
||||||
| Search roles | Rolleri ara | placeholder |
|
|
||||||
| Add Role | Rol Ekle | addbutton |
|
|
||||||
| Name | Ad | table header |
|
|
||||||
| Description | Açıklama | table header |
|
|
||||||
| Admin | Yönetici | role |
|
|
||||||
| Member | Üye | role |
|
|
||||||
| Admin role with the most permissions | En fazla yetkiye sahip yönetici rolü | admin role desc |
|
|
||||||
| Members can only view resources | Üyeler yalnızca kaynakları görüntüleyebilir | member role desc |
|
|
||||||
|
|
||||||
##### Invite User popup
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ----------------- | ----------------------------------------------------------------------- | ----------- |
|
|
||||||
| Invite User | Kullanıcı Davet Et | |
|
|
||||||
| Email | E-posta | |
|
|
||||||
| Enter an email | Bir e-posta adresi girin | placeholder |
|
|
||||||
| Role | Rol | |
|
|
||||||
| Select role | Rol seçin | placeholder |
|
|
||||||
| Gültig für | Geçerlilik Süresi | |
|
|
||||||
| 1 day | 1 gün | |
|
|
||||||
| 2 days | 2 gün | |
|
|
||||||
| 3 days | 3 gün | |
|
|
||||||
| 4 days | 4 gün | |
|
|
||||||
| 5 days | 5 gün | |
|
|
||||||
| 6 days | 6 gün | |
|
|
||||||
| 7 days | 7 gün | |
|
|
||||||
| Create Invitation | Davetiye Oluştur | |
|
|
||||||
| Close | Kapat | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Main “Shareable Links”
|
|
||||||
|
|
||||||
##### “Hero” section
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ----- |
|
|
||||||
| Shareable Links | Paylaşılabilir Bağlantılar | |
|
|
||||||
| Create shareable links to your resources. Links provide temporary or unlimited access to your resource. You can configure the expiration duration of the link when you create one. | Kaynaklarınıza paylaşılabilir bağlantılar oluşturun. Bağlantılar, kaynağınıza geçici veya sınırsız erişim sağlar. Oluştururken bağlantının geçerlilik süresini ayarlayabilirsiniz. | |
|
|
||||||
| Easy to create and share | Oluşturması ve paylaşması kolay | |
|
|
||||||
| Configurable expiration duration | Yapılandırılabilir geçerlilik süresi | |
|
|
||||||
| Secure and revocable | Güvenli ve iptal edilebilir | |
|
|
||||||
|
|
||||||
##### Content
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | -------------- |
|
|
||||||
| Manage Shareable Links | Paylaşılabilir Bağlantıları Yönet | |
|
|
||||||
| Create shareable links to grant temporary or permanent access to your resources | Kaynaklarınıza geçici veya kalıcı erişim sağlamak için paylaşılabilir bağlantılar oluşturun | |
|
|
||||||
| Search links | Bağlantıları ara | placeholder |
|
|
||||||
| Create Share Link | Bağlantı Oluştur | addbutton |
|
|
||||||
| Resource | Kaynak | table header |
|
|
||||||
| Title | Başlık | table header |
|
|
||||||
| Created | Oluşturulma Tarihi | table header |
|
|
||||||
| Expires | Son Kullanma Tarihi | table header |
|
|
||||||
| No links. Create one to get started. | Bağlantı yok. Başlamak için bir tane oluşturun. | table placeholder |
|
|
||||||
|
|
||||||
##### Create Shareable Link popup
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | ----------------------- |
|
|
||||||
| Create Shareable Link | Paylaşılabilir Bağlantı Oluştur | |
|
|
||||||
| Anyone with this link can access the resource | Bu bağlantıya sahip olan herkes kaynağa erişebilir | |
|
|
||||||
| Resource | Kaynak | |
|
|
||||||
| Select resource | Kaynak seçin | |
|
|
||||||
| Search resources… | Kaynak ara… | resource selector popup |
|
|
||||||
| Title (optional) | Başlık (isteğe bağlı) | |
|
|
||||||
| Enter title | Başlık girin | placeholder |
|
|
||||||
| Expire in | Sona Erme Süresi | |
|
|
||||||
| Minutes | Dakika | |
|
|
||||||
| Hours | Saat | |
|
|
||||||
| Days | Gün | |
|
|
||||||
| Months | Ay | |
|
|
||||||
| Years | Yıl | |
|
|
||||||
| Never expire | Asla sona erme | |
|
|
||||||
| Expiration time is how long the link will be usable and provide access to the resource. After this time, the link will no longer work, and users who used this link will lose access to the resource. | Bağlantının geçerlilik süresi, bağlantının ne kadar süreyle kullanılabilir olacağını ve kaynağa erişim sağlayacağını belirler. Bu sürenin sonunda bağlantı çalışmaz hale gelir ve bağlantıyı kullananlar kaynağa erişimini kaybeder. | |
|
|
||||||
| Create Link | Bağlantı Oluştur | |
|
|
||||||
| Close | Kapat | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Main “General”
|
|
||||||
|
|
||||||
| EN | TR | Notes |
|
|
||||||
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------ |
|
|
||||||
| General | Genel | |
|
|
||||||
| Configure your organization’s general settings | Organizasyonunuzun genel ayarlarını yapılandırın | |
|
|
||||||
| General | Genel | sidebar item |
|
|
||||||
| Organization Settings | Organizasyon Ayarları | |
|
|
||||||
| Manage your organization details and configuration | Organizasyonunuzun detaylarını ve yapılandırmasını yönetin | |
|
|
||||||
| Name | Ad | |
|
|
||||||
| This is the display name of the org | Bu, organizasyonunuzun görüntülenecek adıdır. | |
|
|
||||||
| Save Settings | Ayarları Kaydet | |
|
|
||||||
| Danger Zone | Tehlikeli Bölge | |
|
|
||||||
| Once you delete this org, there is no going back. Please be certain. | Bu organizasyonu sildikten sonra geri dönüş yoktur. Lütfen emin olun. | |
|
|
||||||
| Delete Organization Data | Organizasyon Verilerini Sil | |
|
|
||||||
1132
messages/de-DE.json
Normal file
1132
messages/de-DE.json
Normal file
File diff suppressed because it is too large
Load diff
1134
messages/en-US.json
Normal file
1134
messages/en-US.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/es-ES.json
Normal file
1132
messages/es-ES.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/fr-FR.json
Normal file
1132
messages/fr-FR.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/it-IT.json
Normal file
1132
messages/it-IT.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/nl-NL.json
Normal file
1132
messages/nl-NL.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/pl-PL.json
Normal file
1132
messages/pl-PL.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/pt-PT.json
Normal file
1132
messages/pt-PT.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/tr-TR.json
Normal file
1132
messages/tr-TR.json
Normal file
File diff suppressed because it is too large
Load diff
1132
messages/zh-CN.json
Normal file
1132
messages/zh-CN.json
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,8 @@
|
||||||
/** @type {import('next').NextConfig} */
|
import createNextIntlPlugin from "next-intl/plugin";
|
||||||
|
|
||||||
|
const withNextIntl = createNextIntlPlugin();
|
||||||
|
|
||||||
|
/** @type {import("next").NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
eslint: {
|
eslint: {
|
||||||
ignoreDuringBuilds: true
|
ignoreDuringBuilds: true
|
||||||
|
|
@ -6,4 +10,4 @@ const nextConfig = {
|
||||||
output: "standalone"
|
output: "standalone"
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default withNextIntl(nextConfig);
|
||||||
|
|
|
||||||
1832
package-lock.json
generated
1832
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -81,6 +81,7 @@
|
||||||
"lucide-react": "0.511.0",
|
"lucide-react": "0.511.0",
|
||||||
"moment": "2.30.1",
|
"moment": "2.30.1",
|
||||||
"next": "15.3.3",
|
"next": "15.3.3",
|
||||||
|
"next-intl": "^4.1.0",
|
||||||
"next-themes": "0.4.6",
|
"next-themes": "0.4.6",
|
||||||
"node-cache": "5.1.2",
|
"node-cache": "5.1.2",
|
||||||
"node-fetch": "3.3.2",
|
"node-fetch": "3.3.2",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/** @type {import('postcss-load-config').Config} */
|
/** @type {import('postcss-load-config').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
plugins: {
|
plugins: {
|
||||||
'@tailwindcss/postcss': {},
|
"@tailwindcss/postcss": {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import {
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Users, Globe, Database, Cog, Settings, Waypoints, Combine } from "lucide-react";
|
import { Users, Globe, Database, Cog, Settings, Waypoints, Combine } from "lucide-react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface OrgStat {
|
interface OrgStat {
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -38,19 +39,21 @@ export default function OrganizationLandingCard(
|
||||||
) {
|
) {
|
||||||
const [orgData] = useState(props);
|
const [orgData] = useState(props);
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const orgStats: OrgStat[] = [
|
const orgStats: OrgStat[] = [
|
||||||
{
|
{
|
||||||
label: "Sites",
|
label: t('sites'),
|
||||||
value: orgData.overview.stats.sites,
|
value: orgData.overview.stats.sites,
|
||||||
icon: <Combine className="h-6 w-6" />
|
icon: <Combine className="h-6 w-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Resources",
|
label: t('resources'),
|
||||||
value: orgData.overview.stats.resources,
|
value: orgData.overview.stats.resources,
|
||||||
icon: <Waypoints className="h-6 w-6" />
|
icon: <Waypoints className="h-6 w-6" />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Users",
|
label: t('users'),
|
||||||
value: orgData.overview.stats.users,
|
value: orgData.overview.stats.users,
|
||||||
icon: <Users className="h-6 w-6" />
|
icon: <Users className="h-6 w-6" />
|
||||||
}
|
}
|
||||||
|
|
@ -81,9 +84,9 @@ export default function OrganizationLandingCard(
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center text-lg">
|
<div className="text-center text-lg">
|
||||||
Your role:{" "}
|
{t('accessRoleYour')}{" "}
|
||||||
<span className="font-semibold">
|
<span className="font-semibold">
|
||||||
{orgData.overview.isOwner ? "Owner" : orgData.overview.userRole}
|
{orgData.overview.isOwner ? t('accessRoleOwner') : orgData.overview.userRole}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
@ -92,7 +95,7 @@ export default function OrganizationLandingCard(
|
||||||
<Link href={`/${orgData.overview.orgId}/settings`}>
|
<Link href={`/${orgData.overview.orgId}/settings`}>
|
||||||
<Button size="lg" className="w-full md:w-auto">
|
<Button size="lg" className="w-full md:w-auto">
|
||||||
<Settings className="mr-2 h-4 w-4" />
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
Organization Settings
|
{t('orgGeneralSettings')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface AccessPageHeaderAndNavProps {
|
interface AccessPageHeaderAndNavProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -12,20 +13,22 @@ export default function AccessPageHeaderAndNav({
|
||||||
children,
|
children,
|
||||||
hasInvitations
|
hasInvitations
|
||||||
}: AccessPageHeaderAndNavProps) {
|
}: AccessPageHeaderAndNavProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "Users",
|
title: t('users'),
|
||||||
href: `/{orgId}/settings/access/users`
|
href: `/{orgId}/settings/access/users`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Roles",
|
title: t('roles'),
|
||||||
href: `/{orgId}/settings/access/roles`
|
href: `/{orgId}/settings/access/roles`
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
if (hasInvitations) {
|
if (hasInvitations) {
|
||||||
navItems.push({
|
navItems.push({
|
||||||
title: "Invitations",
|
title: t('invite'),
|
||||||
href: `/{orgId}/settings/access/invitations`
|
href: `/{orgId}/settings/access/invitations`
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -33,8 +36,8 @@ export default function AccessPageHeaderAndNav({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Users & Roles"
|
title={t('accessUsersRoles')}
|
||||||
description="Invite users and add them to roles to manage access to your organization"
|
description={t('accessUsersRolesDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<HorizontalTabs items={navItems}>
|
<HorizontalTabs items={navItems}>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,12 +15,15 @@ export function InvitationsDataTable<TData, TValue>({
|
||||||
columns,
|
columns,
|
||||||
data
|
data
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Invitations"
|
title={t('invite')}
|
||||||
searchPlaceholder="Search invitations..."
|
searchPlaceholder={t('inviteSearch')}
|
||||||
searchColumn="email"
|
searchColumn="email"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@ import { useOrgContext } from "@app/hooks/useOrgContext";
|
||||||
import { toast } from "@app/hooks/useToast";
|
import { toast } from "@app/hooks/useToast";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export type InvitationRow = {
|
export type InvitationRow = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -39,6 +40,8 @@ export default function InvitationsTable({
|
||||||
const [selectedInvitation, setSelectedInvitation] =
|
const [selectedInvitation, setSelectedInvitation] =
|
||||||
useState<InvitationRow | null>(null);
|
useState<InvitationRow | null>(null);
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
|
||||||
|
|
@ -51,7 +54,7 @@ export default function InvitationsTable({
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
<span className="sr-only">Open menu</span>
|
<span className="sr-only">{t('openMenu')}</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
@ -62,7 +65,7 @@ export default function InvitationsTable({
|
||||||
setSelectedInvitation(invitation);
|
setSelectedInvitation(invitation);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span>Regenerate Invitation</span>
|
<span>{t('inviteRegenerate')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
@ -71,7 +74,7 @@ export default function InvitationsTable({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">
|
<span className="text-red-500">
|
||||||
Remove Invitation
|
{t('inviteRemove')}
|
||||||
</span>
|
</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|
@ -81,11 +84,11 @@ export default function InvitationsTable({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "email",
|
accessorKey: "email",
|
||||||
header: "Email"
|
header: t('email')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "expiresAt",
|
accessorKey: "expiresAt",
|
||||||
header: "Expires At",
|
header: t('expiresAt'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const expiresAt = new Date(row.original.expiresAt);
|
const expiresAt = new Date(row.original.expiresAt);
|
||||||
const isExpired = expiresAt < new Date();
|
const isExpired = expiresAt < new Date();
|
||||||
|
|
@ -99,7 +102,7 @@ export default function InvitationsTable({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "role",
|
accessorKey: "role",
|
||||||
header: "Role"
|
header: t('role')
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -112,17 +115,16 @@ export default function InvitationsTable({
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to remove invitation",
|
title: t('inviteRemoveError'),
|
||||||
description:
|
description: t('inviteRemoveErrorDescription')
|
||||||
"An error occurred while removing the invitation."
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res && res.status === 200) {
|
if (res && res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "Invitation removed",
|
title: t('inviteRemoved'),
|
||||||
description: `The invitation for ${selectedInvitation.email} has been removed.`
|
description: t('inviteRemovedDescription', {email: selectedInvitation.email})
|
||||||
});
|
});
|
||||||
|
|
||||||
setInvitations((prev) =>
|
setInvitations((prev) =>
|
||||||
|
|
@ -146,23 +148,20 @@ export default function InvitationsTable({
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to remove the invitation for{" "}
|
{t('inviteQuestionRemove', {email: selectedInvitation?.email || ""})}
|
||||||
<b>{selectedInvitation?.email}</b>?
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Once removed, this invitation will no longer be
|
{t('inviteMessageRemove')}
|
||||||
valid. You can always re-invite the user later.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the email address of the
|
{t('inviteMessageConfirm')}
|
||||||
invitation below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Remove Invitation"
|
buttonText={t('inviteRemoveConfirm')}
|
||||||
onConfirm={removeInvitation}
|
onConfirm={removeInvitation}
|
||||||
string={selectedInvitation?.email ?? ""}
|
string={selectedInvitation?.email ?? ""}
|
||||||
title="Remove Invitation"
|
title={t('inviteRemove')}
|
||||||
/>
|
/>
|
||||||
<RegenerateInvitationForm
|
<RegenerateInvitationForm
|
||||||
open={isRegenerateModalOpen}
|
open={isRegenerateModalOpen}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@ import {
|
||||||
SelectValue
|
SelectValue
|
||||||
} from "@app/components/ui/select";
|
} from "@app/components/ui/select";
|
||||||
import { Label } from "@app/components/ui/label";
|
import { Label } from "@app/components/ui/label";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type RegenerateInvitationFormProps = {
|
type RegenerateInvitationFormProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -56,14 +57,16 @@ export default function RegenerateInvitationForm({
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const validForOptions = [
|
const validForOptions = [
|
||||||
{ hours: 24, name: "1 day" },
|
{ hours: 24, name: t('day', {count: 1}) },
|
||||||
{ hours: 48, name: "2 days" },
|
{ hours: 48, name: t('day', {count: 2}) },
|
||||||
{ hours: 72, name: "3 days" },
|
{ hours: 72, name: t('day', {count: 3}) },
|
||||||
{ hours: 96, name: "4 days" },
|
{ hours: 96, name: t('day', {count: 4}) },
|
||||||
{ hours: 120, name: "5 days" },
|
{ hours: 120, name: t('day', {count: 5}) },
|
||||||
{ hours: 144, name: "6 days" },
|
{ hours: 144, name: t('day', {count: 6}) },
|
||||||
{ hours: 168, name: "7 days" }
|
{ hours: 168, name: t('day', {count: 7}) }
|
||||||
];
|
];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -79,9 +82,8 @@ export default function RegenerateInvitationForm({
|
||||||
if (!org?.org.orgId) {
|
if (!org?.org.orgId) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Organization ID Missing",
|
title: t('orgMissing'),
|
||||||
description:
|
description: t('orgMissingMessage'),
|
||||||
"Unable to regenerate invitation without an organization ID.",
|
|
||||||
duration: 5000
|
duration: 5000
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
|
|
@ -105,15 +107,15 @@ export default function RegenerateInvitationForm({
|
||||||
if (sendEmail) {
|
if (sendEmail) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "Invitation Regenerated",
|
title: t('inviteRegenerated'),
|
||||||
description: `A new invitation has been sent to ${invitation.email}.`,
|
description: t('inviteSent', {email: invitation.email}),
|
||||||
duration: 5000
|
duration: 5000
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "Invitation Regenerated",
|
title: t('inviteRegenerated'),
|
||||||
description: `A new invitation has been generated for ${invitation.email}.`,
|
description: t('inviteGenerate', {email: invitation.email}),
|
||||||
duration: 5000
|
duration: 5000
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -130,24 +132,22 @@ export default function RegenerateInvitationForm({
|
||||||
if (error.response?.status === 409) {
|
if (error.response?.status === 409) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Duplicate Invite",
|
title: t('inviteDuplicateError'),
|
||||||
description: "An invitation for this user already exists.",
|
description: t('inviteDuplicateErrorDescription'),
|
||||||
duration: 5000
|
duration: 5000
|
||||||
});
|
});
|
||||||
} else if (error.response?.status === 429) {
|
} else if (error.response?.status === 429) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Rate Limit Exceeded",
|
title: t('inviteRateLimitError'),
|
||||||
description:
|
description: t('inviteRateLimitErrorDescription'),
|
||||||
"You have exceeded the limit of 3 regenerations per hour. Please try again later.",
|
|
||||||
duration: 5000
|
duration: 5000
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to Regenerate Invitation",
|
title: t('inviteRegenerateError'),
|
||||||
description:
|
description: t('inviteRegenerateErrorDescription'),
|
||||||
"An error occurred while regenerating the invitation.",
|
|
||||||
duration: 5000
|
duration: 5000
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -168,18 +168,16 @@ export default function RegenerateInvitationForm({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Regenerate Invitation</CredenzaTitle>
|
<CredenzaTitle>{t('inviteRegenerate')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Revoke previous invitation and create a new one
|
{t('inviteRegenerateDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
{!inviteLink ? (
|
{!inviteLink ? (
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to regenerate the
|
{t('inviteQuestionRegenerate', {email: invitation?.email || ""})}
|
||||||
invitation for <b>{invitation?.email}</b>? This
|
|
||||||
will revoke the previous invitation.
|
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center space-x-2 mt-4">
|
<div className="flex items-center space-x-2 mt-4">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
|
@ -190,12 +188,12 @@ export default function RegenerateInvitationForm({
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="send-email">
|
<label htmlFor="send-email">
|
||||||
Send email notification to the user
|
{t('inviteSentEmail')}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
<Label>
|
<Label>
|
||||||
Validity Period
|
{t('inviteValidityPeriod')}
|
||||||
</Label>
|
</Label>
|
||||||
<Select
|
<Select
|
||||||
value={validHours.toString()}
|
value={validHours.toString()}
|
||||||
|
|
@ -204,7 +202,7 @@ export default function RegenerateInvitationForm({
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select validity period" />
|
<SelectValue placeholder={t('inviteValidityPeriodSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{validForOptions.map((option) => (
|
{validForOptions.map((option) => (
|
||||||
|
|
@ -222,9 +220,7 @@ export default function RegenerateInvitationForm({
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-4 max-w-md">
|
<div className="space-y-4 max-w-md">
|
||||||
<p>
|
<p>
|
||||||
The invitation has been regenerated. The user
|
{t('inviteRegenerateMessage')}
|
||||||
must access the link below to accept the
|
|
||||||
invitation.
|
|
||||||
</p>
|
</p>
|
||||||
<CopyTextBox text={inviteLink} wrapText={false} />
|
<CopyTextBox text={inviteLink} wrapText={false} />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -234,18 +230,18 @@ export default function RegenerateInvitationForm({
|
||||||
{!inviteLink ? (
|
{!inviteLink ? (
|
||||||
<>
|
<>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Cancel</Button>
|
<Button variant="outline">{t('cancel')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleRegenerate}
|
onClick={handleRegenerate}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
>
|
>
|
||||||
Regenerate
|
{t('inviteRegenerateButton')}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
)}
|
)}
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import UserProvider from "@app/providers/UserProvider";
|
||||||
import { verifySession } from "@app/lib/auth/verifySession";
|
import { verifySession } from "@app/lib/auth/verifySession";
|
||||||
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
|
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
type InvitationsPageProps = {
|
type InvitationsPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -18,6 +19,7 @@ export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export default async function InvitationsPage(props: InvitationsPageProps) {
|
export default async function InvitationsPage(props: InvitationsPageProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const getUser = cache(verifySession);
|
const getUser = cache(verifySession);
|
||||||
const user = await getUser();
|
const user = await getUser();
|
||||||
|
|
@ -66,7 +68,7 @@ export default async function InvitationsPage(props: InvitationsPageProps) {
|
||||||
id: invite.inviteId,
|
id: invite.inviteId,
|
||||||
email: invite.email,
|
email: invite.email,
|
||||||
expiresAt: new Date(Number(invite.expiresAt)).toISOString(),
|
expiresAt: new Date(Number(invite.expiresAt)).toISOString(),
|
||||||
role: invite.roleName || "Unknown Role",
|
role: invite.roleName || t('accessRoleUnknown'),
|
||||||
roleId: invite.roleId
|
roleId: invite.roleId
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -74,8 +76,8 @@ export default async function InvitationsPage(props: InvitationsPageProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Open Invitations"
|
title={t('inviteTitle')}
|
||||||
description="Manage your invitations to other users"
|
description={t('inviteDescription')}
|
||||||
/>
|
/>
|
||||||
<UserProvider user={user!}>
|
<UserProvider user={user!}>
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ import { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
|
||||||
import { formatAxiosError } from "@app/lib/api";
|
import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type CreateRoleFormProps = {
|
type CreateRoleFormProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -38,17 +39,18 @@ type CreateRoleFormProps = {
|
||||||
afterCreate?: (res: CreateRoleResponse) => Promise<void>;
|
afterCreate?: (res: CreateRoleResponse) => Promise<void>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
name: z.string({ message: "Name is required" }).max(32),
|
|
||||||
description: z.string().max(255).optional()
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function CreateRoleForm({
|
export default function CreateRoleForm({
|
||||||
open,
|
open,
|
||||||
setOpen,
|
setOpen,
|
||||||
afterCreate
|
afterCreate
|
||||||
}: CreateRoleFormProps) {
|
}: CreateRoleFormProps) {
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
name: z.string({ message: t('nameRequired') }).max(32),
|
||||||
|
description: z.string().max(255).optional()
|
||||||
|
});
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
|
@ -76,10 +78,10 @@ export default function CreateRoleForm({
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to create role",
|
title: t('accessRoleErrorCreate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while creating the role."
|
t('accessRoleErrorCreateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -87,8 +89,8 @@ export default function CreateRoleForm({
|
||||||
if (res && res.status === 201) {
|
if (res && res.status === 201) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "Role created",
|
title: t('accessRoleCreated'),
|
||||||
description: "The role has been successfully created."
|
description: t('accessRoleCreatedDescription')
|
||||||
});
|
});
|
||||||
|
|
||||||
if (open) {
|
if (open) {
|
||||||
|
|
@ -115,10 +117,9 @@ export default function CreateRoleForm({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Create Role</CredenzaTitle>
|
<CredenzaTitle>{t('accessRoleCreate')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Create a new role to group users and manage their
|
{t('accessRoleCreateDescription')}
|
||||||
permissions.
|
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -133,7 +134,7 @@ export default function CreateRoleForm({
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Role Name</FormLabel>
|
<FormLabel>{t('accessRoleName')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -146,7 +147,7 @@ export default function CreateRoleForm({
|
||||||
name="description"
|
name="description"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Description</FormLabel>
|
<FormLabel>{t('description')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -159,7 +160,7 @@ export default function CreateRoleForm({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -167,7 +168,7 @@ export default function CreateRoleForm({
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Create Role
|
{t('accessRoleCreateSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,7 @@ import { RoleRow } from "./RolesTable";
|
||||||
import { formatAxiosError } from "@app/lib/api";
|
import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type CreateRoleFormProps = {
|
type CreateRoleFormProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -46,10 +47,6 @@ type CreateRoleFormProps = {
|
||||||
afterDelete?: () => void;
|
afterDelete?: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
newRoleId: z.string({ message: "New role is required" })
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function DeleteRoleForm({
|
export default function DeleteRoleForm({
|
||||||
open,
|
open,
|
||||||
roleToDelete,
|
roleToDelete,
|
||||||
|
|
@ -57,12 +54,17 @@ export default function DeleteRoleForm({
|
||||||
afterDelete
|
afterDelete
|
||||||
}: CreateRoleFormProps) {
|
}: CreateRoleFormProps) {
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [roles, setRoles] = useState<ListRolesResponse["roles"]>([]);
|
const [roles, setRoles] = useState<ListRolesResponse["roles"]>([]);
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
newRoleId: z.string({ message: t('accessRoleErrorNewRequired') })
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchRoles() {
|
async function fetchRoles() {
|
||||||
const res = await api
|
const res = await api
|
||||||
|
|
@ -73,10 +75,10 @@ export default function DeleteRoleForm({
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch roles",
|
title: t('accessRoleErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while fetching the roles"
|
t('accessRoleErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -112,10 +114,10 @@ export default function DeleteRoleForm({
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to remove role",
|
title: t('accessRoleErrorRemove'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while removing the role."
|
t('accessRoleErrorRemoveDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -123,8 +125,8 @@ export default function DeleteRoleForm({
|
||||||
if (res && res.status === 200) {
|
if (res && res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "Role removed",
|
title: t('accessRoleRemoved'),
|
||||||
description: "The role has been successfully removed."
|
description: t('accessRoleRemovedDescription')
|
||||||
});
|
});
|
||||||
|
|
||||||
if (open) {
|
if (open) {
|
||||||
|
|
@ -151,22 +153,19 @@ export default function DeleteRoleForm({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Remove Role</CredenzaTitle>
|
<CredenzaTitle>{t('accessRoleRemove')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Remove a role from the organization
|
{t('accessRoleRemoveDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
You're about to delete the{" "}
|
{t('accessRoleQuestionRemove', {name: roleToDelete.name})}
|
||||||
<b>{roleToDelete.name}</b> role. You cannot
|
|
||||||
undo this action.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Before deleting this role, please select a
|
{t('accessRoleRequiredRemove')}
|
||||||
new role to transfer existing members to.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
|
|
@ -180,7 +179,7 @@ export default function DeleteRoleForm({
|
||||||
name="newRoleId"
|
name="newRoleId"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Role</FormLabel>
|
<FormLabel>{t('role')}</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
field.onChange
|
field.onChange
|
||||||
|
|
@ -189,7 +188,7 @@ export default function DeleteRoleForm({
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select role" />
|
<SelectValue placeholder={t('accessRoleSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -215,7 +214,7 @@ export default function DeleteRoleForm({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -223,7 +222,7 @@ export default function DeleteRoleForm({
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Remove Role
|
{t('accessRoleRemoveSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -16,15 +17,18 @@ export function RolesDataTable<TData, TValue>({
|
||||||
data,
|
data,
|
||||||
createRole
|
createRole
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Roles"
|
title={t('roles')}
|
||||||
searchPlaceholder="Search roles..."
|
searchPlaceholder={t('accessRolesSearch')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
onAdd={createRole}
|
onAdd={createRole}
|
||||||
addButtonText="Add Role"
|
addButtonText={t('accessRolesAdd')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import CreateRoleForm from "./CreateRoleForm";
|
||||||
import DeleteRoleForm from "./DeleteRoleForm";
|
import DeleteRoleForm from "./DeleteRoleForm";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
export type RoleRow = Role;
|
export type RoleRow = Role;
|
||||||
|
|
||||||
|
|
@ -38,6 +39,8 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
|
||||||
|
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const columns: ColumnDef<RoleRow>[] = [
|
const columns: ColumnDef<RoleRow>[] = [
|
||||||
{
|
{
|
||||||
id: "actions",
|
id: "actions",
|
||||||
|
|
@ -58,7 +61,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
|
||||||
className="h-8 w-8 p-0"
|
className="h-8 w-8 p-0"
|
||||||
>
|
>
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
Open menu
|
{t('openMenu')}
|
||||||
</span>
|
</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -71,7 +74,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">
|
<span className="text-red-500">
|
||||||
Delete Role
|
{t('accessRoleDelete')}
|
||||||
</span>
|
</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|
@ -92,7 +95,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -100,7 +103,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "description",
|
accessorKey: "description",
|
||||||
header: "Description"
|
header: t('description')
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import RolesTable, { RoleRow } from "./RolesTable";
|
||||||
import { SidebarSettings } from "@app/components/SidebarSettings";
|
import { SidebarSettings } from "@app/components/SidebarSettings";
|
||||||
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
|
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
type RolesPageProps = {
|
type RolesPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -62,12 +63,13 @@ export default async function RolesPage(props: RolesPageProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const roleRows: RoleRow[] = roles;
|
const roleRows: RoleRow[] = roles;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Roles"
|
title={t('accessRolesManage')}
|
||||||
description="Configure roles to manage access to your organization"
|
description={t('accessRolesDescription')}
|
||||||
/>
|
/>
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
<RolesTable roles={roleRows} />
|
<RolesTable roles={roleRows} />
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -16,15 +17,18 @@ export function UsersDataTable<TData, TValue>({
|
||||||
data,
|
data,
|
||||||
inviteUser
|
inviteUser
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Users"
|
title={t('users')}
|
||||||
searchPlaceholder="Search users..."
|
searchPlaceholder={t('accessUsersSearch')}
|
||||||
searchColumn="email"
|
searchColumn="email"
|
||||||
onAdd={inviteUser}
|
onAdd={inviteUser}
|
||||||
addButtonText="Create User"
|
addButtonText={t('accessUserCreate')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import { useUserContext } from "@app/hooks/useUserContext";
|
import { useUserContext } from "@app/hooks/useUserContext";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
export type UserRow = {
|
export type UserRow = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -47,6 +48,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
const { user, updateUser } = useUserContext();
|
const { user, updateUser } = useUserContext();
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const columns: ColumnDef<UserRow>[] = [
|
const columns: ColumnDef<UserRow>[] = [
|
||||||
{
|
{
|
||||||
|
|
@ -68,7 +70,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
className="h-8 w-8 p-0"
|
className="h-8 w-8 p-0"
|
||||||
>
|
>
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
Open menu
|
{t('openMenu')}
|
||||||
</span>
|
</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -79,7 +81,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
className="block w-full"
|
className="block w-full"
|
||||||
>
|
>
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
Manage User
|
{t('accessUsersManage')}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
{`${userRow.username}-${userRow.idpId}` !==
|
{`${userRow.username}-${userRow.idpId}` !==
|
||||||
|
|
@ -95,7 +97,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">
|
<span className="text-red-500">
|
||||||
Remove User
|
{t('accessUserRemove')}
|
||||||
</span>
|
</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -118,7 +120,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Username
|
{t('username')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -134,7 +136,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Identity Provider
|
{t('identityProvider')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -150,7 +152,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Role
|
{t('role')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -179,7 +181,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="opacity-0 cursor-default"
|
className="opacity-0 cursor-default"
|
||||||
>
|
>
|
||||||
Placeholder
|
{t('placeholder')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{!userRow.isOwner && (
|
{!userRow.isOwner && (
|
||||||
|
|
@ -190,7 +192,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
variant={"outlinePrimary"}
|
variant={"outlinePrimary"}
|
||||||
className="ml-2"
|
className="ml-2"
|
||||||
>
|
>
|
||||||
Manage
|
{t('manage')}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -208,10 +210,10 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to remove user",
|
title: t('userErrorOrgRemove'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while removing the user."
|
t('userErrorOrgRemoveDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -219,8 +221,8 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
if (res && res.status === 200) {
|
if (res && res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "User removed",
|
title: t('userOrgRemoved'),
|
||||||
description: `The user ${selectedUser.email} has been removed from the organization.`
|
description: t('userOrgRemovedDescription', {email: selectedUser.email || ""})
|
||||||
});
|
});
|
||||||
|
|
||||||
setUsers((prev) =>
|
setUsers((prev) =>
|
||||||
|
|
@ -242,29 +244,19 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to remove{" "}
|
{t('userQuestionOrgRemove', {email: selectedUser?.email || selectedUser?.name || selectedUser?.username || ""})}
|
||||||
<b>
|
|
||||||
{selectedUser?.email ||
|
|
||||||
selectedUser?.name ||
|
|
||||||
selectedUser?.username}
|
|
||||||
</b>{" "}
|
|
||||||
from the organization?
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Once removed, this user will no longer have access
|
{t('userMessageOrgRemove')}
|
||||||
to the organization. You can always re-invite them
|
|
||||||
later, but they will need to accept the invitation
|
|
||||||
again.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the of the user
|
{t('userMessageOrgConfirm')}
|
||||||
below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Remove User"
|
buttonText={t('userRemoveOrgConfirm')}
|
||||||
onConfirm={removeUser}
|
onConfirm={removeUser}
|
||||||
string={
|
string={
|
||||||
selectedUser?.email ||
|
selectedUser?.email ||
|
||||||
|
|
@ -272,7 +264,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
|
||||||
selectedUser?.username ||
|
selectedUser?.username ||
|
||||||
""
|
""
|
||||||
}
|
}
|
||||||
title="Remove User from Organization"
|
title={t('userRemoveOrg')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<UsersDataTable
|
<UsersDataTable
|
||||||
|
|
|
||||||
|
|
@ -40,11 +40,7 @@ import {
|
||||||
import { formatAxiosError } from "@app/lib/api";
|
import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string(),
|
|
||||||
roleId: z.string().min(1, { message: "Please select a role" })
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function AccessControlsPage() {
|
export default function AccessControlsPage() {
|
||||||
const { orgUser: user } = userOrgUserContext();
|
const { orgUser: user } = userOrgUserContext();
|
||||||
|
|
@ -56,6 +52,13 @@ export default function AccessControlsPage() {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
|
const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
username: z.string(),
|
||||||
|
roleId: z.string().min(1, { message: t('accessRoleSelectPlease') })
|
||||||
|
});
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof formSchema>>({
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
resolver: zodResolver(formSchema),
|
resolver: zodResolver(formSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -72,10 +75,10 @@ export default function AccessControlsPage() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch roles",
|
title: t('accessRoleErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while fetching the roles"
|
t('accessRoleErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -100,10 +103,10 @@ export default function AccessControlsPage() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to add user to role",
|
title: t('accessRoleErrorAdd'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while adding user to the role."
|
t('accessRoleErrorAddDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -111,8 +114,8 @@ export default function AccessControlsPage() {
|
||||||
if (res && res.status === 200) {
|
if (res && res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "User saved",
|
title: t('userSaved'),
|
||||||
description: "The user has been updated."
|
description: t('userSavedDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -123,10 +126,9 @@ export default function AccessControlsPage() {
|
||||||
<SettingsContainer>
|
<SettingsContainer>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>Access Controls</SettingsSectionTitle>
|
<SettingsSectionTitle>{t('accessControls')}</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Manage what this user can access and do in the
|
{t('accessControlsDescription')}
|
||||||
organization
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
|
@ -143,14 +145,14 @@ export default function AccessControlsPage() {
|
||||||
name="roleId"
|
name="roleId"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Role</FormLabel>
|
<FormLabel>{t('role')}</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={field.onChange}
|
onValueChange={field.onChange}
|
||||||
value={field.value}
|
value={field.value}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select role" />
|
<SelectValue placeholder={t('accessRoleSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -180,7 +182,7 @@ export default function AccessControlsPage() {
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
form="access-controls-form"
|
form="access-controls-form"
|
||||||
>
|
>
|
||||||
Save Access Controls
|
{t('accessControlsSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import {
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { cache } from "react";
|
import { cache } from "react";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
interface UserLayoutProps {
|
interface UserLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -26,6 +27,8 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
|
||||||
|
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
let user = null;
|
let user = null;
|
||||||
try {
|
try {
|
||||||
const getOrgUser = cache(async () =>
|
const getOrgUser = cache(async () =>
|
||||||
|
|
@ -42,7 +45,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "Access Controls",
|
title: t('accessControls'),
|
||||||
href: "/{orgId}/settings/access/users/{userId}/access-controls"
|
href: "/{orgId}/settings/access/users/{userId}/access-controls"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
@ -51,7 +54,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title={`${user?.email}`}
|
title={`${user?.email}`}
|
||||||
description="Manage the settings on this user"
|
description={t('userDescription2')}
|
||||||
/>
|
/>
|
||||||
<OrgUserProvider orgUser={user}>
|
<OrgUserProvider orgUser={user}>
|
||||||
<HorizontalTabs items={navItems}>
|
<HorizontalTabs items={navItems}>
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,7 @@ import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { Checkbox } from "@app/components/ui/checkbox";
|
import { Checkbox } from "@app/components/ui/checkbox";
|
||||||
import { ListIdpsResponse } from "@server/routers/idp";
|
import { ListIdpsResponse } from "@server/routers/idp";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type UserType = "internal" | "oidc";
|
type UserType = "internal" | "oidc";
|
||||||
|
|
||||||
|
|
@ -59,38 +60,12 @@ interface IdpOption {
|
||||||
type: string;
|
type: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const internalFormSchema = z.object({
|
|
||||||
email: z.string().email({ message: "Invalid email address" }),
|
|
||||||
validForHours: z.string().min(1, { message: "Please select a duration" }),
|
|
||||||
roleId: z.string().min(1, { message: "Please select a role" })
|
|
||||||
});
|
|
||||||
|
|
||||||
const externalFormSchema = z.object({
|
|
||||||
username: z.string().min(1, { message: "Username is required" }),
|
|
||||||
email: z
|
|
||||||
.string()
|
|
||||||
.email({ message: "Invalid email address" })
|
|
||||||
.optional()
|
|
||||||
.or(z.literal("")),
|
|
||||||
name: z.string().optional(),
|
|
||||||
roleId: z.string().min(1, { message: "Please select a role" }),
|
|
||||||
idpId: z.string().min(1, { message: "Please select an identity provider" })
|
|
||||||
});
|
|
||||||
|
|
||||||
const formatIdpType = (type: string) => {
|
|
||||||
switch (type.toLowerCase()) {
|
|
||||||
case "oidc":
|
|
||||||
return "Generic OAuth2/OIDC provider.";
|
|
||||||
default:
|
|
||||||
return type;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { orgId } = useParams();
|
const { orgId } = useParams();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [userType, setUserType] = useState<UserType | null>("internal");
|
const [userType, setUserType] = useState<UserType | null>("internal");
|
||||||
const [inviteLink, setInviteLink] = useState<string | null>(null);
|
const [inviteLink, setInviteLink] = useState<string | null>(null);
|
||||||
|
|
@ -102,14 +77,41 @@ export default function Page() {
|
||||||
const [selectedIdp, setSelectedIdp] = useState<IdpOption | null>(null);
|
const [selectedIdp, setSelectedIdp] = useState<IdpOption | null>(null);
|
||||||
const [dataLoaded, setDataLoaded] = useState(false);
|
const [dataLoaded, setDataLoaded] = useState(false);
|
||||||
|
|
||||||
|
const internalFormSchema = z.object({
|
||||||
|
email: z.string().email({ message: t('emailInvalid') }),
|
||||||
|
validForHours: z.string().min(1, { message: t('inviteValidityDuration') }),
|
||||||
|
roleId: z.string().min(1, { message: t('accessRoleSelectPlease') })
|
||||||
|
});
|
||||||
|
|
||||||
|
const externalFormSchema = z.object({
|
||||||
|
username: z.string().min(1, { message: t('usernameRequired') }),
|
||||||
|
email: z
|
||||||
|
.string()
|
||||||
|
.email({ message: t('emailInvalid') })
|
||||||
|
.optional()
|
||||||
|
.or(z.literal("")),
|
||||||
|
name: z.string().optional(),
|
||||||
|
roleId: z.string().min(1, { message: t('accessRoleSelectPlease') }),
|
||||||
|
idpId: z.string().min(1, { message: t('idpSelectPlease') })
|
||||||
|
});
|
||||||
|
|
||||||
|
const formatIdpType = (type: string) => {
|
||||||
|
switch (type.toLowerCase()) {
|
||||||
|
case "oidc":
|
||||||
|
return t('idpGenericOidc');
|
||||||
|
default:
|
||||||
|
return type;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const validFor = [
|
const validFor = [
|
||||||
{ hours: 24, name: "1 day" },
|
{ hours: 24, name: t('day', {count: 1}) },
|
||||||
{ hours: 48, name: "2 days" },
|
{ hours: 48, name: t('day', {count: 2}) },
|
||||||
{ hours: 72, name: "3 days" },
|
{ hours: 72, name: t('day', {count: 3}) },
|
||||||
{ hours: 96, name: "4 days" },
|
{ hours: 96, name: t('day', {count: 4}) },
|
||||||
{ hours: 120, name: "5 days" },
|
{ hours: 120, name: t('day', {count: 5}) },
|
||||||
{ hours: 144, name: "6 days" },
|
{ hours: 144, name: t('day', {count: 6}) },
|
||||||
{ hours: 168, name: "7 days" }
|
{ hours: 168, name: t('day', {count: 7}) }
|
||||||
];
|
];
|
||||||
|
|
||||||
const internalForm = useForm<z.infer<typeof internalFormSchema>>({
|
const internalForm = useForm<z.infer<typeof internalFormSchema>>({
|
||||||
|
|
@ -155,10 +157,10 @@ export default function Page() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch roles",
|
title: t('accessRoleErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while fetching the roles"
|
t('accessRoleErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -178,10 +180,10 @@ export default function Page() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch identity providers",
|
title: t('idpErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while fetching identity providers"
|
t('idpErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -218,17 +220,16 @@ export default function Page() {
|
||||||
if (e.response?.status === 409) {
|
if (e.response?.status === 409) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "User Already Exists",
|
title: t('userErrorExists'),
|
||||||
description:
|
description: t('userErrorExistsDescription')
|
||||||
"This user is already a member of the organization."
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to invite user",
|
title: t('inviteError'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while inviting the user"
|
t('inviteErrorDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -238,8 +239,8 @@ export default function Page() {
|
||||||
setInviteLink(res.data.data.inviteLink);
|
setInviteLink(res.data.data.inviteLink);
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "User invited",
|
title: t('userInvited'),
|
||||||
description: "The user has been successfully invited."
|
description: t('userInvitedDescription')
|
||||||
});
|
});
|
||||||
|
|
||||||
setExpiresInDays(parseInt(values.validForHours) / 24);
|
setExpiresInDays(parseInt(values.validForHours) / 24);
|
||||||
|
|
@ -265,10 +266,10 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to create user",
|
title: t('userErrorCreate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while creating the user"
|
t('userErrorCreateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -276,8 +277,8 @@ export default function Page() {
|
||||||
if (res && res.status === 201) {
|
if (res && res.status === 201) {
|
||||||
toast({
|
toast({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
title: "User created",
|
title: t('userCreated'),
|
||||||
description: "The user has been successfully created."
|
description: t('userCreatedDescription')
|
||||||
});
|
});
|
||||||
router.push(`/${orgId}/settings/access/users`);
|
router.push(`/${orgId}/settings/access/users`);
|
||||||
}
|
}
|
||||||
|
|
@ -288,13 +289,13 @@ export default function Page() {
|
||||||
const userTypes: ReadonlyArray<UserTypeOption> = [
|
const userTypes: ReadonlyArray<UserTypeOption> = [
|
||||||
{
|
{
|
||||||
id: "internal",
|
id: "internal",
|
||||||
title: "Internal User",
|
title: t('userTypeInternal'),
|
||||||
description: "Invite a user to join your organization directly."
|
description: t('userTypeInternalDescription')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "oidc",
|
id: "oidc",
|
||||||
title: "External User",
|
title: t('userTypeExternal'),
|
||||||
description: "Create a user with an external identity provider."
|
description: t('userTypeExternalDescription')
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -302,8 +303,8 @@ export default function Page() {
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title="Create User"
|
title={t('accessUserCreate')}
|
||||||
description="Follow the steps below to create a new user"
|
description={t('accessUserCreateDescription')}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
@ -311,7 +312,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/access/users`);
|
router.push(`/${orgId}/settings/access/users`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See All Users
|
{t('userSeeAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -320,10 +321,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
User Type
|
{t('userTypeTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine how you want to create the user
|
{t('userTypeDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -349,10 +350,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
User Information
|
{t('userSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Enter the details for the new user
|
{t('userSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -373,7 +374,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Email
|
{t('email')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -402,8 +403,7 @@ export default function Page() {
|
||||||
htmlFor="send-email"
|
htmlFor="send-email"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
Send invite email to
|
{t('inviteEmailSent')}
|
||||||
user
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -416,7 +416,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Valid For
|
{t('inviteValid')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
|
|
@ -428,7 +428,7 @@ export default function Page() {
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select duration" />
|
<SelectValue placeholder={t('selectDuration')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -463,7 +463,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Role
|
{t('role')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
|
|
@ -472,7 +472,7 @@ export default function Page() {
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select role" />
|
<SelectValue placeholder={t('accessRoleSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -503,37 +503,16 @@ export default function Page() {
|
||||||
<div className="max-w-md space-y-4">
|
<div className="max-w-md space-y-4">
|
||||||
{sendEmail && (
|
{sendEmail && (
|
||||||
<p>
|
<p>
|
||||||
An email has
|
{t('inviteEmailSentDescription')}
|
||||||
been sent to the
|
|
||||||
user with the
|
|
||||||
access link
|
|
||||||
below. They must
|
|
||||||
access the link
|
|
||||||
to accept the
|
|
||||||
invitation.
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{!sendEmail && (
|
{!sendEmail && (
|
||||||
<p>
|
<p>
|
||||||
The user has
|
{t('inviteSentDescription')}
|
||||||
been invited.
|
|
||||||
They must access
|
|
||||||
the link below
|
|
||||||
to accept the
|
|
||||||
invitation.
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<p>
|
<p>
|
||||||
The invite will
|
{t('inviteExpiresIn', {days: expiresInDays})}
|
||||||
expire in{" "}
|
|
||||||
<b>
|
|
||||||
{expiresInDays}{" "}
|
|
||||||
{expiresInDays ===
|
|
||||||
1
|
|
||||||
? "day"
|
|
||||||
: "days"}
|
|
||||||
</b>
|
|
||||||
.
|
|
||||||
</p>
|
</p>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={inviteLink}
|
text={inviteLink}
|
||||||
|
|
@ -554,20 +533,16 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Identity Provider
|
{t('idpTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Select the identity provider for the
|
{t('idpSelect')}
|
||||||
external user
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
{idps.length === 0 ? (
|
{idps.length === 0 ? (
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
No identity providers are
|
{t('idpNotConfigured')}
|
||||||
configured. Please configure an
|
|
||||||
identity provider before creating
|
|
||||||
external users.
|
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<Form {...externalForm}>
|
<Form {...externalForm}>
|
||||||
|
|
@ -621,10 +596,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
User Information
|
{t('userSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Enter the details for the new user
|
{t('userSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -645,7 +620,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Username
|
{t('username')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -653,15 +628,7 @@ export default function Page() {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<p className="text-sm text-muted-foreground mt-1">
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
This must
|
{t('usernameUniq')}
|
||||||
match the
|
|
||||||
unique
|
|
||||||
username
|
|
||||||
that exists
|
|
||||||
in the
|
|
||||||
selected
|
|
||||||
identity
|
|
||||||
provider.
|
|
||||||
</p>
|
</p>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -676,8 +643,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Email
|
{t('emailOptional')}
|
||||||
(Optional)
|
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -697,8 +663,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name
|
{t('nameOptional')}
|
||||||
(Optional)
|
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -718,7 +683,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Role
|
{t('role')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
|
|
@ -727,7 +692,7 @@ export default function Page() {
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select role" />
|
<SelectValue placeholder={t('accessRoleSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -771,7 +736,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/access/users`);
|
router.push(`/${orgId}/settings/access/users`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
{userType && dataLoaded && (
|
{userType && dataLoaded && (
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -783,7 +748,7 @@ export default function Page() {
|
||||||
(userType === "internal" && inviteLink !== null)
|
(userType === "internal" && inviteLink !== null)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Create User
|
{t('accessUserCreate')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import UserProvider from "@app/providers/UserProvider";
|
||||||
import { verifySession } from "@app/lib/auth/verifySession";
|
import { verifySession } from "@app/lib/auth/verifySession";
|
||||||
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
|
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
type UsersPageProps = {
|
type UsersPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -22,6 +23,7 @@ export default async function UsersPage(props: UsersPageProps) {
|
||||||
|
|
||||||
const getUser = cache(verifySession);
|
const getUser = cache(verifySession);
|
||||||
const user = await getUser();
|
const user = await getUser();
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
let users: ListUsersResponse["users"] = [];
|
let users: ListUsersResponse["users"] = [];
|
||||||
let hasInvitations = false;
|
let hasInvitations = false;
|
||||||
|
|
@ -76,9 +78,9 @@ export default async function UsersPage(props: UsersPageProps) {
|
||||||
email: user.email,
|
email: user.email,
|
||||||
type: user.type,
|
type: user.type,
|
||||||
idpId: user.idpId,
|
idpId: user.idpId,
|
||||||
idpName: user.idpName || "Internal",
|
idpName: user.idpName || t('idpNameInternal'),
|
||||||
status: "Confirmed",
|
status: t('userConfirmed'),
|
||||||
role: user.isOwner ? "Owner" : user.roleName || "Member",
|
role: user.isOwner ? t('accessRoleOwner') : user.roleName || t('accessRoleMember'),
|
||||||
isOwner: user.isOwner || false
|
isOwner: user.isOwner || false
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -86,8 +88,8 @@ export default async function UsersPage(props: UsersPageProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Users"
|
title={t('accessUsersManage')}
|
||||||
description="Invite users and add them to roles to manage access to your organization"
|
description={t('accessUsersDescription')}
|
||||||
/>
|
/>
|
||||||
<UserProvider user={user!}>
|
<UserProvider user={user!}>
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,15 +15,18 @@ export function OrgApiKeysDataTable<TData, TValue>({
|
||||||
columns,
|
columns,
|
||||||
data
|
data
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="API Keys"
|
title={t('apiKeys')}
|
||||||
searchPlaceholder="Search API keys..."
|
searchPlaceholder={t('searchApiKeys')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
onAdd={addApiKey}
|
onAdd={addApiKey}
|
||||||
addButtonText="Generate API Key"
|
addButtonText={t('apiKeysAdd')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export type OrgApiKeyRow = {
|
export type OrgApiKeyRow = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -44,14 +45,16 @@ export default function OrgApiKeysTable({
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const deleteSite = (apiKeyId: string) => {
|
const deleteSite = (apiKeyId: string) => {
|
||||||
api.delete(`/org/${orgId}/api-key/${apiKeyId}`)
|
api.delete(`/org/${orgId}/api-key/${apiKeyId}`)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error deleting API key", e);
|
console.error(t('apiKeysErrorDelete'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error deleting API key",
|
title: t('apiKeysErrorDelete'),
|
||||||
description: formatAxiosError(e, "Error deleting API key")
|
description: formatAxiosError(e, t('apiKeysErrorDeleteMessage'))
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
@ -75,7 +78,7 @@ export default function OrgApiKeysTable({
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
<span className="sr-only">Open menu</span>
|
<span className="sr-only">{t('openMenu')}</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
@ -85,7 +88,7 @@ export default function OrgApiKeysTable({
|
||||||
setSelected(apiKeyROw);
|
setSelected(apiKeyROw);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span>View settings</span>
|
<span>{t('viewSettings')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
@ -93,7 +96,7 @@ export default function OrgApiKeysTable({
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">Delete</span>
|
<span className="text-red-500">{t('delete')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
@ -110,7 +113,7 @@ export default function OrgApiKeysTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -118,7 +121,7 @@ export default function OrgApiKeysTable({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "key",
|
accessorKey: "key",
|
||||||
header: "Key",
|
header: t('key'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const r = row.original;
|
const r = row.original;
|
||||||
return <span className="font-mono">{r.key}</span>;
|
return <span className="font-mono">{r.key}</span>;
|
||||||
|
|
@ -126,7 +129,7 @@ export default function OrgApiKeysTable({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "createdAt",
|
accessorKey: "createdAt",
|
||||||
header: "Created At",
|
header: t('createdAt'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const r = row.original;
|
const r = row.original;
|
||||||
return <span>{moment(r.createdAt).format("lll")} </span>;
|
return <span>{moment(r.createdAt).format("lll")} </span>;
|
||||||
|
|
@ -140,7 +143,7 @@ export default function OrgApiKeysTable({
|
||||||
<div className="flex items-center justify-end">
|
<div className="flex items-center justify-end">
|
||||||
<Link href={`/${orgId}/settings/api-keys/${r.id}`}>
|
<Link href={`/${orgId}/settings/api-keys/${r.id}`}>
|
||||||
<Button variant={"outlinePrimary"} className="ml-2">
|
<Button variant={"outlinePrimary"} className="ml-2">
|
||||||
Edit
|
{t('edit')}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -162,28 +165,24 @@ export default function OrgApiKeysTable({
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to remove the API key{" "}
|
{t('apiKeysQuestionRemove', {selectedApiKey: selected?.name || selected?.id})}
|
||||||
<b>{selected?.name || selected?.id}</b> from the
|
|
||||||
organization?
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<b>
|
<b>
|
||||||
Once removed, the API key will no longer be
|
{t('apiKeysMessageRemove')}
|
||||||
able to be used.
|
|
||||||
</b>
|
</b>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the API key
|
{t('apiKeysMessageConfirm')}
|
||||||
below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete API Key"
|
buttonText={t('apiKeysDeleteConfirm')}
|
||||||
onConfirm={async () => deleteSite(selected!.id)}
|
onConfirm={async () => deleteSite(selected!.id)}
|
||||||
string={selected.name}
|
string={selected.name}
|
||||||
title="Delete API Key"
|
title={t('apiKeysDelete')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import {
|
||||||
import { GetApiKeyResponse } from "@server/routers/apiKeys";
|
import { GetApiKeyResponse } from "@server/routers/apiKeys";
|
||||||
import ApiKeyProvider from "@app/providers/ApiKeyProvider";
|
import ApiKeyProvider from "@app/providers/ApiKeyProvider";
|
||||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
interface SettingsLayoutProps {
|
interface SettingsLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -23,6 +24,7 @@ interface SettingsLayoutProps {
|
||||||
|
|
||||||
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
|
||||||
|
|
@ -40,14 +42,14 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "Permissions",
|
title: t('apiKeysPermissionsTitle'),
|
||||||
href: "/{orgId}/settings/api-keys/{apiKeyId}/permissions"
|
href: "/{orgId}/settings/api-keys/{apiKeyId}/permissions"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle title={`${apiKey?.name} Settings`} />
|
<SettingsSectionTitle title={t('apiKeysSettings', {apiKeyName: apiKey?.name})} />
|
||||||
|
|
||||||
<ApiKeyProvider apiKey={apiKey}>
|
<ApiKeyProvider apiKey={apiKey}>
|
||||||
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
|
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,15 @@ import { ListApiKeyActionsResponse } from "@server/routers/apiKeys";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const { orgId, apiKeyId } = useParams();
|
const { orgId, apiKeyId } = useParams();
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loadingPage, setLoadingPage] = useState<boolean>(true);
|
const [loadingPage, setLoadingPage] = useState<boolean>(true);
|
||||||
const [selectedPermissions, setSelectedPermissions] = useState<
|
const [selectedPermissions, setSelectedPermissions] = useState<
|
||||||
Record<string, boolean>
|
Record<string, boolean>
|
||||||
|
|
@ -42,10 +45,10 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error loading API key actions",
|
title: t('apiKeysPermissionsErrorLoadingActions'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"Error loading API key actions"
|
t('apiKeysPermissionsErrorLoadingActions')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -76,18 +79,18 @@ export default function Page() {
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error setting permissions", e);
|
console.error(t('apiKeysErrorSetPermission'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error setting permissions",
|
title: t('apiKeysErrorSetPermission'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (actionsRes && actionsRes.status === 200) {
|
if (actionsRes && actionsRes.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
title: "Permissions updated",
|
title: t('apiKeysPermissionsUpdated'),
|
||||||
description: "The permissions have been updated."
|
description: t('apiKeysPermissionsUpdatedDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,10 +104,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Permissions
|
{t('apiKeysPermissionsGeneralSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine what this API key can do
|
{t('apiKeysPermissionsGeneralSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -121,7 +124,7 @@ export default function Page() {
|
||||||
loading={loadingSavePermissions}
|
loading={loadingSavePermissions}
|
||||||
disabled={loadingSavePermissions}
|
disabled={loadingSavePermissions}
|
||||||
>
|
>
|
||||||
Save Permissions
|
{t('apiKeysPermissionsSave')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
|
||||||
|
|
@ -55,41 +55,14 @@ import moment from "moment";
|
||||||
import CopyCodeBox from "@server/emails/templates/components/CopyCodeBox";
|
import CopyCodeBox from "@server/emails/templates/components/CopyCodeBox";
|
||||||
import CopyTextBox from "@app/components/CopyTextBox";
|
import CopyTextBox from "@app/components/CopyTextBox";
|
||||||
import PermissionsSelectBox from "@app/components/PermissionsSelectBox";
|
import PermissionsSelectBox from "@app/components/PermissionsSelectBox";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const createFormSchema = z.object({
|
|
||||||
name: z
|
|
||||||
.string()
|
|
||||||
.min(2, {
|
|
||||||
message: "Name must be at least 2 characters."
|
|
||||||
})
|
|
||||||
.max(255, {
|
|
||||||
message: "Name must not be longer than 255 characters."
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
type CreateFormValues = z.infer<typeof createFormSchema>;
|
|
||||||
|
|
||||||
const copiedFormSchema = z
|
|
||||||
.object({
|
|
||||||
copied: z.boolean()
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
return data.copied;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "You must confirm that you have copied the API key.",
|
|
||||||
path: ["copied"]
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
type CopiedFormValues = z.infer<typeof copiedFormSchema>;
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const { orgId } = useParams();
|
const { orgId } = useParams();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loadingPage, setLoadingPage] = useState(true);
|
const [loadingPage, setLoadingPage] = useState(true);
|
||||||
const [createLoading, setCreateLoading] = useState(false);
|
const [createLoading, setCreateLoading] = useState(false);
|
||||||
|
|
@ -98,6 +71,35 @@ export default function Page() {
|
||||||
Record<string, boolean>
|
Record<string, boolean>
|
||||||
>({});
|
>({});
|
||||||
|
|
||||||
|
const createFormSchema = z.object({
|
||||||
|
name: z
|
||||||
|
.string()
|
||||||
|
.min(2, {
|
||||||
|
message: t('nameMin', {len: 2})
|
||||||
|
})
|
||||||
|
.max(255, {
|
||||||
|
message: t('nameMax', {len: 255})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
type CreateFormValues = z.infer<typeof createFormSchema>;
|
||||||
|
|
||||||
|
const copiedFormSchema = z
|
||||||
|
.object({
|
||||||
|
copied: z.boolean()
|
||||||
|
})
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
return data.copied;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t('apiKeysConfirmCopy2'),
|
||||||
|
path: ["copied"]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
type CopiedFormValues = z.infer<typeof copiedFormSchema>;
|
||||||
|
|
||||||
const form = useForm<CreateFormValues>({
|
const form = useForm<CreateFormValues>({
|
||||||
resolver: zodResolver(createFormSchema),
|
resolver: zodResolver(createFormSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -126,7 +128,7 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating API key",
|
title: t('apiKeysErrorCreate'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -147,10 +149,10 @@ export default function Page() {
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error setting permissions", e);
|
console.error(t('apiKeysErrorSetPermission'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error setting permissions",
|
title: t('apiKeysErrorSetPermission'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -189,8 +191,8 @@ export default function Page() {
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title="Generate API Key"
|
title={t('apiKeysCreate')}
|
||||||
description="Generate a new API key for your organization"
|
description={t('apiKeysCreateDescription')}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
@ -198,7 +200,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/api-keys`);
|
router.push(`/${orgId}/settings/api-keys`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See All API Keys
|
{t('apiKeysSeeAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -210,7 +212,7 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
API Key Information
|
{t('apiKeysTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -226,7 +228,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name
|
{t('name')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -247,10 +249,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Permissions
|
{t('apiKeysGeneralSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine what this API key can do
|
{t('apiKeysGeneralSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -269,14 +271,14 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Your API Key
|
{t('apiKeysList')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<InfoSections cols={2}>
|
<InfoSections cols={2}>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Name
|
{t('name')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
|
|
@ -286,7 +288,7 @@ export default function Page() {
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Created
|
{t('created')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{moment(
|
{moment(
|
||||||
|
|
@ -299,17 +301,15 @@ export default function Page() {
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Save Your API Key
|
{t('apiKeysSave')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
You will only be able to see this
|
{t('apiKeysSaveDescription')}
|
||||||
once. Make sure to copy it to a
|
|
||||||
secure place.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
|
||||||
<h4 className="font-semibold">
|
<h4 className="font-semibold">
|
||||||
Your API key is:
|
{t('apiKeysInfo')}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
|
|
@ -347,8 +347,7 @@ export default function Page() {
|
||||||
htmlFor="terms"
|
htmlFor="terms"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
I have copied
|
{t('apiKeysConfirmCopy')}
|
||||||
the API key
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|
@ -372,7 +371,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/api-keys`);
|
router.push(`/${orgId}/settings/api-keys`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{!apiKey && (
|
{!apiKey && (
|
||||||
|
|
@ -384,7 +383,7 @@ export default function Page() {
|
||||||
form.handleSubmit(onSubmit)();
|
form.handleSubmit(onSubmit)();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Generate
|
{t('generate')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -395,7 +394,7 @@ export default function Page() {
|
||||||
copiedForm.handleSubmit(onCopiedSubmit)();
|
copiedForm.handleSubmit(onCopiedSubmit)();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Done
|
{t('done')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { AxiosResponse } from "axios";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
import OrgApiKeysTable, { OrgApiKeyRow } from "./OrgApiKeysTable";
|
import OrgApiKeysTable, { OrgApiKeyRow } from "./OrgApiKeysTable";
|
||||||
import { ListOrgApiKeysResponse } from "@server/routers/apiKeys";
|
import { ListOrgApiKeysResponse } from "@server/routers/apiKeys";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
type ApiKeyPageProps = {
|
type ApiKeyPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -13,6 +14,8 @@ export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export default async function ApiKeysPage(props: ApiKeyPageProps) {
|
export default async function ApiKeysPage(props: ApiKeyPageProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
let apiKeys: ListOrgApiKeysResponse["apiKeys"] = [];
|
let apiKeys: ListOrgApiKeysResponse["apiKeys"] = [];
|
||||||
try {
|
try {
|
||||||
const res = await internal.get<AxiosResponse<ListOrgApiKeysResponse>>(
|
const res = await internal.get<AxiosResponse<ListOrgApiKeysResponse>>(
|
||||||
|
|
@ -34,8 +37,8 @@ export default async function ApiKeysPage(props: ApiKeyPageProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage API Keys"
|
title={t('apiKeysManage')}
|
||||||
description="API keys are used to authenticate with the integration API"
|
description={t('apiKeysDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<OrgApiKeysTable apiKeys={rows} orgId={params.orgId} />
|
<OrgApiKeysTable apiKeys={rows} orgId={params.orgId} />
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import { GetOrgUserResponse } from "@server/routers/user";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { cache } from "react";
|
import { cache } from "react";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
type GeneralSettingsProps = {
|
type GeneralSettingsProps = {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -57,9 +58,11 @@ export default async function GeneralSettingsPage({
|
||||||
redirect(`/${orgId}`);
|
redirect(`/${orgId}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "General",
|
title: t('general'),
|
||||||
href: `/{orgId}/settings/general`,
|
href: `/{orgId}/settings/general`,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
@ -69,8 +72,8 @@ export default async function GeneralSettingsPage({
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
<OrgUserProvider orgUser={orgUser}>
|
<OrgUserProvider orgUser={orgUser}>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="General"
|
title={t('general')}
|
||||||
description="Configure your organization's general settings"
|
description={t('orgSettingsDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<HorizontalTabs items={navItems}>
|
<HorizontalTabs items={navItems}>
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@ import {
|
||||||
SettingsSectionFooter
|
SettingsSectionFooter
|
||||||
} from "@app/components/Settings";
|
} from "@app/components/Settings";
|
||||||
import { useUserContext } from "@app/hooks/useUserContext";
|
import { useUserContext } from "@app/hooks/useUserContext";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
// Updated schema to include subnet field
|
// Updated schema to include subnet field
|
||||||
const GeneralFormSchema = z.object({
|
const GeneralFormSchema = z.object({
|
||||||
|
|
@ -51,6 +52,7 @@ export default function GeneralPage() {
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
const { user } = useUserContext();
|
const { user } = useUserContext();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loadingDelete, setLoadingDelete] = useState(false);
|
const [loadingDelete, setLoadingDelete] = useState(false);
|
||||||
const [loadingSave, setLoadingSave] = useState(false);
|
const [loadingSave, setLoadingSave] = useState(false);
|
||||||
|
|
@ -71,8 +73,8 @@ export default function GeneralPage() {
|
||||||
`/org/${org?.org.orgId}`
|
`/org/${org?.org.orgId}`
|
||||||
);
|
);
|
||||||
toast({
|
toast({
|
||||||
title: "Organization deleted",
|
title: t('orgDeleted'),
|
||||||
description: "The organization and its data has been deleted."
|
description: t('orgDeletedMessage')
|
||||||
});
|
});
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
pickNewOrgAndNavigate();
|
pickNewOrgAndNavigate();
|
||||||
|
|
@ -81,11 +83,8 @@ export default function GeneralPage() {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to delete org",
|
title: t('orgErrorDelete'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(err, t('orgErrorDeleteMessage'))
|
||||||
err,
|
|
||||||
"An error occurred while deleting the org."
|
|
||||||
)
|
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
setLoadingDelete(false);
|
setLoadingDelete(false);
|
||||||
|
|
@ -112,11 +111,8 @@ export default function GeneralPage() {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch orgs",
|
title: t('orgErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(err, t('orgErrorFetchMessage'))
|
||||||
err,
|
|
||||||
"An error occurred while listing your orgs"
|
|
||||||
)
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -130,19 +126,16 @@ export default function GeneralPage() {
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast({
|
toast({
|
||||||
title: "Organization updated",
|
title: t('orgUpdated'),
|
||||||
description: "The organization has been updated."
|
description: t('orgUpdatedDescription')
|
||||||
});
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update org",
|
title: t('orgErrorUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(e, t('orgErrorUpdateMessage'))
|
||||||
e,
|
|
||||||
"An error occurred while updating the org."
|
|
||||||
)
|
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
|
@ -160,30 +153,28 @@ export default function GeneralPage() {
|
||||||
dialog={
|
dialog={
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-2">
|
<p className="mb-2">
|
||||||
Are you sure you want to delete the organization{" "}
|
{t('orgQuestionRemove', {selectedOrg: org?.org.name})}
|
||||||
<b>{org?.org.name}?</b>
|
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-2">
|
<p className="mb-2">
|
||||||
This action is irreversible and will delete all
|
{t('orgMessageRemove')}
|
||||||
associated data.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To confirm, type the name of the organization below.
|
{t('orgMessageConfirm')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete Organization"
|
buttonText={t('orgDeleteConfirm')}
|
||||||
onConfirm={deleteOrg}
|
onConfirm={deleteOrg}
|
||||||
string={org?.org.name || ""}
|
string={org?.org.name || ""}
|
||||||
title="Delete Organization"
|
title={t('orgDelete')}
|
||||||
/>
|
/>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Organization Settings
|
{t('orgGeneralSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Manage your organization details and configuration
|
{t('orgGeneralSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -199,14 +190,13 @@ export default function GeneralPage() {
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>{t('name')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This is the display name of the
|
{t('orgDisplayName')}
|
||||||
organization.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -242,16 +232,15 @@ export default function GeneralPage() {
|
||||||
loading={loadingSave}
|
loading={loadingSave}
|
||||||
disabled={loadingSave}
|
disabled={loadingSave}
|
||||||
>
|
>
|
||||||
Save General Settings
|
{t('saveGeneralSettings')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>Danger Zone</SettingsSectionTitle>
|
<SettingsSectionTitle>{t('orgDangerZone')}</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Once you delete this org, there is no going back. Please
|
{t('orgDangerZoneDescription')}
|
||||||
be certain.
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionFooter>
|
<SettingsSectionFooter>
|
||||||
|
|
@ -262,7 +251,7 @@ export default function GeneralPage() {
|
||||||
loading={loadingDelete}
|
loading={loadingDelete}
|
||||||
disabled={loadingDelete}
|
disabled={loadingDelete}
|
||||||
>
|
>
|
||||||
Delete Organization Data
|
{t('orgDelete')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import UserProvider from "@app/providers/UserProvider";
|
||||||
import { Layout } from "@app/components/Layout";
|
import { Layout } from "@app/components/Layout";
|
||||||
import { SidebarNavItem, SidebarNavProps } from "@app/components/SidebarNav";
|
import { SidebarNavItem, SidebarNavProps } from "@app/components/SidebarNav";
|
||||||
import { orgNavItems } from "@app/app/navigation";
|
import { orgNavItems } from "@app/app/navigation";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
|
@ -79,6 +80,8 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
|
|
||||||
const cookie = await authCookieHeader();
|
const cookie = await authCookieHeader();
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const getOrgUser = cache(() =>
|
const getOrgUser = cache(() =>
|
||||||
internal.get<AxiosResponse<GetOrgUserResponse>>(
|
internal.get<AxiosResponse<GetOrgUserResponse>>(
|
||||||
|
|
@ -89,7 +92,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
const orgUser = await getOrgUser();
|
const orgUser = await getOrgUser();
|
||||||
|
|
||||||
if (!orgUser.data.data.isAdmin && !orgUser.data.data.isOwner) {
|
if (!orgUser.data.data.isAdmin && !orgUser.data.data.isOwner) {
|
||||||
throw new Error("User is not an admin or owner");
|
throw new Error(t('userErrorNotAdminOrOwner'));
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
redirect(`/${params.orgId}`);
|
redirect(`/${params.orgId}`);
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,15 +15,18 @@ export function ResourcesDataTable<TData, TValue>({
|
||||||
data,
|
data,
|
||||||
createResource
|
createResource
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Resources"
|
title={t('resources')}
|
||||||
searchPlaceholder="Search resources..."
|
searchPlaceholder={t('resourcesSearch')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
onAdd={createResource}
|
onAdd={createResource}
|
||||||
addButtonText="Add Resource"
|
addButtonText={t('resourceAdd')}
|
||||||
defaultSort={{
|
defaultSort={{
|
||||||
id: "name",
|
id: "name",
|
||||||
desc: false
|
desc: false
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
|
||||||
import { Server, Lock, Key, Users, X, ArrowRight } from "lucide-react"; // Replace with actual imports
|
import { Server, Lock, Key, Users, X, ArrowRight } from "lucide-react"; // Replace with actual imports
|
||||||
import { Card, CardContent } from "@app/components/ui/card";
|
import { Card, CardContent } from "@app/components/ui/card";
|
||||||
import { Button } from "@app/components/ui/button";
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export const ResourcesSplashCard = () => {
|
export const ResourcesSplashCard = () => {
|
||||||
const [isDismissed, setIsDismissed] = useState(false);
|
const [isDismissed, setIsDismissed] = useState(false);
|
||||||
|
|
@ -22,6 +23,8 @@ export const ResourcesSplashCard = () => {
|
||||||
localStorage.setItem(key, "true");
|
localStorage.setItem(key, "true");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
if (isDismissed) {
|
if (isDismissed) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -31,7 +34,7 @@ export const ResourcesSplashCard = () => {
|
||||||
<button
|
<button
|
||||||
onClick={handleDismiss}
|
onClick={handleDismiss}
|
||||||
className="absolute top-2 right-2 p-2"
|
className="absolute top-2 right-2 p-2"
|
||||||
aria-label="Dismiss"
|
aria-label={t('dismiss')}
|
||||||
>
|
>
|
||||||
<X className="w-5 h-5" />
|
<X className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -39,24 +42,23 @@ export const ResourcesSplashCard = () => {
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-xl font-semibold flex items-center gap-2">
|
<h3 className="text-xl font-semibold flex items-center gap-2">
|
||||||
<Server className="text-blue-500" />
|
<Server className="text-blue-500" />
|
||||||
Resources
|
{t('resources')}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm">
|
<p className="text-sm">
|
||||||
Resources are proxies to applications running on your private network. Create a resource for any HTTP/HTTPS or raw TCP/UDP service on your private network.
|
{t('resourcesDescription')}
|
||||||
Each resource must be connected to a site to enable private, secure connectivity through an encrypted WireGuard tunnel.
|
|
||||||
</p>
|
</p>
|
||||||
<ul className="text-sm text-muted-foreground space-y-2">
|
<ul className="text-sm text-muted-foreground space-y-2">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Lock className="text-green-500 w-4 h-4" />
|
<Lock className="text-green-500 w-4 h-4" />
|
||||||
Secure connectivity with WireGuard encryption
|
{t('resourcesWireGuardConnect')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Key className="text-yellow-500 w-4 h-4" />
|
<Key className="text-yellow-500 w-4 h-4" />
|
||||||
Configure multiple authentication methods
|
{t('resourcesMultipleAuthenticationMethods')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Users className="text-purple-500 w-4 h-4" />
|
<Users className="text-purple-500 w-4 h-4" />
|
||||||
User and role-based access control
|
{t('resourcesUsersRolesAccess')}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
import { Switch } from "@app/components/ui/switch";
|
import { Switch } from "@app/components/ui/switch";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { UpdateResourceResponse } from "@server/routers/resource";
|
import { UpdateResourceResponse } from "@server/routers/resource";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
export type ResourceRow = {
|
export type ResourceRow = {
|
||||||
id: number;
|
id: number;
|
||||||
|
|
@ -53,6 +54,7 @@ type ResourcesTableProps = {
|
||||||
|
|
||||||
export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
|
|
@ -63,11 +65,11 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
const deleteResource = (resourceId: number) => {
|
const deleteResource = (resourceId: number) => {
|
||||||
api.delete(`/resource/${resourceId}`)
|
api.delete(`/resource/${resourceId}`)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error deleting resource", e);
|
console.error(t('resourceErrorDelte'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error deleting resource",
|
title: t('resourceErrorDelte'),
|
||||||
description: formatAxiosError(e, "Error deleting resource")
|
description: formatAxiosError(e, t('resourceErrorDelte'))
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
@ -87,11 +89,8 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to toggle resource",
|
title: t('resourcesErrorUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(e, t('resourcesErrorUpdateDescription'))
|
||||||
e,
|
|
||||||
"An error occurred while updating the resource"
|
|
||||||
)
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -108,7 +107,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
<span className="sr-only">Open menu</span>
|
<span className="sr-only">{t('openMenu')}</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
@ -118,7 +117,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
|
href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
|
||||||
>
|
>
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
View settings
|
{t('viewSettings')}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
|
|
@ -127,7 +126,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">Delete</span>
|
<span className="text-red-500">{t('delete')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
@ -144,7 +143,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -160,7 +159,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Site
|
{t('site')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -181,7 +180,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "protocol",
|
accessorKey: "protocol",
|
||||||
header: "Protocol",
|
header: t('protocol'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const resourceRow = row.original;
|
const resourceRow = row.original;
|
||||||
return <span>{resourceRow.protocol.toUpperCase()}</span>;
|
return <span>{resourceRow.protocol.toUpperCase()}</span>;
|
||||||
|
|
@ -189,7 +188,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "domain",
|
accessorKey: "domain",
|
||||||
header: "Access",
|
header: t('access'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const resourceRow = row.original;
|
const resourceRow = row.original;
|
||||||
return (
|
return (
|
||||||
|
|
@ -219,7 +218,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Authentication
|
{t('authentication')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -231,12 +230,12 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
{resourceRow.authState === "protected" ? (
|
{resourceRow.authState === "protected" ? (
|
||||||
<span className="text-green-500 flex items-center space-x-2">
|
<span className="text-green-500 flex items-center space-x-2">
|
||||||
<ShieldCheck className="w-4 h-4" />
|
<ShieldCheck className="w-4 h-4" />
|
||||||
<span>Protected</span>
|
<span>{t('protected')}</span>
|
||||||
</span>
|
</span>
|
||||||
) : resourceRow.authState === "not_protected" ? (
|
) : resourceRow.authState === "not_protected" ? (
|
||||||
<span className="text-yellow-500 flex items-center space-x-2">
|
<span className="text-yellow-500 flex items-center space-x-2">
|
||||||
<ShieldOff className="w-4 h-4" />
|
<ShieldOff className="w-4 h-4" />
|
||||||
<span>Not Protected</span>
|
<span>{t('notProtected')}</span>
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span>-</span>
|
<span>-</span>
|
||||||
|
|
@ -247,7 +246,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "enabled",
|
accessorKey: "enabled",
|
||||||
header: "Enabled",
|
header: t('enabled'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Switch
|
<Switch
|
||||||
defaultChecked={row.original.enabled}
|
defaultChecked={row.original.enabled}
|
||||||
|
|
@ -267,7 +266,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
|
href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
|
||||||
>
|
>
|
||||||
<Button variant={"outlinePrimary"} className="ml-2">
|
<Button variant={"outlinePrimary"} className="ml-2">
|
||||||
Edit
|
{t('edit')}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -289,30 +288,22 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
|
||||||
dialog={
|
dialog={
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-2">
|
<p className="mb-2">
|
||||||
Are you sure you want to remove the resource{" "}
|
{t('resourceQuestionRemove', {selectedResource: selectedResource?.name || selectedResource?.id})}
|
||||||
<b>
|
|
||||||
{selectedResource?.name ||
|
|
||||||
selectedResource?.id}
|
|
||||||
</b>{" "}
|
|
||||||
from the organization?
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="mb-2">
|
<p className="mb-2">
|
||||||
Once removed, the resource will no longer be
|
{t('resourceMessageRemove')}
|
||||||
accessible. All targets attached to the resource
|
|
||||||
will be removed.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the resource
|
{t('resourceMessageConfirm')}
|
||||||
below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete Resource"
|
buttonText={t('resourceDeleteConfirm')}
|
||||||
onConfirm={async () => deleteResource(selectedResource!.id)}
|
onConfirm={async () => deleteResource(selectedResource!.id)}
|
||||||
string={selectedResource.name}
|
string={selectedResource.name}
|
||||||
title="Delete Resource"
|
title={t('resourceDelete')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import {
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import { useDockerSocket } from "@app/hooks/useDockerSocket";
|
import { useDockerSocket } from "@app/hooks/useDockerSocket";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type ResourceInfoBoxType = {};
|
type ResourceInfoBoxType = {};
|
||||||
|
|
||||||
|
|
@ -21,6 +22,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
const { isEnabled, isAvailable } = useDockerSocket(site!);
|
const { isEnabled, isAvailable } = useDockerSocket(site!);
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
let fullUrl = `${resource.ssl ? "https" : "http"}://${resource.fullDomain}`;
|
let fullUrl = `${resource.ssl ? "https" : "http"}://${resource.fullDomain}`;
|
||||||
|
|
||||||
|
|
@ -28,7 +30,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
<Alert>
|
<Alert>
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Resource Information
|
{t('resourceInfo')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription className="mt-4">
|
<AlertDescription className="mt-4">
|
||||||
<InfoSections cols={4}>
|
<InfoSections cols={4}>
|
||||||
|
|
@ -36,7 +38,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
<>
|
<>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Authentication
|
{t('authentication')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{authInfo.password ||
|
{authInfo.password ||
|
||||||
|
|
@ -45,12 +47,12 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
authInfo.whitelist ? (
|
authInfo.whitelist ? (
|
||||||
<div className="flex items-start space-x-2 text-green-500">
|
<div className="flex items-start space-x-2 text-green-500">
|
||||||
<ShieldCheck className="w-4 h-4 mt-0.5" />
|
<ShieldCheck className="w-4 h-4 mt-0.5" />
|
||||||
<span>Protected</span>
|
<span>{t('protected')}</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center space-x-2 text-yellow-500">
|
<div className="flex items-center space-x-2 text-yellow-500">
|
||||||
<ShieldOff className="w-4 h-4" />
|
<ShieldOff className="w-4 h-4" />
|
||||||
<span>Not Protected</span>
|
<span>{t('notProtected')}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
|
|
@ -65,7 +67,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Site</InfoSectionTitle>
|
<InfoSectionTitle>{t('site')}</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{resource.siteName}
|
{resource.siteName}
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
|
|
@ -92,7 +94,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Protocol</InfoSectionTitle>
|
<InfoSectionTitle>{t('protocol')}</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<span>
|
<span>
|
||||||
{resource.protocol.toUpperCase()}
|
{resource.protocol.toUpperCase()}
|
||||||
|
|
@ -100,7 +102,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Port</InfoSectionTitle>
|
<InfoSectionTitle>{t('port')}</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
text={resource.proxyPort!.toString()}
|
text={resource.proxyPort!.toString()}
|
||||||
|
|
@ -111,10 +113,10 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Visibility</InfoSectionTitle>
|
<InfoSectionTitle>{t('visibility')}</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<span>
|
<span>
|
||||||
{resource.enabled ? "Enabled" : "Disabled"}
|
{resource.enabled ? t('enabled') : t('disabled')}
|
||||||
</span>
|
</span>
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ import { AxiosResponse } from "axios";
|
||||||
import { Resource } from "@server/db";
|
import { Resource } from "@server/db";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
const setPasswordFormSchema = z.object({
|
const setPasswordFormSchema = z.object({
|
||||||
password: z.string().min(4).max(100)
|
password: z.string().min(4).max(100)
|
||||||
|
|
@ -56,6 +57,7 @@ export default function SetResourcePasswordForm({
|
||||||
onSetPassword
|
onSetPassword
|
||||||
}: SetPasswordFormProps) {
|
}: SetPasswordFormProps) {
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
|
@ -81,18 +83,17 @@ export default function SetResourcePasswordForm({
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error setting resource password",
|
title: t('resourceErrorPasswordSetup'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while setting the resource password"
|
t('resourceErrorPasswordSetupDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast({
|
toast({
|
||||||
title: "Resource password set",
|
title: t('resourcePasswordSetup'),
|
||||||
description:
|
description: t('resourcePasswordSetupDescription')
|
||||||
"The resource password has been set successfully"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (onSetPassword) {
|
if (onSetPassword) {
|
||||||
|
|
@ -114,9 +115,9 @@ export default function SetResourcePasswordForm({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Set Password</CredenzaTitle>
|
<CredenzaTitle>{t('resourcePasswordSetupTitle')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Set a password to protect this resource
|
{t('resourcePasswordSetupTitleDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -131,7 +132,7 @@ export default function SetResourcePasswordForm({
|
||||||
name="password"
|
name="password"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Password</FormLabel>
|
<FormLabel>{t('password')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
|
|
@ -148,7 +149,7 @@ export default function SetResourcePasswordForm({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -156,7 +157,7 @@ export default function SetResourcePasswordForm({
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Enable Password Protection
|
{t('resourcePasswordSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@ import {
|
||||||
} from "@app/components/ui/input-otp";
|
} from "@app/components/ui/input-otp";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
const setPincodeFormSchema = z.object({
|
const setPincodeFormSchema = z.object({
|
||||||
pincode: z.string().length(6)
|
pincode: z.string().length(6)
|
||||||
|
|
@ -69,6 +70,8 @@ export default function SetResourcePincodeForm({
|
||||||
defaultValues
|
defaultValues
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -86,18 +89,17 @@ export default function SetResourcePincodeForm({
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error setting resource PIN code",
|
title: t('resourceErrorPincodeSetup'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while setting the resource PIN code"
|
t('resourceErrorPincodeSetupDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast({
|
toast({
|
||||||
title: "Resource PIN code set",
|
title: t('resourcePincodeSetup'),
|
||||||
description:
|
description: t('resourcePincodeSetupDescription')
|
||||||
"The resource pincode has been set successfully"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (onSetPincode) {
|
if (onSetPincode) {
|
||||||
|
|
@ -119,9 +121,9 @@ export default function SetResourcePincodeForm({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Set Pincode</CredenzaTitle>
|
<CredenzaTitle>{t('resourcePincodeSetupTitle')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Set a pincode to protect this resource
|
{t('resourcePincodeSetupTitleDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -136,7 +138,7 @@ export default function SetResourcePincodeForm({
|
||||||
name="pincode"
|
name="pincode"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>PIN Code</FormLabel>
|
<FormLabel>{t('resourcePincode')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<InputOTP
|
<InputOTP
|
||||||
|
|
@ -182,7 +184,7 @@ export default function SetResourcePincodeForm({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -190,7 +192,7 @@ export default function SetResourcePincodeForm({
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Enable PIN Code Protection
|
{t('resourcePincodeSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@ import { useRouter } from "next/navigation";
|
||||||
import { UserType } from "@server/types/UserTypes";
|
import { UserType } from "@server/types/UserTypes";
|
||||||
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||||
import { InfoIcon } from "lucide-react";
|
import { InfoIcon } from "lucide-react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
const UsersRolesFormSchema = z.object({
|
const UsersRolesFormSchema = z.object({
|
||||||
roles: z.array(
|
roles: z.array(
|
||||||
|
|
@ -82,6 +83,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
|
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [pageLoading, setPageLoading] = useState(true);
|
const [pageLoading, setPageLoading] = useState(true);
|
||||||
|
|
||||||
|
|
@ -203,10 +205,10 @@ export default function ResourceAuthenticationPage() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch data",
|
title: t('resourceErrorAuthFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while fetching the data"
|
t('resourceErrorAuthFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -233,18 +235,18 @@ export default function ResourceAuthenticationPage() {
|
||||||
});
|
});
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Saved successfully",
|
title: t('resourceWhitelistSave'),
|
||||||
description: "Whitelist settings have been saved"
|
description: t('resourceWhitelistSaveDescription')
|
||||||
});
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to save whitelist",
|
title: t('resourceErrorWhitelistSave'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while saving the whitelist"
|
t('resourceErrorWhitelistSaveDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -281,18 +283,18 @@ export default function ResourceAuthenticationPage() {
|
||||||
});
|
});
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Saved successfully",
|
title: t('resourceAuthSettingsSave'),
|
||||||
description: "Authentication settings have been saved"
|
description: t('resourceAuthSettingsSaveDescription')
|
||||||
});
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to set roles",
|
title: t('resourceErrorUsersRolesSave'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while setting the roles"
|
t('resourceErrorUsersRolesSaveDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -308,9 +310,8 @@ export default function ResourceAuthenticationPage() {
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast({
|
toast({
|
||||||
title: "Resource password removed",
|
title: t('resourcePasswordRemove'),
|
||||||
description:
|
description: t('resourcePasswordRemoveDescription')
|
||||||
"The resource password has been removed successfully"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
updateAuthInfo({
|
updateAuthInfo({
|
||||||
|
|
@ -321,10 +322,10 @@ export default function ResourceAuthenticationPage() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error removing resource password",
|
title: t('resourceErrorPasswordRemove'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while removing the resource password"
|
t('resourceErrorPasswordRemoveDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
@ -339,9 +340,8 @@ export default function ResourceAuthenticationPage() {
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toast({
|
toast({
|
||||||
title: "Resource pincode removed",
|
title: t('resourcePincodeRemove'),
|
||||||
description:
|
description: t('resourcePincodeRemoveDescription')
|
||||||
"The resource password has been removed successfully"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
updateAuthInfo({
|
updateAuthInfo({
|
||||||
|
|
@ -352,10 +352,10 @@ export default function ResourceAuthenticationPage() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error removing resource pincode",
|
title: t('resourceErrorPincodeRemove'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while removing the resource pincode"
|
t('resourceErrorPincodeRemoveDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
@ -400,18 +400,17 @@ export default function ResourceAuthenticationPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Users & Roles
|
{t('resourceUsersRoles')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure which users and roles can visit this
|
{t('resourceUsersRolesDescription')}
|
||||||
resource
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="sso-toggle"
|
id="sso-toggle"
|
||||||
label="Use Platform SSO"
|
label={t('ssoUse')}
|
||||||
description="Existing users will only have to log in once for all resources that have this enabled."
|
description={t('ssoUseDescription')}
|
||||||
defaultChecked={resource.sso}
|
defaultChecked={resource.sso}
|
||||||
onCheckedChange={(val) => setSsoEnabled(val)}
|
onCheckedChange={(val) => setSsoEnabled(val)}
|
||||||
/>
|
/>
|
||||||
|
|
@ -431,7 +430,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
name="roles"
|
name="roles"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-col items-start">
|
<FormItem className="flex flex-col items-start">
|
||||||
<FormLabel>Roles</FormLabel>
|
<FormLabel>{t('roles')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<TagInput
|
<TagInput
|
||||||
{...field}
|
{...field}
|
||||||
|
|
@ -441,7 +440,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
setActiveTagIndex={
|
setActiveTagIndex={
|
||||||
setActiveRolesTagIndex
|
setActiveRolesTagIndex
|
||||||
}
|
}
|
||||||
placeholder="Select a role"
|
placeholder={t('accessRoleSelect2')}
|
||||||
size="sm"
|
size="sm"
|
||||||
tags={
|
tags={
|
||||||
usersRolesForm.getValues()
|
usersRolesForm.getValues()
|
||||||
|
|
@ -475,8 +474,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Admins can always access
|
{t('resourceRoleDescription')}
|
||||||
this resource.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -486,7 +484,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
name="users"
|
name="users"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-col items-start">
|
<FormItem className="flex flex-col items-start">
|
||||||
<FormLabel>Users</FormLabel>
|
<FormLabel>{t('users')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<TagInput
|
<TagInput
|
||||||
{...field}
|
{...field}
|
||||||
|
|
@ -496,7 +494,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
setActiveTagIndex={
|
setActiveTagIndex={
|
||||||
setActiveUsersTagIndex
|
setActiveUsersTagIndex
|
||||||
}
|
}
|
||||||
placeholder="Select a user"
|
placeholder={t('accessUserSelect')}
|
||||||
tags={
|
tags={
|
||||||
usersRolesForm.getValues()
|
usersRolesForm.getValues()
|
||||||
.users
|
.users
|
||||||
|
|
@ -544,7 +542,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
disabled={loadingSaveUsersRoles}
|
disabled={loadingSaveUsersRoles}
|
||||||
form="users-roles-form"
|
form="users-roles-form"
|
||||||
>
|
>
|
||||||
Save Users & Roles
|
{t('resourceUsersRolesSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
@ -552,11 +550,10 @@ export default function ResourceAuthenticationPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Authentication Methods
|
{t('resourceAuthMethods')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Allow access to the resource via additional auth
|
{t('resourceAuthMethodsDescriptions')}
|
||||||
methods
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -567,8 +564,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
>
|
>
|
||||||
<Key />
|
<Key />
|
||||||
<span>
|
<span>
|
||||||
Password Protection{" "}
|
{t('resourcePasswordProtection', {status: authInfo.password? t('enabled') : t('disabled')})}
|
||||||
{authInfo.password ? "Enabled" : "Disabled"}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -581,8 +577,8 @@ export default function ResourceAuthenticationPage() {
|
||||||
loading={loadingRemoveResourcePassword}
|
loading={loadingRemoveResourcePassword}
|
||||||
>
|
>
|
||||||
{authInfo.password
|
{authInfo.password
|
||||||
? "Remove Password"
|
? t('passwordRemove')
|
||||||
: "Add Password"}
|
: t('passwordAdd')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -593,8 +589,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
>
|
>
|
||||||
<Binary />
|
<Binary />
|
||||||
<span>
|
<span>
|
||||||
PIN Code Protection{" "}
|
{t('resourcePincodeProtection', {status: authInfo.pincode ? t('enabled') : t('disabled')})}
|
||||||
{authInfo.pincode ? "Enabled" : "Disabled"}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -607,8 +602,8 @@ export default function ResourceAuthenticationPage() {
|
||||||
loading={loadingRemoveResourcePincode}
|
loading={loadingRemoveResourcePincode}
|
||||||
>
|
>
|
||||||
{authInfo.pincode
|
{authInfo.pincode
|
||||||
? "Remove PIN Code"
|
? t('pincodeRemove')
|
||||||
: "Add PIN Code"}
|
: t('pincodeAdd')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
@ -617,11 +612,10 @@ export default function ResourceAuthenticationPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
One-time Passwords
|
{t('otpEmailTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Require email-based authentication for resource
|
{t('otpEmailTitleDescription')}
|
||||||
access
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -629,16 +623,16 @@ export default function ResourceAuthenticationPage() {
|
||||||
<Alert variant="neutral" className="mb-4">
|
<Alert variant="neutral" className="mb-4">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
SMTP Required
|
{t('otpEmailSmtpRequired')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
SMTP must be enabled on the server to use one-time password authentication.
|
{t('otpEmailSmtpRequiredDescription')}
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="whitelist-toggle"
|
id="whitelist-toggle"
|
||||||
label="Email Whitelist"
|
label={t('otpEmailWhitelist')}
|
||||||
defaultChecked={resource.emailWhitelistEnabled}
|
defaultChecked={resource.emailWhitelistEnabled}
|
||||||
onCheckedChange={setWhitelistEnabled}
|
onCheckedChange={setWhitelistEnabled}
|
||||||
disabled={!env.email.emailEnabled}
|
disabled={!env.email.emailEnabled}
|
||||||
|
|
@ -654,8 +648,8 @@ export default function ResourceAuthenticationPage() {
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
<InfoPopup
|
<InfoPopup
|
||||||
text="Whitelisted Emails"
|
text={t('otpEmailWhitelistList')}
|
||||||
info="Only users with these email addresses will be able to access this resource. They will be prompted to enter a one-time password sent to their email. Wildcards (*@example.com) can be used to allow any email address from a domain."
|
info={t('otpEmailWhitelistListDescription')}
|
||||||
/>
|
/>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
|
|
@ -678,8 +672,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
.regex(
|
.regex(
|
||||||
/^\*@[\w.-]+\.[a-zA-Z]{2,}$/,
|
/^\*@[\w.-]+\.[a-zA-Z]{2,}$/,
|
||||||
{
|
{
|
||||||
message:
|
message: t('otpEmailErrorInvalid')
|
||||||
"Invalid email address. Wildcard (*) must be the entire local part."
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
@ -690,7 +683,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
setActiveTagIndex={
|
setActiveTagIndex={
|
||||||
setActiveEmailTagIndex
|
setActiveEmailTagIndex
|
||||||
}
|
}
|
||||||
placeholder="Enter an email"
|
placeholder={t('otpEmailEnter')}
|
||||||
tags={
|
tags={
|
||||||
whitelistForm.getValues()
|
whitelistForm.getValues()
|
||||||
.emails
|
.emails
|
||||||
|
|
@ -713,9 +706,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Press enter to add an
|
{t('otpEmailEnterDescription')}
|
||||||
email after typing it in
|
|
||||||
the input field.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -731,7 +722,7 @@ export default function ResourceAuthenticationPage() {
|
||||||
loading={loadingSaveWhitelist}
|
loading={loadingSaveWhitelist}
|
||||||
disabled={loadingSaveWhitelist}
|
disabled={loadingSaveWhitelist}
|
||||||
>
|
>
|
||||||
Save Whitelist
|
{t('otpEmailWhitelistSave')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
|
||||||
|
|
@ -65,51 +65,12 @@ import {
|
||||||
updateResourceRule
|
updateResourceRule
|
||||||
} from "@server/routers/resource";
|
} from "@server/routers/resource";
|
||||||
import { SwitchInput } from "@app/components/SwitchInput";
|
import { SwitchInput } from "@app/components/SwitchInput";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const GeneralFormSchema = z
|
|
||||||
.object({
|
|
||||||
subdomain: z.string().optional(),
|
|
||||||
name: z.string().min(1).max(255),
|
|
||||||
proxyPort: z.number().optional(),
|
|
||||||
http: z.boolean(),
|
|
||||||
isBaseDomain: z.boolean().optional(),
|
|
||||||
domainId: z.string().optional()
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
if (!data.http) {
|
|
||||||
return z
|
|
||||||
.number()
|
|
||||||
.int()
|
|
||||||
.min(1)
|
|
||||||
.max(65535)
|
|
||||||
.safeParse(data.proxyPort).success;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Invalid port number",
|
|
||||||
path: ["proxyPort"]
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
if (data.http && !data.isBaseDomain) {
|
|
||||||
return subdomainSchema.safeParse(data.subdomain).success;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Invalid subdomain",
|
|
||||||
path: ["subdomain"]
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const TransferFormSchema = z.object({
|
const TransferFormSchema = z.object({
|
||||||
siteId: z.number()
|
siteId: z.number()
|
||||||
});
|
});
|
||||||
|
|
||||||
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
|
||||||
type TransferFormValues = z.infer<typeof TransferFormSchema>;
|
type TransferFormValues = z.infer<typeof TransferFormSchema>;
|
||||||
|
|
||||||
export default function GeneralForm() {
|
export default function GeneralForm() {
|
||||||
|
|
@ -118,6 +79,7 @@ export default function GeneralForm() {
|
||||||
const { resource, updateResource } = useResourceContext();
|
const { resource, updateResource } = useResourceContext();
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
|
|
||||||
|
|
@ -138,6 +100,47 @@ export default function GeneralForm() {
|
||||||
resource.isBaseDomain ? "basedomain" : "subdomain"
|
resource.isBaseDomain ? "basedomain" : "subdomain"
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const GeneralFormSchema = z
|
||||||
|
.object({
|
||||||
|
subdomain: z.string().optional(),
|
||||||
|
name: z.string().min(1).max(255),
|
||||||
|
proxyPort: z.number().optional(),
|
||||||
|
http: z.boolean(),
|
||||||
|
isBaseDomain: z.boolean().optional(),
|
||||||
|
domainId: z.string().optional()
|
||||||
|
})
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
if (!data.http) {
|
||||||
|
return z
|
||||||
|
.number()
|
||||||
|
.int()
|
||||||
|
.min(1)
|
||||||
|
.max(65535)
|
||||||
|
.safeParse(data.proxyPort).success;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t("proxyErrorInvalidPort"),
|
||||||
|
path: ["proxyPort"]
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
if (data.http && !data.isBaseDomain) {
|
||||||
|
return subdomainSchema.safeParse(data.subdomain).success;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t("subdomainErrorInvalid"),
|
||||||
|
path: ["subdomain"]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
||||||
|
|
||||||
const form = useForm<GeneralFormValues>({
|
const form = useForm<GeneralFormValues>({
|
||||||
resolver: zodResolver(GeneralFormSchema),
|
resolver: zodResolver(GeneralFormSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -174,10 +177,10 @@ export default function GeneralForm() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error fetching domains",
|
title: t("domainErrorFetch"),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred when fetching the domains"
|
t("domainErrorFetchDescription")
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -216,18 +219,18 @@ export default function GeneralForm() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update resource",
|
title: t("resourceErrorUpdate"),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while updating the resource"
|
t("resourceErrorUpdateDescription")
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res && res.status === 200) {
|
if (res && res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
title: "Resource updated",
|
title: t("resourceUpdated"),
|
||||||
description: "The resource has been updated successfully"
|
description: t("resourceUpdatedDescription")
|
||||||
});
|
});
|
||||||
|
|
||||||
const resource = res.data.data;
|
const resource = res.data.data;
|
||||||
|
|
@ -255,18 +258,18 @@ export default function GeneralForm() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to transfer resource",
|
title: t("resourceErrorTransfer"),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while transferring the resource"
|
t("resourceErrorTransferDescription")
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res && res.status === 200) {
|
if (res && res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
title: "Resource transferred",
|
title: t("resourceTransferred"),
|
||||||
description: "The resource has been transferred successfully"
|
description: t("resourceTransferredDescription")
|
||||||
});
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
|
|
||||||
|
|
@ -290,10 +293,10 @@ export default function GeneralForm() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to toggle resource",
|
title: t("resourceErrorToggle"),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while updating the resource"
|
t("resourceErrorToggleDescription")
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -308,15 +311,17 @@ export default function GeneralForm() {
|
||||||
<SettingsContainer>
|
<SettingsContainer>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>Visibility</SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
|
{t("resourceVisibilityTitle")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Completely enable or disable resource visibility
|
{t("resourceVisibilityTitleDescription")}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="enable-resource"
|
id="enable-resource"
|
||||||
label="Enable Resource"
|
label={t("resourceEnable")}
|
||||||
defaultChecked={resource.enabled}
|
defaultChecked={resource.enabled}
|
||||||
onCheckedChange={async (val) => {
|
onCheckedChange={async (val) => {
|
||||||
await toggleResourceEnabled(val);
|
await toggleResourceEnabled(val);
|
||||||
|
|
@ -328,10 +333,10 @@ export default function GeneralForm() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
General Settings
|
{t("resourceGeneral")}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure the general settings for this resource
|
{t("resourceGeneralDescription")}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
|
@ -348,7 +353,9 @@ export default function GeneralForm() {
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>
|
||||||
|
{t("name")}
|
||||||
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -367,7 +374,9 @@ export default function GeneralForm() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Domain Type
|
{t(
|
||||||
|
"domainType"
|
||||||
|
)}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
value={
|
value={
|
||||||
|
|
@ -398,11 +407,14 @@ export default function GeneralForm() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="subdomain">
|
<SelectItem value="subdomain">
|
||||||
Subdomain
|
{t(
|
||||||
|
"subdomain"
|
||||||
|
)}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="basedomain">
|
<SelectItem value="basedomain">
|
||||||
Base
|
{t(
|
||||||
Domain
|
"baseDomain"
|
||||||
|
)}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
@ -416,7 +428,7 @@ export default function GeneralForm() {
|
||||||
{domainType === "subdomain" ? (
|
{domainType === "subdomain" ? (
|
||||||
<div className="w-fill space-y-2">
|
<div className="w-fill space-y-2">
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Subdomain
|
{t("subdomain")}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<div className="w-1/2">
|
<div className="w-1/2">
|
||||||
|
|
@ -502,7 +514,9 @@ export default function GeneralForm() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Base Domain
|
{t(
|
||||||
|
"baseDomain"
|
||||||
|
)}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
|
|
@ -556,7 +570,9 @@ export default function GeneralForm() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Port Number
|
{t(
|
||||||
|
"resourcePortNumber"
|
||||||
|
)}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -596,7 +612,7 @@ export default function GeneralForm() {
|
||||||
disabled={saveLoading}
|
disabled={saveLoading}
|
||||||
form="general-settings-form"
|
form="general-settings-form"
|
||||||
>
|
>
|
||||||
Save General Settings
|
{t("saveGeneralSettings")}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
@ -604,10 +620,10 @@ export default function GeneralForm() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Transfer Resource
|
{t("resourceTransfer")}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Transfer this resource to a different site
|
{t("resourceTransferDescription")}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
|
@ -627,7 +643,7 @@ export default function GeneralForm() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Destination Site
|
{t("siteDestination")}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Popover
|
<Popover
|
||||||
open={open}
|
open={open}
|
||||||
|
|
@ -652,16 +668,24 @@ export default function GeneralForm() {
|
||||||
site.siteId ===
|
site.siteId ===
|
||||||
field.value
|
field.value
|
||||||
)?.name
|
)?.name
|
||||||
: "Select site"}
|
: t(
|
||||||
|
"siteSelect"
|
||||||
|
)}
|
||||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-full p-0">
|
<PopoverContent className="w-full p-0">
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search sites" />
|
<CommandInput
|
||||||
|
placeholder={t(
|
||||||
|
"searchSites"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
No sites found.
|
{t(
|
||||||
|
"sitesNotFound"
|
||||||
|
)}
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{sites.map(
|
{sites.map(
|
||||||
|
|
@ -716,7 +740,7 @@ export default function GeneralForm() {
|
||||||
disabled={transferLoading}
|
disabled={transferLoading}
|
||||||
form="transfer-form"
|
form="transfer-form"
|
||||||
>
|
>
|
||||||
Transfer Resource
|
{t("resourceTransferSubmit")}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import OrgProvider from "@app/providers/OrgProvider";
|
||||||
import { cache } from "react";
|
import { cache } from "react";
|
||||||
import ResourceInfoBox from "./ResourceInfoBox";
|
import ResourceInfoBox from "./ResourceInfoBox";
|
||||||
import { GetSiteResponse } from "@server/routers/site";
|
import { GetSiteResponse } from "@server/routers/site";
|
||||||
|
import { getTranslations } from 'next-intl/server';
|
||||||
|
|
||||||
interface ResourceLayoutProps {
|
interface ResourceLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -22,6 +23,7 @@ interface ResourceLayoutProps {
|
||||||
|
|
||||||
export default async function ResourceLayout(props: ResourceLayoutProps) {
|
export default async function ResourceLayout(props: ResourceLayoutProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
|
||||||
|
|
@ -88,22 +90,22 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "General",
|
title: t('general'),
|
||||||
href: `/{orgId}/settings/resources/{resourceId}/general`
|
href: `/{orgId}/settings/resources/{resourceId}/general`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Proxy",
|
title: t('proxy'),
|
||||||
href: `/{orgId}/settings/resources/{resourceId}/proxy`
|
href: `/{orgId}/settings/resources/{resourceId}/proxy`
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
if (resource.http) {
|
if (resource.http) {
|
||||||
navItems.push({
|
navItems.push({
|
||||||
title: "Authentication",
|
title: t('authentication'),
|
||||||
href: `/{orgId}/settings/resources/{resourceId}/authentication`
|
href: `/{orgId}/settings/resources/{resourceId}/authentication`
|
||||||
});
|
});
|
||||||
navItems.push({
|
navItems.push({
|
||||||
title: "Rules",
|
title: t('rules'),
|
||||||
href: `/{orgId}/settings/resources/{resourceId}/rules`
|
href: `/{orgId}/settings/resources/{resourceId}/rules`
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -111,8 +113,8 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title={`${resource?.name} Settings`}
|
title={t('resourceSetting', {resourceName: resource?.name})}
|
||||||
description="Configure the settings on your resource"
|
description={t('resourceSettingDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@ import {
|
||||||
CollapsibleTrigger
|
CollapsibleTrigger
|
||||||
} from "@app/components/ui/collapsible";
|
} from "@app/components/ui/collapsible";
|
||||||
import { ContainersSelector } from "@app/components/ContainersSelector";
|
import { ContainersSelector } from "@app/components/ContainersSelector";
|
||||||
import { FaDocker } from "react-icons/fa";
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
const addTargetSchema = z.object({
|
const addTargetSchema = z.object({
|
||||||
ip: z.string().refine(isTargetValid),
|
ip: z.string().refine(isTargetValid),
|
||||||
|
|
@ -94,51 +94,11 @@ type LocalTarget = Omit<
|
||||||
"protocol"
|
"protocol"
|
||||||
>;
|
>;
|
||||||
|
|
||||||
const proxySettingsSchema = z.object({
|
|
||||||
setHostHeader: z
|
|
||||||
.string()
|
|
||||||
.optional()
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
if (data) {
|
|
||||||
return tlsNameSchema.safeParse(data).success;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message:
|
|
||||||
"Invalid custom Host Header value. Use domain name format, or save empty to unset custom Host Header."
|
|
||||||
}
|
|
||||||
)
|
|
||||||
});
|
|
||||||
|
|
||||||
const tlsSettingsSchema = z.object({
|
|
||||||
ssl: z.boolean(),
|
|
||||||
tlsServerName: z
|
|
||||||
.string()
|
|
||||||
.optional()
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
if (data) {
|
|
||||||
return tlsNameSchema.safeParse(data).success;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message:
|
|
||||||
"Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name."
|
|
||||||
}
|
|
||||||
)
|
|
||||||
});
|
|
||||||
|
|
||||||
type ProxySettingsValues = z.infer<typeof proxySettingsSchema>;
|
|
||||||
type TlsSettingsValues = z.infer<typeof tlsSettingsSchema>;
|
|
||||||
type TargetsSettingsValues = z.infer<typeof targetsSettingsSchema>;
|
|
||||||
|
|
||||||
export default function ReverseProxyTargets(props: {
|
export default function ReverseProxyTargets(props: {
|
||||||
params: Promise<{ resourceId: number }>;
|
params: Promise<{ resourceId: number }>;
|
||||||
}) {
|
}) {
|
||||||
const params = use(props.params);
|
const params = use(props.params);
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const { resource, updateResource } = useResourceContext();
|
const { resource, updateResource } = useResourceContext();
|
||||||
|
|
||||||
|
|
@ -156,6 +116,45 @@ export default function ReverseProxyTargets(props: {
|
||||||
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
|
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
|
const proxySettingsSchema = z.object({
|
||||||
|
setHostHeader: z
|
||||||
|
.string()
|
||||||
|
.optional()
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
if (data) {
|
||||||
|
return tlsNameSchema.safeParse(data).success;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t('proxyErrorInvalidHeader')
|
||||||
|
}
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
const tlsSettingsSchema = z.object({
|
||||||
|
ssl: z.boolean(),
|
||||||
|
tlsServerName: z
|
||||||
|
.string()
|
||||||
|
.optional()
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
if (data) {
|
||||||
|
return tlsNameSchema.safeParse(data).success;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t('proxyErrorTls')
|
||||||
|
}
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
type ProxySettingsValues = z.infer<typeof proxySettingsSchema>;
|
||||||
|
type TlsSettingsValues = z.infer<typeof tlsSettingsSchema>;
|
||||||
|
type TargetsSettingsValues = z.infer<typeof targetsSettingsSchema>;
|
||||||
|
|
||||||
const addTargetForm = useForm({
|
const addTargetForm = useForm({
|
||||||
resolver: zodResolver(addTargetSchema),
|
resolver: zodResolver(addTargetSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -204,10 +203,10 @@ export default function ReverseProxyTargets(props: {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch targets",
|
title: t('targetErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while fetching targets"
|
t('targetErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -229,10 +228,10 @@ export default function ReverseProxyTargets(props: {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch resource",
|
title: t('siteErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while fetching resource"
|
t('siteErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -252,8 +251,8 @@ export default function ReverseProxyTargets(props: {
|
||||||
if (isDuplicate) {
|
if (isDuplicate) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Duplicate target",
|
title: t('targetErrorDuplicate'),
|
||||||
description: "A target with these settings already exists"
|
description: t('targetErrorDuplicateDescription')
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -265,8 +264,8 @@ export default function ReverseProxyTargets(props: {
|
||||||
if (!isIPInSubnet(targetIp, subnet)) {
|
if (!isIPInSubnet(targetIp, subnet)) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid target IP",
|
title: t('targetWireGuardErrorInvalidIp'),
|
||||||
description: "Target IP must be within the site subnet"
|
description: t('targetWireGuardErrorInvalidIpDescription')
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -344,8 +343,8 @@ export default function ReverseProxyTargets(props: {
|
||||||
updateResource({ stickySession: stickySessionData.stickySession });
|
updateResource({ stickySession: stickySessionData.stickySession });
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Targets updated",
|
title: t('targetsUpdated'),
|
||||||
description: "Targets and settings updated successfully"
|
description: t('targetsUpdatedDescription')
|
||||||
});
|
});
|
||||||
|
|
||||||
setTargetsToRemove([]);
|
setTargetsToRemove([]);
|
||||||
|
|
@ -354,10 +353,10 @@ export default function ReverseProxyTargets(props: {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update targets",
|
title: t('targetsErrorUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while updating targets"
|
t('targetsErrorUpdateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -378,17 +377,17 @@ export default function ReverseProxyTargets(props: {
|
||||||
tlsServerName: data.tlsServerName || null
|
tlsServerName: data.tlsServerName || null
|
||||||
});
|
});
|
||||||
toast({
|
toast({
|
||||||
title: "TLS settings updated",
|
title: t('targetTlsUpdate'),
|
||||||
description: "Your TLS settings have been updated successfully"
|
description: t('targetTlsUpdateDescription')
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update TLS settings",
|
title: t('targetErrorTlsUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while updating TLS settings"
|
t('targetErrorTlsUpdateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -407,18 +406,17 @@ export default function ReverseProxyTargets(props: {
|
||||||
setHostHeader: data.setHostHeader || null
|
setHostHeader: data.setHostHeader || null
|
||||||
});
|
});
|
||||||
toast({
|
toast({
|
||||||
title: "Proxy settings updated",
|
title: t('proxyUpdated'),
|
||||||
description:
|
description: t('proxyUpdatedDescription')
|
||||||
"Your proxy settings have been updated successfully"
|
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update proxy settings",
|
title: t('proxyErrorUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while updating proxy settings"
|
t('proxyErrorUpdateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -429,7 +427,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
const columns: ColumnDef<LocalTarget>[] = [
|
const columns: ColumnDef<LocalTarget>[] = [
|
||||||
{
|
{
|
||||||
accessorKey: "ip",
|
accessorKey: "ip",
|
||||||
header: "IP / Hostname",
|
header: t('targetAddr'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Input
|
<Input
|
||||||
defaultValue={row.original.ip}
|
defaultValue={row.original.ip}
|
||||||
|
|
@ -444,7 +442,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "port",
|
accessorKey: "port",
|
||||||
header: "Port",
|
header: t('targetPort'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
|
|
@ -460,7 +458,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// accessorKey: "protocol",
|
// accessorKey: "protocol",
|
||||||
// header: "Protocol",
|
// header: t('targetProtocol'),
|
||||||
// cell: ({ row }) => (
|
// cell: ({ row }) => (
|
||||||
// <Select
|
// <Select
|
||||||
// defaultValue={row.original.protocol!}
|
// defaultValue={row.original.protocol!}
|
||||||
|
|
@ -478,7 +476,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
accessorKey: "enabled",
|
accessorKey: "enabled",
|
||||||
header: "Enabled",
|
header: t('enabled'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Switch
|
<Switch
|
||||||
defaultChecked={row.original.enabled}
|
defaultChecked={row.original.enabled}
|
||||||
|
|
@ -505,7 +503,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => removeTarget(row.original.targetId)}
|
onClick={() => removeTarget(row.original.targetId)}
|
||||||
>
|
>
|
||||||
Delete
|
{t('delete')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
@ -516,7 +514,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
if (resource.http) {
|
if (resource.http) {
|
||||||
const methodCol: ColumnDef<LocalTarget> = {
|
const methodCol: ColumnDef<LocalTarget> = {
|
||||||
accessorKey: "method",
|
accessorKey: "method",
|
||||||
header: "Method",
|
header: t('method'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Select
|
<Select
|
||||||
defaultValue={row.original.method ?? ""}
|
defaultValue={row.original.method ?? ""}
|
||||||
|
|
@ -564,10 +562,10 @@ export default function ReverseProxyTargets(props: {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Targets Configuration
|
{t('targets')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Set up targets to route traffic to your services
|
{t('targetsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -589,8 +587,8 @@ export default function ReverseProxyTargets(props: {
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="sticky-toggle"
|
id="sticky-toggle"
|
||||||
label="Enable Sticky Sessions"
|
label={t('targetStickySessions')}
|
||||||
description="Keep connections on the same backend target for their entire session."
|
description={t('targetStickySessionsDescription')}
|
||||||
defaultChecked={
|
defaultChecked={
|
||||||
field.value
|
field.value
|
||||||
}
|
}
|
||||||
|
|
@ -621,7 +619,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
name="method"
|
name="method"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Method</FormLabel>
|
<FormLabel>{t('method')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Select
|
<Select
|
||||||
value={
|
value={
|
||||||
|
|
@ -638,7 +636,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SelectTrigger id="method">
|
<SelectTrigger id="method">
|
||||||
<SelectValue placeholder="Select method" />
|
<SelectValue placeholder={t('methodSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="http">
|
<SelectItem value="http">
|
||||||
|
|
@ -664,7 +662,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
name="ip"
|
name="ip"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="relative">
|
<FormItem className="relative">
|
||||||
<FormLabel>IP / Hostname</FormLabel>
|
<FormLabel>{t('targetAddr')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input id="ip" {...field} />
|
<Input id="ip" {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -697,7 +695,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
name="port"
|
name="port"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Port</FormLabel>
|
<FormLabel>{t('targetPort')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
id="port"
|
id="port"
|
||||||
|
|
@ -716,7 +714,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
className="mt-6"
|
className="mt-6"
|
||||||
disabled={!(watchedIp && watchedPort)}
|
disabled={!(watchedIp && watchedPort)}
|
||||||
>
|
>
|
||||||
Add Target
|
{t('targetSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -760,14 +758,13 @@ export default function ReverseProxyTargets(props: {
|
||||||
colSpan={columns.length}
|
colSpan={columns.length}
|
||||||
className="h-24 text-center"
|
className="h-24 text-center"
|
||||||
>
|
>
|
||||||
No targets. Add a target using the form.
|
{t('targetNoOne')}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
)}
|
)}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableCaption>
|
<TableCaption>
|
||||||
Adding more than one target above will enable load
|
{t('targetNoOneDescription')}
|
||||||
balancing.
|
|
||||||
</TableCaption>
|
</TableCaption>
|
||||||
</Table>
|
</Table>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
@ -778,7 +775,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
disabled={targetsLoading}
|
disabled={targetsLoading}
|
||||||
form="targets-settings-form"
|
form="targets-settings-form"
|
||||||
>
|
>
|
||||||
Save Targets
|
{t('targetsSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
@ -788,10 +785,10 @@ export default function ReverseProxyTargets(props: {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Secure Connection Configuration
|
{t('targetTlsSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure SSL/TLS settings for your resource
|
{t('targetTlsSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -812,7 +809,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="ssl-toggle"
|
id="ssl-toggle"
|
||||||
label="Enable SSL (https)"
|
label={t('proxyEnableSSL')}
|
||||||
defaultChecked={
|
defaultChecked={
|
||||||
field.value
|
field.value
|
||||||
}
|
}
|
||||||
|
|
@ -841,8 +838,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
className="p-0 flex items-center justify-start gap-2 w-full"
|
className="p-0 flex items-center justify-start gap-2 w-full"
|
||||||
>
|
>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Advanced TLS
|
{t('targetTlsSettingsAdvanced')}
|
||||||
Settings
|
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<ChevronsUpDown className="h-4 w-4" />
|
<ChevronsUpDown className="h-4 w-4" />
|
||||||
|
|
@ -862,8 +858,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
TLS Server Name
|
{t('targetTlsSni')}
|
||||||
(SNI)
|
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -871,11 +866,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The TLS Server
|
{t('targetTlsSniDescription')}
|
||||||
Name to use for
|
|
||||||
SNI. Leave empty
|
|
||||||
to use the
|
|
||||||
default.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -893,18 +884,17 @@ export default function ReverseProxyTargets(props: {
|
||||||
loading={httpsTlsLoading}
|
loading={httpsTlsLoading}
|
||||||
form="tls-settings-form"
|
form="tls-settings-form"
|
||||||
>
|
>
|
||||||
Save Settings
|
{t('targetTlsSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Additional Proxy Settings
|
{t('proxyAdditional')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure how your resource handles proxy
|
{t('proxyAdditionalDescription')}
|
||||||
settings
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -923,16 +913,13 @@ export default function ReverseProxyTargets(props: {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Custom Host Header
|
{t('proxyCustomHeader')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The host header to set
|
{t('proxyCustomHeaderDescription')}
|
||||||
when proxying requests.
|
|
||||||
Leave empty to use the
|
|
||||||
default.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -948,7 +935,7 @@ export default function ReverseProxyTargets(props: {
|
||||||
loading={proxySettingsLoading}
|
loading={proxySettingsLoading}
|
||||||
form="proxy-settings-form"
|
form="proxy-settings-form"
|
||||||
>
|
>
|
||||||
Save Settings
|
{t('targetTlsSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
@ -963,8 +950,10 @@ function isIPInSubnet(subnet: string, ip: string): boolean {
|
||||||
const [subnetIP, maskBits] = subnet.split("/");
|
const [subnetIP, maskBits] = subnet.split("/");
|
||||||
const mask = parseInt(maskBits);
|
const mask = parseInt(maskBits);
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
if (mask < 0 || mask > 32) {
|
if (mask < 0 || mask > 32) {
|
||||||
throw new Error("Invalid subnet mask. Must be between 0 and 32.");
|
throw new Error(t('subnetMaskErrorInvalid'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Convert IP addresses to binary numbers
|
// Convert IP addresses to binary numbers
|
||||||
|
|
@ -981,15 +970,17 @@ function isIPInSubnet(subnet: string, ip: string): boolean {
|
||||||
function ipToNumber(ip: string): number {
|
function ipToNumber(ip: string): number {
|
||||||
// Validate IP address format
|
// Validate IP address format
|
||||||
const parts = ip.split(".");
|
const parts = ip.split(".");
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
if (parts.length !== 4) {
|
if (parts.length !== 4) {
|
||||||
throw new Error("Invalid IP address format");
|
throw new Error(t('ipAddressErrorInvalidFormat'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Convert IP octets to 32-bit number
|
// Convert IP octets to 32-bit number
|
||||||
return parts.reduce((num, octet) => {
|
return parts.reduce((num, octet) => {
|
||||||
const oct = parseInt(octet);
|
const oct = parseInt(octet);
|
||||||
if (isNaN(oct) || oct < 0 || oct > 255) {
|
if (isNaN(oct) || oct < 0 || oct > 255) {
|
||||||
throw new Error("Invalid IP address octet");
|
throw new Error(t('ipAddressErrorInvalidOctet'));
|
||||||
}
|
}
|
||||||
return (num << 8) + oct;
|
return (num << 8) + oct;
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState, use } from "react";
|
import { useEffect, useState, use } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
|
|
@ -72,6 +73,7 @@ import {
|
||||||
} from "@server/lib/validators";
|
} from "@server/lib/validators";
|
||||||
import { Switch } from "@app/components/ui/switch";
|
import { Switch } from "@app/components/ui/switch";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
// Schema for rule validation
|
// Schema for rule validation
|
||||||
const addRuleSchema = z.object({
|
const addRuleSchema = z.object({
|
||||||
|
|
@ -86,17 +88,6 @@ type LocalRule = ArrayElement<ListResourceRulesResponse["rules"]> & {
|
||||||
updated?: boolean;
|
updated?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
enum RuleAction {
|
|
||||||
ACCEPT = "Always Allow",
|
|
||||||
DROP = "Always Deny"
|
|
||||||
}
|
|
||||||
|
|
||||||
enum RuleMatch {
|
|
||||||
PATH = "Path",
|
|
||||||
IP = "IP",
|
|
||||||
CIDR = "IP Range"
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ResourceRules(props: {
|
export default function ResourceRules(props: {
|
||||||
params: Promise<{ resourceId: number }>;
|
params: Promise<{ resourceId: number }>;
|
||||||
}) {
|
}) {
|
||||||
|
|
@ -109,6 +100,19 @@ export default function ResourceRules(props: {
|
||||||
const [pageLoading, setPageLoading] = useState(true);
|
const [pageLoading, setPageLoading] = useState(true);
|
||||||
const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules);
|
const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
|
||||||
|
const RuleAction = {
|
||||||
|
ACCEPT: t('alwaysAllow'),
|
||||||
|
DROP: t('alwaysDeny')
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const RuleMatch = {
|
||||||
|
PATH: t('path'),
|
||||||
|
IP: "IP",
|
||||||
|
CIDR: t('ipAddressRange')
|
||||||
|
} as const;
|
||||||
|
|
||||||
const addRuleForm = useForm({
|
const addRuleForm = useForm({
|
||||||
resolver: zodResolver(addRuleSchema),
|
resolver: zodResolver(addRuleSchema),
|
||||||
|
|
@ -132,10 +136,10 @@ export default function ResourceRules(props: {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch rules",
|
title: t('rulesErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while fetching rules"
|
t('rulesErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -156,8 +160,8 @@ export default function ResourceRules(props: {
|
||||||
if (isDuplicate) {
|
if (isDuplicate) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Duplicate rule",
|
title: t('rulesErrorDuplicate'),
|
||||||
description: "A rule with these settings already exists"
|
description: t('rulesErrorDuplicateDescription')
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -165,8 +169,8 @@ export default function ResourceRules(props: {
|
||||||
if (data.match === "CIDR" && !isValidCIDR(data.value)) {
|
if (data.match === "CIDR" && !isValidCIDR(data.value)) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid CIDR",
|
title: t('rulesErrorInvalidIpAddressRange'),
|
||||||
description: "Please enter a valid CIDR value"
|
description: t('rulesErrorInvalidIpAddressRangeDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -174,8 +178,8 @@ export default function ResourceRules(props: {
|
||||||
if (data.match === "PATH" && !isValidUrlGlobPattern(data.value)) {
|
if (data.match === "PATH" && !isValidUrlGlobPattern(data.value)) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid URL path",
|
title: t('rulesErrorInvalidUrl'),
|
||||||
description: "Please enter a valid URL path value"
|
description: t('rulesErrorInvalidUrlDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -183,8 +187,8 @@ export default function ResourceRules(props: {
|
||||||
if (data.match === "IP" && !isValidIP(data.value)) {
|
if (data.match === "IP" && !isValidIP(data.value)) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid IP",
|
title: t('rulesErrorInvalidIpAddress'),
|
||||||
description: "Please enter a valid IP address"
|
description: t('rulesErrorInvalidIpAddressDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -239,10 +243,10 @@ export default function ResourceRules(props: {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update rules",
|
title: t('rulesErrorUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred while updating rules"
|
t('rulesErrorUpdateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -252,8 +256,8 @@ export default function ResourceRules(props: {
|
||||||
updateResource({ applyRules: val });
|
updateResource({ applyRules: val });
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Enable Rules",
|
title: t('rulesUpdated'),
|
||||||
description: "Rule evaluation has been updated"
|
description: t('rulesUpdatedDescription')
|
||||||
});
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
}
|
}
|
||||||
|
|
@ -262,11 +266,11 @@ export default function ResourceRules(props: {
|
||||||
function getValueHelpText(type: string) {
|
function getValueHelpText(type: string) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "CIDR":
|
case "CIDR":
|
||||||
return "Enter an address in CIDR format (e.g., 103.21.244.0/22)";
|
return t('rulesMatchIpAddressRangeDescription');
|
||||||
case "IP":
|
case "IP":
|
||||||
return "Enter an IP address (e.g., 103.21.244.12)";
|
return t('rulesMatchIpAddress');
|
||||||
case "PATH":
|
case "PATH":
|
||||||
return "Enter a URL path or pattern (e.g., /api/v1/todos or /api/v1/*)";
|
return t('rulesMatchUrl');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -285,8 +289,8 @@ export default function ResourceRules(props: {
|
||||||
if (rule.match === "CIDR" && !isValidCIDR(rule.value)) {
|
if (rule.match === "CIDR" && !isValidCIDR(rule.value)) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid CIDR",
|
title: t('rulesErrorInvalidIpAddressRange'),
|
||||||
description: "Please enter a valid CIDR value"
|
description: t('rulesErrorInvalidIpAddressRangeDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -297,8 +301,8 @@ export default function ResourceRules(props: {
|
||||||
) {
|
) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid URL path",
|
title: t('rulesErrorInvalidUrl'),
|
||||||
description: "Please enter a valid URL path value"
|
description: t('rulesErrorInvalidUrlDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -306,8 +310,8 @@ export default function ResourceRules(props: {
|
||||||
if (rule.match === "IP" && !isValidIP(rule.value)) {
|
if (rule.match === "IP" && !isValidIP(rule.value)) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid IP",
|
title: t('rulesErrorInvalidIpAddress'),
|
||||||
description: "Please enter a valid IP address"
|
description: t('rulesErrorInvalidIpAddressDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -316,8 +320,8 @@ export default function ResourceRules(props: {
|
||||||
if (rule.priority === undefined) {
|
if (rule.priority === undefined) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid Priority",
|
title: t('rulesErrorInvalidPriority'),
|
||||||
description: "Please enter a valid priority"
|
description: t('rulesErrorInvalidPriorityDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -328,8 +332,8 @@ export default function ResourceRules(props: {
|
||||||
if (priorities.length !== new Set(priorities).size) {
|
if (priorities.length !== new Set(priorities).size) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Duplicate Priorities",
|
title: t('rulesErrorDuplicatePriority'),
|
||||||
description: "Please enter unique priorities"
|
description: t('rulesErrorDuplicatePriorityDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -368,8 +372,8 @@ export default function ResourceRules(props: {
|
||||||
}
|
}
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Rules updated",
|
title: t('ruleUpdated'),
|
||||||
description: "Rules updated successfully"
|
description: t('ruleUpdatedDescription')
|
||||||
});
|
});
|
||||||
|
|
||||||
setRulesToRemove([]);
|
setRulesToRemove([]);
|
||||||
|
|
@ -378,10 +382,10 @@ export default function ResourceRules(props: {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Operation failed",
|
title: t('ruleErrorUpdate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
err,
|
err,
|
||||||
"An error occurred during the save operation"
|
t('ruleErrorUpdateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -399,7 +403,7 @@ export default function ResourceRules(props: {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Priority
|
{t('rulesPriority')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -419,8 +423,8 @@ export default function ResourceRules(props: {
|
||||||
if (!parsed.data) {
|
if (!parsed.data) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Invalid IP",
|
title: t('rulesErrorInvalidIpAddress'), // correct priority or IP?
|
||||||
description: "Please enter a valid priority"
|
description: t('rulesErrorInvalidPriorityDescription')
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -435,7 +439,7 @@ export default function ResourceRules(props: {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "action",
|
accessorKey: "action",
|
||||||
header: "Action",
|
header: t('rulesAction'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Select
|
<Select
|
||||||
defaultValue={row.original.action}
|
defaultValue={row.original.action}
|
||||||
|
|
@ -457,7 +461,7 @@ export default function ResourceRules(props: {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "match",
|
accessorKey: "match",
|
||||||
header: "Match Type",
|
header: t('rulesMatchType'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Select
|
<Select
|
||||||
defaultValue={row.original.match}
|
defaultValue={row.original.match}
|
||||||
|
|
@ -478,7 +482,7 @@ export default function ResourceRules(props: {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "value",
|
accessorKey: "value",
|
||||||
header: "Value",
|
header: t('value'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Input
|
<Input
|
||||||
defaultValue={row.original.value}
|
defaultValue={row.original.value}
|
||||||
|
|
@ -493,7 +497,7 @@ export default function ResourceRules(props: {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "enabled",
|
accessorKey: "enabled",
|
||||||
header: "Enabled",
|
header: t('enabled'),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Switch
|
<Switch
|
||||||
defaultChecked={row.original.enabled}
|
defaultChecked={row.original.enabled}
|
||||||
|
|
@ -511,7 +515,7 @@ export default function ResourceRules(props: {
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => removeRule(row.original.ruleId)}
|
onClick={() => removeRule(row.original.ruleId)}
|
||||||
>
|
>
|
||||||
Delete
|
{t('delete')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -541,46 +545,40 @@ export default function ResourceRules(props: {
|
||||||
<SettingsContainer>
|
<SettingsContainer>
|
||||||
<Alert className="hidden md:block">
|
<Alert className="hidden md:block">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">About Rules</AlertTitle>
|
<AlertTitle className="font-semibold">{t('rulesAbout')}</AlertTitle>
|
||||||
<AlertDescription className="mt-4">
|
<AlertDescription className="mt-4">
|
||||||
<div className="space-y-1 mb-4">
|
<div className="space-y-1 mb-4">
|
||||||
<p>
|
<p>
|
||||||
Rules allow you to control access to your resource
|
{t('rulesAboutDescription')}
|
||||||
based on a set of criteria. You can create rules to
|
|
||||||
allow or deny access based on IP address or URL
|
|
||||||
path.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<InfoSections cols={2}>
|
<InfoSections cols={2}>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Actions</InfoSectionTitle>
|
<InfoSectionTitle>{t('rulesActions')}</InfoSectionTitle>
|
||||||
<ul className="text-sm text-muted-foreground space-y-1">
|
<ul className="text-sm text-muted-foreground space-y-1">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Check className="text-green-500 w-4 h-4" />
|
<Check className="text-green-500 w-4 h-4" />
|
||||||
Always Allow: Bypass all authentication
|
{t('rulesActionAlwaysAllow')}
|
||||||
methods
|
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<X className="text-red-500 w-4 h-4" />
|
<X className="text-red-500 w-4 h-4" />
|
||||||
Always Deny: Block all requests; no
|
{t('rulesActionAlwaysDeny')}
|
||||||
authentication can be attempted
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Matching Criteria
|
{t('rulesMatchCriteria')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<ul className="text-sm text-muted-foreground space-y-1">
|
<ul className="text-sm text-muted-foreground space-y-1">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
Match a specific IP address
|
{t('rulesMatchCriteriaIpAddress')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
Match a range of IP addresses in CIDR
|
{t('rulesMatchCriteriaIpAddressRange')}
|
||||||
notation
|
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
Match a URL path or pattern
|
{t('rulesMatchCriteriaUrl')}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
|
|
@ -590,15 +588,15 @@ export default function ResourceRules(props: {
|
||||||
|
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>Enable Rules</SettingsSectionTitle>
|
<SettingsSectionTitle>{t('rulesEnable')}</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Enable or disable rule evaluation for this resource
|
{t('rulesEnableDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="rules-toggle"
|
id="rules-toggle"
|
||||||
label="Enable Rules"
|
label={t('rulesEnable')}
|
||||||
defaultChecked={rulesEnabled}
|
defaultChecked={rulesEnabled}
|
||||||
onCheckedChange={async (val) => {
|
onCheckedChange={async (val) => {
|
||||||
await saveApplyRules(val);
|
await saveApplyRules(val);
|
||||||
|
|
@ -610,10 +608,10 @@ export default function ResourceRules(props: {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Resource Rules Configuration
|
{t('rulesResource')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure rules to control access to your resource
|
{t('rulesResourceDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -628,7 +626,7 @@ export default function ResourceRules(props: {
|
||||||
name="action"
|
name="action"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Action</FormLabel>
|
<FormLabel>{t('rulesAction')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Select
|
<Select
|
||||||
value={field.value}
|
value={field.value}
|
||||||
|
|
@ -658,7 +656,7 @@ export default function ResourceRules(props: {
|
||||||
name="match"
|
name="match"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Match Type</FormLabel>
|
<FormLabel>{t('rulesMatchType')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Select
|
<Select
|
||||||
value={field.value}
|
value={field.value}
|
||||||
|
|
@ -694,7 +692,7 @@ export default function ResourceRules(props: {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="space-y-0 mb-2">
|
<FormItem className="space-y-0 mb-2">
|
||||||
<InfoPopup
|
<InfoPopup
|
||||||
text="Value"
|
text={t('value')}
|
||||||
info={
|
info={
|
||||||
getValueHelpText(
|
getValueHelpText(
|
||||||
addRuleForm.watch(
|
addRuleForm.watch(
|
||||||
|
|
@ -716,7 +714,7 @@ export default function ResourceRules(props: {
|
||||||
className="mb-2"
|
className="mb-2"
|
||||||
disabled={!rulesEnabled}
|
disabled={!rulesEnabled}
|
||||||
>
|
>
|
||||||
Add Rule
|
{t('ruleSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -759,13 +757,13 @@ export default function ResourceRules(props: {
|
||||||
colSpan={columns.length}
|
colSpan={columns.length}
|
||||||
className="h-24 text-center"
|
className="h-24 text-center"
|
||||||
>
|
>
|
||||||
No rules. Add a rule using the form.
|
{t('rulesNoOne')}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
)}
|
)}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableCaption>
|
<TableCaption>
|
||||||
Rules are evaluated by priority in ascending order.
|
{t('rulesOrder')}
|
||||||
</TableCaption>
|
</TableCaption>
|
||||||
</Table>
|
</Table>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
@ -775,7 +773,7 @@ export default function ResourceRules(props: {
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Save Rules
|
{t('rulesSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@ import { cn } from "@app/lib/cn";
|
||||||
import { SquareArrowOutUpRight } from "lucide-react";
|
import { SquareArrowOutUpRight } from "lucide-react";
|
||||||
import CopyTextBox from "@app/components/CopyTextBox";
|
import CopyTextBox from "@app/components/CopyTextBox";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
const baseResourceFormSchema = z.object({
|
const baseResourceFormSchema = z.object({
|
||||||
name: z.string().min(1).max(255),
|
name: z.string().min(1).max(255),
|
||||||
|
|
@ -104,6 +105,7 @@ export default function Page() {
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const { orgId } = useParams();
|
const { orgId } = useParams();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loadingPage, setLoadingPage] = useState(true);
|
const [loadingPage, setLoadingPage] = useState(true);
|
||||||
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
|
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
|
||||||
|
|
@ -117,15 +119,13 @@ export default function Page() {
|
||||||
const resourceTypes: ReadonlyArray<ResourceTypeOption> = [
|
const resourceTypes: ReadonlyArray<ResourceTypeOption> = [
|
||||||
{
|
{
|
||||||
id: "http",
|
id: "http",
|
||||||
title: "HTTPS Resource",
|
title: t('resourceHTTP'),
|
||||||
description:
|
description: t('resourceHTTPDescription')
|
||||||
"Proxy requests to your app over HTTPS using a subdomain or base domain."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "raw",
|
id: "raw",
|
||||||
title: "Raw TCP/UDP Resource",
|
title: t('resourceRaw'),
|
||||||
description:
|
description: t('resourceRawDescription'),
|
||||||
"Proxy requests to your app over TCP/UDP using a port number.",
|
|
||||||
disabled: !env.flags.allowRawResources
|
disabled: !env.flags.allowRawResources
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
@ -199,10 +199,10 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating resource",
|
title: t('resourceErrorCreate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred when creating the resource"
|
t('resourceErrorCreateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -219,11 +219,11 @@ export default function Page() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("Error creating resource:", e);
|
console.error(t('resourceErrorCreateMessage'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating resource",
|
title: t('resourceErrorCreate'),
|
||||||
description: "An unexpected error occurred"
|
description:t('resourceErrorCreateMessageDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -242,10 +242,10 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error fetching sites",
|
title: t('sitesErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred when fetching the sites"
|
t('sitesErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -270,10 +270,10 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error fetching domains",
|
title: t('domainsErrorFetch'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred when fetching the domains"
|
t('domainsErrorFetchDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -300,8 +300,8 @@ export default function Page() {
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title="Create Resource"
|
title={t('resourceCreate')}
|
||||||
description="Follow the steps below to create a new resource"
|
description={t('resourceCreateDescription')}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
@ -309,7 +309,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/resources`);
|
router.push(`/${orgId}/settings/resources`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See All Resources
|
{t('resourceSeeAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -320,7 +320,7 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Resource Information
|
{t('resourceInfo')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -336,7 +336,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name
|
{t('name')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -345,9 +345,7 @@ export default function Page() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This is the
|
{t('resourceNameDescription')}
|
||||||
display name for
|
|
||||||
the resource.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -359,7 +357,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-col">
|
<FormItem className="flex flex-col">
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Site
|
{t('site')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger
|
<PopoverTrigger
|
||||||
|
|
@ -384,19 +382,17 @@ export default function Page() {
|
||||||
field.value
|
field.value
|
||||||
)
|
)
|
||||||
?.name
|
?.name
|
||||||
: "Select site"}
|
: t('siteSelect')}
|
||||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0">
|
<PopoverContent className="p-0">
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search site" />
|
<CommandInput placeholder={t('siteSearch')} />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
No
|
{t('siteNotFound')}
|
||||||
site
|
|
||||||
found.
|
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{sites.map(
|
{sites.map(
|
||||||
|
|
@ -437,10 +433,7 @@ export default function Page() {
|
||||||
</Popover>
|
</Popover>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This site will
|
{t('siteSelectionDescription')}
|
||||||
provide
|
|
||||||
connectivity to
|
|
||||||
the resource.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -454,11 +447,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Resource Type
|
{t('resourceType')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine how you want to access your
|
{t('resourceTypeDescription')}
|
||||||
resource
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -480,11 +472,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
HTTPS Settings
|
{t('resourceHTTPSSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure how your resource will be
|
{t('resourceHTTPSSettingsDescription')}
|
||||||
accessed over HTTPS
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -506,8 +497,7 @@ export default function Page() {
|
||||||
}) => (
|
}) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Domain
|
{t('domainType')}
|
||||||
Type
|
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
value={
|
value={
|
||||||
|
|
@ -531,11 +521,10 @@ export default function Page() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="subdomain">
|
<SelectItem value="subdomain">
|
||||||
Subdomain
|
{t('subdomain')}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="basedomain">
|
<SelectItem value="basedomain">
|
||||||
Base
|
{t('baseDomain')}
|
||||||
Domain
|
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
@ -550,7 +539,7 @@ export default function Page() {
|
||||||
) && (
|
) && (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Subdomain
|
{t('subdomain')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<div className="flex space-x-0">
|
<div className="flex space-x-0">
|
||||||
<div className="w-1/2">
|
<div className="w-1/2">
|
||||||
|
|
@ -629,10 +618,7 @@ export default function Page() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The subdomain
|
{t('subdomnainDescription')}
|
||||||
where your
|
|
||||||
resource will be
|
|
||||||
accessible.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -650,8 +636,7 @@ export default function Page() {
|
||||||
}) => (
|
}) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Base
|
{t('baseDomain')}
|
||||||
Domain
|
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
|
|
@ -702,11 +687,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
TCP/UDP Settings
|
{t('resourceRawSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure how your resource will be
|
{t('resourceRawSettingsDescription')}
|
||||||
accessed over TCP/UDP
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -724,7 +708,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Protocol
|
{t('protocol')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Select
|
<Select
|
||||||
onValueChange={
|
onValueChange={
|
||||||
|
|
@ -734,7 +718,7 @@ export default function Page() {
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select a protocol" />
|
<SelectValue placeholder={t('protocolSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -759,7 +743,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Port Number
|
{t('resourcePortNumber')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -787,10 +771,7 @@ export default function Page() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The external
|
{t('resourcePortNumberDescription')}
|
||||||
port number
|
|
||||||
to proxy
|
|
||||||
requests.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -810,7 +791,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/resources`)
|
router.push(`/${orgId}/settings/resources`)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -827,7 +808,7 @@ export default function Page() {
|
||||||
}}
|
}}
|
||||||
loading={createLoading}
|
loading={createLoading}
|
||||||
>
|
>
|
||||||
Create Resource
|
{t('resourceCreate')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</SettingsContainer>
|
</SettingsContainer>
|
||||||
|
|
@ -836,17 +817,17 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Configuration Snippets
|
{t('resourceConfig')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Copy and paste these configuration snippets to set up your TCP/UDP resource
|
{t('resourceConfigDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-lg font-semibold">
|
<h3 className="text-lg font-semibold">
|
||||||
Traefik: Add Entrypoints
|
{t('resourceAddEntrypoints')}
|
||||||
</h3>
|
</h3>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={`entryPoints:
|
text={`entryPoints:
|
||||||
|
|
@ -858,7 +839,7 @@ export default function Page() {
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-lg font-semibold">
|
<h3 className="text-lg font-semibold">
|
||||||
Gerbil: Expose Ports in Docker Compose
|
{t('resourceExposePorts')}
|
||||||
</h3>
|
</h3>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={`ports:
|
text={`ports:
|
||||||
|
|
@ -874,7 +855,7 @@ export default function Page() {
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Learn how to configure TCP/UDP resources
|
{t('resourceLearnRaw')}
|
||||||
</span>
|
</span>
|
||||||
<SquareArrowOutUpRight size={14} />
|
<SquareArrowOutUpRight size={14} />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -890,7 +871,7 @@ export default function Page() {
|
||||||
router.push(`/${orgId}/settings/resources`)
|
router.push(`/${orgId}/settings/resources`)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Back to Resources
|
{t('resourceBack')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -900,7 +881,7 @@ export default function Page() {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Go to Resource
|
{t('resourceGoTo')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</SettingsContainer>
|
</SettingsContainer>
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import { cache } from "react";
|
||||||
import { GetOrgResponse } from "@server/routers/org";
|
import { GetOrgResponse } from "@server/routers/org";
|
||||||
import OrgProvider from "@app/providers/OrgProvider";
|
import OrgProvider from "@app/providers/OrgProvider";
|
||||||
import ResourcesSplashCard from "./ResourcesSplashCard";
|
import ResourcesSplashCard from "./ResourcesSplashCard";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
type ResourcesPageProps = {
|
type ResourcesPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -18,6 +19,8 @@ export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export default async function ResourcesPage(props: ResourcesPageProps) {
|
export default async function ResourcesPage(props: ResourcesPageProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
let resources: ListResourcesResponse["resources"] = [];
|
let resources: ListResourcesResponse["resources"] = [];
|
||||||
try {
|
try {
|
||||||
const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
|
const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
|
||||||
|
|
@ -51,8 +54,8 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
|
||||||
name: resource.name,
|
name: resource.name,
|
||||||
orgId: params.orgId,
|
orgId: params.orgId,
|
||||||
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
|
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
|
||||||
site: resource.siteName || "None",
|
site: resource.siteName || t('none'),
|
||||||
siteId: resource.siteId || "Unknown",
|
siteId: resource.siteId || t('unknown'),
|
||||||
protocol: resource.protocol,
|
protocol: resource.protocol,
|
||||||
proxyPort: resource.proxyPort,
|
proxyPort: resource.proxyPort,
|
||||||
http: resource.http,
|
http: resource.http,
|
||||||
|
|
@ -73,8 +76,8 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
|
||||||
{/* <ResourcesSplashCard /> */}
|
{/* <ResourcesSplashCard /> */}
|
||||||
|
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Resources"
|
title={t('resourceTitle')}
|
||||||
description="Create secure proxies to your private applications"
|
description={t('resourceDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
import CopyTextBox from "@app/components/CopyTextBox";
|
import CopyTextBox from "@app/components/CopyTextBox";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface AccessTokenSectionProps {
|
interface AccessTokenSectionProps {
|
||||||
token: string;
|
token: string;
|
||||||
|
|
@ -37,37 +38,37 @@ export default function AccessTokenSection({
|
||||||
setTimeout(() => setCopied(null), 2000);
|
setTimeout(() => setCopied(null), 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-start space-x-2">
|
<div className="flex items-start space-x-2">
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Your access token can be passed in two ways: as a query
|
{t('shareTokenDescription')}
|
||||||
parameter or in the request headers. These must be passed
|
|
||||||
from the client on every request for authenticated access.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs defaultValue="token" className="w-full mt-4">
|
<Tabs defaultValue="token" className="w-full mt-4">
|
||||||
<TabsList className="grid grid-cols-2">
|
<TabsList className="grid grid-cols-2">
|
||||||
<TabsTrigger value="token">Access Token</TabsTrigger>
|
<TabsTrigger value="token">{t('accessToken')}</TabsTrigger>
|
||||||
<TabsTrigger value="usage">Usage Examples</TabsTrigger>
|
<TabsTrigger value="usage">{t('usageExamples')}</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<TabsContent value="token" className="space-y-4">
|
<TabsContent value="token" className="space-y-4">
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<div className="font-bold">Token ID</div>
|
<div className="font-bold">{t('tokenId')}</div>
|
||||||
<CopyToClipboard text={tokenId} isLink={false} />
|
<CopyToClipboard text={tokenId} isLink={false} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<div className="font-bold">Token</div>
|
<div className="font-bold">{t('token')}</div>
|
||||||
<CopyToClipboard text={token} isLink={false} />
|
<CopyToClipboard text={token} isLink={false} />
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="usage" className="space-y-4">
|
<TabsContent value="usage" className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<h3 className="text-sm font-medium">Request Headers</h3>
|
<h3 className="text-sm font-medium">{t('requestHeades')}</h3>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={`${env.server.resourceAccessTokenHeadersId}: ${tokenId}
|
text={`${env.server.resourceAccessTokenHeadersId}: ${tokenId}
|
||||||
${env.server.resourceAccessTokenHeadersToken}: ${token}`}
|
${env.server.resourceAccessTokenHeadersToken}: ${token}`}
|
||||||
|
|
@ -75,7 +76,7 @@ ${env.server.resourceAccessTokenHeadersToken}: ${token}`}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<h3 className="text-sm font-medium">Query Parameter</h3>
|
<h3 className="text-sm font-medium">{t('queryParameter')}</h3>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={`${resourceUrl}?${env.server.resourceAccessTokenParam}=${tokenId}.${token}`}
|
text={`${resourceUrl}?${env.server.resourceAccessTokenParam}=${tokenId}.${token}`}
|
||||||
/>
|
/>
|
||||||
|
|
@ -84,21 +85,17 @@ ${env.server.resourceAccessTokenHeadersToken}: ${token}`}
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Important Note
|
{t('importantNote')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
For security reasons, using headers is recommended
|
{t('shareImportantDescription')}
|
||||||
over query parameters when possible, as query
|
|
||||||
parameters may be logged in server logs or browser
|
|
||||||
history.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<div className="text-sm text-muted-foreground mt-4">
|
<div className="text-sm text-muted-foreground mt-4">
|
||||||
Keep your access token secure. Do not share it in publicly
|
{t('shareTokenSecurety')}
|
||||||
accessible areas or client-side code.
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,7 @@ import {
|
||||||
CollapsibleTrigger
|
CollapsibleTrigger
|
||||||
} from "@app/components/ui/collapsible";
|
} from "@app/components/ui/collapsible";
|
||||||
import AccessTokenSection from "./AccessTokenUsage";
|
import AccessTokenSection from "./AccessTokenUsage";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type FormProps = {
|
type FormProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -73,15 +74,6 @@ type FormProps = {
|
||||||
onCreated?: (result: ShareLinkRow) => void;
|
onCreated?: (result: ShareLinkRow) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
resourceId: z.number({ message: "Please select a resource" }),
|
|
||||||
resourceName: z.string(),
|
|
||||||
resourceUrl: z.string(),
|
|
||||||
timeUnit: z.string(),
|
|
||||||
timeValue: z.coerce.number().int().positive().min(1),
|
|
||||||
title: z.string().optional()
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function CreateShareLinkForm({
|
export default function CreateShareLinkForm({
|
||||||
open,
|
open,
|
||||||
setOpen,
|
setOpen,
|
||||||
|
|
@ -99,6 +91,7 @@ export default function CreateShareLinkForm({
|
||||||
const [neverExpire, setNeverExpire] = useState(false);
|
const [neverExpire, setNeverExpire] = useState(false);
|
||||||
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [resources, setResources] = useState<
|
const [resources, setResources] = useState<
|
||||||
{
|
{
|
||||||
|
|
@ -109,13 +102,22 @@ export default function CreateShareLinkForm({
|
||||||
}[]
|
}[]
|
||||||
>([]);
|
>([]);
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
resourceId: z.number({ message: t('shareErrorSelectResource') }),
|
||||||
|
resourceName: z.string(),
|
||||||
|
resourceUrl: z.string(),
|
||||||
|
timeUnit: z.string(),
|
||||||
|
timeValue: z.coerce.number().int().positive().min(1),
|
||||||
|
title: z.string().optional()
|
||||||
|
});
|
||||||
|
|
||||||
const timeUnits = [
|
const timeUnits = [
|
||||||
{ unit: "minutes", name: "Minutes" },
|
{ unit: "minutes", name: t('minutes') },
|
||||||
{ unit: "hours", name: "Hours" },
|
{ unit: "hours", name: t('hours') },
|
||||||
{ unit: "days", name: "Days" },
|
{ unit: "days", name: t('days') },
|
||||||
{ unit: "weeks", name: "Weeks" },
|
{ unit: "weeks", name: t('weeks') },
|
||||||
{ unit: "months", name: "Months" },
|
{ unit: "months", name: t('months') },
|
||||||
{ unit: "years", name: "Years" }
|
{ unit: "years", name: t('years') }
|
||||||
];
|
];
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof formSchema>>({
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
|
|
@ -141,10 +143,10 @@ export default function CreateShareLinkForm({
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to fetch resources",
|
title: t('shareErrorFetchResource'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while fetching the resources"
|
t('shareErrorFetchResourceDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -201,17 +203,17 @@ export default function CreateShareLinkForm({
|
||||||
validForSeconds: neverExpire ? undefined : timeInSeconds,
|
validForSeconds: neverExpire ? undefined : timeInSeconds,
|
||||||
title:
|
title:
|
||||||
values.title ||
|
values.title ||
|
||||||
`${values.resourceName || "Resource" + values.resourceId} Share Link`
|
t('shareLink', {resource: (values.resourceName || "Resource" + values.resourceId)})
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to create share link",
|
title: t('shareErrorCreate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while creating the share link"
|
t('shareErrorCreateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -260,9 +262,9 @@ export default function CreateShareLinkForm({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Create Shareable Link</CredenzaTitle>
|
<CredenzaTitle>{t('shareCreate')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Anyone with this link can access the resource
|
{t('shareCreateDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -280,7 +282,7 @@ export default function CreateShareLinkForm({
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-col">
|
<FormItem className="flex flex-col">
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Resource
|
{t('resource')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
|
|
@ -298,19 +300,17 @@ export default function CreateShareLinkForm({
|
||||||
? getSelectedResourceName(
|
? getSelectedResourceName(
|
||||||
field.value
|
field.value
|
||||||
)
|
)
|
||||||
: "Select resource"}
|
: t('resourceSelect')}
|
||||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0">
|
<PopoverContent className="p-0">
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search resources" />
|
<CommandInput placeholder={t('resourceSearch')} />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
No
|
{t('resourcesNotFound')}
|
||||||
resources
|
|
||||||
found
|
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{resources.map(
|
{resources.map(
|
||||||
|
|
@ -366,7 +366,7 @@ export default function CreateShareLinkForm({
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Title (optional)
|
{t('shareTitleOptional')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
|
|
@ -378,7 +378,7 @@ export default function CreateShareLinkForm({
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<FormLabel>Expire In</FormLabel>
|
<FormLabel>{t('expireIn')}</FormLabel>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
|
|
@ -393,7 +393,7 @@ export default function CreateShareLinkForm({
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select duration" />
|
<SelectValue placeholder={t('selectDuration')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -455,18 +455,12 @@ export default function CreateShareLinkForm({
|
||||||
htmlFor="terms"
|
htmlFor="terms"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
Never expire
|
{t('neverExpire')}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Expiration time is how long the
|
{t('shareExpireDescription')}
|
||||||
link will be usable and provide
|
|
||||||
access to the resource. After
|
|
||||||
this time, the link will no
|
|
||||||
longer work, and users who used
|
|
||||||
this link will lose access to
|
|
||||||
the resource.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -475,12 +469,10 @@ export default function CreateShareLinkForm({
|
||||||
{link && (
|
{link && (
|
||||||
<div className="max-w-md space-y-4">
|
<div className="max-w-md space-y-4">
|
||||||
<p>
|
<p>
|
||||||
You will only be able to see this link
|
{t('shareSeeOnce')}
|
||||||
once. Make sure to copy it.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Anyone with this link can access the
|
{t('shareAccessHint')}
|
||||||
resource. Share it with care.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="h-[250px] w-full mx-auto flex items-center justify-center">
|
<div className="h-[250px] w-full mx-auto flex items-center justify-center">
|
||||||
|
|
@ -506,12 +498,12 @@ export default function CreateShareLinkForm({
|
||||||
className="p-0 flex items-center justify-between w-full"
|
className="p-0 flex items-center justify-between w-full"
|
||||||
>
|
>
|
||||||
<h4 className="text-sm font-semibold">
|
<h4 className="text-sm font-semibold">
|
||||||
See Access Token Usage
|
{t('shareTokenUsage')}
|
||||||
</h4>
|
</h4>
|
||||||
<div>
|
<div>
|
||||||
<ChevronsUpDown className="h-4 w-4" />
|
<ChevronsUpDown className="h-4 w-4" />
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
Toggle
|
{t('toggle')}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -541,7 +533,7 @@ export default function CreateShareLinkForm({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -549,7 +541,7 @@ export default function CreateShareLinkForm({
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={link !== null || loading}
|
disabled={link !== null || loading}
|
||||||
>
|
>
|
||||||
Create Link
|
{t('createLink')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -16,15 +17,18 @@ export function ShareLinksDataTable<TData, TValue>({
|
||||||
data,
|
data,
|
||||||
createShareLink
|
createShareLink
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Share Links"
|
title={t('shareLinks')}
|
||||||
searchPlaceholder="Search share links..."
|
searchPlaceholder={t('shareSearch')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
onAdd={createShareLink}
|
onAdd={createShareLink}
|
||||||
addButtonText="Create Share Link"
|
addButtonText={t('shareCreate')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
|
||||||
import { Link, X, Clock, Share, ArrowRight, Lock } from "lucide-react"; // Replace with actual imports
|
import { Link, X, Clock, Share, ArrowRight, Lock } from "lucide-react"; // Replace with actual imports
|
||||||
import { Card, CardContent } from "@app/components/ui/card";
|
import { Card, CardContent } from "@app/components/ui/card";
|
||||||
import { Button } from "@app/components/ui/button";
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export const ShareableLinksSplash = () => {
|
export const ShareableLinksSplash = () => {
|
||||||
const [isDismissed, setIsDismissed] = useState(false);
|
const [isDismissed, setIsDismissed] = useState(false);
|
||||||
|
|
@ -22,6 +23,8 @@ export const ShareableLinksSplash = () => {
|
||||||
localStorage.setItem(key, "true");
|
localStorage.setItem(key, "true");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
if (isDismissed) {
|
if (isDismissed) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -31,7 +34,7 @@ export const ShareableLinksSplash = () => {
|
||||||
<button
|
<button
|
||||||
onClick={handleDismiss}
|
onClick={handleDismiss}
|
||||||
className="absolute top-2 right-2 p-2"
|
className="absolute top-2 right-2 p-2"
|
||||||
aria-label="Dismiss"
|
aria-label={t('dismiss')}
|
||||||
>
|
>
|
||||||
<X className="w-5 h-5" />
|
<X className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -39,26 +42,23 @@ export const ShareableLinksSplash = () => {
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-xl font-semibold flex items-center gap-2">
|
<h3 className="text-xl font-semibold flex items-center gap-2">
|
||||||
<Link className="text-blue-500" />
|
<Link className="text-blue-500" />
|
||||||
Shareable Links
|
{t('share')}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm">
|
<p className="text-sm">
|
||||||
Create shareable links to your resources. Links provide
|
{t('shareDescription2')}
|
||||||
temporary or unlimited access to your resource. You can
|
|
||||||
configure the expiration duration of the link when you
|
|
||||||
create one.
|
|
||||||
</p>
|
</p>
|
||||||
<ul className="text-sm text-muted-foreground space-y-2">
|
<ul className="text-sm text-muted-foreground space-y-2">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Share className="text-green-500 w-4 h-4" />
|
<Share className="text-green-500 w-4 h-4" />
|
||||||
Easy to create and share
|
{t('shareEasyCreate')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Clock className="text-yellow-500 w-4 h-4" />
|
<Clock className="text-yellow-500 w-4 h-4" />
|
||||||
Configurable expiration duration
|
{t('shareConfigurableExpirationDuration')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Lock className="text-red-500 w-4 h-4" />
|
<Lock className="text-red-500 w-4 h-4" />
|
||||||
Secure and revocable
|
{t('shareSecureAndRevocable')}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@ import { ListAccessTokensResponse } from "@server/routers/accessToken";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import CreateShareLinkForm from "./CreateShareLinkForm";
|
import CreateShareLinkForm from "./CreateShareLinkForm";
|
||||||
import { constructShareLink } from "@app/lib/shareLinks";
|
import { constructShareLink } from "@app/lib/shareLinks";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export type ShareLinkRow = {
|
export type ShareLinkRow = {
|
||||||
accessTokenId: string;
|
accessTokenId: string;
|
||||||
|
|
@ -54,6 +55,7 @@ export default function ShareLinksTable({
|
||||||
orgId
|
orgId
|
||||||
}: ShareLinksTableProps) {
|
}: ShareLinksTableProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
|
|
@ -67,10 +69,10 @@ export default function ShareLinksTable({
|
||||||
async function deleteSharelink(id: string) {
|
async function deleteSharelink(id: string) {
|
||||||
await api.delete(`/access-token/${id}`).catch((e) => {
|
await api.delete(`/access-token/${id}`).catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
title: "Failed to delete link",
|
title: t('shareErrorDelete'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred deleting link"
|
t('shareErrorDeleteMessage')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -79,8 +81,8 @@ export default function ShareLinksTable({
|
||||||
setRows(newRows);
|
setRows(newRows);
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Link deleted",
|
title: t('shareDeleted'),
|
||||||
description: "The link has been deleted"
|
description: t('shareDeletedDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -102,7 +104,7 @@ export default function ShareLinksTable({
|
||||||
className="h-8 w-8 p-0"
|
className="h-8 w-8 p-0"
|
||||||
>
|
>
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
Open menu
|
{t('openMenu')}
|
||||||
</span>
|
</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -116,7 +118,7 @@ export default function ShareLinksTable({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<button className="text-red-500">
|
<button className="text-red-500">
|
||||||
Delete
|
{t('delete')}
|
||||||
</button>
|
</button>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|
@ -136,7 +138,7 @@ export default function ShareLinksTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Resource
|
{t('resource')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -164,7 +166,7 @@ export default function ShareLinksTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Title
|
{t('title')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -243,7 +245,7 @@ export default function ShareLinksTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Created
|
{t('created')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -263,7 +265,7 @@ export default function ShareLinksTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Expires
|
{t('expires')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -273,7 +275,7 @@ export default function ShareLinksTable({
|
||||||
if (r.expiresAt) {
|
if (r.expiresAt) {
|
||||||
return moment(r.expiresAt).format("lll");
|
return moment(r.expiresAt).format("lll");
|
||||||
}
|
}
|
||||||
return "Never";
|
return t('never');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -286,7 +288,7 @@ export default function ShareLinksTable({
|
||||||
deleteSharelink(row.original.accessTokenId)
|
deleteSharelink(row.original.accessTokenId)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Delete
|
{t('delete')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import OrgProvider from "@app/providers/OrgProvider";
|
||||||
import { ListAccessTokensResponse } from "@server/routers/accessToken";
|
import { ListAccessTokensResponse } from "@server/routers/accessToken";
|
||||||
import ShareLinksTable, { ShareLinkRow } from "./ShareLinksTable";
|
import ShareLinksTable, { ShareLinkRow } from "./ShareLinksTable";
|
||||||
import ShareableLinksSplash from "./ShareLinksSplash";
|
import ShareableLinksSplash from "./ShareLinksSplash";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
type ShareLinksPageProps = {
|
type ShareLinksPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -51,13 +52,15 @@ export default async function ShareLinksPage(props: ShareLinksPageProps) {
|
||||||
(token) => ({ ...token }) as ShareLinkRow
|
(token) => ({ ...token }) as ShareLinkRow
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* <ShareableLinksSplash /> */}
|
{/* <ShareableLinksSplash /> */}
|
||||||
|
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Share Links"
|
title={t('shareTitle')}
|
||||||
description="Create shareable links to grant temporary or permanent access to your resources"
|
description={t('shareDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<OrgProvider org={org}>
|
<OrgProvider org={org}>
|
||||||
|
|
|
||||||
|
|
@ -50,25 +50,7 @@ import {
|
||||||
CollapsibleTrigger
|
CollapsibleTrigger
|
||||||
} from "@app/components/ui/collapsible";
|
} from "@app/components/ui/collapsible";
|
||||||
import LoaderPlaceholder from "@app/components/PlaceHolderLoader";
|
import LoaderPlaceholder from "@app/components/PlaceHolderLoader";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const createSiteFormSchema = z.object({
|
|
||||||
name: z
|
|
||||||
.string()
|
|
||||||
.min(2, {
|
|
||||||
message: "Name must be at least 2 characters."
|
|
||||||
})
|
|
||||||
.max(30, {
|
|
||||||
message: "Name must not be longer than 30 characters."
|
|
||||||
}),
|
|
||||||
method: z.enum(["wireguard", "newt", "local"])
|
|
||||||
});
|
|
||||||
|
|
||||||
type CreateSiteFormValues = z.infer<typeof createSiteFormSchema>;
|
|
||||||
|
|
||||||
const defaultValues: Partial<CreateSiteFormValues> = {
|
|
||||||
name: "",
|
|
||||||
method: "newt"
|
|
||||||
};
|
|
||||||
|
|
||||||
type CreateSiteFormProps = {
|
type CreateSiteFormProps = {
|
||||||
onCreate?: (site: SiteRow) => void;
|
onCreate?: (site: SiteRow) => void;
|
||||||
|
|
@ -96,6 +78,27 @@ export default function CreateSiteForm({
|
||||||
privateKey: string;
|
privateKey: string;
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const createSiteFormSchema = z.object({
|
||||||
|
name: z
|
||||||
|
.string()
|
||||||
|
.min(2, {
|
||||||
|
message: t('nameMin', {len: 2})
|
||||||
|
})
|
||||||
|
.max(30, {
|
||||||
|
message: t('nameMax', {len: 30})
|
||||||
|
}),
|
||||||
|
method: z.enum(["wireguard", "newt", "local"])
|
||||||
|
});
|
||||||
|
|
||||||
|
type CreateSiteFormValues = z.infer<typeof createSiteFormSchema>;
|
||||||
|
|
||||||
|
const defaultValues: Partial<CreateSiteFormValues> = {
|
||||||
|
name: "",
|
||||||
|
method: "newt"
|
||||||
|
};
|
||||||
|
|
||||||
const [siteDefaults, setSiteDefaults] =
|
const [siteDefaults, setSiteDefaults] =
|
||||||
useState<PickSiteDefaultsResponse | null>(null);
|
useState<PickSiteDefaultsResponse | null>(null);
|
||||||
|
|
||||||
|
|
@ -169,8 +172,8 @@ export default function CreateSiteForm({
|
||||||
if (!keypair || !siteDefaults) {
|
if (!keypair || !siteDefaults) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating site",
|
title: t('siteErrorCreate'),
|
||||||
description: "Key pair or site defaults not found"
|
description: t('siteErrorCreateKeyPair')
|
||||||
});
|
});
|
||||||
setLoading?.(false);
|
setLoading?.(false);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|
@ -188,8 +191,8 @@ export default function CreateSiteForm({
|
||||||
if (!siteDefaults) {
|
if (!siteDefaults) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating site",
|
title: t('siteErrorCreate'),
|
||||||
description: "Site defaults not found"
|
description: t('siteErrorCreateDefaults')
|
||||||
});
|
});
|
||||||
setLoading?.(false);
|
setLoading?.(false);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|
@ -212,7 +215,7 @@ export default function CreateSiteForm({
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating site",
|
title: t('siteErrorCreate'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -227,11 +230,11 @@ export default function CreateSiteForm({
|
||||||
address: data.address?.split("/")[0],
|
address: data.address?.split("/")[0],
|
||||||
mbIn:
|
mbIn:
|
||||||
data.type == "wireguard" || data.type == "newt"
|
data.type == "wireguard" || data.type == "newt"
|
||||||
? "0 MB"
|
? t('megabytes', {count: 0})
|
||||||
: "-",
|
: "-",
|
||||||
mbOut:
|
mbOut:
|
||||||
data.type == "wireguard" || data.type == "newt"
|
data.type == "wireguard" || data.type == "newt"
|
||||||
? "0 MB"
|
? t('megabytes', {count: 0})
|
||||||
: "-",
|
: "-",
|
||||||
orgId: orgId as string,
|
orgId: orgId as string,
|
||||||
type: data.type as any,
|
type: data.type as any,
|
||||||
|
|
@ -286,13 +289,13 @@ PersistentKeepalive = 5`
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>{t('name')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input autoComplete="off" {...field} />
|
<Input autoComplete="off" {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This is the display name for the site.
|
{t('siteNameDescription')}
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -302,18 +305,18 @@ PersistentKeepalive = 5`
|
||||||
name="method"
|
name="method"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Method</FormLabel>
|
<FormLabel>{t('method')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Select
|
<Select
|
||||||
value={field.value}
|
value={field.value}
|
||||||
onValueChange={field.onChange}
|
onValueChange={field.onChange}
|
||||||
>
|
>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select method" />
|
<SelectValue placeholder={t('methodSelect')} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="local">
|
<SelectItem value="local">
|
||||||
Local
|
{t('local')}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem
|
<SelectItem
|
||||||
value="newt"
|
value="newt"
|
||||||
|
|
@ -332,7 +335,7 @@ PersistentKeepalive = 5`
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This is how you will expose connections.
|
{t('siteMethodDescription')}
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -346,7 +349,7 @@ PersistentKeepalive = 5`
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Learn how to install Newt on your system
|
{t('siteLearnNewt')}
|
||||||
</span>
|
</span>
|
||||||
<SquareArrowOutUpRight size={14} />
|
<SquareArrowOutUpRight size={14} />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -357,13 +360,12 @@ PersistentKeepalive = 5`
|
||||||
<>
|
<>
|
||||||
<CopyTextBox text={wgConfig} />
|
<CopyTextBox text={wgConfig} />
|
||||||
<span className="text-sm text-muted-foreground mt-2">
|
<span className="text-sm text-muted-foreground mt-2">
|
||||||
You will only be able to see the
|
{t('siteSeeConfigOnce')}
|
||||||
configuration once.
|
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
) : form.watch("method") === "wireguard" &&
|
) : form.watch("method") === "wireguard" &&
|
||||||
isLoading ? (
|
isLoading ? (
|
||||||
<p>Loading WireGuard configuration...</p>
|
<p>{t('siteLoadWGConfig')}</p>
|
||||||
) : form.watch("method") === "newt" && siteDefaults ? (
|
) : form.watch("method") === "newt" && siteDefaults ? (
|
||||||
<>
|
<>
|
||||||
<div className="mb-2">
|
<div className="mb-2">
|
||||||
|
|
@ -379,8 +381,7 @@ PersistentKeepalive = 5`
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
You will only be able to see the
|
{t('siteSeeConfigOnce')}
|
||||||
configuration once.
|
|
||||||
</span>
|
</span>
|
||||||
<div className="flex items-center justify-between space-x-4">
|
<div className="flex items-center justify-between space-x-4">
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
|
|
@ -390,13 +391,12 @@ PersistentKeepalive = 5`
|
||||||
className="p-0 flex items-center justify-between w-full"
|
className="p-0 flex items-center justify-between w-full"
|
||||||
>
|
>
|
||||||
<h4 className="text-sm font-semibold">
|
<h4 className="text-sm font-semibold">
|
||||||
Expand for Docker
|
{t('siteDocker')}
|
||||||
Deployment Details
|
|
||||||
</h4>
|
</h4>
|
||||||
<div>
|
<div>
|
||||||
<ChevronsUpDown className="h-4 w-4" />
|
<ChevronsUpDown className="h-4 w-4" />
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
Toggle
|
{t('toggle')}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -404,7 +404,7 @@ PersistentKeepalive = 5`
|
||||||
</div>
|
</div>
|
||||||
<CollapsibleContent className="space-y-4">
|
<CollapsibleContent className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<b>Docker Compose</b>
|
<b>{t('dockerCompose')}</b>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={
|
text={
|
||||||
newtConfigDockerCompose
|
newtConfigDockerCompose
|
||||||
|
|
@ -413,7 +413,7 @@ PersistentKeepalive = 5`
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<b>Docker Run</b>
|
<b>{t('dockerRun')}</b>
|
||||||
|
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={newtConfigDockerRun}
|
text={newtConfigDockerRun}
|
||||||
|
|
@ -434,7 +434,7 @@ PersistentKeepalive = 5`
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
>
|
>
|
||||||
<span> Local sites do not tunnel, learn more</span>
|
<span>{t('siteLearnLocal')}</span>
|
||||||
<SquareArrowOutUpRight size={14} />
|
<SquareArrowOutUpRight size={14} />
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
@ -451,7 +451,7 @@ PersistentKeepalive = 5`
|
||||||
htmlFor="terms"
|
htmlFor="terms"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
I have copied the config
|
{t('siteConfirmCopy')}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import {
|
||||||
} from "@app/components/Credenza";
|
} from "@app/components/Credenza";
|
||||||
import { SiteRow } from "./SitesTable";
|
import { SiteRow } from "./SitesTable";
|
||||||
import CreateSiteForm from "./CreateSiteForm";
|
import CreateSiteForm from "./CreateSiteForm";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type CreateSiteFormProps = {
|
type CreateSiteFormProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -30,6 +31,7 @@ export default function CreateSiteFormModal({
|
||||||
}: CreateSiteFormProps) {
|
}: CreateSiteFormProps) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [isChecked, setIsChecked] = useState(false);
|
const [isChecked, setIsChecked] = useState(false);
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -42,9 +44,9 @@ export default function CreateSiteFormModal({
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Create Site</CredenzaTitle>
|
<CredenzaTitle>{t('siteCreate')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Create a new site to start connecting your resources
|
{t('siteCreateDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -59,7 +61,7 @@ export default function CreateSiteFormModal({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -70,7 +72,7 @@ export default function CreateSiteFormModal({
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Create Site
|
{t('siteCreate')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,15 +15,18 @@ export function SitesDataTable<TData, TValue>({
|
||||||
data,
|
data,
|
||||||
createSite
|
createSite
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Sites"
|
title={t('sites')}
|
||||||
searchPlaceholder="Search sites..."
|
searchPlaceholder={t('searchSitesProgress')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
onAdd={createSite}
|
onAdd={createSite}
|
||||||
addButtonText="Add Site"
|
addButtonText={t('siteAdd')}
|
||||||
defaultSort={{
|
defaultSort={{
|
||||||
id: "name",
|
id: "name",
|
||||||
desc: false
|
desc: false
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,13 @@ import { Card, CardContent } from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { ArrowRight, DockIcon as Docker, Globe, Server, X } from "lucide-react";
|
import { ArrowRight, DockIcon as Docker, Globe, Server, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
|
||||||
export const SitesSplashCard = () => {
|
export const SitesSplashCard = () => {
|
||||||
const [isDismissed, setIsDismissed] = useState(true);
|
const [isDismissed, setIsDismissed] = useState(true);
|
||||||
|
|
||||||
const key = "sites-splash-card-dismissed";
|
const key = "sites-splash-card-dismissed";
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const dismissed = localStorage.getItem(key);
|
const dismissed = localStorage.getItem(key);
|
||||||
|
|
@ -34,7 +36,7 @@ export const SitesSplashCard = () => {
|
||||||
<button
|
<button
|
||||||
onClick={handleDismiss}
|
onClick={handleDismiss}
|
||||||
className="absolute top-2 right-2 p-2"
|
className="absolute top-2 right-2 p-2"
|
||||||
aria-label="Dismiss"
|
aria-label={t('dismiss')}
|
||||||
>
|
>
|
||||||
<X className="w-5 h-5" />
|
<X className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -42,22 +44,19 @@ export const SitesSplashCard = () => {
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-xl font-semibold flex items-center gap-2">
|
<h3 className="text-xl font-semibold flex items-center gap-2">
|
||||||
<Globe className="text-blue-500" />
|
<Globe className="text-blue-500" />
|
||||||
Newt (Recommended)
|
Newt ({t('recommended')})
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm">
|
<p className="text-sm">
|
||||||
For the best user experience, use Newt. It uses
|
{t('siteNewtDescription')}
|
||||||
WireGuard under the hood and allows you to address your
|
|
||||||
private resources by their LAN address on your private
|
|
||||||
network from within the Pangolin dashboard.
|
|
||||||
</p>
|
</p>
|
||||||
<ul className="text-sm text-muted-foreground space-y-2">
|
<ul className="text-sm text-muted-foreground space-y-2">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Server className="text-green-500 w-4 h-4" />
|
<Server className="text-green-500 w-4 h-4" />
|
||||||
Runs in Docker
|
{t('siteRunsInDocker')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Server className="text-green-500 w-4 h-4" />
|
<Server className="text-green-500 w-4 h-4" />
|
||||||
Runs in shell on macOS, Linux, and Windows
|
{t('siteRunsInShell')}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
@ -71,7 +70,7 @@ export const SitesSplashCard = () => {
|
||||||
className="w-full flex items-center"
|
className="w-full flex items-center"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
>
|
>
|
||||||
Install Newt{" "}
|
{t('siteInstallNewt')}{" "}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -79,20 +78,19 @@ export const SitesSplashCard = () => {
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-xl font-semibold flex items-center gap-2">
|
<h3 className="text-xl font-semibold flex items-center gap-2">
|
||||||
Basic WireGuard
|
{t('siteWg')}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm">
|
<p className="text-sm">
|
||||||
Use any WireGuard client to connect. You will have to
|
{t('siteWgAnyClients')}
|
||||||
address your internal resources using the peer IP.
|
|
||||||
</p>
|
</p>
|
||||||
<ul className="text-sm text-muted-foreground space-y-2">
|
<ul className="text-sm text-muted-foreground space-y-2">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Docker className="text-purple-500 w-4 h-4" />
|
<Docker className="text-purple-500 w-4 h-4" />
|
||||||
Compatible with all WireGuard clients
|
{t('siteWgCompatibleAllClients')}
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<Server className="text-purple-500 w-4 h-4" />
|
<Server className="text-purple-500 w-4 h-4" />
|
||||||
Manual configuration required
|
{t('siteWgManualConfigurationRequired')}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import CreateSiteFormModal from "./CreateSiteModal";
|
import CreateSiteFormModal from "./CreateSiteModal";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
import { parseDataSize } from '@app/lib/dataSize';
|
import { parseDataSize } from '@app/lib/dataSize';
|
||||||
|
|
||||||
export type SiteRow = {
|
export type SiteRow = {
|
||||||
|
|
@ -54,15 +55,16 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
const [rows, setRows] = useState<SiteRow[]>(sites);
|
const [rows, setRows] = useState<SiteRow[]>(sites);
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const deleteSite = (siteId: number) => {
|
const deleteSite = (siteId: number) => {
|
||||||
api.delete(`/site/${siteId}`)
|
api.delete(`/site/${siteId}`)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error deleting site", e);
|
console.error(t('siteErrorDelete'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error deleting site",
|
title: t('siteErrorDelete'),
|
||||||
description: formatAxiosError(e, "Error deleting site")
|
description: formatAxiosError(e, t('siteErrorDelete'))
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
@ -96,7 +98,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
|
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
|
||||||
>
|
>
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
View settings
|
{t('viewSettings')}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
|
|
@ -105,7 +107,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">Delete</span>
|
<span className="text-red-500">{t('delete')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
@ -122,7 +124,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -138,7 +140,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Online
|
{t('online')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -153,14 +155,14 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
return (
|
return (
|
||||||
<span className="text-green-500 flex items-center space-x-2">
|
<span className="text-green-500 flex items-center space-x-2">
|
||||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
<span>Online</span>
|
<span>{t('online')}</span>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<span className="text-neutral-500 flex items-center space-x-2">
|
<span className="text-neutral-500 flex items-center space-x-2">
|
||||||
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
||||||
<span>Offline</span>
|
<span>{t('offline')}</span>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -179,7 +181,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Site
|
{t('site')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -195,7 +197,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Data In
|
{t('dataIn')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -213,7 +215,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Data Out
|
{t('dataOut')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -231,7 +233,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Connection Type
|
{t('connectionType')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -258,7 +260,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
if (originalRow.type === "local") {
|
if (originalRow.type === "local") {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<span>Local</span>
|
<span>{t('local')}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -290,7 +292,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
|
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
|
||||||
>
|
>
|
||||||
<Button variant={"outlinePrimary"} className="ml-2">
|
<Button variant={"outlinePrimary"} className="ml-2">
|
||||||
Edit
|
{t('edit')}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -312,30 +314,22 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to remove the site{" "}
|
{t('siteQuestionRemove', {selectedSite: selectedSite?.name || selectedSite?.id})}
|
||||||
<b>{selectedSite?.name || selectedSite?.id}</b>{" "}
|
|
||||||
from the organization?
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Once removed, the site will no longer be
|
{t('siteMessageRemove')}
|
||||||
accessible.{" "}
|
|
||||||
<b>
|
|
||||||
All resources and targets associated with
|
|
||||||
the site will also be removed.
|
|
||||||
</b>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the site
|
{t('siteMessageConfirm')}
|
||||||
below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete Site"
|
buttonText={t('siteConfirmDelete')}
|
||||||
onConfirm={async () => deleteSite(selectedSite!.id)}
|
onConfirm={async () => deleteSite(selectedSite!.id)}
|
||||||
string={selectedSite.name}
|
string={selectedSite.name}
|
||||||
title="Delete Site"
|
title={t('siteDelete')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,13 @@ import {
|
||||||
InfoSections,
|
InfoSections,
|
||||||
InfoSectionTitle
|
InfoSectionTitle
|
||||||
} from "@app/components/InfoSection";
|
} from "@app/components/InfoSection";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type SiteInfoCardProps = {};
|
type SiteInfoCardProps = {};
|
||||||
|
|
||||||
export default function SiteInfoCard({}: SiteInfoCardProps) {
|
export default function SiteInfoCard({}: SiteInfoCardProps) {
|
||||||
const { site, updateSite } = useSiteContext();
|
const { site, updateSite } = useSiteContext();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const getConnectionTypeString = (type: string) => {
|
const getConnectionTypeString = (type: string) => {
|
||||||
if (type === "newt") {
|
if (type === "newt") {
|
||||||
|
|
@ -21,32 +23,32 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
|
||||||
} else if (type === "wireguard") {
|
} else if (type === "wireguard") {
|
||||||
return "WireGuard";
|
return "WireGuard";
|
||||||
} else if (type === "local") {
|
} else if (type === "local") {
|
||||||
return "Local";
|
return t('local');
|
||||||
} else {
|
} else {
|
||||||
return "Unknown";
|
return t('unknown');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Alert>
|
<Alert>
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">Site Information</AlertTitle>
|
<AlertTitle className="font-semibold">{t('siteInfo')}</AlertTitle>
|
||||||
<AlertDescription className="mt-4">
|
<AlertDescription className="mt-4">
|
||||||
<InfoSections cols={2}>
|
<InfoSections cols={2}>
|
||||||
{(site.type == "newt" || site.type == "wireguard") && (
|
{(site.type == "newt" || site.type == "wireguard") && (
|
||||||
<>
|
<>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Status</InfoSectionTitle>
|
<InfoSectionTitle>{t('status')}</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{site.online ? (
|
{site.online ? (
|
||||||
<div className="text-green-500 flex items-center space-x-2">
|
<div className="text-green-500 flex items-center space-x-2">
|
||||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
<span>Online</span>
|
<span>{t('online')}</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-neutral-500 flex items-center space-x-2">
|
<div className="text-neutral-500 flex items-center space-x-2">
|
||||||
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
||||||
<span>Offline</span>
|
<span>{t('offline')}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
|
|
@ -54,7 +56,7 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Connection Type</InfoSectionTitle>
|
<InfoSectionTitle>{t('connectionType')}</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{getConnectionTypeString(site.type)}
|
{getConnectionTypeString(site.type)}
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
|
|
|
||||||
|
|
@ -32,8 +32,8 @@ import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { SwitchInput } from "@app/components/SwitchInput";
|
import { SwitchInput } from "@app/components/SwitchInput";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ArrowRight, ExternalLink } from "lucide-react";
|
|
||||||
|
|
||||||
const GeneralFormSchema = z.object({
|
const GeneralFormSchema = z.object({
|
||||||
name: z.string().nonempty("Name is required"),
|
name: z.string().nonempty("Name is required"),
|
||||||
|
|
@ -50,6 +50,7 @@ export default function GeneralPage() {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const form = useForm<GeneralFormValues>({
|
const form = useForm<GeneralFormValues>({
|
||||||
resolver: zodResolver(GeneralFormSchema),
|
resolver: zodResolver(GeneralFormSchema),
|
||||||
|
|
@ -71,10 +72,10 @@ export default function GeneralPage() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to update site",
|
title: t("siteErrorUpdate"),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while updating the site."
|
t("siteErrorUpdateDescription")
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -85,8 +86,8 @@ export default function GeneralPage() {
|
||||||
});
|
});
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "Site updated",
|
title: t("siteUpdated"),
|
||||||
description: "The site has been updated."
|
description: t("siteUpdatedDescription")
|
||||||
});
|
});
|
||||||
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
@ -99,10 +100,10 @@ export default function GeneralPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
General Settings
|
{t("generalSettings")}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure the general settings for this site
|
{t("siteGeneralDescription")}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
|
@ -119,14 +120,13 @@ export default function GeneralPage() {
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>{t("name")}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This is the display name of the
|
{t("siteNameDescription")}
|
||||||
site.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -140,7 +140,9 @@ export default function GeneralPage() {
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="docker-socket-enabled"
|
id="docker-socket-enabled"
|
||||||
label="Enable Docker Socket"
|
label={t(
|
||||||
|
"enableDockerSocket"
|
||||||
|
)}
|
||||||
defaultChecked={
|
defaultChecked={
|
||||||
field.value
|
field.value
|
||||||
}
|
}
|
||||||
|
|
@ -151,20 +153,21 @@ export default function GeneralPage() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Enable Docker Socket
|
{t(
|
||||||
discovery for populating
|
"enableDockerSocketDescription"
|
||||||
container information.
|
)}{" "}
|
||||||
Socket path must be provided
|
<Link
|
||||||
to Newt.{" "}
|
|
||||||
<a
|
|
||||||
href="https://docs.fossorial.io/Newt/overview#docker-socket-integration"
|
href="https://docs.fossorial.io/Newt/overview#docker-socket-integration"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-primary hover:underline inline-flex items-center"
|
className="text-primary hover:underline inline-flex items-center"
|
||||||
>
|
>
|
||||||
Learn more
|
<span>
|
||||||
<ExternalLink className="ml-1 h-4 w-4" />
|
{t(
|
||||||
</a>
|
"enableDockerSocketLink"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -182,7 +185,7 @@ export default function GeneralPage() {
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Save General Settings
|
{t("saveGeneralSettings")}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ import {
|
||||||
BreadcrumbSeparator
|
BreadcrumbSeparator
|
||||||
} from "@app/components/ui/breadcrumb";
|
} from "@app/components/ui/breadcrumb";
|
||||||
import SiteInfoCard from "./SiteInfoCard";
|
import SiteInfoCard from "./SiteInfoCard";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
interface SettingsLayoutProps {
|
interface SettingsLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -38,9 +39,11 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
redirect(`/${params.orgId}/settings/sites`);
|
redirect(`/${params.orgId}/settings/sites`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "General",
|
title: t('general'),
|
||||||
href: "/{orgId}/settings/sites/{niceId}/general"
|
href: "/{orgId}/settings/sites/{niceId}/general"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
@ -48,8 +51,8 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title={`${site?.name} Settings`}
|
title={t('siteSetting', {siteName: site?.name})}
|
||||||
description="Configure the settings on your site"
|
description={t('siteSettingDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<SiteProvider site={site}>
|
<SiteProvider site={site}>
|
||||||
|
|
|
||||||
|
|
@ -65,32 +65,7 @@ import {
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { QRCodeCanvas } from "qrcode.react";
|
import { QRCodeCanvas } from "qrcode.react";
|
||||||
|
|
||||||
const createSiteFormSchema = z
|
import { useTranslations } from "next-intl";
|
||||||
.object({
|
|
||||||
name: z
|
|
||||||
.string()
|
|
||||||
.min(2, { message: "Name must be at least 2 characters." })
|
|
||||||
.max(30, {
|
|
||||||
message: "Name must not be longer than 30 characters."
|
|
||||||
}),
|
|
||||||
method: z.enum(["newt", "wireguard", "local"]),
|
|
||||||
copied: z.boolean(),
|
|
||||||
clientAddress: z.string().optional()
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
if (data.method !== "local") {
|
|
||||||
return data.copied;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Please confirm that you have copied the config.",
|
|
||||||
path: ["copied"]
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
type CreateSiteFormValues = z.infer<typeof createSiteFormSchema>;
|
|
||||||
|
|
||||||
type SiteType = "newt" | "wireguard" | "local";
|
type SiteType = "newt" | "wireguard" | "local";
|
||||||
|
|
||||||
|
|
@ -125,28 +100,54 @@ export default function Page() {
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const { orgId } = useParams();
|
const { orgId } = useParams();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const createSiteFormSchema = z
|
||||||
|
.object({
|
||||||
|
name: z
|
||||||
|
.string()
|
||||||
|
.min(2, { message: t('nameMin', {len: 2}) })
|
||||||
|
.max(30, {
|
||||||
|
message: t('nameMax', {len: 30})
|
||||||
|
}),
|
||||||
|
method: z.enum(["newt", "wireguard", "local"]),
|
||||||
|
copied: z.boolean(),
|
||||||
|
clientAddress: z.string().optional()
|
||||||
|
})
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
if (data.method !== "local") {
|
||||||
|
return data.copied;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t('sitesConfirmCopy'),
|
||||||
|
path: ["copied"]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
type CreateSiteFormValues = z.infer<typeof createSiteFormSchema>;
|
||||||
|
|
||||||
const [tunnelTypes, setTunnelTypes] = useState<
|
const [tunnelTypes, setTunnelTypes] = useState<
|
||||||
ReadonlyArray<TunnelTypeOption>
|
ReadonlyArray<TunnelTypeOption>
|
||||||
>([
|
>([
|
||||||
{
|
{
|
||||||
id: "newt",
|
id: "newt",
|
||||||
title: "Newt Tunnel (Recommended)",
|
title: t('siteNewtTunnel'),
|
||||||
description:
|
description: t('siteNewtTunnelDescription'),
|
||||||
"Easiest way to create an entrypoint into your network. No extra setup.",
|
|
||||||
disabled: true
|
disabled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "wireguard",
|
id: "wireguard",
|
||||||
title: "Basic WireGuard",
|
title: t('siteWg'),
|
||||||
description:
|
description: t('siteWgDescription'),
|
||||||
"Use any WireGuard client to establish a tunnel. Manual NAT setup required.",
|
|
||||||
disabled: true
|
disabled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "local",
|
id: "local",
|
||||||
title: "Local",
|
title: t('local'),
|
||||||
description: "Local resources only. No tunneling."
|
description: t('siteLocalDescription')
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
@ -325,7 +326,7 @@ WantedBy=default.target`
|
||||||
};
|
};
|
||||||
|
|
||||||
const getCommand = () => {
|
const getCommand = () => {
|
||||||
const placeholder = ["Unknown command"];
|
const placeholder = [t('unknownCommand')];
|
||||||
if (!commands) {
|
if (!commands) {
|
||||||
return placeholder;
|
return placeholder;
|
||||||
}
|
}
|
||||||
|
|
@ -387,8 +388,8 @@ WantedBy=default.target`
|
||||||
if (!siteDefaults || !wgConfig) {
|
if (!siteDefaults || !wgConfig) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating site",
|
title: t('siteErrorCreate'),
|
||||||
description: "Key pair or site defaults not found"
|
description: t('siteErrorCreateKeyPair')
|
||||||
});
|
});
|
||||||
setCreateLoading(false);
|
setCreateLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -405,8 +406,8 @@ WantedBy=default.target`
|
||||||
if (!siteDefaults) {
|
if (!siteDefaults) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating site",
|
title: t('siteErrorCreate'),
|
||||||
description: "Site defaults not found"
|
description: t('siteErrorCreateDefaults')
|
||||||
});
|
});
|
||||||
setCreateLoading(false);
|
setCreateLoading(false);
|
||||||
return;
|
return;
|
||||||
|
|
@ -429,7 +430,7 @@ WantedBy=default.target`
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating site",
|
title: t('siteErrorCreate'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -455,14 +456,14 @@ WantedBy=default.target`
|
||||||
);
|
);
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Failed to fetch release info: ${response.statusText}`
|
t('newtErrorFetchReleases', {err: response.statusText})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const latestVersion = data.tag_name;
|
const latestVersion = data.tag_name;
|
||||||
newtVersion = latestVersion;
|
newtVersion = latestVersion;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching latest release:", error);
|
console.error(t('newtErrorFetchLatest', {err: error instanceof Error ? error.message : String(error)}));
|
||||||
}
|
}
|
||||||
|
|
||||||
const generatedKeypair = generateKeypair();
|
const generatedKeypair = generateKeypair();
|
||||||
|
|
@ -529,8 +530,8 @@ WantedBy=default.target`
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title="Create Site"
|
title={t('siteCreate')}
|
||||||
description="Follow the steps below to create and connect a new site"
|
description={t('siteCreateDescription2')}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
@ -538,7 +539,7 @@ WantedBy=default.target`
|
||||||
router.push(`/${orgId}/settings/sites`);
|
router.push(`/${orgId}/settings/sites`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See All Sites
|
{t('siteSeeAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -548,7 +549,7 @@ WantedBy=default.target`
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Site Information
|
{t('siteInfo')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -564,7 +565,7 @@ WantedBy=default.target`
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name
|
{t('name')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -574,8 +575,7 @@ WantedBy=default.target`
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This is the display
|
{t('siteNameDescription')}
|
||||||
name for the site.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
|
@ -625,11 +625,10 @@ WantedBy=default.target`
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Tunnel Type
|
{t('tunnelType')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine how you want to connect to your
|
{t('siteTunnelDescription')}
|
||||||
site
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -649,18 +648,17 @@ WantedBy=default.target`
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Newt Credentials
|
{t('siteNewtCredentials')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
This is how Newt will authenticate
|
{t('siteNewtCredentialsDescription')}
|
||||||
with the server
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<InfoSections cols={3}>
|
<InfoSections cols={3}>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Newt Endpoint
|
{t('newtEndpoint')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
|
|
@ -672,7 +670,7 @@ WantedBy=default.target`
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Newt ID
|
{t('newtId')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
|
|
@ -682,7 +680,7 @@ WantedBy=default.target`
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Newt Secret Key
|
{t('newtSecretKey')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
|
|
@ -695,12 +693,10 @@ WantedBy=default.target`
|
||||||
<Alert variant="neutral" className="">
|
<Alert variant="neutral" className="">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Save Your Credentials
|
{t('siteCredentialsSave')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
You will only be able to see
|
{t('siteCredentialsSaveDescription')}
|
||||||
this once. Make sure to copy it
|
|
||||||
to a secure place.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
|
||||||
|
|
@ -735,9 +731,7 @@ WantedBy=default.target`
|
||||||
htmlFor="terms"
|
htmlFor="terms"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
I have
|
{t('siteConfirmCopy')}
|
||||||
copied the
|
|
||||||
config
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|
@ -751,16 +745,16 @@ WantedBy=default.target`
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Install Newt
|
{t('siteInstallNewt')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Get Newt running on your system
|
{t('siteInstallNewtDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-bold mb-3">
|
<p className="font-bold mb-3">
|
||||||
Operating System
|
{t('operatingSystem')}
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
||||||
{platforms.map((os) => (
|
{platforms.map((os) => (
|
||||||
|
|
@ -788,8 +782,8 @@ WantedBy=default.target`
|
||||||
{["docker", "podman"].includes(
|
{["docker", "podman"].includes(
|
||||||
platform
|
platform
|
||||||
)
|
)
|
||||||
? "Method"
|
? t('method')
|
||||||
: "Architecture"}
|
: t('architecture')}
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
||||||
{getArchitectures().map(
|
{getArchitectures().map(
|
||||||
|
|
@ -816,7 +810,7 @@ WantedBy=default.target`
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4">
|
<div className="pt-4">
|
||||||
<p className="font-bold mb-3">
|
<p className="font-bold mb-3">
|
||||||
Commands
|
{t('commands')}
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
|
|
@ -837,11 +831,10 @@ WantedBy=default.target`
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
WireGuard Configuration
|
{t('WgConfiguration')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Use the following configuration to
|
{t('WgConfigurationDescription')}
|
||||||
connect to your network
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -862,12 +855,10 @@ WantedBy=default.target`
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Save Your Credentials
|
{t('siteCredentialsSave')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
You will only be able to see this
|
{t('siteCredentialsSaveDescription')}
|
||||||
once. Make sure to copy it to a
|
|
||||||
secure place.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
|
||||||
|
|
@ -902,8 +893,7 @@ WantedBy=default.target`
|
||||||
htmlFor="terms"
|
htmlFor="terms"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
I have copied
|
{t('siteConfirmCopy')}
|
||||||
the config
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|
@ -925,7 +915,7 @@ WantedBy=default.target`
|
||||||
router.push(`/${orgId}/settings/sites`);
|
router.push(`/${orgId}/settings/sites`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -935,7 +925,7 @@ WantedBy=default.target`
|
||||||
form.handleSubmit(onSubmit)();
|
form.handleSubmit(onSubmit)();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Create Site
|
{t('siteCreate')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { AxiosResponse } from "axios";
|
||||||
import SitesTable, { SiteRow } from "./SitesTable";
|
import SitesTable, { SiteRow } from "./SitesTable";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
import SitesSplashCard from "./SitesSplashCard";
|
import SitesSplashCard from "./SitesSplashCard";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
type SitesPageProps = {
|
type SitesPageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -23,16 +24,18 @@ export default async function SitesPage(props: SitesPageProps) {
|
||||||
sites = res.data.data.sites;
|
sites = res.data.data.sites;
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
function formatSize(mb: number, type: string): string {
|
function formatSize(mb: number, type: string): string {
|
||||||
if (type === "local") {
|
if (type === "local") {
|
||||||
return "-"; // because we are not able to track the data use in a local site right now
|
return "-"; // because we are not able to track the data use in a local site right now
|
||||||
}
|
}
|
||||||
if (mb >= 1024 * 1024) {
|
if (mb >= 1024 * 1024) {
|
||||||
return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
|
return t('terabytes', {count: (mb / (1024 * 1024)).toFixed(2)});
|
||||||
} else if (mb >= 1024) {
|
} else if (mb >= 1024) {
|
||||||
return `${(mb / 1024).toFixed(2)} GB`;
|
return t('gigabytes', {count: (mb / 1024).toFixed(2)});
|
||||||
} else {
|
} else {
|
||||||
return `${mb.toFixed(2)} MB`;
|
return t('megabytes', {count: mb.toFixed(2)});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -55,8 +58,8 @@ export default async function SitesPage(props: SitesPageProps) {
|
||||||
{/* <SitesSplashCard /> */}
|
{/* <SitesSplashCard /> */}
|
||||||
|
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Sites"
|
title={t('siteManageSites')}
|
||||||
description="Allow connectivity to your network through secure tunnels"
|
description={t('siteDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<SitesTable sites={siteRows} orgId={params.orgId} />
|
<SitesTable sites={siteRows} orgId={params.orgId} />
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ import { Input } from "@app/components/ui/input";
|
||||||
import { DataTablePagination } from "@app/components/DataTablePagination";
|
import { DataTablePagination } from "@app/components/DataTablePagination";
|
||||||
import { Plus, Search } from "lucide-react";
|
import { Plus, Search } from "lucide-react";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -39,15 +40,18 @@ export function ApiKeysDataTable<TData, TValue>({
|
||||||
columns,
|
columns,
|
||||||
data
|
data
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="API Keys"
|
title={t('apiKeys')}
|
||||||
searchPlaceholder="Search API keys..."
|
searchPlaceholder={t('searchApiKeys')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
onAdd={addApiKey}
|
onAdd={addApiKey}
|
||||||
addButtonText="Generate API Key"
|
addButtonText={t('apiKeysAdd')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { ApiKeysDataTable } from "./ApiKeysDataTable";
|
import { ApiKeysDataTable } from "./ApiKeysDataTable";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export type ApiKeyRow = {
|
export type ApiKeyRow = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -40,14 +41,16 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
|
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const deleteSite = (apiKeyId: string) => {
|
const deleteSite = (apiKeyId: string) => {
|
||||||
api.delete(`/api-key/${apiKeyId}`)
|
api.delete(`/api-key/${apiKeyId}`)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error deleting API key", e);
|
console.error(t('apiKeysErrorDelete'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error deleting API key",
|
title: t('apiKeysErrorDelete'),
|
||||||
description: formatAxiosError(e, "Error deleting API key")
|
description: formatAxiosError(e, t('apiKeysErrorDeleteMessage'))
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
@ -71,7 +74,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
<span className="sr-only">Open menu</span>
|
<span className="sr-only">{t('openMenu')}</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
@ -81,7 +84,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
setSelected(apiKeyROw);
|
setSelected(apiKeyROw);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span>View settings</span>
|
<span>{t('viewSettings')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
@ -89,7 +92,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">Delete</span>
|
<span className="text-red-500">{t('delete')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
@ -106,7 +109,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -114,7 +117,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "key",
|
accessorKey: "key",
|
||||||
header: "Key",
|
header: t('key'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const r = row.original;
|
const r = row.original;
|
||||||
return <span className="font-mono">{r.key}</span>;
|
return <span className="font-mono">{r.key}</span>;
|
||||||
|
|
@ -122,7 +125,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "createdAt",
|
accessorKey: "createdAt",
|
||||||
header: "Created At",
|
header: t('createdAt'),
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const r = row.original;
|
const r = row.original;
|
||||||
return <span>{moment(r.createdAt).format("lll")} </span>;
|
return <span>{moment(r.createdAt).format("lll")} </span>;
|
||||||
|
|
@ -136,7 +139,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
<div className="flex items-center justify-end">
|
<div className="flex items-center justify-end">
|
||||||
<Link href={`/admin/api-keys/${r.id}`}>
|
<Link href={`/admin/api-keys/${r.id}`}>
|
||||||
<Button variant={"outlinePrimary"} className="ml-2">
|
<Button variant={"outlinePrimary"} className="ml-2">
|
||||||
Edit
|
{t('edit')}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -158,27 +161,24 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to remove the API key{" "}
|
{t('apiKeysQuestionRemove', {selectedApiKey: selected?.name || selected?.id})}
|
||||||
<b>{selected?.name || selected?.id}</b>?
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<b>
|
<b>
|
||||||
Once removed, the API key will no longer be
|
{t('apiKeysMessageRemove')}
|
||||||
able to be used.
|
|
||||||
</b>
|
</b>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the API key
|
{t('apiKeysMessageConfirm')}
|
||||||
below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete API Key"
|
buttonText={t('apiKeysDeleteConfirm')}
|
||||||
onConfirm={async () => deleteSite(selected!.id)}
|
onConfirm={async () => deleteSite(selected!.id)}
|
||||||
string={selected.name}
|
string={selected.name}
|
||||||
title="Delete API Key"
|
title={t('apiKeysDelete')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import {
|
||||||
import { GetApiKeyResponse } from "@server/routers/apiKeys";
|
import { GetApiKeyResponse } from "@server/routers/apiKeys";
|
||||||
import ApiKeyProvider from "@app/providers/ApiKeyProvider";
|
import ApiKeyProvider from "@app/providers/ApiKeyProvider";
|
||||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
interface SettingsLayoutProps {
|
interface SettingsLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -24,6 +25,8 @@ interface SettingsLayoutProps {
|
||||||
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
|
||||||
let apiKey = null;
|
let apiKey = null;
|
||||||
|
|
@ -40,14 +43,14 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
title: "Permissions",
|
title: t('apiKeysPermissionsTitle'),
|
||||||
href: "/admin/api-keys/{apiKeyId}/permissions"
|
href: "/admin/api-keys/{apiKeyId}/permissions"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle title={`${apiKey?.name} Settings`} />
|
<SettingsSectionTitle title={t('apiKeysSettings', {apiKeyName: apiKey?.name})} />
|
||||||
|
|
||||||
<ApiKeyProvider apiKey={apiKey}>
|
<ApiKeyProvider apiKey={apiKey}>
|
||||||
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
|
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,15 @@ import { ListApiKeyActionsResponse } from "@server/routers/apiKeys";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const { apiKeyId } = useParams();
|
const { apiKeyId } = useParams();
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loadingPage, setLoadingPage] = useState<boolean>(true);
|
const [loadingPage, setLoadingPage] = useState<boolean>(true);
|
||||||
const [selectedPermissions, setSelectedPermissions] = useState<
|
const [selectedPermissions, setSelectedPermissions] = useState<
|
||||||
Record<string, boolean>
|
Record<string, boolean>
|
||||||
|
|
@ -42,10 +45,10 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error loading API key actions",
|
title: t('apiKeysPermissionsErrorLoadingActions'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"Error loading API key actions"
|
t('apiKeysPermissionsErrorLoadingActions')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -76,18 +79,18 @@ export default function Page() {
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error setting permissions", e);
|
console.error(t('apiKeysErrorSetPermission'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error setting permissions",
|
title: t('apiKeysErrorSetPermission'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (actionsRes && actionsRes.status === 200) {
|
if (actionsRes && actionsRes.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
title: "Permissions updated",
|
title: t('apiKeysPermissionsUpdated'),
|
||||||
description: "The permissions have been updated."
|
description: t('apiKeysPermissionsUpdatedDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,10 +104,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Permissions
|
{t('apiKeysPermissionsTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine what this API key can do
|
{t('apiKeysPermissionsGeneralSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -122,7 +125,7 @@ export default function Page() {
|
||||||
loading={loadingSavePermissions}
|
loading={loadingSavePermissions}
|
||||||
disabled={loadingSavePermissions}
|
disabled={loadingSavePermissions}
|
||||||
>
|
>
|
||||||
Save Permissions
|
{t('apiKeysPermissionsSave')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
|
||||||
|
|
@ -54,40 +54,13 @@ import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import CopyTextBox from "@app/components/CopyTextBox";
|
import CopyTextBox from "@app/components/CopyTextBox";
|
||||||
import PermissionsSelectBox from "@app/components/PermissionsSelectBox";
|
import PermissionsSelectBox from "@app/components/PermissionsSelectBox";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const createFormSchema = z.object({
|
|
||||||
name: z
|
|
||||||
.string()
|
|
||||||
.min(2, {
|
|
||||||
message: "Name must be at least 2 characters."
|
|
||||||
})
|
|
||||||
.max(255, {
|
|
||||||
message: "Name must not be longer than 255 characters."
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
type CreateFormValues = z.infer<typeof createFormSchema>;
|
|
||||||
|
|
||||||
const copiedFormSchema = z
|
|
||||||
.object({
|
|
||||||
copied: z.boolean()
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
return data.copied;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "You must confirm that you have copied the API key.",
|
|
||||||
path: ["copied"]
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
type CopiedFormValues = z.infer<typeof copiedFormSchema>;
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [loadingPage, setLoadingPage] = useState(true);
|
const [loadingPage, setLoadingPage] = useState(true);
|
||||||
const [createLoading, setCreateLoading] = useState(false);
|
const [createLoading, setCreateLoading] = useState(false);
|
||||||
|
|
@ -96,6 +69,35 @@ export default function Page() {
|
||||||
Record<string, boolean>
|
Record<string, boolean>
|
||||||
>({});
|
>({});
|
||||||
|
|
||||||
|
const createFormSchema = z.object({
|
||||||
|
name: z
|
||||||
|
.string()
|
||||||
|
.min(2, {
|
||||||
|
message: t('nameMin', {len: 2})
|
||||||
|
})
|
||||||
|
.max(255, {
|
||||||
|
message: t('nameMax', {len: 255})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
type CreateFormValues = z.infer<typeof createFormSchema>;
|
||||||
|
|
||||||
|
const copiedFormSchema = z
|
||||||
|
.object({
|
||||||
|
copied: z.boolean()
|
||||||
|
})
|
||||||
|
.refine(
|
||||||
|
(data) => {
|
||||||
|
return data.copied;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: t('apiKeysConfirmCopy2'),
|
||||||
|
path: ["copied"]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
type CopiedFormValues = z.infer<typeof copiedFormSchema>;
|
||||||
|
|
||||||
const form = useForm<CreateFormValues>({
|
const form = useForm<CreateFormValues>({
|
||||||
resolver: zodResolver(createFormSchema),
|
resolver: zodResolver(createFormSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -122,7 +124,7 @@ export default function Page() {
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error creating API key",
|
title: t('apiKeysErrorCreate'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -143,10 +145,10 @@ export default function Page() {
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error setting permissions", e);
|
console.error(t('apiKeysErrorSetPermission'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error setting permissions",
|
title: t('apiKeysErrorSetPermission'),
|
||||||
description: formatAxiosError(e)
|
description: formatAxiosError(e)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -179,8 +181,8 @@ export default function Page() {
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title="Generate API Key"
|
title={t('apiKeysCreate')}
|
||||||
description="Generate a new root access API key"
|
description={t('apiKeysCreateDescription')}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
@ -188,7 +190,7 @@ export default function Page() {
|
||||||
router.push(`/admin/api-keys`);
|
router.push(`/admin/api-keys`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See All API Keys
|
{t('apiKeysSeeAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -200,7 +202,7 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
API Key Information
|
{t('apiKeysTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -216,7 +218,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name
|
{t('name')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -237,10 +239,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Permissions
|
{t('apiKeysGeneralSettings')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Determine what this API key can do
|
{t('apiKeysGeneralSettingsDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -260,14 +262,14 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Your API Key
|
{t('apiKeysList')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<InfoSections cols={2}>
|
<InfoSections cols={2}>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Name
|
{t('name')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
|
|
@ -277,7 +279,7 @@ export default function Page() {
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Created
|
{t('created')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{moment(
|
{moment(
|
||||||
|
|
@ -290,17 +292,15 @@ export default function Page() {
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Save Your API Key
|
{t('apiKeysSave')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
You will only be able to see this
|
{t('apiKeysSaveDescription')}
|
||||||
once. Make sure to copy it to a
|
|
||||||
secure place.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
|
||||||
<h4 className="font-semibold">
|
<h4 className="font-semibold">
|
||||||
Your API key is:
|
{t('apiKeysInfo')}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
|
|
@ -338,8 +338,7 @@ export default function Page() {
|
||||||
htmlFor="terms"
|
htmlFor="terms"
|
||||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
>
|
>
|
||||||
I have copied
|
{t('apiKeysConfirmCopy')}
|
||||||
the API key
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|
@ -363,7 +362,7 @@ export default function Page() {
|
||||||
router.push(`/admin/api-keys`);
|
router.push(`/admin/api-keys`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{!apiKey && (
|
{!apiKey && (
|
||||||
|
|
@ -375,7 +374,7 @@ export default function Page() {
|
||||||
form.handleSubmit(onSubmit)();
|
form.handleSubmit(onSubmit)();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Generate
|
{t('generate')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -386,7 +385,7 @@ export default function Page() {
|
||||||
copiedForm.handleSubmit(onCopiedSubmit)();
|
copiedForm.handleSubmit(onCopiedSubmit)();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Done
|
{t('done')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { AxiosResponse } from "axios";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
import { ListRootApiKeysResponse } from "@server/routers/apiKeys";
|
import { ListRootApiKeysResponse } from "@server/routers/apiKeys";
|
||||||
import ApiKeysTable, { ApiKeyRow } from "./ApiKeysTable";
|
import ApiKeysTable, { ApiKeyRow } from "./ApiKeysTable";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
type ApiKeyPageProps = {};
|
type ApiKeyPageProps = {};
|
||||||
|
|
||||||
|
|
@ -28,11 +29,13 @@ export default async function ApiKeysPage(props: ApiKeyPageProps) {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage API Keys"
|
title={t('apiKeysManage')}
|
||||||
description="API keys are used to authenticate with the integration API"
|
description={t('apiKeysDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ApiKeysTable apiKeys={rows} />
|
<ApiKeysTable apiKeys={rows} />
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,15 +15,16 @@ export function IdpDataTable<TData, TValue>({
|
||||||
data
|
data
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Identity Providers"
|
title={t('idp')}
|
||||||
searchPlaceholder="Search identity providers..."
|
searchPlaceholder={t('idpSearch')}
|
||||||
searchColumn="name"
|
searchColumn="name"
|
||||||
addButtonText="Add Identity Provider"
|
addButtonText={t('idpAdd')}
|
||||||
onAdd={() => {
|
onAdd={() => {
|
||||||
router.push("/admin/idp/create");
|
router.push("/admin/idp/create");
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import {
|
||||||
DropdownMenuTrigger
|
DropdownMenuTrigger
|
||||||
} from "@app/components/ui/dropdown-menu";
|
} from "@app/components/ui/dropdown-menu";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export type IdpRow = {
|
export type IdpRow = {
|
||||||
idpId: number;
|
idpId: number;
|
||||||
|
|
@ -36,19 +37,20 @@ export default function IdpTable({ idps }: Props) {
|
||||||
const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
|
const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const deleteIdp = async (idpId: number) => {
|
const deleteIdp = async (idpId: number) => {
|
||||||
try {
|
try {
|
||||||
await api.delete(`/idp/${idpId}`);
|
await api.delete(`/idp/${idpId}`);
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Identity provider deleted successfully"
|
description: t('idpDeletedDescription')
|
||||||
});
|
});
|
||||||
setIsDeleteModalOpen(false);
|
setIsDeleteModalOpen(false);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -74,7 +76,7 @@ export default function IdpTable({ idps }: Props) {
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
<span className="sr-only">Open menu</span>
|
<span className="sr-only">{t('openMenu')}</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
@ -84,7 +86,7 @@ export default function IdpTable({ idps }: Props) {
|
||||||
href={`/admin/idp/${r.idpId}/general`}
|
href={`/admin/idp/${r.idpId}/general`}
|
||||||
>
|
>
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
View settings
|
{t('viewSettings')}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
|
|
@ -93,7 +95,7 @@ export default function IdpTable({ idps }: Props) {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">Delete</span>
|
<span className="text-red-500">{t('delete')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
@ -126,7 +128,7 @@ export default function IdpTable({ idps }: Props) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -142,7 +144,7 @@ export default function IdpTable({ idps }: Props) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Type
|
{t('type')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -162,7 +164,7 @@ export default function IdpTable({ idps }: Props) {
|
||||||
<div className="flex items-center justify-end">
|
<div className="flex items-center justify-end">
|
||||||
<Link href={`/admin/idp/${siteRow.idpId}/general`}>
|
<Link href={`/admin/idp/${siteRow.idpId}/general`}>
|
||||||
<Button variant={"outlinePrimary"} className="ml-2">
|
<Button variant={"outlinePrimary"} className="ml-2">
|
||||||
Edit
|
{t('edit')}
|
||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -184,27 +186,22 @@ export default function IdpTable({ idps }: Props) {
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to permanently delete the
|
{t('idpQuestionRemove', {name: selectedIdp.name})}
|
||||||
identity provider <b>{selectedIdp.name}</b>?
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<b>
|
<b>
|
||||||
This will remove the identity provider and
|
{t('idpMessageRemove')}
|
||||||
all associated configurations. Users who
|
|
||||||
authenticate through this provider will no
|
|
||||||
longer be able to log in.
|
|
||||||
</b>
|
</b>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the identity
|
{t('idpMessageConfirm')}
|
||||||
provider below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete Identity Provider"
|
buttonText={t('idpConfirmDelete')}
|
||||||
onConfirm={async () => deleteIdp(selectedIdp.idpId)}
|
onConfirm={async () => deleteIdp(selectedIdp.idpId)}
|
||||||
string={selectedIdp.name}
|
string={selectedIdp.name}
|
||||||
title="Delete Identity Provider"
|
title={t('idpDelete')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -43,23 +43,7 @@ import {
|
||||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
import { Badge } from "@app/components/ui/badge";
|
import { Badge } from "@app/components/ui/badge";
|
||||||
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const GeneralFormSchema = z.object({
|
|
||||||
name: z.string().min(2, { message: "Name must be at least 2 characters." }),
|
|
||||||
clientId: z.string().min(1, { message: "Client ID is required." }),
|
|
||||||
clientSecret: z.string().min(1, { message: "Client Secret is required." }),
|
|
||||||
authUrl: z.string().url({ message: "Auth URL must be a valid URL." }),
|
|
||||||
tokenUrl: z.string().url({ message: "Token URL must be a valid URL." }),
|
|
||||||
identifierPath: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Identifier Path is required." }),
|
|
||||||
emailPath: z.string().optional(),
|
|
||||||
namePath: z.string().optional(),
|
|
||||||
scopes: z.string().min(1, { message: "Scopes are required." }),
|
|
||||||
autoProvision: z.boolean().default(false)
|
|
||||||
});
|
|
||||||
|
|
||||||
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
|
||||||
|
|
||||||
export default function GeneralPage() {
|
export default function GeneralPage() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
|
|
@ -71,6 +55,24 @@ export default function GeneralPage() {
|
||||||
const { isUnlocked } = useLicenseStatusContext();
|
const { isUnlocked } = useLicenseStatusContext();
|
||||||
|
|
||||||
const redirectUrl = `${env.app.dashboardUrl}/auth/idp/${idpId}/oidc/callback`;
|
const redirectUrl = `${env.app.dashboardUrl}/auth/idp/${idpId}/oidc/callback`;
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const GeneralFormSchema = z.object({
|
||||||
|
name: z.string().min(2, { message: t('nameMin', {len: 2}) }),
|
||||||
|
clientId: z.string().min(1, { message: t('idpClientIdRequired') }),
|
||||||
|
clientSecret: z.string().min(1, { message: t('idpClientSecretRequired') }),
|
||||||
|
authUrl: z.string().url({ message: t('idpErrorAuthUrlInvalid') }),
|
||||||
|
tokenUrl: z.string().url({ message: t('idpErrorTokenUrlInvalid') }),
|
||||||
|
identifierPath: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: t('idpPathRequired') }),
|
||||||
|
emailPath: z.string().optional(),
|
||||||
|
namePath: z.string().optional(),
|
||||||
|
scopes: z.string().min(1, { message: t('idpScopeRequired') }),
|
||||||
|
autoProvision: z.boolean().default(false)
|
||||||
|
});
|
||||||
|
|
||||||
|
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
||||||
|
|
||||||
const form = useForm<GeneralFormValues>({
|
const form = useForm<GeneralFormValues>({
|
||||||
resolver: zodResolver(GeneralFormSchema),
|
resolver: zodResolver(GeneralFormSchema),
|
||||||
|
|
@ -109,7 +111,7 @@ export default function GeneralPage() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -143,14 +145,14 @@ export default function GeneralPage() {
|
||||||
|
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Identity provider updated successfully"
|
description: t('idpUpdatedDescription')
|
||||||
});
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -169,18 +171,17 @@ export default function GeneralPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
General Information
|
{t('idpTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure the basic information for your identity
|
{t('idpSettingsDescription')}
|
||||||
provider
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<InfoSections cols={3}>
|
<InfoSections cols={3}>
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>
|
<InfoSectionTitle>
|
||||||
Redirect URL
|
{t('redirectUrl')}
|
||||||
</InfoSectionTitle>
|
</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
<CopyToClipboard text={redirectUrl} />
|
<CopyToClipboard text={redirectUrl} />
|
||||||
|
|
@ -191,13 +192,10 @@ export default function GeneralPage() {
|
||||||
<Alert variant="neutral" className="">
|
<Alert variant="neutral" className="">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
About Redirect URL
|
{t('redirectUrlAbout')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
This is the URL to which users will be
|
{t('redirectUrlAboutDescription')}
|
||||||
redirected after authentication. You need to
|
|
||||||
configure this URL in your identity provider
|
|
||||||
settings.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
<SettingsSectionForm>
|
<SettingsSectionForm>
|
||||||
|
|
@ -212,13 +210,12 @@ export default function GeneralPage() {
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>{t('name')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
A display name for this
|
{t('idpDisplayName')}
|
||||||
identity provider
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -228,7 +225,7 @@ export default function GeneralPage() {
|
||||||
<div className="flex items-start mb-0">
|
<div className="flex items-start mb-0">
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="auto-provision-toggle"
|
id="auto-provision-toggle"
|
||||||
label="Auto Provision Users"
|
label={t('idpAutoProvisionUsers')}
|
||||||
defaultChecked={form.getValues(
|
defaultChecked={form.getValues(
|
||||||
"autoProvision"
|
"autoProvision"
|
||||||
)}
|
)}
|
||||||
|
|
@ -241,10 +238,7 @@ export default function GeneralPage() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
When enabled, users will be
|
{t('idpAutoProvisionUsersDescription')}
|
||||||
automatically created in the system upon
|
|
||||||
first login with the ability to map
|
|
||||||
users to roles and organizations.
|
|
||||||
</span>
|
</span>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
@ -256,11 +250,10 @@ export default function GeneralPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
OAuth2/OIDC Configuration
|
{t('idpOidcConfigure')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure the OAuth2/OIDC provider endpoints and
|
{t('idpOidcConfigureDescription')}
|
||||||
credentials
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -277,15 +270,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Client ID
|
{t('idpClientId')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 client ID
|
{t('idpClientIdDescription')}
|
||||||
from your identity
|
|
||||||
provider
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -298,7 +289,7 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Client Secret
|
{t('idpClientSecret')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -307,9 +298,7 @@ export default function GeneralPage() {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 client secret
|
{t('idpClientSecretDescription')}
|
||||||
from your identity
|
|
||||||
provider
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -322,14 +311,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Authorization URL
|
{t('idpAuthUrl')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 authorization
|
{t('idpAuthUrlDescription')}
|
||||||
endpoint URL
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -342,14 +330,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Token URL
|
{t('idpTokenUrl')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 token
|
{t('idpTokenUrlDescription')}
|
||||||
endpoint URL
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -364,11 +351,10 @@ export default function GeneralPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Token Configuration
|
{t('idpToken')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure how to extract user information from
|
{t('idpTokenDescription')}
|
||||||
the ID token
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -382,19 +368,17 @@ export default function GeneralPage() {
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
About JMESPath
|
{t('idpJmespathAbout')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
The paths below use JMESPath
|
{t('idpJmespathAboutDescription')}
|
||||||
syntax to extract values from
|
|
||||||
the ID token.
|
|
||||||
<a
|
<a
|
||||||
href="https://jmespath.org"
|
href="https://jmespath.org"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-primary hover:underline inline-flex items-center"
|
className="text-primary hover:underline inline-flex items-center"
|
||||||
>
|
>
|
||||||
Learn more about JMESPath{" "}
|
{t('idpJmespathAboutDescriptionLink')}{" "}
|
||||||
<ExternalLink className="ml-1 h-4 w-4" />
|
<ExternalLink className="ml-1 h-4 w-4" />
|
||||||
</a>
|
</a>
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
|
|
@ -406,15 +390,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Identifier Path
|
{t('idpJmespathLabel')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The JMESPath to the user
|
{t('idpJmespathLabelDescription')}
|
||||||
identifier in the ID
|
|
||||||
token
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -427,15 +409,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Email Path (Optional)
|
{t('idpJmespathEmailPathOptional')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The JMESPath to the
|
{t('idpJmespathEmailPathOptionalDescription')}
|
||||||
user's email in the ID
|
|
||||||
token
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -448,15 +428,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name Path (Optional)
|
{t('idpJmespathNamePathOptional')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The JMESPath to the
|
{t('idpJmespathNamePathOptionalDescription')}
|
||||||
user's name in the ID
|
|
||||||
token
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -469,14 +447,13 @@ export default function GeneralPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Scopes
|
{t('idpOidcConfigureScopes')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Space-separated list of
|
{t('idpOidcConfigureScopesDescription')}
|
||||||
OAuth2 scopes to request
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -497,7 +474,7 @@ export default function GeneralPage() {
|
||||||
loading={loading}
|
loading={loading}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Save General Settings
|
{t('saveGeneralSettings')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import {
|
||||||
BreadcrumbPage,
|
BreadcrumbPage,
|
||||||
BreadcrumbSeparator
|
BreadcrumbSeparator
|
||||||
} from "@app/components/ui/breadcrumb";
|
} from "@app/components/ui/breadcrumb";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
interface SettingsLayoutProps {
|
interface SettingsLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
@ -24,6 +25,7 @@ interface SettingsLayoutProps {
|
||||||
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
let idp = null;
|
let idp = null;
|
||||||
try {
|
try {
|
||||||
|
|
@ -38,11 +40,11 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
|
|
||||||
const navItems: HorizontalTabs = [
|
const navItems: HorizontalTabs = [
|
||||||
{
|
{
|
||||||
title: "General",
|
title: t('general'),
|
||||||
href: `/admin/idp/${params.idpId}/general`
|
href: `/admin/idp/${params.idpId}/general`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Organization Policies",
|
title: t('orgPolicies'),
|
||||||
href: `/admin/idp/${params.idpId}/policies`
|
href: `/admin/idp/${params.idpId}/policies`
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
@ -50,8 +52,8 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title={`${idp.idp.name} Settings`}
|
title={t('idpSettings', { idpName: idp.idp.name })}
|
||||||
description="Configure the settings for your identity provider"
|
description={t('idpSettingsDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,14 +15,17 @@ export function PolicyDataTable<TData, TValue>({
|
||||||
data,
|
data,
|
||||||
onAdd
|
onAdd
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Organization Policies"
|
title={t('orgPolicies')}
|
||||||
searchPlaceholder="Search organization policies..."
|
searchPlaceholder={t('orgPoliciesSearch')}
|
||||||
searchColumn="orgId"
|
searchColumn="orgId"
|
||||||
addButtonText="Add Organization Policy"
|
addButtonText={t('orgPoliciesAdd')}
|
||||||
onAdd={onAdd}
|
onAdd={onAdd}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import {
|
||||||
} from "@app/components/ui/dropdown-menu";
|
} from "@app/components/ui/dropdown-menu";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { InfoPopup } from "@app/components/ui/info-popup";
|
import { InfoPopup } from "@app/components/ui/info-popup";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export interface PolicyRow {
|
export interface PolicyRow {
|
||||||
orgId: string;
|
orgId: string;
|
||||||
|
|
@ -34,6 +35,7 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props) {
|
export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props) {
|
||||||
|
const t = useTranslations();
|
||||||
const columns: ColumnDef<PolicyRow>[] = [
|
const columns: ColumnDef<PolicyRow>[] = [
|
||||||
{
|
{
|
||||||
id: "dots",
|
id: "dots",
|
||||||
|
|
@ -44,7 +46,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
<span className="sr-only">Open menu</span>
|
<span className="sr-only">{t('openMenu')}</span>
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
@ -54,7 +56,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
|
||||||
onDelete(r.orgId);
|
onDelete(r.orgId);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-red-500">Delete</span>
|
<span className="text-red-500">{t('delete')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
@ -71,7 +73,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Organization ID
|
{t('orgId')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -87,7 +89,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Role Mapping
|
{t('roleMapping')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -114,7 +116,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Organization Mapping
|
{t('orgMapping')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -142,7 +144,7 @@ export default function PolicyTable({ policies, onDelete, onAdd, onEdit }: Props
|
||||||
className="ml-2"
|
className="ml-2"
|
||||||
onClick={() => onEdit(policy)}
|
onClick={() => onEdit(policy)}
|
||||||
>
|
>
|
||||||
Edit
|
{t('edit')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -63,31 +63,19 @@ import {
|
||||||
SettingsSectionFooter,
|
SettingsSectionFooter,
|
||||||
SettingsSectionForm
|
SettingsSectionForm
|
||||||
} from "@app/components/Settings";
|
} from "@app/components/Settings";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type Organization = {
|
type Organization = {
|
||||||
orgId: string;
|
orgId: string;
|
||||||
name: string;
|
name: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const policyFormSchema = z.object({
|
|
||||||
orgId: z.string().min(1, { message: "Organization is required" }),
|
|
||||||
roleMapping: z.string().optional(),
|
|
||||||
orgMapping: z.string().optional()
|
|
||||||
});
|
|
||||||
|
|
||||||
const defaultMappingsSchema = z.object({
|
|
||||||
defaultRoleMapping: z.string().optional(),
|
|
||||||
defaultOrgMapping: z.string().optional()
|
|
||||||
});
|
|
||||||
|
|
||||||
type PolicyFormValues = z.infer<typeof policyFormSchema>;
|
|
||||||
type DefaultMappingsValues = z.infer<typeof defaultMappingsSchema>;
|
|
||||||
|
|
||||||
export default function PoliciesPage() {
|
export default function PoliciesPage() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { idpId } = useParams();
|
const { idpId } = useParams();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [pageLoading, setPageLoading] = useState(true);
|
const [pageLoading, setPageLoading] = useState(true);
|
||||||
const [addPolicyLoading, setAddPolicyLoading] = useState(false);
|
const [addPolicyLoading, setAddPolicyLoading] = useState(false);
|
||||||
|
|
@ -100,6 +88,20 @@ export default function PoliciesPage() {
|
||||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||||
const [editingPolicy, setEditingPolicy] = useState<PolicyRow | null>(null);
|
const [editingPolicy, setEditingPolicy] = useState<PolicyRow | null>(null);
|
||||||
|
|
||||||
|
const policyFormSchema = z.object({
|
||||||
|
orgId: z.string().min(1, { message: t('orgRequired') }),
|
||||||
|
roleMapping: z.string().optional(),
|
||||||
|
orgMapping: z.string().optional()
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultMappingsSchema = z.object({
|
||||||
|
defaultRoleMapping: z.string().optional(),
|
||||||
|
defaultOrgMapping: z.string().optional()
|
||||||
|
});
|
||||||
|
|
||||||
|
type PolicyFormValues = z.infer<typeof policyFormSchema>;
|
||||||
|
type DefaultMappingsValues = z.infer<typeof defaultMappingsSchema>;
|
||||||
|
|
||||||
const form = useForm<PolicyFormValues>({
|
const form = useForm<PolicyFormValues>({
|
||||||
resolver: zodResolver(policyFormSchema),
|
resolver: zodResolver(policyFormSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -131,7 +133,7 @@ export default function PoliciesPage() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -146,7 +148,7 @@ export default function PoliciesPage() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -165,7 +167,7 @@ export default function PoliciesPage() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -200,15 +202,15 @@ export default function PoliciesPage() {
|
||||||
};
|
};
|
||||||
setPolicies([...policies, newPolicy]);
|
setPolicies([...policies, newPolicy]);
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Policy added successfully"
|
description: t('orgPolicyAddedDescription')
|
||||||
});
|
});
|
||||||
setShowAddDialog(false);
|
setShowAddDialog(false);
|
||||||
form.reset();
|
form.reset();
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -242,8 +244,8 @@ export default function PoliciesPage() {
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Policy updated successfully"
|
description: t('orgPolicyUpdatedDescription')
|
||||||
});
|
});
|
||||||
setShowAddDialog(false);
|
setShowAddDialog(false);
|
||||||
setEditingPolicy(null);
|
setEditingPolicy(null);
|
||||||
|
|
@ -251,7 +253,7 @@ export default function PoliciesPage() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -269,13 +271,13 @@ export default function PoliciesPage() {
|
||||||
policies.filter((policy) => policy.orgId !== orgId)
|
policies.filter((policy) => policy.orgId !== orgId)
|
||||||
);
|
);
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Policy deleted successfully"
|
description: t('orgPolicyDeletedDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -293,13 +295,13 @@ export default function PoliciesPage() {
|
||||||
});
|
});
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Default mappings updated successfully"
|
description: t('defaultMappingsUpdatedDescription')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -318,21 +320,18 @@ export default function PoliciesPage() {
|
||||||
<Alert variant="neutral" className="mb-6">
|
<Alert variant="neutral" className="mb-6">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
About Organization Policies
|
{t('orgPoliciesAbout')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
Organization policies are used to control access to
|
{/*TODO(vlalx): Validate replacing */}
|
||||||
organizations based on the user's ID token. You can
|
{t('orgPoliciesAboutDescription')}{" "}
|
||||||
specify JMESPath expressions to extract role and
|
|
||||||
organization information from the ID token. For more
|
|
||||||
information, see{" "}
|
|
||||||
<Link
|
<Link
|
||||||
href="https://docs.fossorial.io/Pangolin/Identity%20Providers/auto-provision"
|
href="https://docs.fossorial.io/Pangolin/Identity%20Providers/auto-provision"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-primary hover:underline"
|
className="text-primary hover:underline"
|
||||||
>
|
>
|
||||||
the documentation
|
{t('orgPoliciesAboutDescriptionLink')}
|
||||||
<ExternalLink className="ml-1 h-4 w-4 inline" />
|
<ExternalLink className="ml-1 h-4 w-4 inline" />
|
||||||
</Link>
|
</Link>
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
|
|
@ -341,13 +340,10 @@ export default function PoliciesPage() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Default Mappings (Optional)
|
{t('defaultMappingsOptional')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
The default mappings are used when when there is not
|
{t('defaultMappingsOptionalDescription')}
|
||||||
an organization policy defined for an organization.
|
|
||||||
You can specify the default role and organization
|
|
||||||
mappings to fall back to here.
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -366,16 +362,13 @@ export default function PoliciesPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Default Role Mapping
|
{t('defaultMappingsRole')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The result of this
|
{t('defaultMappingsRoleDescription')}
|
||||||
expression must return the
|
|
||||||
role name as defined in the
|
|
||||||
organization as a string.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -388,16 +381,13 @@ export default function PoliciesPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Default Organization Mapping
|
{t('defaultMappingsOrg')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This expression must return
|
{t('defaultMappingsOrgDescription')}
|
||||||
the org ID or true for the
|
|
||||||
user to be allowed to access
|
|
||||||
the organization.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -412,7 +402,7 @@ export default function PoliciesPage() {
|
||||||
form="policy-default-mappings-form"
|
form="policy-default-mappings-form"
|
||||||
loading={updateDefaultMappingsLoading}
|
loading={updateDefaultMappingsLoading}
|
||||||
>
|
>
|
||||||
Save Default Mappings
|
{t('defaultMappingsSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
@ -455,11 +445,11 @@ export default function PoliciesPage() {
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>
|
<CredenzaTitle>
|
||||||
{editingPolicy
|
{editingPolicy
|
||||||
? "Edit Organization Policy"
|
? t('orgPoliciesEdit')
|
||||||
: "Add Organization Policy"}
|
: t('orgPoliciesAdd')}
|
||||||
</CredenzaTitle>
|
</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Configure access for an organization
|
{t('orgPolicyConfig')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -476,7 +466,7 @@ export default function PoliciesPage() {
|
||||||
name="orgId"
|
name="orgId"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem className="flex flex-col">
|
<FormItem className="flex flex-col">
|
||||||
<FormLabel>Organization</FormLabel>
|
<FormLabel>{t('org')}</FormLabel>
|
||||||
{editingPolicy ? (
|
{editingPolicy ? (
|
||||||
<Input {...field} disabled />
|
<Input {...field} disabled />
|
||||||
) : (
|
) : (
|
||||||
|
|
@ -500,18 +490,17 @@ export default function PoliciesPage() {
|
||||||
org.orgId ===
|
org.orgId ===
|
||||||
field.value
|
field.value
|
||||||
)?.name
|
)?.name
|
||||||
: "Select organization"}
|
: t('orgSelect')}
|
||||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0">
|
<PopoverContent className="p-0">
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search org" />
|
<CommandInput placeholder={t('orgSearch')} />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>
|
<CommandEmpty>
|
||||||
No org
|
{t('orgNotFound')}
|
||||||
found.
|
|
||||||
</CommandEmpty>
|
</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{organizations.map(
|
{organizations.map(
|
||||||
|
|
@ -562,16 +551,13 @@ export default function PoliciesPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Role Mapping Path (Optional)
|
{t('roleMappingPathOptional')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The result of this expression
|
{t('defaultMappingsRoleDescription')}
|
||||||
must return the role name as
|
|
||||||
defined in the organization as a
|
|
||||||
string.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -584,17 +570,13 @@ export default function PoliciesPage() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Organization Mapping Path
|
{t('orgMappingPathOptional')}
|
||||||
(Optional)
|
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
This expression must return the
|
{t('defaultMappingsOrgDescription')}
|
||||||
org ID or true for the user to
|
|
||||||
be allowed to access the
|
|
||||||
organization.
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -605,7 +587,7 @@ export default function PoliciesPage() {
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Cancel</Button>
|
<Button variant="outline">{t("cancel")}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -621,7 +603,7 @@ export default function PoliciesPage() {
|
||||||
: addPolicyLoading
|
: addPolicyLoading
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{editingPolicy ? "Update Policy" : "Add Policy"}
|
{editingPolicy ? t('orgPolicyUpdate') : t('orgPolicyAdd')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -37,38 +37,7 @@ import { StrategySelect } from "@app/components/StrategySelect";
|
||||||
import { SwitchInput } from "@app/components/SwitchInput";
|
import { SwitchInput } from "@app/components/SwitchInput";
|
||||||
import { Badge } from "@app/components/ui/badge";
|
import { Badge } from "@app/components/ui/badge";
|
||||||
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const createIdpFormSchema = z.object({
|
|
||||||
name: z.string().min(2, { message: "Name must be at least 2 characters." }),
|
|
||||||
type: z.enum(["oidc"]),
|
|
||||||
clientId: z.string().min(1, { message: "Client ID is required." }),
|
|
||||||
clientSecret: z.string().min(1, { message: "Client Secret is required." }),
|
|
||||||
authUrl: z.string().url({ message: "Auth URL must be a valid URL." }),
|
|
||||||
tokenUrl: z.string().url({ message: "Token URL must be a valid URL." }),
|
|
||||||
identifierPath: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Identifier Path is required." }),
|
|
||||||
emailPath: z.string().optional(),
|
|
||||||
namePath: z.string().optional(),
|
|
||||||
scopes: z.string().min(1, { message: "Scopes are required." }),
|
|
||||||
autoProvision: z.boolean().default(false)
|
|
||||||
});
|
|
||||||
|
|
||||||
type CreateIdpFormValues = z.infer<typeof createIdpFormSchema>;
|
|
||||||
|
|
||||||
interface ProviderTypeOption {
|
|
||||||
id: "oidc";
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const providerTypes: ReadonlyArray<ProviderTypeOption> = [
|
|
||||||
{
|
|
||||||
id: "oidc",
|
|
||||||
title: "OAuth2/OIDC",
|
|
||||||
description: "Configure an OpenID Connect identity provider"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
|
|
@ -76,6 +45,39 @@ export default function Page() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [createLoading, setCreateLoading] = useState(false);
|
const [createLoading, setCreateLoading] = useState(false);
|
||||||
const { isUnlocked } = useLicenseStatusContext();
|
const { isUnlocked } = useLicenseStatusContext();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const createIdpFormSchema = z.object({
|
||||||
|
name: z.string().min(2, { message: t('nameMin', {len: 2}) }),
|
||||||
|
type: z.enum(["oidc"]),
|
||||||
|
clientId: z.string().min(1, { message: t('idpClientIdRequired') }),
|
||||||
|
clientSecret: z.string().min(1, { message: t('idpClientSecretRequired') }),
|
||||||
|
authUrl: z.string().url({ message: t('idpErrorAuthUrlInvalid') }),
|
||||||
|
tokenUrl: z.string().url({ message: t('idpErrorTokenUrlInvalid') }),
|
||||||
|
identifierPath: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: t('idpPathRequired') }),
|
||||||
|
emailPath: z.string().optional(),
|
||||||
|
namePath: z.string().optional(),
|
||||||
|
scopes: z.string().min(1, { message: t('idpScopeRequired') }),
|
||||||
|
autoProvision: z.boolean().default(false)
|
||||||
|
});
|
||||||
|
|
||||||
|
type CreateIdpFormValues = z.infer<typeof createIdpFormSchema>;
|
||||||
|
|
||||||
|
interface ProviderTypeOption {
|
||||||
|
id: "oidc";
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const providerTypes: ReadonlyArray<ProviderTypeOption> = [
|
||||||
|
{
|
||||||
|
id: "oidc",
|
||||||
|
title: "OAuth2/OIDC",
|
||||||
|
description: t('idpOidcDescription')
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
const form = useForm<CreateIdpFormValues>({
|
const form = useForm<CreateIdpFormValues>({
|
||||||
resolver: zodResolver(createIdpFormSchema),
|
resolver: zodResolver(createIdpFormSchema),
|
||||||
|
|
@ -115,14 +117,14 @@ export default function Page() {
|
||||||
|
|
||||||
if (res.status === 201) {
|
if (res.status === 201) {
|
||||||
toast({
|
toast({
|
||||||
title: "Success",
|
title: t('success'),
|
||||||
description: "Identity provider created successfully"
|
description: t('idpCreatedDescription')
|
||||||
});
|
});
|
||||||
router.push(`/admin/idp/${res.data.data.idpId}`);
|
router.push(`/admin/idp/${res.data.data.idpId}`);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Error",
|
title: t('error'),
|
||||||
description: formatAxiosError(e),
|
description: formatAxiosError(e),
|
||||||
variant: "destructive"
|
variant: "destructive"
|
||||||
});
|
});
|
||||||
|
|
@ -135,8 +137,8 @@ export default function Page() {
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title="Create Identity Provider"
|
title={t('idpCreate')}
|
||||||
description="Configure a new identity provider for user authentication"
|
description={t('idpCreateDescription')}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
@ -144,7 +146,7 @@ export default function Page() {
|
||||||
router.push("/admin/idp");
|
router.push("/admin/idp");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See All Identity Providers
|
{t('idpSeeAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -152,11 +154,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
General Information
|
{t('idpTitle')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure the basic information for your identity
|
{t('idpCreateSettingsDescription')}
|
||||||
provider
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -172,13 +173,12 @@ export default function Page() {
|
||||||
name="name"
|
name="name"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Name</FormLabel>
|
<FormLabel>{t('name')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
A display name for this
|
{t('idpDisplayName')}
|
||||||
identity provider
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -188,7 +188,7 @@ export default function Page() {
|
||||||
<div className="flex items-start mb-0">
|
<div className="flex items-start mb-0">
|
||||||
<SwitchInput
|
<SwitchInput
|
||||||
id="auto-provision-toggle"
|
id="auto-provision-toggle"
|
||||||
label="Auto Provision Users"
|
label={t('idpAutoProvisionUsers')}
|
||||||
defaultChecked={form.getValues(
|
defaultChecked={form.getValues(
|
||||||
"autoProvision"
|
"autoProvision"
|
||||||
)}
|
)}
|
||||||
|
|
@ -201,10 +201,7 @@ export default function Page() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
When enabled, users will be
|
{t('idpAutoProvisionUsersDescription')}
|
||||||
automatically created in the system upon
|
|
||||||
first login with the ability to map
|
|
||||||
users to roles and organizations.
|
|
||||||
</span>
|
</span>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
@ -215,11 +212,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Provider Type
|
{t('idpType')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Select the type of identity provider you want to
|
{t('idpTypeDescription')}
|
||||||
configure
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -239,11 +235,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
OAuth2/OIDC Configuration
|
{t('idpOidcConfigure')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure the OAuth2/OIDC provider endpoints
|
{t('idpOidcConfigureDescription')}
|
||||||
and credentials
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -259,15 +254,13 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Client ID
|
{t('idpClientId')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 client ID
|
{t('idpClientIdDescription')}
|
||||||
from your identity
|
|
||||||
provider
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -280,7 +273,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Client Secret
|
{t('idpClientSecret')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -289,9 +282,7 @@ export default function Page() {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 client secret
|
{t('idpClientSecretDescription')}
|
||||||
from your identity
|
|
||||||
provider
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -304,7 +295,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Authorization URL
|
{t('idpAuthUrl')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -313,8 +304,7 @@ export default function Page() {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 authorization
|
{t('idpAuthUrlDescription')}
|
||||||
endpoint URL
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -327,7 +317,7 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Token URL
|
{t('idpTokenUrl')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -336,8 +326,7 @@ export default function Page() {
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The OAuth2 token
|
{t('idpTokenUrlDescription')}
|
||||||
endpoint URL
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -349,14 +338,10 @@ export default function Page() {
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
Important Information
|
{t('idpOidcConfigureAlert')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
After creating the identity provider,
|
{t('idpOidcConfigureAlertDescription')}
|
||||||
you will need to configure the callback
|
|
||||||
URL in your identity provider's
|
|
||||||
settings. The callback URL will be
|
|
||||||
provided after successful creation.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
</SettingsSectionBody>
|
</SettingsSectionBody>
|
||||||
|
|
@ -365,11 +350,10 @@ export default function Page() {
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
Token Configuration
|
{t('idpToken')}
|
||||||
</SettingsSectionTitle>
|
</SettingsSectionTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Configure how to extract user information
|
{t('idpTokenDescription')}
|
||||||
from the ID token
|
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
|
|
@ -382,19 +366,17 @@ export default function Page() {
|
||||||
<Alert variant="neutral">
|
<Alert variant="neutral">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
About JMESPath
|
{t('idpJmespathAbout')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
The paths below use JMESPath
|
{t('idpJmespathAboutDescription')}{" "}
|
||||||
syntax to extract values from
|
|
||||||
the ID token.
|
|
||||||
<a
|
<a
|
||||||
href="https://jmespath.org"
|
href="https://jmespath.org"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-primary hover:underline inline-flex items-center"
|
className="text-primary hover:underline inline-flex items-center"
|
||||||
>
|
>
|
||||||
Learn more about JMESPath{" "}
|
{t('idpJmespathAboutDescriptionLink')}{" "}
|
||||||
<ExternalLink className="ml-1 h-4 w-4" />
|
<ExternalLink className="ml-1 h-4 w-4" />
|
||||||
</a>
|
</a>
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
|
|
@ -406,15 +388,13 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Identifier Path
|
{t('idpJmespathLabel')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The path to the user
|
{t('idpJmespathLabelDescription')}
|
||||||
identifier in the ID
|
|
||||||
token
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -427,15 +407,13 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Email Path (Optional)
|
{t('idpJmespathEmailPathOptional')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The path to the
|
{t('idpJmespathEmailPathOptionalDescription')}
|
||||||
user's email in the ID
|
|
||||||
token
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -448,15 +426,13 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Name Path (Optional)
|
{t('idpJmespathNamePathOptional')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
The path to the
|
{t('idpJmespathNamePathOptionalDescription')}
|
||||||
user's name in the ID
|
|
||||||
token
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -469,14 +445,13 @@ export default function Page() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
Scopes
|
{t('idpOidcConfigureScopes')}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Space-separated list of
|
{t('idpOidcConfigureScopesDescription')}
|
||||||
OAuth2 scopes to request
|
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -498,7 +473,7 @@ export default function Page() {
|
||||||
router.push("/admin/idp");
|
router.push("/admin/idp");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -506,7 +481,7 @@ export default function Page() {
|
||||||
loading={createLoading}
|
loading={createLoading}
|
||||||
onClick={form.handleSubmit(onSubmit)}
|
onClick={form.handleSubmit(onSubmit)}
|
||||||
>
|
>
|
||||||
Create Identity Provider
|
{t('idpSubmit')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
import IdpTable, { IdpRow } from "./AdminIdpTable";
|
import IdpTable, { IdpRow } from "./AdminIdpTable";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
export default async function IdpPage() {
|
export default async function IdpPage() {
|
||||||
let idps: IdpRow[] = [];
|
let idps: IdpRow[] = [];
|
||||||
|
|
@ -16,11 +17,13 @@ export default async function IdpPage() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage Identity Providers"
|
title={t('idpManage')}
|
||||||
description="View and manage identity providers in the system"
|
description={t('idpManageDescription')}
|
||||||
/>
|
/>
|
||||||
<IdpTable idps={idps} />
|
<IdpTable idps={idps} />
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import { LicenseKeyCache } from "@server/license/license";
|
||||||
import { ArrowUpDown } from "lucide-react";
|
import { ArrowUpDown } from "lucide-react";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type LicenseKeysDataTableProps = {
|
type LicenseKeysDataTableProps = {
|
||||||
licenseKeys: LicenseKeyCache[];
|
licenseKeys: LicenseKeyCache[];
|
||||||
|
|
@ -27,6 +28,9 @@ export function LicenseKeysDataTable({
|
||||||
onDelete,
|
onDelete,
|
||||||
onCreate
|
onCreate
|
||||||
}: LicenseKeysDataTableProps) {
|
}: LicenseKeysDataTableProps) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const columns: ColumnDef<LicenseKeyCache>[] = [
|
const columns: ColumnDef<LicenseKeyCache>[] = [
|
||||||
{
|
{
|
||||||
accessorKey: "licenseKey",
|
accessorKey: "licenseKey",
|
||||||
|
|
@ -38,7 +42,7 @@ export function LicenseKeysDataTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
License Key
|
{t('licenseKey')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -63,13 +67,13 @@ export function LicenseKeysDataTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Valid
|
{t('valid')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
return row.original.valid ? "Yes" : "No";
|
return row.original.valid ? t('yes') : t('no');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -82,7 +86,7 @@ export function LicenseKeysDataTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Type
|
{t('type')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -90,7 +94,7 @@ export function LicenseKeysDataTable({
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const type = row.original.type;
|
const type = row.original.type;
|
||||||
const label =
|
const label =
|
||||||
type === "SITES" ? "Additional Sites" : "Host License";
|
type === "SITES" ? t('sitesAdditional') : t('licenseHost');
|
||||||
const variant = type === "SITES" ? "secondary" : "default";
|
const variant = type === "SITES" ? "secondary" : "default";
|
||||||
return row.original.valid ? (
|
return row.original.valid ? (
|
||||||
<Badge variant={variant}>{label}</Badge>
|
<Badge variant={variant}>{label}</Badge>
|
||||||
|
|
@ -107,7 +111,7 @@ export function LicenseKeysDataTable({
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Number of Sites
|
{t('numberOfSites')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -121,7 +125,7 @@ export function LicenseKeysDataTable({
|
||||||
variant="outlinePrimary"
|
variant="outlinePrimary"
|
||||||
onClick={() => onDelete(row.original)}
|
onClick={() => onDelete(row.original)}
|
||||||
>
|
>
|
||||||
Delete
|
{t('delete')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -132,11 +136,11 @@ export function LicenseKeysDataTable({
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={licenseKeys}
|
data={licenseKeys}
|
||||||
title="License Keys"
|
title={t('licenseKeys')}
|
||||||
searchPlaceholder="Search license keys..."
|
searchPlaceholder={t('licenseKeySearch')}
|
||||||
searchColumn="licenseKey"
|
searchColumn="licenseKey"
|
||||||
onAdd={onCreate}
|
onAdd={onCreate}
|
||||||
addButtonText="Add License Key"
|
addButtonText={t('licenseKeyAdd')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import {
|
||||||
CredenzaHeader,
|
CredenzaHeader,
|
||||||
CredenzaTitle
|
CredenzaTitle
|
||||||
} from "@app/components/Credenza";
|
} from "@app/components/Credenza";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type SitePriceCalculatorProps = {
|
type SitePriceCalculatorProps = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
|
|
@ -55,27 +56,26 @@ export function SitePriceCalculator({
|
||||||
? licenseFlatRate + siteCount * pricePerSite
|
? licenseFlatRate + siteCount * pricePerSite
|
||||||
: siteCount * pricePerSite;
|
: siteCount * pricePerSite;
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Credenza open={isOpen} onOpenChange={onOpenChange}>
|
<Credenza open={isOpen} onOpenChange={onOpenChange}>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>
|
<CredenzaTitle>
|
||||||
{mode === "license"
|
{mode === "license"
|
||||||
? "Purchase License"
|
? t('licensePurchase')
|
||||||
: "Purchase Additional Sites"}
|
: t('licensePurchaseSites')}
|
||||||
</CredenzaTitle>
|
</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Choose how many sites you want to{" "}
|
{t('licensePurchaseDescription', {selectedMode: mode})}
|
||||||
{mode === "license"
|
|
||||||
? "purchase a license for. You can always add more sites later."
|
|
||||||
: "add to your existing license."}
|
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex flex-col items-center space-y-4">
|
<div className="flex flex-col items-center space-y-4">
|
||||||
<div className="text-sm font-medium text-muted-foreground">
|
<div className="text-sm font-medium text-muted-foreground">
|
||||||
Number of Sites
|
{t('numberOfSites')}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -83,7 +83,7 @@ export function SitePriceCalculator({
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={decrementSites}
|
onClick={decrementSites}
|
||||||
disabled={siteCount <= 1}
|
disabled={siteCount <= 1}
|
||||||
aria-label="Decrease site count"
|
aria-label={t('sitestCountDecrease')}
|
||||||
>
|
>
|
||||||
<MinusCircle className="h-5 w-5" />
|
<MinusCircle className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -94,7 +94,7 @@ export function SitePriceCalculator({
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={incrementSites}
|
onClick={incrementSites}
|
||||||
aria-label="Increase site count"
|
aria-label={t('sitestCountIncrease')}
|
||||||
>
|
>
|
||||||
<PlusCircle className="h-5 w-5" />
|
<PlusCircle className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -103,15 +103,14 @@ export function SitePriceCalculator({
|
||||||
|
|
||||||
<div className="border-t pt-4">
|
<div className="border-t pt-4">
|
||||||
<p className="text-muted-foreground text-sm mt-2 text-center">
|
<p className="text-muted-foreground text-sm mt-2 text-center">
|
||||||
For the most up-to-date pricing and discounts,
|
{t('licensePricingPage')}
|
||||||
please visit the{" "}
|
|
||||||
<a
|
<a
|
||||||
href="https://docs.fossorial.io/pricing"
|
href="https://docs.fossorial.io/pricing"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="underline"
|
className="underline"
|
||||||
>
|
>
|
||||||
pricing page
|
{t('pricingPage')}
|
||||||
</a>
|
</a>
|
||||||
.
|
.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -120,10 +119,10 @@ export function SitePriceCalculator({
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Cancel</Button>
|
<Button variant="outline">{t('cancel')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button onClick={continueToPayment}>
|
<Button onClick={continueToPayment}>
|
||||||
See Purchase Portal
|
{t('pricingPortal')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
|
||||||
|
|
@ -54,16 +54,7 @@ import Link from "next/link";
|
||||||
import { Checkbox } from "@app/components/ui/checkbox";
|
import { Checkbox } from "@app/components/ui/checkbox";
|
||||||
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||||
import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
|
import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
const formSchema = z.object({
|
|
||||||
licenseKey: z
|
|
||||||
.string()
|
|
||||||
.nonempty({ message: "License key is required" })
|
|
||||||
.max(255),
|
|
||||||
agreeToTerms: z.boolean().refine((val) => val === true, {
|
|
||||||
message: "You must agree to the license terms"
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
function obfuscateLicenseKey(key: string): string {
|
function obfuscateLicenseKey(key: string): string {
|
||||||
if (key.length <= 8) return key;
|
if (key.length <= 8) return key;
|
||||||
|
|
@ -94,6 +85,18 @@ export default function LicensePage() {
|
||||||
const [isRecheckingLicense, setIsRecheckingLicense] = useState(false);
|
const [isRecheckingLicense, setIsRecheckingLicense] = useState(false);
|
||||||
const { supporterStatus } = useSupporterStatusContext();
|
const { supporterStatus } = useSupporterStatusContext();
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
licenseKey: z
|
||||||
|
.string()
|
||||||
|
.nonempty({ message: t('licenseKeyRequired') })
|
||||||
|
.max(255),
|
||||||
|
agreeToTerms: z.boolean().refine((val) => val === true, {
|
||||||
|
message: t('licenseTermsAgree')
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof formSchema>>({
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
resolver: zodResolver(formSchema),
|
resolver: zodResolver(formSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
|
@ -127,10 +130,10 @@ export default function LicensePage() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Failed to load license keys",
|
title: t('licenseErrorKeyLoad'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred loading license keys"
|
t('licenseErrorKeyLoadDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -146,16 +149,16 @@ export default function LicensePage() {
|
||||||
}
|
}
|
||||||
await loadLicenseKeys();
|
await loadLicenseKeys();
|
||||||
toast({
|
toast({
|
||||||
title: "License key deleted",
|
title: t('licenseKeyDeleted'),
|
||||||
description: "The license key has been deleted"
|
description: t('licenseKeyDeletedDescription')
|
||||||
});
|
});
|
||||||
setIsDeleteModalOpen(false);
|
setIsDeleteModalOpen(false);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Failed to delete license key",
|
title: t('licenseErrorKeyDelete'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred deleting license key"
|
t('licenseErrorKeyDeleteDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -172,15 +175,15 @@ export default function LicensePage() {
|
||||||
}
|
}
|
||||||
await loadLicenseKeys();
|
await loadLicenseKeys();
|
||||||
toast({
|
toast({
|
||||||
title: "License keys rechecked",
|
title: t('licenseErrorKeyRechecked'),
|
||||||
description: "All license keys have been rechecked"
|
description: t('licenseErrorKeyRecheckedDescription')
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
title: "Failed to recheck license keys",
|
title: t('licenseErrorKeyRecheck'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred rechecking license keys"
|
t('licenseErrorKeyRecheckDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -199,8 +202,8 @@ export default function LicensePage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: "License key activated",
|
title: t('licenseKeyActivated'),
|
||||||
description: "The license key has been successfully activated."
|
description: t('licenseKeyActivatedDescription')
|
||||||
});
|
});
|
||||||
|
|
||||||
setIsCreateModalOpen(false);
|
setIsCreateModalOpen(false);
|
||||||
|
|
@ -209,10 +212,10 @@ export default function LicensePage() {
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Failed to activate license key",
|
title: t('licenseErrorKeyActivate'),
|
||||||
description: formatAxiosError(
|
description: formatAxiosError(
|
||||||
e,
|
e,
|
||||||
"An error occurred while activating the license key."
|
t('licenseErrorKeyActivateDescription')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -243,9 +246,9 @@ export default function LicensePage() {
|
||||||
>
|
>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
<CredenzaHeader>
|
<CredenzaHeader>
|
||||||
<CredenzaTitle>Activate License Key</CredenzaTitle>
|
<CredenzaTitle>{t('licenseActivateKey')}</CredenzaTitle>
|
||||||
<CredenzaDescription>
|
<CredenzaDescription>
|
||||||
Enter a license key to activate it.
|
{t('licenseActivateKeyDescription')}
|
||||||
</CredenzaDescription>
|
</CredenzaDescription>
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
|
|
@ -260,7 +263,7 @@ export default function LicensePage() {
|
||||||
name="licenseKey"
|
name="licenseKey"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>License Key</FormLabel>
|
<FormLabel>{t('licenseKey')}</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} />
|
<Input {...field} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -283,12 +286,7 @@ export default function LicensePage() {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<div className="space-y-1 leading-none">
|
<div className="space-y-1 leading-none">
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
By checking this box, you
|
{t('licenseAgreement')}
|
||||||
confirm that you have read
|
|
||||||
and agree to the license
|
|
||||||
terms corresponding to the
|
|
||||||
tier associated with your
|
|
||||||
license key.
|
|
||||||
{/* <br /> */}
|
{/* <br /> */}
|
||||||
{/* <Link */}
|
{/* <Link */}
|
||||||
{/* href="https://fossorial.io/license.html" */}
|
{/* href="https://fossorial.io/license.html" */}
|
||||||
|
|
@ -296,9 +294,7 @@ export default function LicensePage() {
|
||||||
{/* rel="noopener noreferrer" */}
|
{/* rel="noopener noreferrer" */}
|
||||||
{/* className="text-primary hover:underline" */}
|
{/* className="text-primary hover:underline" */}
|
||||||
{/* > */}
|
{/* > */}
|
||||||
{/* View Fossorial */}
|
{/* {t('fossorialLicense')} */}
|
||||||
{/* Commercial License & */}
|
|
||||||
{/* Subscription Terms */}
|
|
||||||
{/* </Link> */}
|
{/* </Link> */}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
|
|
@ -311,7 +307,7 @@ export default function LicensePage() {
|
||||||
</CredenzaBody>
|
</CredenzaBody>
|
||||||
<CredenzaFooter>
|
<CredenzaFooter>
|
||||||
<CredenzaClose asChild>
|
<CredenzaClose asChild>
|
||||||
<Button variant="outline">Close</Button>
|
<Button variant="outline">{t('close')}</Button>
|
||||||
</CredenzaClose>
|
</CredenzaClose>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -319,7 +315,7 @@ export default function LicensePage() {
|
||||||
loading={isActivatingLicense}
|
loading={isActivatingLicense}
|
||||||
disabled={isActivatingLicense}
|
disabled={isActivatingLicense}
|
||||||
>
|
>
|
||||||
Activate License
|
{t('licenseActivate')}
|
||||||
</Button>
|
</Button>
|
||||||
</CredenzaFooter>
|
</CredenzaFooter>
|
||||||
</CredenzaContent>
|
</CredenzaContent>
|
||||||
|
|
@ -335,48 +331,39 @@ export default function LicensePage() {
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to delete the license key{" "}
|
{t('licenseQuestionRemove', {selectedKey: obfuscateLicenseKey(selectedLicenseKey.licenseKey)})}
|
||||||
<b>
|
|
||||||
{obfuscateLicenseKey(
|
|
||||||
selectedLicenseKey.licenseKey
|
|
||||||
)}
|
|
||||||
</b>
|
|
||||||
?
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<b>
|
<b>
|
||||||
This will remove the license key and all
|
{t('licenseMessageRemove')}
|
||||||
associated permissions granted by it.
|
|
||||||
</b>
|
</b>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the license key below.
|
{t('licenseMessageConfirm')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete License Key"
|
buttonText={t('licenseKeyDeleteConfirm')}
|
||||||
onConfirm={async () =>
|
onConfirm={async () =>
|
||||||
deleteLicenseKey(selectedLicenseKey.licenseKeyEncrypted)
|
deleteLicenseKey(selectedLicenseKey.licenseKeyEncrypted)
|
||||||
}
|
}
|
||||||
string={selectedLicenseKey.licenseKey}
|
string={selectedLicenseKey.licenseKey}
|
||||||
title="Delete License Key"
|
title={t('licenseKeyDelete')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage License Status"
|
title={t('licenseTitle')}
|
||||||
description="View and manage license keys in the system"
|
description={t('licenseTitleDescription')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Alert variant="neutral" className="mb-6">
|
<Alert variant="neutral" className="mb-6">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">
|
<AlertTitle className="font-semibold">
|
||||||
About Licensing
|
{t('licenseAbout')}
|
||||||
</AlertTitle>
|
</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
This is for business and enterprise users who are using
|
{t('licenseAboutDescription')}
|
||||||
Pangolin in a commercial environment. If you are using
|
|
||||||
Pangolin for personal use, you can ignore this section.
|
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
|
||||||
|
|
@ -384,9 +371,9 @@ export default function LicensePage() {
|
||||||
<SettingsSectionGrid cols={2}>
|
<SettingsSectionGrid cols={2}>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SSTitle>Host License</SSTitle>
|
<SSTitle>{t('licenseHost')}</SSTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
Manage the main license key for the host.
|
{t('licenseHostDescription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
|
@ -397,23 +384,23 @@ export default function LicensePage() {
|
||||||
<Check />
|
<Check />
|
||||||
{licenseStatus?.tier ===
|
{licenseStatus?.tier ===
|
||||||
"PROFESSIONAL"
|
"PROFESSIONAL"
|
||||||
? "Commercial License"
|
? t('licenseTierCommercial')
|
||||||
: licenseStatus?.tier ===
|
: licenseStatus?.tier ===
|
||||||
"ENTERPRISE"
|
"ENTERPRISE"
|
||||||
? "Commercial License"
|
? t('licenseTierCommercial')
|
||||||
: "Licensed"}
|
: t('licensed')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{supporterStatus?.visible ? (
|
{supporterStatus?.visible ? (
|
||||||
<div className="text-2xl">
|
<div className="text-2xl">
|
||||||
Community Edition
|
{t('communityEdition')}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-2xl flex items-center gap-2 text-pink-500">
|
<div className="text-2xl flex items-center gap-2 text-pink-500">
|
||||||
<Heart />
|
<Heart />
|
||||||
Community Edition
|
{t('communityEdition')}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -422,7 +409,7 @@ export default function LicensePage() {
|
||||||
{licenseStatus?.hostId && (
|
{licenseStatus?.hostId && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="text-sm font-medium">
|
<div className="text-sm font-medium">
|
||||||
Host ID
|
{t('hostId')}
|
||||||
</div>
|
</div>
|
||||||
<CopyTextBox text={licenseStatus.hostId} />
|
<CopyTextBox text={licenseStatus.hostId} />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -430,7 +417,7 @@ export default function LicensePage() {
|
||||||
{hostLicense && (
|
{hostLicense && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="text-sm font-medium">
|
<div className="text-sm font-medium">
|
||||||
License Key
|
{t('licenseKey')}
|
||||||
</div>
|
</div>
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
text={hostLicense}
|
text={hostLicense}
|
||||||
|
|
@ -448,39 +435,33 @@ export default function LicensePage() {
|
||||||
disabled={isRecheckingLicense}
|
disabled={isRecheckingLicense}
|
||||||
loading={isRecheckingLicense}
|
loading={isRecheckingLicense}
|
||||||
>
|
>
|
||||||
Recheck All Keys
|
{t('licenseReckeckAll')}
|
||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SSTitle>Sites Usage</SSTitle>
|
<SSTitle>{t('licenseSiteUsage')}</SSTitle>
|
||||||
<SettingsSectionDescription>
|
<SettingsSectionDescription>
|
||||||
View the number of sites using this license.
|
{t('licenseSiteUsageDecsription')}
|
||||||
</SettingsSectionDescription>
|
</SettingsSectionDescription>
|
||||||
</SettingsSectionHeader>
|
</SettingsSectionHeader>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="text-2xl">
|
<div className="text-2xl">
|
||||||
{licenseStatus?.usedSites || 0}{" "}
|
{t('licenseSitesUsed', {count: licenseStatus?.usedSites || 0})}
|
||||||
{licenseStatus?.usedSites === 1
|
|
||||||
? "site"
|
|
||||||
: "sites"}{" "}
|
|
||||||
in system
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!licenseStatus?.isHostLicensed && (
|
{!licenseStatus?.isHostLicensed && (
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
There is no limit on the number of sites
|
{t('licenseNoSiteLimit')}
|
||||||
using an unlicensed host.
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{licenseStatus?.maxSites && (
|
{licenseStatus?.maxSites && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex justify-between text-sm">
|
<div className="flex justify-between text-sm">
|
||||||
<span className="text-muted-foreground">
|
<span className="text-muted-foreground">
|
||||||
{licenseStatus.usedSites || 0} of{" "}
|
{t('licenseSitesUsedMax', {usedSites: licenseStatus.usedSites || 0, maxSites: licenseStatus.maxSites})}
|
||||||
{licenseStatus.maxSites} sites used
|
|
||||||
</span>
|
</span>
|
||||||
<span className="text-muted-foreground">
|
<span className="text-muted-foreground">
|
||||||
{Math.round(
|
{Math.round(
|
||||||
|
|
@ -512,7 +493,7 @@ export default function LicensePage() {
|
||||||
{/* setIsPurchaseModalOpen(true); */}
|
{/* setIsPurchaseModalOpen(true); */}
|
||||||
{/* }} */}
|
{/* }} */}
|
||||||
{/* > */}
|
{/* > */}
|
||||||
{/* Purchase License */}
|
{/* {t('licensePurchase')} */}
|
||||||
{/* </Button> */}
|
{/* </Button> */}
|
||||||
{/* </> */}
|
{/* </> */}
|
||||||
{/* ) : ( */}
|
{/* ) : ( */}
|
||||||
|
|
@ -524,7 +505,7 @@ export default function LicensePage() {
|
||||||
{/* setIsPurchaseModalOpen(true); */}
|
{/* setIsPurchaseModalOpen(true); */}
|
||||||
{/* }} */}
|
{/* }} */}
|
||||||
{/* > */}
|
{/* > */}
|
||||||
{/* Purchase Additional Sites */}
|
{/* {t('licensePurchaseSites')} */}
|
||||||
{/* </Button> */}
|
{/* </Button> */}
|
||||||
{/* </> */}
|
{/* </> */}
|
||||||
{/* )} */}
|
{/* )} */}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
ColumnDef,
|
ColumnDef,
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { DataTable } from "@app/components/ui/data-table";
|
import { DataTable } from "@app/components/ui/data-table";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface DataTableProps<TData, TValue> {
|
interface DataTableProps<TData, TValue> {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
|
|
@ -14,12 +15,15 @@ export function UsersDataTable<TData, TValue>({
|
||||||
columns,
|
columns,
|
||||||
data
|
data
|
||||||
}: DataTableProps<TData, TValue>) {
|
}: DataTableProps<TData, TValue>) {
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DataTable
|
<DataTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title="Server Users"
|
title={t('userServer')}
|
||||||
searchPlaceholder="Search server users..."
|
searchPlaceholder={t('userSearch')}
|
||||||
searchColumn="email"
|
searchColumn="email"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import { toast } from "@app/hooks/useToast";
|
||||||
import { formatAxiosError } from "@app/lib/api";
|
import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export type GlobalUserRow = {
|
export type GlobalUserRow = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -29,6 +30,7 @@ type Props = {
|
||||||
|
|
||||||
export default function UsersTable({ users }: Props) {
|
export default function UsersTable({ users }: Props) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const [selected, setSelected] = useState<GlobalUserRow | null>(null);
|
const [selected, setSelected] = useState<GlobalUserRow | null>(null);
|
||||||
|
|
@ -39,11 +41,11 @@ export default function UsersTable({ users }: Props) {
|
||||||
const deleteUser = (id: string) => {
|
const deleteUser = (id: string) => {
|
||||||
api.delete(`/user/${id}`)
|
api.delete(`/user/${id}`)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error("Error deleting user", e);
|
console.error(t('userErrorDelete'), e);
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
title: "Error deleting user",
|
title: t('userErrorDelete'),
|
||||||
description: formatAxiosError(e, "Error deleting user")
|
description: formatAxiosError(e, t('userErrorDelete'))
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
@ -82,7 +84,7 @@ export default function UsersTable({ users }: Props) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Username
|
{t('username')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -98,7 +100,7 @@ export default function UsersTable({ users }: Props) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Email
|
{t('email')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -114,7 +116,7 @@ export default function UsersTable({ users }: Props) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Name
|
{t('name')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -130,7 +132,7 @@ export default function UsersTable({ users }: Props) {
|
||||||
column.toggleSorting(column.getIsSorted() === "asc")
|
column.toggleSorting(column.getIsSorted() === "asc")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Identity Provider
|
{t('identityProvider')}
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
@ -151,7 +153,7 @@ export default function UsersTable({ users }: Props) {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delete
|
{t('delete')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
@ -172,35 +174,26 @@ export default function UsersTable({ users }: Props) {
|
||||||
dialog={
|
dialog={
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Are you sure you want to permanently delete{" "}
|
{t('userQuestionRemove', {selectedUser: selected?.email || selected?.name || selected?.username})}
|
||||||
<b className="break-all">
|
|
||||||
{selected?.email ||
|
|
||||||
selected?.name ||
|
|
||||||
selected?.username}
|
|
||||||
</b>{" "}
|
|
||||||
from the server?
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<b>
|
<b>
|
||||||
The user will be removed from all
|
{t('userMessageRemove')}
|
||||||
organizations and be completely removed from
|
|
||||||
the server.
|
|
||||||
</b>
|
</b>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To confirm, please type the name of the user
|
{t('userMessageConfirm')}
|
||||||
below.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
buttonText="Confirm Delete User"
|
buttonText={t('userDeleteConfirm')}
|
||||||
onConfirm={async () => deleteUser(selected!.id)}
|
onConfirm={async () => deleteUser(selected!.id)}
|
||||||
string={
|
string={
|
||||||
selected.email || selected.name || selected.username
|
selected.email || selected.name || selected.username
|
||||||
}
|
}
|
||||||
title="Delete User from Server"
|
title={t('userDeleteServer')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
|
||||||
import UsersTable, { GlobalUserRow } from "./AdminUsersTable";
|
import UsersTable, { GlobalUserRow } from "./AdminUsersTable";
|
||||||
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||||
import { InfoIcon } from "lucide-react";
|
import { InfoIcon } from "lucide-react";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
type PageProps = {
|
type PageProps = {
|
||||||
params: Promise<{ orgId: string }>;
|
params: Promise<{ orgId: string }>;
|
||||||
|
|
@ -25,6 +26,8 @@ export default async function UsersPage(props: PageProps) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const userRows: GlobalUserRow[] = rows.map((row) => {
|
const userRows: GlobalUserRow[] = rows.map((row) => {
|
||||||
return {
|
return {
|
||||||
id: row.id,
|
id: row.id,
|
||||||
|
|
@ -33,7 +36,7 @@ export default async function UsersPage(props: PageProps) {
|
||||||
username: row.username,
|
username: row.username,
|
||||||
type: row.type,
|
type: row.type,
|
||||||
idpId: row.idpId,
|
idpId: row.idpId,
|
||||||
idpName: row.idpName || "Internal",
|
idpName: row.idpName || t('idpNameInternal'),
|
||||||
dateCreated: row.dateCreated,
|
dateCreated: row.dateCreated,
|
||||||
serverAdmin: row.serverAdmin
|
serverAdmin: row.serverAdmin
|
||||||
};
|
};
|
||||||
|
|
@ -42,14 +45,14 @@ export default async function UsersPage(props: PageProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsSectionTitle
|
<SettingsSectionTitle
|
||||||
title="Manage All Users"
|
title={t('userTitle')}
|
||||||
description="View and manage all users in the system"
|
description={t('userDescription')}
|
||||||
/>
|
/>
|
||||||
<Alert variant="neutral" className="mb-6">
|
<Alert variant="neutral" className="mb-6">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">About User Management</AlertTitle>
|
<AlertTitle className="font-semibold">{t('userAbount')}</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
This table displays all root user objects in the system. Each user may belong to multiple organizations. Removing a user from an organization does not delete their root user object - they will remain in the system. To completely remove a user from the system, you must delete their root user object using the delete action in this table.
|
{t('userAbountDescription')}
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
<UsersTable users={userRows} />
|
<UsersTable users={userRows} />
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ import {
|
||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
|
import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
|
||||||
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type ValidateOidcTokenParams = {
|
type ValidateOidcTokenParams = {
|
||||||
orgId: string;
|
orgId: string;
|
||||||
|
|
@ -36,11 +37,13 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||||
|
|
||||||
const { licenseStatus, isLicenseViolation } = useLicenseStatusContext();
|
const { licenseStatus, isLicenseViolation } = useLicenseStatusContext();
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function validate() {
|
async function validate() {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
console.log("Validating OIDC token", {
|
console.log(t('idpOidcTokenValidating'), {
|
||||||
code: props.code,
|
code: props.code,
|
||||||
expectedState: props.expectedState,
|
expectedState: props.expectedState,
|
||||||
stateCookie: props.stateCookie
|
stateCookie: props.stateCookie
|
||||||
|
|
@ -59,7 +62,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||||
storedState: props.stateCookie
|
storedState: props.stateCookie
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log("Validate OIDC token response", res.data);
|
console.log(t('idpOidcTokenResponse'), res.data);
|
||||||
|
|
||||||
const redirectUrl = res.data.data.redirectUrl;
|
const redirectUrl = res.data.data.redirectUrl;
|
||||||
|
|
||||||
|
|
@ -76,7 +79,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||||
router.push(res.data.data.redirectUrl);
|
router.push(res.data.data.redirectUrl);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(formatAxiosError(e, "Error validating OIDC token"));
|
setError(formatAxiosError(e, t('idpErrorOidcTokenValidating')));
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
|
|
@ -89,20 +92,20 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<Card className="w-full max-w-md">
|
<Card className="w-full max-w-md">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Connecting to {props.idp.name}</CardTitle>
|
<CardTitle>{t('idpConnectingTo', {name: props.idp.name})}</CardTitle>
|
||||||
<CardDescription>Validating your identity</CardDescription>
|
<CardDescription>{t('idpConnectingToDescription')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex flex-col items-center space-y-4">
|
<CardContent className="flex flex-col items-center space-y-4">
|
||||||
{loading && (
|
{loading && (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Loader2 className="h-5 w-5 animate-spin" />
|
<Loader2 className="h-5 w-5 animate-spin" />
|
||||||
<span>Connecting...</span>
|
<span>{t('idpConnectingToProcess')}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!loading && !error && (
|
{!loading && !error && (
|
||||||
<div className="flex items-center space-x-2 text-green-600">
|
<div className="flex items-center space-x-2 text-green-600">
|
||||||
<CheckCircle2 className="h-5 w-5" />
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
<span>Connected</span>
|
<span>{t('idpConnectingToFinished')}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{error && (
|
{error && (
|
||||||
|
|
@ -110,9 +113,7 @@ export default function ValidateOidcToken(props: ValidateOidcTokenParams) {
|
||||||
<AlertCircle className="h-5 w-5" />
|
<AlertCircle className="h-5 w-5" />
|
||||||
<AlertDescription className="flex flex-col space-y-2">
|
<AlertDescription className="flex flex-col space-y-2">
|
||||||
<span>
|
<span>
|
||||||
There was a problem connecting to{" "}
|
{t('idpErrorConnectingTo', {name: props.idp.name})}
|
||||||
{props.idp.name}. Please contact your
|
|
||||||
administrator.
|
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs">{error}</span>
|
<span className="text-xs">{error}</span>
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { cache } from "react";
|
||||||
import { priv } from "@app/lib/api";
|
import { priv } from "@app/lib/api";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { GetIdpResponse } from "@server/routers/idp";
|
import { GetIdpResponse } from "@server/routers/idp";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
|
@ -16,6 +17,7 @@ export default async function Page(props: {
|
||||||
}) {
|
}) {
|
||||||
const params = await props.params;
|
const params = await props.params;
|
||||||
const searchParams = await props.searchParams;
|
const searchParams = await props.searchParams;
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const allCookies = await cookies();
|
const allCookies = await cookies();
|
||||||
const stateCookie = allCookies.get("p_oidc_state")?.value;
|
const stateCookie = allCookies.get("p_oidc_state")?.value;
|
||||||
|
|
@ -28,7 +30,7 @@ export default async function Page(props: {
|
||||||
const foundIdp = idpRes.data?.data?.idp;
|
const foundIdp = idpRes.data?.data?.idp;
|
||||||
|
|
||||||
if (!foundIdp) {
|
if (!foundIdp) {
|
||||||
return <div>IdP not found</div>;
|
return <div>{t('idpErrorNotFound')}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import { AxiosResponse } from "axios";
|
||||||
import { ExternalLink } from "lucide-react";
|
import { ExternalLink } from "lucide-react";
|
||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
import { cache } from "react";
|
import { cache } from "react";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: `Auth - Pangolin`,
|
title: `Auth - Pangolin`,
|
||||||
|
|
@ -21,6 +22,7 @@ type AuthLayoutProps = {
|
||||||
export default async function AuthLayout({ children }: AuthLayoutProps) {
|
export default async function AuthLayout({ children }: AuthLayoutProps) {
|
||||||
const getUser = cache(verifySession);
|
const getUser = cache(verifySession);
|
||||||
const user = await getUser();
|
const user = await getUser();
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
const licenseStatusRes = await cache(
|
const licenseStatusRes = await cache(
|
||||||
async () =>
|
async () =>
|
||||||
|
|
@ -71,7 +73,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
|
||||||
aria-label="GitHub"
|
aria-label="GitHub"
|
||||||
className="flex items-center space-x-2 whitespace-nowrap"
|
className="flex items-center space-x-2 whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<span>Community Edition</span>
|
<span>{t('communityEdition')}</span>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { cleanRedirect } from "@app/lib/cleanRedirect";
|
import { cleanRedirect } from "@app/lib/cleanRedirect";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
type DashboardLoginFormProps = {
|
type DashboardLoginFormProps = {
|
||||||
redirect?: string;
|
redirect?: string;
|
||||||
|
|
@ -38,23 +39,25 @@ export default function DashboardLoginForm({
|
||||||
// logout();
|
// logout();
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="w-full max-w-md">
|
<Card className="w-full max-w-md">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex flex-row items-center justify-center">
|
<div className="flex flex-row items-center justify-center">
|
||||||
<Image
|
<Image
|
||||||
src={`/logo/pangolin_orange.svg`}
|
src={`/logo/pangolin_orange.svg`}
|
||||||
alt="Pangolin Logo"
|
alt={t('pangolinLogoAlt')}
|
||||||
width={100}
|
width={100}
|
||||||
height={100}
|
height={100}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center space-y-1">
|
<div className="text-center space-y-1">
|
||||||
<h1 className="text-2xl font-bold mt-1">
|
<h1 className="text-2xl font-bold mt-1">
|
||||||
Welcome to Pangolin
|
{t('welcome')}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Log in to get started
|
{t('loginStart')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import { LoginFormIDP } from "@app/components/LoginForm";
|
||||||
import { priv } from "@app/lib/api";
|
import { priv } from "@app/lib/api";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { ListIdpsResponse } from "@server/routers/idp";
|
import { ListIdpsResponse } from "@server/routers/idp";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
|
@ -44,6 +45,8 @@ export default async function Page(props: {
|
||||||
name: idp.name
|
name: idp.name
|
||||||
})) as LoginFormIDP[];
|
})) as LoginFormIDP[];
|
||||||
|
|
||||||
|
const t = await getTranslations();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isInvite && (
|
{isInvite && (
|
||||||
|
|
@ -51,11 +54,10 @@ export default async function Page(props: {
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<Mail className="w-12 h-12 mb-4 text-primary" />
|
<Mail className="w-12 h-12 mb-4 text-primary" />
|
||||||
<h2 className="text-2xl font-bold mb-2 text-center">
|
<h2 className="text-2xl font-bold mb-2 text-center">
|
||||||
Looks like you've been invited!
|
{t('inviteAlready')}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
To accept the invite, you must log in or create an
|
{t('inviteAlreadyDescription')}
|
||||||
account.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -65,7 +67,7 @@ export default async function Page(props: {
|
||||||
|
|
||||||
{(!signUpDisabled || isInvite) && (
|
{(!signUpDisabled || isInvite) && (
|
||||||
<p className="text-center text-muted-foreground mt-4">
|
<p className="text-center text-muted-foreground mt-4">
|
||||||
Don't have an account?{" "}
|
{t('authNoAccount')}{" "}
|
||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
!redirectUrl
|
!redirectUrl
|
||||||
|
|
@ -74,7 +76,7 @@ export default async function Page(props: {
|
||||||
}
|
}
|
||||||
className="underline"
|
className="underline"
|
||||||
>
|
>
|
||||||
Sign up
|
{t('signup')}
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue