add help buttons

src/app/pages/account/aliases/aliases.component.html

@@ -72,6 +72,12 @@
         {{'user.aliases.create' | i18n}}
       </button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/webstly#aliases" class="help-button" matTooltip="{{'help-button' | i18n}}"
+            matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
   </mat-card>
 
 </form>

src/app/pages/account/domains/domains.component.html

@@ -54,6 +54,12 @@
         {{'user.domains.create' | i18n}}
       </button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/webstly#domains" class="help-button" matTooltip="{{'help-button' | i18n}}"
+            matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
   </mat-card>
 
 </form>

src/app/pages/account/profile/profile.component.html

@@ -1 +1,8 @@
 <app-profilefields [edit]="true"></app-profilefields>
+
+<footer>
+  <a href="https://wiki.bstly.de/services/webstly#profile" class="help-button" matTooltip="{{'help-button' | i18n}}"
+    matTooltipPosition="above" target="_blank" mat-fab color="accent">
+    <mat-icon>contact_support</mat-icon>
+  </a>
+</footer>

src/app/pages/account/security/security.component.html

@@ -42,16 +42,17 @@
             <h2>{{'security.status' | i18n}}</h2>
             <p> {{'security.status.hint' | i18n}}</p>
             <mat-form-field>
-                <mat-select [(ngModel)]="model.status" formControlName="status" placeholder="{{'security.status' | i18n}}">
+                <mat-select [(ngModel)]="model.status" formControlName="status"
-                  <mat-option *ngFor="let status of statuses" [value]="status">
+                    placeholder="{{'security.status' | i18n}}">
-                    {{'security.status.' + status | i18n}}
+                    <mat-option *ngFor="let status of statuses" [value]="status">
-                  </mat-option>
+                        {{'security.status.' + status | i18n}}
+                    </mat-option>
                 </mat-select>
                 <mat-hint *ngIf="successStatus">
                     {{'security.status.success' | i18n}}
                 </mat-hint>
-              </mat-form-field>
+            </mat-form-field>
-              <mat-label>{{'security.status.' + model.status + '.hint' | i18n}}</mat-label>
+            <mat-label>{{'security.status.' + model.status + '.hint' | i18n}}</mat-label>
         </mat-card-content>
         <mat-card-actions>
             <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
@@ -59,6 +60,12 @@
                 {{'security.status.change' | i18n}}
             </button>
         </mat-card-actions>
+        <mat-card-footer>
+            <a href="https://wiki.bstly.de/services/webstly#status" class="help-button" matTooltip="{{'help-button' | i18n}}"
+                matTooltipPosition="above" target="_blank" mat-fab color="accent">
+                <mat-icon>contact_support</mat-icon>
+            </a>
+        </mat-card-footer>
     </mat-card>
 </form>
 
@@ -73,4 +80,10 @@
         <button *ngIf="totp" (click)="removeTotp()" mat-raised-button color="warn">{{'security.2fa.totp.remove' |
             i18n}}</button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/webstly#2fa" class="help-button" matTooltip="{{'help-button' | i18n}}"
+            matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
 </mat-card>

src/app/pages/account/voucher/voucher.component.html

@@ -10,6 +10,12 @@
             {{'vouchers.add-on' | i18n}}
         </button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/webstly#voucher" class="help-button" matTooltip="{{'help-button' | i18n}}"
+            matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
 </mat-card>
 
 <div *ngIf="vouchers && vouchers[0]">

src/app/pages/jitsi/jitsi.component.html

@@ -143,6 +143,12 @@
         {{'jitsi.rooms.create' | i18n}}
       </button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/jitsi#rooms" class="help-button"
+            matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
   </mat-card>
 
 </form>

src/app/pages/minetest/accounts/accounts.component.html

@@ -46,6 +46,12 @@
         {{'minetest.accounts.create' | i18n}}
       </button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/minetest" class="help-button"
+            matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
   </mat-card>
 
 </form>

src/app/pages/partey/timeslots/timeslots.component.html

@@ -111,9 +111,19 @@
     </div>
   </mat-card-content>
   <mat-card-actions *ngIf="timeslotsQuota">
