Improve integrated documentation for .NET SDK

backend/i18n/frontend_en.json

@@ -188,12 +188,16 @@
   "clients.connectWizard.manuallyTokenHint": "Tokens usally expire after 30days, but you can request multiple tokens.",
   "clients.connectWizard.postManDocs": "Start with the Postman tutorial in the [Documentation](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).",
   "clients.connectWizard.sdk": "Connect to your App with SDK",
+  "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ",
   "clients.connectWizard.sdkHelp": "You need another SDK?",
   "clients.connectWizard.sdkHelpLink": "Contact us in the Support Forum",
   "clients.connectWizard.sdkHint": "Download an SDK and establish a connection to this app.",
   "clients.connectWizard.sdkStep1": "Install the .NET SDK",
   "clients.connectWizard.sdkStep1Download": "The SDK is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)",
   "clients.connectWizard.sdkStep2": "Create a client manager",
+  "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK",
+  "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)",
+  "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients",
   "clients.connectWizard.step0Title": "Setup client",
   "clients.connectWizard.step1Title": "Choose connection method",
   "clients.connectWizard.step2Title": "Connect",

backend/i18n/frontend_it.json

@@ -188,12 +188,16 @@
   "clients.connectWizard.manuallyTokenHint": "Solitamente i Token scadono dopo 30 giorni, ma puoi richiedere token multipli.",
   "clients.connectWizard.postManDocs": "Per il tutorial Postman inizia da questo link [Documentazione](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).",
   "clients.connectWizard.sdk": "Connetti la tua APP utilizzando SDK",
+  "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ",
   "clients.connectWizard.sdkHelp": "Hai bisogno di un altro SDK?",
   "clients.connectWizard.sdkHelpLink": "Contattaci nel Forum di assistenza",
   "clients.connectWizard.sdkHint": "Scarica l'SDK e connetti quest'app.",
   "clients.connectWizard.sdkStep1": "Installa .NET SDK",
   "clients.connectWizard.sdkStep1Download": "L'SDK è disponibile su [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)",
   "clients.connectWizard.sdkStep2": "Crea un client manager",
+  "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK",
+  "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)",
+  "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients",
   "clients.connectWizard.step0Title": "Setup client",
   "clients.connectWizard.step1Title": "Scegli la tipologia di connessione",
   "clients.connectWizard.step2Title": "Collega",

backend/i18n/frontend_nl.json

@@ -188,12 +188,16 @@
   "clients.connectWizard.manuallyTokenHint": "Tokens vervallen gewoonlijk na 30 dagen, maar je kunt meerdere tokens aanvragen.",
   "clients.connectWizard.postManDocs": "Begin met de Postman-tutorial in de [Documentatie] (https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).",
   "clients.connectWizard.sdk": "Maak verbinding met uw app met SDK",
+  "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ",
   "clients.connectWizard.sdkHelp": "Heb je een andere SDK nodig?",
   "clients.connectWizard.sdkHelpLink": "Neem contact met ons op in het ondersteuningsforum",
   "clients.connectWizard.sdkHint": "Download een SDK en maak verbinding met deze app.",
   "clients.connectWizard.sdkStep1": "Installeer de .NET SDK",
   "clients.connectWizard.sdkStep1Download": "De SDK is beschikbaar op [nuget] (https://www.nuget.org/packages/Squidex.ClientLibrary/)",
   "clients.connectWizard.sdkStep2": "Maak een klantenbeheerder",
+  "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK",
+  "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)",
+  "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients",
   "clients.connectWizard.step0Title": "Client instellen",
   "clients.connectWizard.step1Title": "Kies verbindingsmethode",
   "clients.connectWizard.step2Title": "Verbinden",

backend/i18n/frontend_zh.json

@@ -188,12 +188,16 @@
   "clients.connectWizard.manuallyTokenHint": "令牌通常会在 30 天后过期，但您可以请求多个令牌。",
   "clients.connectWizard.postManDocs": "从 [文档](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman) 中的 Postman 教程开始。",
   "clients.connectWizard.sdk": "使用 SDK 连接到您的应用程序",
