feat(course): Add user role badge

README.md

@@ -33,7 +33,8 @@
 
 # ⚠️ Notice ⚠️
 
-Still has to be worked on: 
+Still has to be worked on:
+
 - Data-Security (Firebase Rules)
 - CLI for instance setup
 - Tests

apps/course/projects/types/src/lib/user.types.ts

@@ -5,11 +5,16 @@ export type User = {
   email: string;
   username: string;
   password?: string;
-  role: 'user' | 'admin' | undefined;
+  role: UserRole | undefined;
   name?: string;
   avatar?: string;
   bio?: string;
   links?: string[];
   createdAt: Timestamp;
   updatedAt?: Timestamp;
 };
+
+export enum UserRole {
+  ADMIN = 'admin',
+  USER = 'user',
+}

apps/course/src/app/features/auth/account/account.component.html

@@ -14,6 +14,7 @@
       <app-account-profile-banner
         [username]="user['username']"
         [avatarPath]="user['avatar']"
+        [role]="user['role']"
         (avatarChange)="handleAvatarChange($event)"
         [uploading]="avatarIsUploading"
       ></app-account-profile-banner>

apps/course/src/app/features/auth/account/profile-banner/account-profile-banner.component.html

@@ -37,5 +37,6 @@
   </div>
   <div class="flex flex-wrap items-center mt-5 md:mt-0 md:ml-5">
     <p class="text-2xl font-medium link link-hover">{{ '@' + username }}</p>
+    <app-account-profile-role-badge [role]="role" class="ml-2" />
   </div>
 </div>

apps/course/src/app/features/auth/account/profile-banner/account-profile-banner.component.ts

@@ -6,23 +6,29 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { MatIcon } from '@angular/material/icon';
 import { ImageLoaderService } from '../../../../core/util/image-loader.service';
 import { NgOptimizedImage } from '@angular/common';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { UserRole } from '../../../../../../projects/types/src/lib/user.types';
+import { AccountProfileRoleBadgeComponent } from './account-profile-role-badge/account-profile-role-badge.component';
 
 @Component({
   selector: 'app-account-profile-banner',
   standalone: true,
-  imports: [MatIcon, NgOptimizedImage, TranslateModule],
+  imports: [
+    NgOptimizedImage,
+    TranslateModule,
+    AccountProfileRoleBadgeComponent,
+  ],
   templateUrl: './account-profile-banner.component.html',
-  styleUrl: './account-profile-banner.component.scss',
 })
 export class AccountProfileBannerComponent implements OnChanges {
   @Input() avatarPath: string | undefined;
   @Input() username: string = '';
-  @Output() avatarChange = new EventEmitter<File>();
   @Input() uploading: boolean = false;
+  @Input() role: UserRole | undefined;
+
+  @Output() avatarChange = new EventEmitter<File>();
 
   avatarUrl: string | undefined;
 

apps/course/src/app/features/auth/account/profile-banner/account-profile-role-badge/account-profile-role-badge.component.html

@@ -0,0 +1,7 @@
+@if (role === UserRole.ADMIN) {
+  <span class="badge badge-lg badge-error">{{ role }}</span>
+} @else if (role === UserRole.USER) {
+  <span class="badge badge-lg badge-primary">{{ role }}</span>
+} @else {
+  <span class="badge badge-lg badge-secondary">not verified</span>
+}

apps/course/src/app/features/auth/account/profile-banner/account-profile-role-badge/account-profile-role-badge.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { UserRole } from '../../../../../../../projects/types/src/lib/user.types';
+
+@Component({
+  selector: 'app-account-profile-role-badge',
+  standalone: true,
+  imports: [],
+  templateUrl: './account-profile-role-badge.component.html',
+})
+export class AccountProfileRoleBadgeComponent {
+  @Input() role: UserRole | undefined;
+  protected readonly UserRole = UserRole;
+}

apps/course/src/app/features/legal/legal-overview/legal-overview.component.html

@@ -1,17 +1,19 @@
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-      rel="stylesheet"/>
+<link
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+  rel="stylesheet"
+/>
 
 <div class="mx-1 md:mx-3 lg:mx-32 xl:mx-60 min-h-1-2">
   @if (isLoading) {
-    <app-loading-bars/>
+    <app-loading-bars />
   } @else {
     <div class="navbar bg-base-100 border-b-2">
       <div class="items-center flex-1">
         <button class="btn btn-ghost text-2xl btn-lg">Legal</button>
       </div>
     </div>
     <div class="flex flex-col xl:flex-row flex-wrap justify-center">
-      @for (document of (legalDocuments$ | async); track legalDocuments$) {
+      @for (document of legalDocuments$ | async; track legalDocuments$) {
         @if (document.displayType === 'markdown') {
           <div
             role="link"

apps/course/src/app/features/legal/legal-overview/legal-overview.component.scss

@@ -1,6 +1,7 @@
 .material-symbols-outlined {
-  font-variation-settings: 'FILL' 0,
-  'wght' 400,
-  'GRAD' 0,
-  'opsz' 24;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
 }

apps/course/src/app/shared/navigation/navbar/navbar.component.html

@@ -67,8 +67,8 @@
           <li>
             <a (click)="changeLang(lang)">
               <span class="badge badge-outline">{{
-                  lang | slice: 0 : 2 | uppercase
-                }}</span>
+                lang | slice: 0 : 2 | uppercase
+              }}</span>
               {{ languageNames[lang] }}
             </a>
           </li>