-    <button mat-button *ngFor="let type of types" (click)="openCreate(type)">
+    <div *ngFor="let type of types">
-      <mat-icon inline="true">{{'partey.timeslots.type.' + type + '.icon' | i18n}}</mat-icon>
+      <button mat-raised-button (click)="openCreate(type)">
-      {{'partey.timeslots.create.' + type | i18n}}
+        <mat-icon inline="true">{{'partey.timeslots.type.' + type + '.icon' | i18n}}</mat-icon>
-    </button>
+        {{'partey.timeslots.create.' + type | i18n}}
+      </button>
+      <br>
+      <br>
+    </div>
   </mat-card-actions>
+  <mat-card-footer>
+    <a href="https://wiki.bstly.de/services/partey/stream" class="help-button" matTooltip="{{'help-button' | i18n}}"
+      matTooltipPosition="above" target="_blank" mat-fab color="accent">
+      <mat-icon>contact_support</mat-icon>
+    </a>
+  </mat-card-footer>
 </mat-card>

src/app/pages/register/register.component.html

@@ -1,7 +1,9 @@
 <form [formGroup]="form" (ngSubmit)="register()" *ngIf="!success">
     <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{'register' | i18n}}</mat-card-title>
+        </mat-card-header>
         <mat-card-content>
-            <h2>{{'register' | i18n}}</h2>
             <mat-error *ngIf="missingToken">
                 <a routerLink="/tokens">{{'register.token.missing' | i18n}}</a>
             </mat-error>
@@ -37,7 +39,7 @@
                 {{'email.primary' | i18n}}
             </mat-slide-toggle>
             <mat-icon #primaryHint="matTooltip" (click)="primaryHint.toggle()" inline="true"
-            matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
+                matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
 
             <mat-form-field *ngIf="model.primaryEmail">
                 <input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"
@@ -63,6 +65,11 @@
 
             <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
         </mat-card-actions>
+        <mat-card-footer>
+            <a href="https://wiki.bstly.de/services/webstly#registration" class="help-button" matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above"  target="_blank" mat-fab color="accent">
+                <mat-icon>contact_support</mat-icon>
+            </a>
+        </mat-card-footer>
     </mat-card>
 </form>
 
@@ -87,4 +94,3 @@
         </a>
     </mat-card-actions>
 </mat-card>
-

src/app/pages/tokens/tokens.component.html

@@ -1,7 +1,9 @@
 <form [formGroup]="form" (ngSubmit)="redeemSecret()" #formDirective="ngForm">
     <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{'tokens.enter' | i18n}}</mat-card-title>
+        </mat-card-header>
         <mat-card-content>
-            <h2>{{'tokens.enter' | i18n}}</h2>
             <mat-error *ngIf="tokenInvalid">
                 {{'tokens.invalid' | i18n}}
             </mat-error>
@@ -18,6 +20,12 @@
         <mat-card-actions>
             <button mat-raised-button color="primary" [disabled]="form.invalid">{{'tokens.validate' | i18n}}</button>
         </mat-card-actions>
+        <mat-card-footer>
+            <a href="https://wiki.bstly.de/services/webstly#registration" class="help-button"
+                matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent">
+                <mat-icon>contact_support</mat-icon>
+            </a>
+        </mat-card-footer>
     </mat-card>
 </form>
 

src/app/pages/urlshortener/urlshortener.component.html

@@ -153,6 +153,12 @@
         {{'urlshortener.create' | i18n}}
       </button>
     </mat-card-actions>
+    <mat-card-footer>
+        <a href="https://wiki.bstly.de/services/urlshortener" class="help-button" matTooltip="{{'help-button' | i18n}}"
+            matTooltipPosition="above" target="_blank" mat-fab color="accent">
+            <mat-icon>contact_support</mat-icon>
+        </a>
+    </mat-card-footer>
   </mat-card>
 
 </form>

src/styles.scss

@@ -301,3 +301,10 @@ table {
     }
   }
 }
+
+.help-button {
+  float: right;
+  position: relative;
+  top: -40px;
+  right: 15px;
+}