+  "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ",
   "clients.connectWizard.sdkHelp": "你需要另一个 SDK？",
   "clients.connectWizard.sdkHelpLink": "在支持论坛联系我们",
   "clients.connectWizard.sdkHint": "下载 SDK 并建立与此应用程序的连接。",
   "clients.connectWizard.sdkStep1": "安装.NET SDK",
   "clients.connectWizard.sdkStep1Download": "SDK 可在 [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)",
   "clients.connectWizard.sdkStep2": "创建客户端管理器",
+  "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK",
+  "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)",
+  "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients",
   "clients.connectWizard.step0Title": "设置客户端",
   "clients.connectWizard.step1Title": "选择连接方式",
   "clients.connectWizard.step2Title": "连接",

backend/i18n/source/backend_en.json

@@ -215,6 +215,7 @@
   "history.apps.clientAdded": "added client {[Id]} to app",
   "history.apps.clientRevoked": "revoked client {[Id]}",
   "history.apps.clientUpdated": "updated client {[Id]}",
+  "history.apps.common.updated": "updated general settings",
   "history.apps.contributoreAssigned": "assigned {user:[Contributor]} as {[Role]}",
   "history.apps.contributoreRemoved": "removed {user:[Contributor]} from app",
   "history.apps.created": "created the app.",
@@ -231,7 +232,6 @@
   "history.apps.roleUpdated": "updated role {[Name]}",
   "history.apps.settingsUpdated": "updated UI settings",
   "history.apps.transfered": "updated app to client",
-  "history.apps.updated": "updated general settings",
   "history.apps.workflowAdded": "added workflow {[Name]}.",
   "history.apps.workflowDeleted": "deleted a workflow.",
   "history.apps.workflowUpdated": "updated a workflow.",

backend/i18n/source/frontend_en.json

@@ -188,12 +188,16 @@
   "clients.connectWizard.manuallyTokenHint": "Tokens usally expire after 30days, but you can request multiple tokens.",
   "clients.connectWizard.postManDocs": "Start with the Postman tutorial in the [Documentation](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).",
   "clients.connectWizard.sdk": "Connect to your App with SDK",
+  "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ",
   "clients.connectWizard.sdkHelp": "You need another SDK?",
   "clients.connectWizard.sdkHelpLink": "Contact us in the Support Forum",
   "clients.connectWizard.sdkHint": "Download an SDK and establish a connection to this app.",
   "clients.connectWizard.sdkStep1": "Install the .NET SDK",
   "clients.connectWizard.sdkStep1Download": "The SDK is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)",
   "clients.connectWizard.sdkStep2": "Create a client manager",
+  "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK",
+  "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)",
+  "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients",
   "clients.connectWizard.step0Title": "Setup client",
   "clients.connectWizard.step1Title": "Choose connection method",
   "clients.connectWizard.step2Title": "Connect",

backend/src/Squidex.Shared/Texts.it.resx

@@ -730,6 +730,9 @@
   <data name="history.apps.clientUpdated" xml:space="preserve">
     <value>Aggiornato client {[Id]}</value>
   </data>
+  <data name="history.apps.common.updated" xml:space="preserve">
+    <value>updated general settings</value>
+  </data>
   <data name="history.apps.contributoreAssigned" xml:space="preserve">
     <value>Associato {user:[Contributor]} al ruolo {[Role]}</value>
   </data>
@@ -778,9 +781,6 @@
   <data name="history.apps.transfered" xml:space="preserve">
     <value>updated app to client</value>
   </data>
-  <data name="history.apps.updated" xml:space="preserve">
-    <value>updated general settings</value>
-  </data>
   <data name="history.apps.workflowAdded" xml:space="preserve">
     <value>added workflow {[Name]}.</value>
   </data>

backend/src/Squidex.Shared/Texts.nl.resx

@@ -730,6 +730,9 @@
   <data name="history.apps.clientUpdated" xml:space="preserve">
     <value>bijgewerkte client {[Id]}</value>
   </data>
+  <data name="history.apps.common.updated" xml:space="preserve">
+    <value>updated general settings</value>
+  </data>
   <data name="history.apps.contributoreAssigned" xml:space="preserve">
     <value>heeft {user:[Contributor]} toegewezen als {[Role]}</value>
   </data>
@@ -778,9 +781,6 @@
   <data name="history.apps.transfered" xml:space="preserve">
     <value>updated app to client</value>
   </data>
-  <data name="history.apps.updated" xml:space="preserve">
-    <value>updated general settings</value>
-  </data>
   <data name="history.apps.workflowAdded" xml:space="preserve">
     <value>added workflow {[Name]}.</value>
   </data>

