Merge pull request #183 from Toastbrot236/footer-fix

Account for null discord invite and owner username + wrap/break owner email address if it's too long

Author: Toastbrot236

src/app/api/types/contact-info.ts

@@ -1,6 +1,6 @@
 export interface ContactInfo {
     adminName: string;
     emailAddress: string;
-    discordServerInvite: string;
-    adminDiscordUsername: string;
+    discordServerInvite: string | null;
+    adminDiscordUsername: string | null;
 }

src/app/components/ui/footer.component.ts

@@ -77,15 +77,24 @@ import { RouterLink } from "@angular/router";
             <p class="text-3xl">Get In Touch</p>
             <a [href]="'mailto:' + instance.contactInfo.emailAddress" class="text-link hover:text-link-hover hover:underline">
               <fa-icon class="pr-1" [icon]="faEnvelope"></fa-icon>
-              Email Us ({{ instance.contactInfo.emailAddress }})
+              Email Us <span class="word-wrap-and-break">({{ instance.contactInfo.emailAddress }})</span>
             </a>
-            <a [href]="instance.contactInfo.discordServerInvite" class="text-link hover:text-link-hover hover:underline">
-              <fa-icon class="pr-1" [icon]="faSignIn"></fa-icon>
-              Join Our Discord Server
-            </a>
-            <p>
-              You can also contact <span class="italic">{{ instance.contactInfo.adminName }}</span> on Discord at <span class="italic">{{ instance.contactInfo.adminDiscordUsername }}</span>
-            </p>
+            @if (instance.contactInfo.discordServerInvite != null) {
+              <a [href]="instance.contactInfo.discordServerInvite" class="text-link hover:text-link-hover hover:underline">
+                <fa-icon class="pr-1" [icon]="faSignIn"></fa-icon>
+                Join Our Discord Server
+              </a>
+            }
+            @if (instance.contactInfo.adminDiscordUsername != null) {
+              <p>
+                You can also contact <span class="italic">{{ instance.contactInfo.adminName }}</span> on Discord at <span class="italic">{{ instance.contactInfo.adminDiscordUsername }}</span>
+              </p>
+            }
+            @else {
+              <p>
+                Server owner: <span class="italic">{{ instance.contactInfo.adminName }}</span>
+              </p>
+            }
           </div>
         </ng-template>
 

src/app/pages/instance-info/instance-info.component.html

@@ -28,14 +28,27 @@ <h2 class="font-bold text-2xl">Server Information</h2>
 
     <h2 class="font-bold text-2xl">Contact Us</h2>
     <p>Owner: <span class="italic">{{ instance.contactInfo.adminName }}</span></p>
-    <p>Owner Discord username: <span class="italic">{{ instance.contactInfo.adminDiscordUsername }}</span></p>
-    <p>Discord server invite: 
-        <a [href]="instance.contactInfo.discordServerInvite" class="text-link hover:text-link-hover hover:underline">
-            {{ instance.contactInfo.discordServerInvite }}
-        </a>
-    </p>
+
+    @if (instance.contactInfo.adminDiscordUsername != null) {
+        <p>Owner Discord username: <span class="italic">{{ instance.contactInfo.adminDiscordUsername }}</span></p>
+    }
+    @else {
+        <p>No Discord username of the owner</p>
+    }
+    
+    @if (instance.contactInfo.discordServerInvite != null) {
+        <p>Discord server invite:
+            <a [href]="instance.contactInfo.discordServerInvite" class="text-link hover:text-link-hover hover:underline">
+                {{ instance.contactInfo.discordServerInvite }}
+            </a>
+        </p>
+    }
+    @else {
+        <p>No Discord server invite</p>
+    }
+
     <p>Email address: 
-        <a [href]="'mailto:' + instance.contactInfo.emailAddress" class="text-link hover:text-link-hover hover:underline">
+        <a [href]="'mailto:' + instance.contactInfo.emailAddress" class="text-link hover:text-link-hover hover:underline word-wrap-and-break">
             {{instance.contactInfo.emailAddress }}
         </a>
     </p>