From f804875b3d4c79a02c233300192faf3b527269f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Chr=C3=A1steck=C3=BD?= <dominik@chrastecky.cz>
Date: Wed, 13 Sep 2023 23:56:51 +0200
Subject: [PATCH] Feat: Add instructions on how to create a Mastodon app (#34)

---
 .../synchronize-mastodon.component.html       | 33 ++++++++++++++-----
 .../synchronize-mastodon.component.ts         |  2 ++
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.html b/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.html
index 976d4e4..df0ac23 100644
--- a/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.html
+++ b/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.html
@@ -7,20 +7,33 @@ <h3 class="card-title">Setup OAuth</h3>
     </div>
     <div class="card-body">
       <p>
-        Before you can synchronize your settings, you must create an OAuth app and put its credentials here.
-        Any settings you put here are only stored in your browser.
+        Before you can synchronize your settings, you must create an
+        <a target="_blank" href="https://{{currentInstance}}/settings/applications">OAuth app</a> and put its
+        credentials here. Any settings you put here are only stored in your browser.
       </p>
 
-      <p>Your OAuth app settings should include this redirect uri: <code>{{redirectUrl}}</code></p>
+      <p>Your OAuth app needs these settings:</p>
+      <ul>
+        <li><strong>Redirect URI</strong> - <code>{{redirectUrl}}</code></li>
+        <li>
+          <strong>Scopes</strong> -
+          <ul>
+            <li><code>admin:read:domain_allows</code></li>
+            <li><code>admin:read:domain_blocks</code></li>
+            <li><code>admin:write:domain_allows</code></li>
+            <li><code>admin:write:domain_blocks</code></li>
+          </ul>
+        </li>
+      </ul>
 
       <form [formGroup]="oauthForm" (submit)="saveOauthAndRedirect()">
         <div class="form-group">
-          <label for="inputClientId">Client ID</label>
-          <input id="inputClientId" class="form-control" formControlName="clientId" />
+          <label for="inputClientId">Client key</label>
+          <input id="inputClientId" class="form-control" formControlName="clientId"/>
         </div>
         <div class="form-group">
           <label for="inputClientSecret">Client secret</label>
-          <input id="inputClientSecret" class="form-control" formControlName="secret" />
+          <input id="inputClientSecret" class="form-control" formControlName="secret"/>
         </div>
         <button type="submit" class="btn btn-primary" [disabled]="!oauthForm.valid">Save</button>
       </form>
@@ -46,11 +59,13 @@ <h3 class="card-title">Synchronization</h3>
         <div [formGroup]="form">
           <div class="form-group">
             <div class="custom-control custom-switch custom-switch-on-danger">
-              <input class="custom-control-input" type="checkbox" id="inputMakeReasonsPublic" formControlName="reasonsPublic" aria-describedby="inputMakeReasonsPublicDescription" />
+              <input class="custom-control-input" type="checkbox" id="inputMakeReasonsPublic"
+                     formControlName="reasonsPublic" aria-describedby="inputMakeReasonsPublicDescription"/>
               <label for="inputMakeReasonsPublic" class="custom-control-label">Make reasons public</label>
             </div>
             <small id="inputMakeReasonsPublicDescription">
-              If enabled, the censure reasons will be displayed publicly in your Mastodon blocklist, otherwise they'll be visible as a private note.
+              If enabled, the censure reasons will be displayed publicly in your Mastodon blocklist, otherwise they'll
+              be visible as a private note.
             </small>
           </div>
         </div>
@@ -60,7 +75,7 @@ <h3 class="card-title">Synchronization</h3>
           <h3>Preview</h3>
 
           <div class="position-relative">
-            <app-loader *ngIf="loadingPreview else previewTable" />
+            <app-loader *ngIf="loadingPreview else previewTable"/>
           </div>
 
           <ng-template #previewTable>
diff --git a/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.ts b/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.ts
index b760a34..02991d6 100644
--- a/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.ts
+++ b/src/app/synchronization/pages/synchronize-mastodon/synchronize-mastodon.component.ts
@@ -21,6 +21,8 @@ import {NormalizedInstanceDetailResponse} from "../../../response/normalized-ins
   styleUrls: ['./synchronize-mastodon.component.scss']
 })
 export class SynchronizeMastodonComponent implements OnInit {
+  protected readonly currentInstance = this.authManager.currentInstanceSnapshot.name;
+
   private syncSettings: MastodonSynchronizationSettings = this.database.mastodonSynchronizationSettings;
 
   public oauthForm = new FormGroup({