chore(setup): Add and configure prettier (!4)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: https://git.simonis.lol/projects/casino/pulls/4
Reviewed-by: Hop In, I Have Puppies AND WiFi <jleibl@noreply@simonis.lol>

frontend/.prettierignore

@@ -0,0 +1,4 @@
+dist
+coverage
+node_modules
+.angular

frontend/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}

frontend/bun.lock

@@ -29,6 +29,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
+        "prettier": "^3.4.2",
         "typescript": "~5.5.2",
       },
     },
@@ -1344,6 +1345,8 @@
 
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
+    "prettier": ["prettier@3.4.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ=="],
+
     "proc-log": ["proc-log@4.2.0", "", {}, "sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA=="],
 
     "process-nextick-args": ["process-nextick-args@2.0.1", "", {}, "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="],

frontend/package.json

@@ -6,7 +6,9 @@
     "start": "bunx @angular/cli serve --proxy-config src/proxy.conf.json",
     "build": "bunx @angular/cli build",
     "watch": "bunx @angular/cli build --watch --configuration development",
-    "test": "bunx @angular/cli test"
+    "test": "bunx @angular/cli test",
+    "format": "prettier --write \"src/**/*.{ts,html,css,scss}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,html,css,scss}\""
   },
   "private": true,
   "dependencies": {
@@ -35,6 +37,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "prettier": "^3.4.2",
     "typescript": "~5.5.2"
   }
 }

frontend/src/app/app.component.html

@@ -1,4 +1 @@
 <router-outlet></router-outlet>
-
-
-

frontend/src/app/app.component.ts

@@ -1,22 +1,16 @@
-import {APP_INITIALIZER, Component} from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
-import {HelloListComponent} from "./hello-list/hello-list.component";
+import { KeycloakAngularModule } from 'keycloak-angular';
-import {KeycloakAngularModule} from "keycloak-angular";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, HelloListComponent, RouterOutlet, KeycloakAngularModule],
+  imports: [CommonModule, RouterOutlet, KeycloakAngularModule],
-  providers: [ ],
+  providers: [],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
-export class AppComponent{
+export class AppComponent {
-
+  constructor() {}
-  constructor() {
-    }
-
-
-
 }

frontend/src/app/app.config.ts

@@ -1,9 +1,13 @@
-import {APP_INITIALIZER, ApplicationConfig} from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import {KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService} from "keycloak-angular";
+import {
-import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
+  KeycloakAngularModule,
+  KeycloakBearerInterceptor,
+  KeycloakService,
+} from 'keycloak-angular';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 export const initializeKeycloak = (keycloak: KeycloakService) => async () =>
   keycloak.init({
@@ -15,34 +19,32 @@ export const initializeKeycloak = (keycloak: KeycloakService) => async () =>
     loadUserProfileAtStartUp: true,
     initOptions: {
       onLoad: 'check-sso',
-      silentCheckSsoRedirectUri:
+      silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
-        window.location.origin + '/silent-check-sso.html',
       checkLoginIframe: false,
       redirectUri: 'http://localhost:4200',
     },
   });
 
-
 function initializeApp(keycloak: KeycloakService): () => Promise<boolean> {
   return () => initializeKeycloak(keycloak)();
 }
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes),
+  providers: [
-      KeycloakAngularModule,
+    provideRouter(routes),
-      {
+    KeycloakAngularModule,
-        provide: APP_INITIALIZER,
+    {
-        useFactory: initializeApp,
+      provide: APP_INITIALIZER,
-        multi: true,
+      useFactory: initializeApp,
-        deps: [KeycloakService]
+      multi: true,
-      },
+      deps: [KeycloakService],
-      KeycloakService,
+    },
-      provideHttpClient(withInterceptorsFromDi()),
+    KeycloakService,
-      {
+    provideHttpClient(withInterceptorsFromDi()),
-        provide: HTTP_INTERCEPTORS,
+    {
-        useClass: KeycloakBearerInterceptor,
+      provide: HTTP_INTERCEPTORS,
-        multi: true
+      useClass: KeycloakBearerInterceptor,
-      }
+      multi: true,
-    ]
+    },
-  };
+  ],
-
+};

frontend/src/app/app.routes.ts

@@ -1,4 +1,3 @@
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
-export const routes: Routes = [
+export const routes: Routes = [];
-];

frontend/src/app/auth.guard.ts

@@ -1,7 +1,6 @@
-
 import { CanActivateFn } from '@angular/router';
 import { inject } from '@angular/core';
-import {KeycloakService} from "keycloak-angular";
+import { KeycloakService } from 'keycloak-angular';
 
 export const authGuard: CanActivateFn = async (route, state) => {
   const keycloakService = inject(KeycloakService);

frontend/src/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8" />
-  <title>Lf10StarterNew</title>
+    <title>Lf10StarterNew</title>
-  <base href="/">
+    <base href="/" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-</head>
+  </head>
-<body>
+  <body>
-  <app-root></app-root>
+    <app-root></app-root>
-</body>
+  </body>
 </html>

frontend/src/main.ts

@@ -2,10 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
-
-
-