Merge pull request #116 from VernissageApp/feature/mastodon-url

Add URL to mastodon account

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { LoadingService } from './services/common/loading.service';
 import { RoutingStateService } from './services/common/routing-state.service';
 import { DOCUMENT } from '@angular/common';
 import { SsrCookieService } from './services/common/ssr-cookie.service';
+import { SettingsService } from './services/http/settings.service';
 
 @Component({
     selector: 'app-root',
@@ -19,6 +20,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
         @Inject(DOCUMENT) private documentRef: Document,
         private loadingService: LoadingService,
         private cookieService: SsrCookieService,
+        private settingsService: SettingsService,
         private routingStateService: RoutingStateService,
         private changeDetectorRef: ChangeDetectorRef) {
     }
@@ -32,6 +34,11 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
             body?.classList.add('dark-theme');
             this.documentRef.querySelector("meta[name='theme-color']")?.setAttribute("content", "#303030");
         }
+
+        const internalMastodonUrl = this.settingsService.publicSettings?.mastodonUrl ?? '';
+        if (internalMastodonUrl.length > 0) {
+            this.createMastodonLink(internalMastodonUrl);
+        }
     }
 
     ngAfterViewInit(): void {
@@ -45,4 +52,12 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
     ngOnDestroy(): void {
         this.loadingStateChangesSubscription?.unsubscribe();
     }
+
+    private createMastodonLink(url: string): void {
+        const link: HTMLLinkElement = this.documentRef.createElement('link');
+        link.setAttribute('href', url);
+        link.setAttribute('rel', 'me');
+
+        this.documentRef.head.appendChild(link);
+    }
 }

src/app/components/widgets/general-settings/general-settings.component.html

@@ -115,6 +115,18 @@ <h3>Main server settings</h3>
         </mat-form-field>
     </div>
 
+    <div class="mastodon-url">
+        <mat-form-field appearance="outline">
+            <mat-label>Mastodon url</mat-label>
+            <input matInput name="mastodonUrl" #mastodonUrl="ngModel" [(ngModel)]="settings.mastodonUrl"
+                placeholder="Mastodon url" aria-label="Mastodon url" />
+            <mat-hint align="start"><span class="text-muted">If the instance has its official account on Mastodon, you can define its address here.
+                If the Vernissage instance address is also provided on Mastodon, there will be information
+                indicating that the account has been verified by Mastodon.</span>
+            </mat-hint>
+        </mat-form-field>
+    </div>
+
     <mat-divider></mat-divider>
     <h3>Financial support</h3>
 

src/app/components/widgets/general-settings/general-settings.component.scss

@@ -4,4 +4,8 @@ mat-form-field {
 
 ::ng-deep .mat-mdc-form-field-subscript-wrapper {
     height: 0;
+}
+
+.mastodon-url {
+    margin-bottom: 76px;
 }

src/app/models/public-settings.ts

@@ -5,6 +5,7 @@ export class PublicSettings {
     public webPushVapidPublicKey?: string;
 
     public patreonUrl?: string;
+    public mastodonUrl?: string;
     public totalCost = 0;
     public usersSupport = 0;
 

src/app/models/settings.ts

@@ -33,6 +33,7 @@ export class Settings {
     public webContactUserId = '';
     public systemDefaultUserId = '';
     public patreonUrl = '';
+    public mastodonUrl = '';
 
     public isOpenAIEnabled = false;
     public openAIKey = '';