backend/src/Squidex.Shared/Texts.resx

@@ -730,6 +730,9 @@
   <data name="history.apps.clientUpdated" xml:space="preserve">
     <value>updated client {[Id]}</value>
   </data>
+  <data name="history.apps.common.updated" xml:space="preserve">
+    <value>updated general settings</value>
+  </data>
   <data name="history.apps.contributoreAssigned" xml:space="preserve">
     <value>assigned {user:[Contributor]} as {[Role]}</value>
   </data>
@@ -778,9 +781,6 @@
   <data name="history.apps.transfered" xml:space="preserve">
     <value>updated app to client</value>
   </data>
-  <data name="history.apps.updated" xml:space="preserve">
-    <value>updated general settings</value>
-  </data>
   <data name="history.apps.workflowAdded" xml:space="preserve">
     <value>added workflow {[Name]}.</value>
   </data>

backend/src/Squidex.Shared/Texts.zh.resx

@@ -730,6 +730,9 @@
   <data name="history.apps.clientUpdated" xml:space="preserve">
     <value>更新的客户端 {[Id]}</value>
   </data>
+  <data name="history.apps.common.updated" xml:space="preserve">
+    <value>updated general settings</value>
+  </data>
   <data name="history.apps.contributoreAssigned" xml:space="preserve">
     <value>已分配 {user:[Contributor]} 作为 {[Role]}</value>
   </data>
@@ -778,9 +781,6 @@
   <data name="history.apps.transfered" xml:space="preserve">
     <value>updated app to client</value>
   </data>
-  <data name="history.apps.updated" xml:space="preserve">
-    <value>updated general settings</value>
-  </data>
   <data name="history.apps.workflowAdded" xml:space="preserve">
     <value>added workflow {[Name]}.</value>
   </data>

frontend/src/app/features/settings/pages/clients/client-connect-form.component.html

@@ -69,7 +69,15 @@
                     <h5><span class="badge rounded-pill bg-dark">1</span> {{ 'clients.connectWizard.manuallyStep1' | sqxTranslate }}</h5>
 
                     <p>                 
-                        <sqx-code>{{connectHttpText}}</sqx-code>
+                        <sqx-code>
+                            <div ngPreserveWhitespaces>$ curl</div>
+                            <div ngPreserveWhitespaces>-X POST '{{apiUrl.buildUrl('/identity-server/connect/token')}}'</div>
+                            <div ngPreserveWhitespaces>-H 'Content-Type: application/x-www-form-urlencoded'</div>
+                            <div ngPreserveWhitespaces>-d 'grant_type=client_credentials&</div>
+                            <div ngPreserveWhitespaces>    client_id={{appName}}:{{client.id}}</div>
+                            <div ngPreserveWhitespaces>    client_secret={{client.secret}}</div>
+                            <div ngPreserveWhitespaces>    scope=squidex-api'</div>
+                        </sqx-code>
                     </p>
                 </div>
                 
@@ -77,7 +85,7 @@
                     <h5><span class="badge rounded-pill bg-dark">2</span> {{ 'clients.connectWizard.manuallyStep2' | sqxTranslate }}</h5>
 
                     <p>              
-                        <sqx-code>{{connectToken?.accessToken}}</sqx-code>
+                        <sqx-code>{{appToken?.accessToken}}</sqx-code>
                     </p>
                 </div>
                 
@@ -129,6 +137,12 @@
                 </div>
             </ng-container>
             <ng-container *ngSwitchCase="'SDK'">
+                <div class="section step">
+                    <sqx-form-hint>
+                        {{ 'clients.connectWizard.sdkDocumentation' | sqxTranslate }} <a href="https://docs.squidex.io/02-documentation/software-development-kits/.net-standard" sqxExternalLink>{{ 'common.documentation' | sqxTranslate }}</a>
+                    </sqx-form-hint>
+                </div>
+
                 <div class="section step">
                     <h5><span class="badge rounded-pill bg-dark">1</span> {{ 'clients.connectWizard.sdkStep1' | sqxTranslate }}</h5>
 
@@ -143,7 +157,42 @@
                     <h5><span class="badge rounded-pill bg-dark">2</span> {{ 'clients.connectWizard.sdkStep2' | sqxTranslate }}</h5>
 
                     <p>              
-                        <sqx-code>{{connectLibraryText}}</sqx-code>
+                        <sqx-code>
+                            <div ngPreserveWhitespaces>var clientManager = new SquidexClientManager(new SquidexOptions</div>
+                            <div ngPreserveWhitespaces>{{'{'}}</div>
+                            <div ngPreserveWhitespaces>    AppName = {{appName}},</div>
+                            <div ngPreserveWhitespaces>    ClientId = {{appName}}:{{client.id}},</div>
+                            <div ngPreserveWhitespaces>    ClientSecret = {{client.secret}},</div>
+                            <div ngPreserveWhitespaces>    Url = {{apiUrl.value}}</div>
+                            <div ngPreserveWhitespaces>});</div>
+                        </sqx-code>
+                    </p>
+                </div>
+
+
+                <div class="section step">
+                    <h5><span class="badge rounded-pill bg-dark">3</span> {{ 'clients.connectWizard.sdkStep3' | sqxTranslate }}</h5>
+
+                    <div [innerHTML]="'clients.connectWizard.sdkStep3Download' | sqxTranslate | sqxMarkdown | sqxSafeHtml"></div>
+
+                    <p>              
+                        <sqx-code>dotnet add package Squidex.ClientLibrary.ServiceExtensions</sqx-code>
+                    </p>
+                </div>
+
+                <div class="section step">
+                    <h5><span class="badge rounded-pill bg-dark">4</span> {{ 'clients.connectWizard.sdkStep4' | sqxTranslate }}</h5>
+
+                    <p>              
+                        <sqx-code>
+                            <div ngPreserveWhitespaces>services.AddSquidex(options =></div>
+                            <div ngPreserveWhitespaces>{{'{'}}</div>
+                            <div ngPreserveWhitespaces>    options.AppName = {{appName}};</div>
+                            <div ngPreserveWhitespaces>    options.ClientId = {{appName}}:{{client.id}};</div>
+                            <div ngPreserveWhitespaces>    options.ClientSecret = {{client.secret}};</div>
+                            <div ngPreserveWhitespaces>    options.Url = {{apiUrl.value}};</div>
+                            <div ngPreserveWhitespaces>});</div>
+                        </sqx-code>
                     </p>
                 </div>
 

frontend/src/app/features/settings/pages/clients/client-connect-form.component.scss

@@ -43,4 +43,10 @@
         font-size: $font-smallest;
         font-weight: normal;
     }
+}
+
+sqx-code {
+    pre {
+        white-space: pre;
+    }
 }

frontend/src/app/features/settings/pages/clients/client-connect-form.component.ts

@@ -21,10 +21,7 @@ export class ClientConnectFormComponent implements OnInit {
     public client!: ClientDto;
 
     public appName!: string;
-
-    public connectToken?: AccessTokenDto;
-    public connectHttpText = '';
-    public connectLibraryText = '';
+    public appToken?: AccessTokenDto;
 
     public step = 'Start';
 
@@ -44,13 +41,10 @@ export class ClientConnectFormComponent implements OnInit {
     public ngOnInit() {
         this.appName = this.appsState.appName;
 
-        this.connectHttpText = connectHttpText(this.apiUrl, this.appName, this.client);
-        this.connectLibraryText = connectLibrary(this.apiUrl, this.appName, this.client);
-
         this.clientsService.createToken(this.appsState.appName, this.client)
             .subscribe({
                 next: dto => {
-                    this.connectToken = dto;
+                    this.appToken = dto;
 
                     this.changeDetector.detectChanges();
                 },
@@ -63,26 +57,4 @@ export class ClientConnectFormComponent implements OnInit {
     public go(step: string) {
         this.step = step;
     }
-}
-
-function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string; secret: string }) {
-    const url = apiUrl.buildUrl('identity-server/connect/token');
-
-    return `$ curl
-    -X POST '${url}'
-    -H 'Content-Type: application/x-www-form-urlencoded'
-    -d 'grant_type=client_credentials&
-        client_id=${app}:${client.id}&
-        client_secret=${client.secret}&
-        scope=squidex-api'`;
-}
-
-function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string; secret: string }) {
-    const url = apiUrl.value;
-
-    return `var clientManager = new SquidexClientManager(
-    "${url}",
-    "${app}",
-    "${app}:${client.id}",
-    "${client.secret}")`;
-}
+}