Add historyType and historyId to Appeal, update database schema, API, and email templates to include punishment details.

Refactored multiple components to improve responsive design, ensuring better usability on smaller screens. Standardized class names for clarity and consistency, and adjusted layouts and styles to enhance overall alignment and accessibility.

backend/build.gradle.kts

@@ -36,6 +36,8 @@ dependencies {
     implementation("org.springframework.boot:spring-boot-starter-security")
     implementation("org.springframework.security:spring-security-oauth2-resource-server")
     implementation("org.springframework.security:spring-security-oauth2-jose")
+    implementation("org.springframework.boot:spring-boot-starter-mail:3.1.5")
+    implementation("org.springframework.boot:spring-boot-starter-thymeleaf")
 
     //AOP
     implementation("org.aspectj:aspectjrt:1.9.19")

backend/src/main/java/com/alttd/altitudeweb/AltitudeWebApplication.java

@@ -5,7 +5,7 @@ import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.context.annotation.EnableAspectJAutoProxy;
 
-@SpringBootApplication
+@SpringBootApplication(scanBasePackages = {"com.alttd.altitudeweb"})
 @EnableAspectJAutoProxy
 public class AltitudeWebApplication {
 

backend/src/main/java/com/alttd/altitudeweb/config/SecurityAuthFailureHandler.java

@@ -0,0 +1,36 @@
+package com.alttd.altitudeweb.config;
+
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.security.access.AccessDeniedException;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.web.AuthenticationEntryPoint;
+import org.springframework.security.web.access.AccessDeniedHandler;
+import org.springframework.stereotype.Component;
+
+import java.io.IOException;
+
+@Slf4j
+@Component
+public class SecurityAuthFailureHandler implements AccessDeniedHandler, AuthenticationEntryPoint {
+    
+    @Override
+    public void handle(HttpServletRequest request, HttpServletResponse response, 
+                      AccessDeniedException accessDeniedException) throws IOException {
+        log.warn("Access denied: User '{}' attempted to access '{}' without proper permissions",
+                  request.getUserPrincipal() != null ? request.getUserPrincipal().getName() : "unknown", 
+                  request.getRequestURI());
+        
+        response.sendError(HttpServletResponse.SC_FORBIDDEN, "Access Denied");
+    }
+    
+    @Override
+    public void commence(HttpServletRequest request, HttpServletResponse response, 
+                        AuthenticationException authException) throws IOException {
+        log.warn("Authentication failure: Unauthenticated user attempted to access secured endpoint '{}'",
+                  request.getRequestURI());
+        
+        response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Authentication Required");
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java

@@ -14,6 +14,7 @@ import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.Customizer;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
 import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.oauth2.jwt.JwtDecoder;
 import org.springframework.security.oauth2.jwt.JwtEncoder;
@@ -31,19 +32,37 @@ import java.security.interfaces.RSAPublicKey;
 public class SecurityConfig {
 
     private final KeyPairService keyPairService;
+    private final SecurityAuthFailureHandler securityAuthFailureHandler;
 
     @Bean
     public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         return http
-            .authorizeHttpRequests(auth -> auth
+                .authorizeHttpRequests(
-                .requestMatchers("/login/userLogin/**", "/login/requestNewUserLogin/**").permitAll()
+                        auth -> auth
-                .requestMatchers("/team/**", "/history/**").permitAll()
+                                .requestMatchers("/api/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
-                .requestMatchers("/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
+                                .requestMatchers("/api/login/userLogin").hasAuthority(PermissionClaimDto.USER.getValue())
-                .requestMatchers("/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
+                                .requestMatchers("/api/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
-                .anyRequest().authenticated()
+                                .requestMatchers("/api/particles/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
+                                .requestMatchers("/api/files/save/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
+                                .anyRequest().permitAll()
+                )
+                .csrf(AbstractHttpConfigurer::disable)
+                .anonymous(AbstractHttpConfigurer::disable)
+                .oauth2ResourceServer(
+                        oauth2 -> oauth2
+                                .jwt(Customizer.withDefaults())
+                                .authenticationEntryPoint(securityAuthFailureHandler)
+                                .accessDeniedHandler(securityAuthFailureHandler)
+                )
+                .exceptionHandling(
+                        ex -> ex
+                                .authenticationEntryPoint(securityAuthFailureHandler)
+                                .accessDeniedHandler(securityAuthFailureHandler)
+                )
+                .sessionManagement(
+                        session -> session
+                                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                 )
-            .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
-            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                 .build();
     }
 

backend/src/main/java/com/alttd/altitudeweb/config/WebConfig.java

@@ -1,21 +1,24 @@
 package com.alttd.altitudeweb.config;
 
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.core.io.ClassPathResource;
 import org.springframework.core.io.Resource;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 import org.springframework.web.servlet.resource.PathResourceResolver;
 
 import java.io.IOException;
 
-@Configuration
+@Slf4j @Configuration
 public class WebConfig implements WebMvcConfigurer {
 
     @Override
     public void addResourceHandlers(ResourceHandlerRegistry registry) {
         registry.addResourceHandler("/**")
-                .addResourceLocations("classpath:/static/")
+                .addResourceLocations("classpath:/static/browser")
                 .resourceChain(true)
                 .addResolver(new PathResourceResolver() {
                     @Override
@@ -23,11 +26,23 @@ public class WebConfig implements WebMvcConfigurer {
                         Resource requestedResource = location.createRelative(resourcePath);
 
                         if (requestedResource.exists() && requestedResource.isReadable()) {
+                            log.debug("Serving resource {} from {}", resourcePath, location);
                             return requestedResource;
                         }
 
-                        return new ClassPathResource("/static/index.html");
+                        log.debug("Resource {} not found in {}, serving index.html", resourcePath, location);
+
+                        return new ClassPathResource("/static/browser/index.html");
                     }
                 });
     }
+
+    @Controller
+    public static class HomeController {
+        @GetMapping("/")
+        public String index() {
+            return "forward:/index.html";
+        }
+    }
+
 }

backend/src/main/java/com/alttd/altitudeweb/controllers/application/AppealController.java

@@ -1,36 +0,0 @@
-package com.alttd.altitudeweb.controllers.application;
-
-import com.alttd.altitudeweb.api.AppealsApi;
-import com.alttd.altitudeweb.services.limits.RateLimit;
-import com.alttd.altitudeweb.model.AppealResponseDto;
-import com.alttd.altitudeweb.model.DiscordAppealDto;
-import com.alttd.altitudeweb.model.MinecraftAppealDto;
-import com.alttd.altitudeweb.model.UpdateMailDto;
-import org.springframework.http.HttpStatusCode;
-import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.RestController;
-import org.springframework.web.server.ResponseStatusException;
-
-import java.util.concurrent.TimeUnit;
-
-@RestController
-@RateLimit(limit = 30, timeValue = 1, timeUnit = TimeUnit.HOURS)
-public class AppealController implements AppealsApi {
-
-    @RateLimit(limit = 3, timeValue = 1, timeUnit = TimeUnit.HOURS, key = "discordAppeal")
-    @Override
-    public ResponseEntity<MinecraftAppealDto> submitDiscordAppeal(DiscordAppealDto discordAppealDto) {
-        throw new ResponseStatusException(HttpStatusCode.valueOf(501), "Discord appeals are not yet supported");
-    }
-
-    @RateLimit(limit = 3, timeValue = 1, timeUnit = TimeUnit.HOURS, key = "minecraftAppeal")
-    @Override
-    public ResponseEntity<AppealResponseDto> submitMinecraftAppeal(MinecraftAppealDto minecraftAppealDto) {
-        throw new ResponseStatusException(HttpStatusCode.valueOf(501), "Minecraft appeals are not yet supported");
-    }
-
-    @Override
-    public ResponseEntity<AppealResponseDto> updateMail(UpdateMailDto updateMailDto) {
-        throw new ResponseStatusException(HttpStatusCode.valueOf(501), "Updating mail is not yet supported");
-    }
-}

backend/src/main/java/com/alttd/altitudeweb/controllers/data_from_auth/AuthenticatedUuid.java

@@ -0,0 +1,33 @@
+package com.alttd.altitudeweb.controllers.data_from_auth;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.oauth2.jwt.Jwt;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.util.UUID;
+
+public class AuthenticatedUuid {
+    /**
+     * Extracts and validates the authenticated user's UUID from the JWT token.
+     *
+     * @return The UUID of the authenticated user
+     * @throws ResponseStatusException with 401 status if authentication is invalid
+     */
+    public static UUID getAuthenticatedUserUuid() {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication == null || !(authentication.getPrincipal() instanceof Jwt jwt)) {
+            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, "Authentication required");
+        }
+
+        String stringUuid = jwt.getSubject();
+
+        try {
+            return UUID.fromString(stringUuid);
+        } catch (IllegalArgumentException e) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Invalid UUID format");
+        }
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/controllers/forms/AppealController.java

@@ -0,0 +1,100 @@
+package com.alttd.altitudeweb.controllers.forms;
+
+import com.alttd.altitudeweb.api.AppealsApi;
+import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.litebans.HistoryRecord;
+import com.alttd.altitudeweb.database.litebans.HistoryType;
+import com.alttd.altitudeweb.database.litebans.IdHistoryMapper;
+import com.alttd.altitudeweb.database.web_db.forms.Appeal;
+import com.alttd.altitudeweb.database.web_db.forms.AppealMapper;
+import com.alttd.altitudeweb.mappers.AppealDataMapper;
+import com.alttd.altitudeweb.model.AppealResponseDto;
+import com.alttd.altitudeweb.model.DiscordAppealDto;
+import com.alttd.altitudeweb.model.MinecraftAppealDto;
+import com.alttd.altitudeweb.model.UpdateMailDto;
+import com.alttd.altitudeweb.services.limits.RateLimit;
+import com.alttd.altitudeweb.services.mail.AppealMail;
+import com.alttd.altitudeweb.setup.Connection;
+import lombok.AllArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.HttpStatusCode;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.util.UUID;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.TimeUnit;
+
+@Slf4j
+@RestController
+@AllArgsConstructor
+@RateLimit(limit = 30, timeValue = 1, timeUnit = TimeUnit.HOURS)
+public class AppealController implements AppealsApi {
+
+    private final AppealDataMapper mapper;
+    private final AppealMail appealMail;
+
+    @RateLimit(limit = 3, timeValue = 1, timeUnit = TimeUnit.HOURS, key = "discordAppeal")
+    @Override
+    public ResponseEntity<AppealResponseDto> submitDiscordAppeal(DiscordAppealDto discordAppealDto) {
+        throw new ResponseStatusException(HttpStatusCode.valueOf(501), "Discord appeals are not yet supported");
+    }
+
+    @RateLimit(limit = 3, timeValue = 1, timeUnit = TimeUnit.HOURS, key = "minecraftAppeal")
+    @Override
+    public ResponseEntity<AppealResponseDto> submitMinecraftAppeal(MinecraftAppealDto minecraftAppealDto) {
+        CompletableFuture<Appeal> appealCompletableFuture = new CompletableFuture<>();
+
+        Connection.getConnection(Databases.DEFAULT)
+                  .runQuery(sqlSession -> {
+                      log.debug("Loading history by id");
+                      try {
+                          Appeal appeal = mapper.minecraftAppealDtoToAppeal(minecraftAppealDto);
+                          sqlSession.getMapper(AppealMapper.class).createAppeal(appeal);
+                          appealCompletableFuture.complete(appeal);
+                      } catch (Exception e) {
+                          log.error("Failed to load history count", e);
+                          appealCompletableFuture.completeExceptionally(e);
+                      }
+                  });
+        Appeal appeal = appealCompletableFuture.join();
+        HistoryRecord history = getHistory(appeal.historyType(), appeal.historyId());
+        if (history == null) {
+            throw new ResponseStatusException(HttpStatusCode.valueOf(404), "History not found");
+        }
+
+        appealMail.sendAppealNotification(appeal, history);
+
+        AppealResponseDto appealResponseDto = new AppealResponseDto(
+                appeal.id().toString(),
+                "Your appeal has been submitted. You will be notified when it has been reviewed.",
+                false);
+
+        return ResponseEntity.ok().body(appealResponseDto);
+    }
+
+    @Override
+    public ResponseEntity<AppealResponseDto> updateMail(UpdateMailDto updateMailDto) {
+        throw new ResponseStatusException(HttpStatusCode.valueOf(501), "Updating mail is not yet supported");
+    }
+
+    private HistoryRecord getHistory(String type, int id) {
+        HistoryType historyTypeEnum = HistoryType.getHistoryType(type);
+        CompletableFuture<HistoryRecord> historyRecordCompletableFuture = new CompletableFuture<>();
+
+        Connection.getConnection(Databases.LITE_BANS)
+                  .runQuery(sqlSession -> {
+                      log.debug("Loading history by id");
+                      try {
+                          HistoryRecord punishment = sqlSession.getMapper(IdHistoryMapper.class)
+                                                               .getRecentHistory(historyTypeEnum, id);
+                          historyRecordCompletableFuture.complete(punishment);
+                      } catch (Exception e) {
+                          log.error("Failed to load history count", e);
+                          historyRecordCompletableFuture.completeExceptionally(e);
+                      }
+                  });
+        return historyRecordCompletableFuture.join();
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/controllers/login/LoginController.java

@@ -1,18 +1,27 @@
 package com.alttd.altitudeweb.controllers.login;
 
 import com.alttd.altitudeweb.api.LoginApi;
+import com.alttd.altitudeweb.controllers.data_from_auth.AuthenticatedUuid;
+import com.alttd.altitudeweb.database.litebans.HistoryRecord;
+import com.alttd.altitudeweb.database.litebans.RecentNamesMapper;
+import com.alttd.altitudeweb.database.litebans.UUIDHistoryMapper;
 import com.alttd.altitudeweb.model.PermissionClaimDto;
 import com.alttd.altitudeweb.database.Databases;
 import com.alttd.altitudeweb.database.web_db.PrivilegedUser;
 import com.alttd.altitudeweb.database.web_db.PrivilegedUserMapper;
+import com.alttd.altitudeweb.model.UsernameDto;
 import com.alttd.altitudeweb.setup.Connection;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.boot.autoconfigure.security.oauth2.resource.OAuth2ResourceServerProperties;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.scheduling.annotation.Scheduled;
 import com.alttd.altitudeweb.services.limits.RateLimit;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.oauth2.jwt.Jwt;
 import org.springframework.security.oauth2.jwt.JwtClaimsSet;
 import org.springframework.security.oauth2.jwt.JwtEncoder;
 import org.springframework.security.oauth2.jwt.JwtEncoderParameters;
@@ -36,7 +45,11 @@ public class LoginController implements LoginApi {
     @Value("${login.secret:#{null}}")
     private String loginSecret;
 
-    private record CacheEntry(UUID uuid, Instant expiry) {}
+    @Value("${my-server.address:#{null}}")
+    private String serverAddress;
+
+    private record CacheEntry(UUID uuid, Instant expiry) {
+    }
 
     private static final ConcurrentMap<String, CacheEntry> cache = new ConcurrentHashMap<>();
 
@@ -80,24 +93,67 @@ public class LoginController implements LoginApi {
         return ResponseEntity.ok(loginCode);
     }
 
+    @Override
+    public ResponseEntity<UsernameDto> getUsername() {
+        log.debug("Loading username for logged in user");
+
+        try {
+            // Get authenticated UUID using the utility method
+            UUID uuid = AuthenticatedUuid.getAuthenticatedUserUuid();
+            log.debug("Loaded username for logged in user {}", uuid);
+
+            // Create response with username
+            UsernameDto usernameDto = new UsernameDto();
+            usernameDto.setUsername(getUsername(uuid));
+            log.debug("Loaded username for logged in user {}", usernameDto.getUsername());
+
+            return ResponseEntity.ok(usernameDto);
+
+        } catch (ResponseStatusException e) {
+            // The utility method already throws proper exceptions, we just need to convert them to ResponseEntity
+            return ResponseEntity.status(e.getStatusCode()).build();
+        }
+    }
+
+    private String getUsername(UUID uuid) {
+        CompletableFuture<String> username = new CompletableFuture<>();
+
+        Connection.getConnection(Databases.LITE_BANS)
+                  .runQuery(sqlSession -> {
+                      log.debug("Loading all history through logged in uuid");
+                      try {
+                          String temp = sqlSession
+                                  .getMapper(RecentNamesMapper.class)
+                                  .getUsername(uuid.toString());
+                          username.complete(temp);
+                      } catch (Exception e) {
+                          log.error("Failed to find username for uuid {}", uuid, e);
+                          username.completeExceptionally(e);
+                      }
+                  });
+        return username.join();
+    }
+
     @RateLimit(limit = 5, timeValue = 1, timeUnit = TimeUnit.MINUTES, key = "login")
     @Override
     public ResponseEntity<String> login(String code) {
-        CacheEntry cacheEntry1 = new CacheEntry(UUID.fromString("55e46bc3-2a29-4c53-850f-dbd944dc5c5f"), Instant.now().plusSeconds(TimeUnit.DAYS.toSeconds(1)));
-        cache.put("23232323", cacheEntry1);
         if (code == null) {
+            log.warn("Received null login code");
             return ResponseEntity.badRequest().build();
         }
 
         CacheEntry cacheEntry = cache.get(code);
         if (cacheEntry == null || cacheEntry.expiry().isBefore(Instant.now())) {
+            log.warn("Received invalid login code {}", code);
             return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
         }
 
         String token = generateToken(cacheEntry.uuid);
+        log.debug("Generated token for user {} with token {}", cacheEntry.uuid, token);
 
         cache.remove(code);
 
+        log.debug("Generated token for user {}", cacheEntry.uuid);
         return ResponseEntity.ok(token);
     }
 
@@ -134,34 +190,44 @@ public class LoginController implements LoginApi {
         Instant now = Instant.now();
         //TODO make a JWT for renewing and one for storing permissions for a session (expiry 1 hour)
         Instant expiryTime = now.plusSeconds(TimeUnit.DAYS.toSeconds(30));
-        CompletableFuture<PrivilegedUser> privilegedUserCompletableFuture = new CompletableFuture<>();
+        CompletableFuture<Optional<PrivilegedUser>> privilegedUserCompletableFuture = new CompletableFuture<>();
         List<PermissionClaimDto> claimList = new ArrayList<>();
         Connection.getConnection(Databases.DEFAULT)
                   .runQuery(sqlSession -> {
                       try {
-                        PrivilegedUser privilegedUser = sqlSession.getMapper(PrivilegedUserMapper.class)
+                          log.debug("Loading user by uuid {}", uuid.toString());
-                                .getUserByUuid(uuid.toString());
+                          PrivilegedUserMapper mapper = sqlSession.getMapper(PrivilegedUserMapper.class);
+                          Optional<PrivilegedUser> privilegedUser = mapper
+                                  .getUserByUuid(uuid);
 
+                          if (privilegedUser.isEmpty()) {
+                              int privilegedUserId = mapper.createPrivilegedUser(uuid);
+                              privilegedUserCompletableFuture.complete(
+                                      Optional.of(new PrivilegedUser(privilegedUserId, uuid, List.of())));
+                          } else {
                               privilegedUserCompletableFuture.complete(privilegedUser);
+                          }
                       } catch (Exception e) {
                           log.error("Failed to load user by uuid", e);
                           privilegedUserCompletableFuture.completeExceptionally(e);
                       }
                   });
-        PrivilegedUser privilegedUser = privilegedUserCompletableFuture.join();
+        Optional<PrivilegedUser> privilegedUser = privilegedUserCompletableFuture.join();
         claimList.add(PermissionClaimDto.USER);
-        if (privilegedUser != null) {
+        privilegedUser.ifPresent(user -> user.getPermissions().forEach(permission -> {
-            privilegedUser.getPermissions().forEach(permission -> {
             try {
-                    claimList.add(PermissionClaimDto.valueOf(permission));
+                claimList.add(PermissionClaimDto.fromValue(permission));
+                log.debug("Added permission claim {}", permission);
             } catch (IllegalArgumentException e) {
                 log.warn("Received invalid permission claim: {}", permission);
             }
-            });
+        }));
-        }
+        log.debug("Generated token for user {} with claims {}", uuid.toString(),
+                claimList.stream().map(PermissionClaimDto::getValue).toList());
         JwtClaimsSet claims = JwtClaimsSet.builder()
-                .issuer("altitudeweb")
+                                          .issuer(serverAddress)
-                .claim("authorities", claimList.stream().map(PermissionClaimDto::getValue).toList())
+                                          .claim("authorities",
+                                                  claimList.stream().map(PermissionClaimDto::getValue).toList())
                                           .issuedAt(now)
                                           .expiresAt(expiryTime)
                                           .subject(uuid.toString())

backend/src/main/java/com/alttd/altitudeweb/controllers/particles/ParticleController.java

@@ -0,0 +1,176 @@
+package com.alttd.altitudeweb.controllers.particles;
+
+import com.alttd.altitudeweb.api.ParticlesApi;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.core.io.ByteArrayResource;
+import org.springframework.core.io.Resource;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+@Slf4j
+@RequiredArgsConstructor
+@RestController
+public class ParticleController implements ParticlesApi {
+
+    @Value("${login.secret:#{null}}")
+    private String loginSecret;
+
+    @Value("${particles.file_path}")
+    private String particlesFilePath;
+
+    @Value("${notification.server.url:http://localhost:8080}")
+    private String notificationServerUrl;
+
+    @Override
+    public ResponseEntity<Resource> downloadFile(String authorization, String filename) throws Exception {
+        if (authorization == null || !authorization.equals(loginSecret)) {
+            return ResponseEntity.status(401).build();
+        }
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not downloading particles file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        File targetFile = new File(file, filename);
+        return getFileForDownload(targetFile, filename);
+    }
+
+    @Override
+    public ResponseEntity<Resource> downloadFileForUser(String authorization, String uuid, String filename) throws Exception {
+        if (authorization == null || !authorization.equals(loginSecret)) {
+            return ResponseEntity.status(401).build();
+        }
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not downloading particles user file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        File targetDir = new File(file, uuid);
+        if (targetDir.exists()) {
+            return getFileForDownload(targetDir, filename);
+        } else {
+            log.warn("User {} does not have a directory for particles files", uuid);
+            return ResponseEntity.notFound().build();
+        }
+    }
+
+    private ResponseEntity<Resource> getFileForDownload(File file, String filename) {
+        File targetFile = new File(file, filename);
+        if (!targetFile.exists()) {
+            log.warn("Particles file {} does not exist", targetFile.getAbsolutePath());
+            return ResponseEntity.notFound().build();
+        }
+
+        if (!targetFile.isFile()) {
+            log.warn("Particles file {} is not a file", targetFile.getAbsolutePath());
+            return ResponseEntity.status(404).build();
+        }
+
+        try {
+            Path path = targetFile.toPath();
+            ByteArrayResource resource = new ByteArrayResource(Files.readAllBytes(path));
+
+            return ResponseEntity.ok()
+                    .contentLength(targetFile.length())
+                    .contentType(MediaType.APPLICATION_JSON)
+                    .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filename + "\"")
+                    .body(resource);
+        } catch (IOException e) {
+            log.error("Failed to read particles file {}: {}", targetFile.getAbsolutePath(), e.getMessage(), e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+        }
+
+    }
+
+    @Override
+    public ResponseEntity<Void> saveFile(String filename, MultipartFile content) throws Exception {
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not saving particles file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        ResponseEntity<Void> voidResponseEntity = writeContentToFile(file, filename, content);
+        notifyServerOfFileUpload(filename);
+        return voidResponseEntity;
+    }
+
+    @Override
+    public ResponseEntity<Void> saveFileForUser(String uuid, String filename, MultipartFile content) throws Exception {
+        File file = new File(particlesFilePath);
+        if (!file.exists() || !file.isDirectory()) {
+            log.error("Particles file path {} is not a directory, not saving particles user file", particlesFilePath);
+            return ResponseEntity.status(404).build();
+        }
+        File targetDir = new File(file, uuid);
+        if (!file.exists()) {
+            log.debug("Creating particles directory {}", targetDir.getAbsolutePath());
+            if (targetDir.mkdirs()) {
+                log.info("Created particles user directory {}", targetDir.getAbsolutePath());
+            }
+        }
+
+        ResponseEntity<Void> voidResponseEntity = writeContentToFile(file, filename, content);
+        notifyServerOfFileUpload(uuid, filename);
+        return voidResponseEntity;
+    }
+
+    private void notifyServerOfFileUpload(String filename) {
+        String notificationUrl = String.format("%s/notify/%s.json", notificationServerUrl, filename);
+        sendNotification(notificationUrl, String.format("file upload: %s", filename));
+    }
+
+    private void notifyServerOfFileUpload(String uuid, String filename) {
+        String notificationUrl = String.format("%s/notify/%s/%s.json", notificationServerUrl, uuid, filename);
+        sendNotification(notificationUrl, String.format("file upload for user %s: %s", uuid, filename));
+    }
+
+    private void sendNotification(String notificationUrl, String logDescription) {
+        try {
+            RestTemplate restTemplate = new RestTemplate();
+            ResponseEntity<String> response = restTemplate.getForEntity(notificationUrl, String.class);
+
+            if (response.getStatusCode().is2xxSuccessful()) {
+                log.info("Successfully notified server of {}", logDescription);
+            } else {
+                log.warn("Failed to notify server of {}, status: {}",
+                         logDescription, response.getStatusCode());
+            }
+        } catch (Exception e) {
+            log.error("Error notifying server of {}", logDescription, e);
+        }
+    }
+
+
+    private ResponseEntity<Void> writeContentToFile(File dir, String filename, MultipartFile content) {
+        File targetFile = new File(dir, filename);
+        if (!Files.isWritable(targetFile.toPath())) {
+            log.error("Particles file {} is not writable", targetFile.getAbsolutePath());
+            return ResponseEntity.status(403).build();
+        }
+
+        if (targetFile.exists()) {
+            log.warn("Overwriting existing particles file {}", targetFile.getAbsolutePath());
+        }
+
+        try {
+            content.transferTo(targetFile);
+        } catch (Exception e) {
+            log.error("Failed to write particles file {}", targetFile.getAbsolutePath(), e);
+            return ResponseEntity.status(500).build();
+        }
+
+        return ResponseEntity.ok().build();
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/mappers/AppealDataMapper.java

@@ -0,0 +1,32 @@
+package com.alttd.altitudeweb.mappers;
+
+import com.alttd.altitudeweb.database.web_db.forms.Appeal;
+import com.alttd.altitudeweb.model.MinecraftAppealDto;
+import org.springframework.stereotype.Service;
+
+import java.util.UUID;
+
+@Service
+public class AppealDataMapper {
+    public MinecraftAppealDto appealToMinecraftAppealDto(Appeal appeal) {
+        MinecraftAppealDto minecraftAppealDto = new MinecraftAppealDto();
+        minecraftAppealDto.setAppeal(appeal.reason());
+        minecraftAppealDto.setUsername(appeal.username());
+        minecraftAppealDto.setUuid(appeal.uuid());
+        minecraftAppealDto.setEmail(appeal.email());
+        return minecraftAppealDto;
+    }
+
+    public Appeal minecraftAppealDtoToAppeal(MinecraftAppealDto minecraftAppealDto) {
+        return new Appeal(
+                UUID.randomUUID(),
+                minecraftAppealDto.getUuid(),
+                minecraftAppealDto.getUsername(),
+                minecraftAppealDto.getAppeal(),
+                null,
+                null,
+                minecraftAppealDto.getEmail(),
+                null
+        );
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/services/mail/AppealMail.java

@@ -0,0 +1,64 @@
+package com.alttd.altitudeweb.services.mail;
+
+import com.alttd.altitudeweb.database.litebans.HistoryRecord;
+import com.alttd.altitudeweb.database.web_db.forms.Appeal;
+import jakarta.mail.MessagingException;
+import jakarta.mail.internet.MimeMessage;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.mail.javamail.MimeMessageHelper;
+import org.springframework.stereotype.Service;
+import org.thymeleaf.context.Context;
+import org.thymeleaf.spring6.SpringTemplateEngine;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class AppealMail {
+
+    private final JavaMailSender mailSender;
+    private final SpringTemplateEngine templateEngine;
+
+    @Value("${spring.mail.username}")
+    private String fromEmail;
+
+    private static final String APPEAL_EMAIL = "[email protected]";
+
+    /**
+     * Sends an email notification about the appeal to both the user and the appeals team.
+     *
+     * @param appeal The appeal object containing all necessary information
+     */
+    public void sendAppealNotification(Appeal appeal, HistoryRecord history) {
+        try {
+            sendEmailToAppealsTeam(appeal, history);
+
+            log.info("Appeal notification emails sent successfully for appeal ID: {}", appeal.id());
+        } catch (Exception e) {
+            log.error("Failed to send appeal notification emails for appeal ID: {}", appeal.id(), e);
+        }
+    }
+
+    private void sendEmailToAppealsTeam(Appeal appeal, HistoryRecord history) throws MessagingException {
+        MimeMessage message = mailSender.createMimeMessage();
+        MimeMessageHelper helper = new MimeMessageHelper(message, true);
+
+        helper.setFrom(fromEmail);
+        helper.setTo(APPEAL_EMAIL);
+        helper.setReplyTo(appeal.email());
+        helper.setSubject("New Appeal Submitted - " + appeal.username());
+
+        Context context = new Context();
+        context.setVariable("appeal", appeal);
+        context.setVariable("history", history);
+        context.setVariable("createdAt", appeal.createdAt().toString());
+        context.setVariable("active", history.getUntil() <= 0 || history.getUntil() > System.currentTimeMillis());
+        String content = templateEngine.process("appeal-email", context);
+
+        helper.setText(content, true);
+        mailSender.send(message);
+    }
+
+}

backend/src/main/resources/application-beta.properties

@@ -5,4 +5,5 @@ database.host=${DB_HOST:localhost}
 database.user=${DB_USER:root}
 database.password=${DB_PASSWORD:root}
 cors.allowed-origins=${CORS:https://beta.alttd.com}
-logging.level.com.alttd.altitudeweb=INFO
+my-server.address=${SERVER_ADDRESS:https://beta.alttd.com}
+logging.level.com.alttd.altitudeweb=DEBUG

backend/src/main/resources/application-test.properties

@@ -5,4 +5,5 @@ database.host=${DB_HOST:localhost}
 database.user=${DB_USER:root}
 database.password=${DB_PASSWORD:root}
 cors.allowed-origins=${CORS:http://localhost:4200}
+my-server.address=${SERVER_ADDRESS:http://localhost}
 logging.level.com.alttd.altitudeweb=DEBUG

backend/src/main/resources/application.properties

@@ -6,4 +6,15 @@ database.user=${DB_USER:root}
 database.password=${DB_PASSWORD:root}
 cors.allowed-origins=${CORS:https://alttd.com}
 login.secret=${LOGIN_SECRET:SET_TOKEN}
+particles.file_path=${user.home}/.altitudeweb/particles
+notification.server.url=${SERVER_IP:10.0.0.107}:${SERVER_PORT:8080}
+my-server.address=${SERVER_ADDRESS:https://alttd.com}
 logging.level.com.alttd.altitudeweb=INFO
+discord.token=${DISCORD_TOKEN}
+spring.mail.host=${MAIL_HOST:smtp.zoho.com}
+spring.mail.port=${MAIL_PORT:465}
+spring.mail.username=${MAIL_USER}
+spring.mail.password=${MAIL_PASSWORD}
+spring.mail.properties.mail.smtp.auth=true
+spring.mail.properties.mail.smtp.ssl.enable=true
+spring.mail.properties.mail.smtp.socketFactory.class=javax.net.ssl.SSLSocketFactory

backend/src/main/resources/templates/appeal-email.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Appeal Notification</title>
+    <style>
+        ul {
+            list-style-type: none;
+            padding-left: 20px;
+        }
+    </style>
+</head>
+<body>
+<h2 th:text="'Appeal by ' + ${appeal.username}">Appeal by Username</h2>
+<p>Punishment information</p>
+<ul>
+    <li><strong>Username:</strong> <span th:text="${appeal.username}">username</span></li>
+    <li><strong>UUID:</strong> <span th:text="${appeal.uuid}">uuid</span></li>
+    <li><strong>Email:</strong> <span th:text="${appeal.email}">email</span></li>
+    <li><strong>Submitted at:</strong> <span th:text="${createdAt}">date</span></li>
+    <li><strong>Reason:</strong> <span th:text="${history.reason}">reason</span></li>
+    <li><strong>Active:</strong> <span th:text="${active}">unknown</span></li>
+</ul>
+<h3>Appeal:</h3>
+<p th:text="${appeal.reason}">Reason text</p>
+</body>
+</html>

database/src/main/java/com/alttd/altitudeweb/database/litebans/RecentNamesMapper.java

@@ -7,6 +7,16 @@ import java.util.ArrayList;
 import java.util.List;
 
 public interface RecentNamesMapper {
+
+    @Select("""
+            SELECT DISTINCT name AS username
+            FROM litebans_history
+            WHERE uuid = #{uuid}
+            ORDER BY date DESC;
+            """)
+    String getUsername(@Param("uuid") String uuid);
+
+
     @Select("""
             SELECT DISTINCT user_lookup.name AS punished_name
             FROM ${tableName} AS punishment

database/src/main/java/com/alttd/altitudeweb/database/web_db/KeyPairMapper.java

@@ -4,7 +4,12 @@ import org.apache.ibatis.annotations.*;
 
 public interface KeyPairMapper {
     
-    @Select("SELECT * FROM key_pair ORDER BY id DESC LIMIT 1")
+    @Select("""
+            SELECT id, private_key AS privateKey, public_key AS publicKey, created_at AS createdAt
+            FROM key_pair
+            ORDER BY id
+                DESC LIMIT 1
+            """)
     KeyPairEntity getKeyPair();
     
     @Insert("""

database/src/main/java/com/alttd/altitudeweb/database/web_db/PrivilegedUser.java

@@ -5,12 +5,13 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 
 import java.util.List;
+import java.util.UUID;
 
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
 public class PrivilegedUser {
     private int id;
-    private String uuid;
+    private UUID uuid;
     private List<String> permissions;
 }

database/src/main/java/com/alttd/altitudeweb/database/web_db/PrivilegedUserMapper.java

@@ -1,21 +1,23 @@
 package com.alttd.altitudeweb.database.web_db;
 
 import org.apache.ibatis.annotations.*;
+import org.jetbrains.annotations.Nullable;
 
 import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
 
 public interface PrivilegedUserMapper {
 
     /**
      * Retrieves a user by their UUID along with their permissions
      * @param uuid The UUID of the user to retrieve
-     * @return The PrivilegedUser with their permissions, or null if not found
+     * @return The optional PrivilegedUser with their permissions
      */
     @Select("""
-            SELECT privileged_users.id, privileged_users.uuid, privileges.privileges as permission
+        SELECT id, uuid
         FROM privileged_users
-            LEFT JOIN privileges ON privileged_users.id = privileges.user_id
+        WHERE uuid = #{uuid}
-            WHERE privileged_users.uuid = #{uuid}
         """)
     @Results({
             @Result(property = "id", column = "id"),
@@ -23,7 +25,7 @@ public interface PrivilegedUserMapper {
             @Result(property = "permissions", column = "id", javaType = List.class,
                     many = @Many(select = "getPermissionsForUser"))
     })
-    PrivilegedUser getUserByUuid(@Param("uuid") String uuid);
+    Optional<PrivilegedUser> getUserByUuid(@Param("uuid") UUID uuid);
 
     /**
      * Retrieves all privileged users with their permissions
@@ -99,4 +101,11 @@ public interface PrivilegedUserMapper {
             WHERE user_id = #{userId} AND privileges = #{permission}
             """)
     int removePermissionFromUser(@Param("userId") int userId, @Param("permission") String permission);
+
+    @Insert("""
+            INSERT INTO privileged_users (uuid)
+            VALUES (#{uuid})
+            """)
+    @Options(useGeneratedKeys = true, keyProperty = "id", keyColumn = "id")
+    int createPrivilegedUser(UUID uuid);
 }

database/src/main/java/com/alttd/altitudeweb/database/web_db/forms/Appeal.java

@@ -0,0 +1,18 @@
+package com.alttd.altitudeweb.database.web_db.forms;
+
+import java.time.Instant;
+import java.util.UUID;
+
+public record Appeal(
+        UUID id,
+        UUID uuid,
+        String historyType,
+        Integer historyId,
+        String username,
+        String reason,
+        Instant createdAt,
+        Instant sendAt,
+        String email,
+        Long assignedTo
+) {
+}

database/src/main/java/com/alttd/altitudeweb/database/web_db/forms/AppealMapper.java

@@ -0,0 +1,29 @@
+package com.alttd.altitudeweb.database.web_db.forms;
+
+import org.apache.ibatis.annotations.Insert;
+import org.apache.ibatis.annotations.Select;
+
+import java.util.List;
+
+public interface AppealMapper {
+
+    @Insert("""
+            INSERT INTO appeals (uuid, username, historyType, historyId, reason, created_at, send_at, e_mail, assigned_to)
+            VALUES (#{uuid}, #{username}, #{historyType}, #{historyId}, #{reason}, #{createdAt}, #{sendAt}, #{email}, #{assignedTo})
+            """)
+    void createAppeal(Appeal appeal);
+
+    @Select("""
+            SELECT id, uuid, historyType, historyId, reason, created_at AS createdAt, send_at AS sendAt, e_mail AS email, assigned_to AS assignedTo
+            FROM appeals
+            WHERE id = #{id}
+            """)
+    Appeal getAppealById(int id);
+
+    @Select("""
+            SELECT id, uuid, historyType, historyId, reason, created_at AS createdAt, send_at AS sendAt, e_mail AS email, assigned_to AS assignedTo
+            FROM appeals
+            WHERE uuid = #{uuid}
+            """)
+    List<Appeal> getAppealsByUuid(String uuid);
+}

database/src/main/java/com/alttd/altitudeweb/setup/Connection.java

@@ -3,6 +3,7 @@ package com.alttd.altitudeweb.setup;
 import com.alttd.altitudeweb.database.Databases;
 import com.alttd.altitudeweb.database.web_db.DatabaseSettings;
 import com.alttd.altitudeweb.database.web_db.SettingsMapper;
+import com.alttd.altitudeweb.type_handler.UUIDTypeHandler;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.ibatis.datasource.pooled.PooledDataSource;
 import org.apache.ibatis.mapping.Environment;
@@ -13,6 +14,7 @@ import org.apache.ibatis.session.SqlSessionFactoryBuilder;
 import org.apache.ibatis.transaction.jdbc.JdbcTransactionFactory;
 
 import java.util.HashMap;
+import java.util.UUID;
 import java.util.concurrent.CompletableFuture;
 import java.util.function.Consumer;
 
@@ -97,10 +99,20 @@ public class Connection {
                 sqlSessionFactory = createSqlSessionFactory(settings, addMappers);
             }
 
-            try (SqlSession session = sqlSessionFactory.openSession()) {
+            SqlSession session = null;
+            try {
+                session = sqlSessionFactory.openSession();
                 consumer.accept(session);
+                session.commit();
             } catch (Exception e) {
+                if (session != null) {
+                    session.rollback();
+                }
                 log.error("Failed to run query", e);
+            } finally {
+                if (session != null) {
+                    session.close();
+                }
             }
         }).start();
     }
@@ -114,6 +126,7 @@ public class Connection {
         dataSource.setPassword(settings.password());
         Environment environment = new Environment("production", new JdbcTransactionFactory(), dataSource);
         Configuration configuration = new Configuration(environment);
+        configuration.getTypeHandlerRegistry().register(UUID.class, UUIDTypeHandler.class);
         addMappers.apply(configuration);
 
         return new SqlSessionFactoryBuilder().build(configuration);

database/src/main/java/com/alttd/altitudeweb/setup/InitializeWebDb.java

@@ -2,7 +2,9 @@ package com.alttd.altitudeweb.setup;
 
 import com.alttd.altitudeweb.database.Databases;
 import com.alttd.altitudeweb.database.web_db.KeyPairMapper;
+import com.alttd.altitudeweb.database.web_db.PrivilegedUserMapper;
 import com.alttd.altitudeweb.database.web_db.SettingsMapper;
+import com.alttd.altitudeweb.database.web_db.forms.AppealMapper;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.ibatis.session.SqlSession;
 import org.jetbrains.annotations.NotNull;
@@ -18,12 +20,15 @@ public class InitializeWebDb {
         Connection.getConnection(Databases.DEFAULT, (configuration) -> {
                     configuration.addMapper(SettingsMapper.class);
                     configuration.addMapper(KeyPairMapper.class);
+                    configuration.addMapper(PrivilegedUserMapper.class);
+                    configuration.addMapper(AppealMapper.class);
                 }).join()
-                .runQuery(SqlSession -> {
+                .runQuery(sqlSession -> {
-                    createSettingsTable(SqlSession);
+                    createSettingsTable(sqlSession);
-                    createKeyTable(SqlSession);
+                    createKeyTable(sqlSession);
-                    createPrivilegedUsersTable(SqlSession);
+                    createPrivilegedUsersTable(sqlSession);
-                    createPrivilegesTable(SqlSession);
+                    createPrivilegesTable(sqlSession);
+                    createAppealTable(sqlSession);
                 });
         log.debug("Initialized WebDb");
     }
@@ -68,7 +73,7 @@ public class InitializeWebDb {
         String query = """
                 CREATE TABLE IF NOT EXISTS privileged_users (
                     id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
-                    uuid VARCHAR(36) NOT NULL
+                    uuid UUID UNIQUE NOT NULL
                 );
                 """;
         try (Statement statement = sqlSession.getConnection().createStatement()) {
@@ -97,4 +102,27 @@ public class InitializeWebDb {
         }
     }
 
+    private static void createAppealTable(@NotNull SqlSession sqlSession) {
+        String query = """
+                CREATE TABLE IF NOT EXISTS appeals (
+                    id UUID NOT NULL DEFAULT (UUID()) PRIMARY KEY,
+                    uuid UUID NOT NULL,
+                    historyType VARCHAR(16) NOT NULL,
+                    historyId BIGINT UNSIGNED NOT NULL,
+                    username VARCHAR(16) NOT NULL,
+                    reason TEXT NOT NULL,
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,
+                    send_at TIMESTAMP NULL,
+                    e_mail TEXT NOT NULL,
+                    assigned_to BIGINT UNSIGNED NULL,
+                    FOREIGN KEY (uuid) REFERENCES privileged_users(uuid) ON DELETE CASCADE ON UPDATE CASCADE
+                );
+                """;
+        try (Statement statement = sqlSession.getConnection().createStatement()) {
+            statement.execute(query);
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
 }

frontend/angular.json

@@ -15,11 +15,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -34,7 +35,8 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -47,9 +49,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "namedChunks": false,
+              "namedChunks": false
-              "vendorChunk": false,
-              "buildOptimizer": true
             },
             "development": {
               "sourceMap": true,
@@ -71,14 +71,12 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "namedChunks": false,
+              "namedChunks": false
-              "vendorChunk": false,
-              "buildOptimizer": true
             }
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "frontend:build:production"
@@ -90,10 +88,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -119,5 +117,31 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

frontend/build.gradle.kts

@@ -8,8 +8,9 @@ plugins {
 
 node {
   download.set(true)
-  version.set("22.14.0")
+  // Update to the version that's compatible with your environment requirements
-  npmVersion.set("10.9.2")
+  version.set("20.19.0")
+  npmVersion.set("10.2.3") // A compatible npm version for Node.js 20.19.0
   workDir.set(file("${project.projectDir}/node"))
   npmWorkDir.set(file("${project.projectDir}/node"))
 }
@@ -21,38 +22,37 @@ tasks.register<Delete>("cleanDist") {
 }
 
 // Create a task that will run npm build
-tasks.register("npmBuild") {
+tasks.register<com.github.gradle.node.npm.task.NpmTask>("npmBuild") {
   description = "Run 'npm run build'"
   group = "build"
 
-  doLast {
+  // Determine which build script to run based on the OS
-    // Use nodeCommand directly from the plugin
-    project.exec {
-      workingDir(project.projectDir)
-
-      // Use node's npm to ensure it works on all environments
-      val nodeDir = "${project.projectDir}/node"
   val isWindows = System.getProperty("os.name").lowercase().contains("windows")
-
+  npmCommand.set(listOf("run", if (isWindows) "build:dev" else "build:beta"))
-      if (isWindows) {
-        val npmCmd = file(nodeDir).listFiles()?.find { it.name.startsWith("npm") && it.isDirectory }?.let {
-          "${it.absolutePath}/npm.cmd"
-        } ?: "$nodeDir/node_modules/npm/bin/npm.cmd"
-
-        commandLine(npmCmd, "run", "build:dev")
-      } else {
-        val npmExecutable = file(nodeDir).listFiles()?.find { it.name.startsWith("npm") && it.isDirectory }?.let {
-          "${it.absolutePath}/bin/npm"
-        } ?: "$nodeDir/node_modules/npm/bin/npm"
-
-        commandLine(npmExecutable, "run", "build:beta")
-      }
-    }
-  }
 
   dependsOn("npmInstall")
 }
 
+// Add a new task to check Node.js and npm versions
+tasks.register<com.github.gradle.node.task.NodeTask>("nodeVersionCheck") {
+  description = "Check Node.js and npm versions"
+  script.set(file("${projectDir}/node-version-check.js"))
+
+  doFirst {
+    // Create a temporary script to check versions
+    file("${projectDir}/node-version-check.js").writeText("""
+      console.log('Node.js version:', process.version);
+      console.log('npm version:', require('npm/package.json').version);
+      console.log('Build command that would be used:', process.platform === 'win32' ? 'build:dev' : 'build:beta');
+    """.trimIndent())
+  }
+
+  doLast {
+    // Clean up the temporary script
+    delete("${projectDir}/node-version-check.js")
+  }
+}
+
 tasks.named("assemble") {
   dependsOn("npmBuild")
 }

frontend/package.json

@@ -13,24 +13,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^19.2.18",
+    "@angular/cdk": "^20.1.3",
-    "@angular/common": "^19.2.0",
+    "@angular/common": "^20.1.0",
-    "@angular/compiler": "^19.2.0",
+    "@angular/compiler": "^20.1.0",
-    "@angular/core": "^19.2.0",
+    "@angular/core": "^20.1.0",
-    "@angular/forms": "^19.2.0",
+    "@angular/forms": "^20.1.0",
-    "@angular/material": "^19.2.18",
+    "@angular/material": "^20.1.3",
-    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser": "^20.1.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^20.1.0",
-    "@angular/router": "^19.2.0",
+    "@angular/router": "^20.1.0",
-    "ngx-cookie-service": "^19.1.2",
+    "@auth0/angular-jwt": "^5.2.0",
+    "@types/three": "^0.177.0",
+    "ngx-cookie-service": "^20.0.1",
     "rxjs": "~7.8.0",
+    "three": "^0.177.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.5",
+    "@angular/build": "^20.1.0",
-    "@angular/cli": "^19.2.5",
+    "@angular/cli": "^20.1.0",
-    "@angular/compiler-cli": "^19.2.0",
+    "@angular/compiler-cli": "^20.1.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
@@ -38,6 +41,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.7.2"
+    "typescript": "^5.8.3"
   }
 }

frontend/src/app/about/about.component.ts

@@ -1,21 +0,0 @@
-import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
-import {CommonModule} from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
-import {RemoveTrailingPeriodPipe} from "../util/RemoveTrailingPeriodPipe";
-
-@Component({
-  selector: 'app-about',
-  standalone: true,
-  imports: [
-    CommonModule,
-    HeaderComponent,
-    RemoveTrailingPeriodPipe
-  ],
-  templateUrl: './about.component.html',
-  styleUrl: './about.component.scss'
-})
-export class AboutComponent {
-  constructor(public scrollService: ScrollService) {
-  }
-}

frontend/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
-import {ALTITUDE_VERSION} from './constant';
+import {ALTITUDE_VERSION} from '@custom-types/constant';
 import {Router, RouterOutlet} from '@angular/router';
-import {FooterComponent} from './footer/footer.component';
+import {FooterComponent} from '@pages/footer/footer/footer.component';
 
 @Component({
   standalone: true,
@@ -10,8 +10,8 @@ import {FooterComponent} from './footer/footer.component';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
-    FooterComponent,
+    RouterOutlet,
-    RouterOutlet
+    FooterComponent
   ]
 })
 export class AppComponent implements OnInit {

frontend/src/app/app.config.ts

@@ -1,8 +0,0 @@
-import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
-import {provideRouter} from '@angular/router';
-
-import {routes} from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({eventCoalescing: true}), provideRouter(routes)]
-};

frontend/src/app/app.routes.ts

@@ -1,110 +1,133 @@
 import {Routes} from '@angular/router';
+import {AuthGuard} from './guards/auth.guard';
 
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
+    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)
+  },
+  {
+    path: 'particles',
+    loadComponent: () => import('./pages/particles/particles.component').then(m => m.ParticlesComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_head_mod']
+    }
   },
   {
     path: 'map',
-    loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
+    loadComponent: () => import('./pages/features/map/map.component').then(m => m.MapComponent)
   },
   {
     path: 'rules',
-    loadComponent: () => import('./rules/rules.component').then(m => m.RulesComponent)
+    loadComponent: () => import('./pages/reference/rules/rules.component').then(m => m.RulesComponent)
   },
   {
     path: 'vote',
-    loadComponent: () => import('./vote/vote.component').then(m => m.VoteComponent)
+    loadComponent: () => import('./pages/vote/vote.component').then(m => m.VoteComponent)
   },
   {
     path: 'about',
-    loadComponent: () => import('./about/about.component').then(m => m.AboutComponent)
+    loadComponent: () => import('./pages/altitude/about/about.component').then(m => m.AboutComponent)
   },
   {
     path: 'socials',
-    loadComponent: () => import('./socials/socials.component').then(m => m.SocialsComponent)
+    loadComponent: () => import('./pages/altitude/socials/socials.component').then(m => m.SocialsComponent)
   },
   {
     path: 'team',
-    loadComponent: () => import('./team/team.component').then(m => m.TeamComponent)
+    loadComponent: () => import('./pages/altitude/team/team.component').then(m => m.TeamComponent)
   },
   {
     path: 'birthdays',
-    loadComponent: () => import('./birthdays/birthdays.component').then(m => m.BirthdaysComponent)
+    loadComponent: () => import('./pages/altitude/birthdays/birthdays.component').then(m => m.BirthdaysComponent)
   },
   {
     path: 'terms',
-    loadComponent: () => import('./terms/terms.component').then(m => m.TermsComponent)
+    loadComponent: () => import('./pages/footer/terms/terms.component').then(m => m.TermsComponent)
   },
   {
     path: 'privacy',
-    loadComponent: () => import('./privacy/privacy.component').then(m => m.PrivacyComponent)
+    loadComponent: () => import('./pages/footer/privacy/privacy.component').then(m => m.PrivacyComponent)
   },
   {
     path: 'bans',
-    loadComponent: () => import('./bans/bans.component').then(m => m.BansComponent)
+    loadComponent: () => import('./pages/reference/bans/bans.component').then(m => m.BansComponent)
   },
   {
     path: 'bans/:type/:id',
-    loadComponent: () => import('./bans/details/details.component').then(m => m.DetailsComponent)
+    loadComponent: () => import('./pages/reference/bans/details/details.component').then(m => m.DetailsComponent)
   },
   {
     path: 'economy',
-    loadComponent: () => import('./economy/economy.component').then(m => m.EconomyComponent)
+    loadComponent: () => import('./pages/features/economy/economy.component').then(m => m.EconomyComponent)
   },
   {
     path: 'claiming',
-    loadComponent: () => import('./claiming/claiming.component').then(m => m.ClaimingComponent)
+    loadComponent: () => import('./pages/features/claiming/claiming.component').then(m => m.ClaimingComponent)
   },
   {
     path: 'mypet',
-    loadComponent: () => import('./mypet/mypet.component').then(m => m.MypetComponent)
+    loadComponent: () => import('./pages/features/mypet/mypet.component').then(m => m.MypetComponent)
   },
   {
     path: 'warps',
-    loadComponent: () => import('./warps/warps.component').then(m => m.WarpsComponent)
+    loadComponent: () => import('./pages/features/warps/warps.component').then(m => m.WarpsComponent)
   },
   {
     path: 'skyblock',
-    loadComponent: () => import('./skyblock/skyblock.component').then(m => m.SkyblockComponent)
+    loadComponent: () => import('./pages/features/skyblock/skyblock.component').then(m => m.SkyblockComponent)
   },
   {
     path: 'customfeatures',
-    loadComponent: () => import('./customfeatures/customfeatures.component').then(m => m.CustomfeaturesComponent)
+    loadComponent: () => import('./pages/features/customfeatures/customfeatures.component').then(m => m.CustomfeaturesComponent)
   },
   {
     path: 'guide',
-    loadComponent: () => import('./guide/guide.component').then(m => m.GuideComponent)
+    loadComponent: () => import('./pages/reference/guide/guide.component').then(m => m.GuideComponent)
   },
   {
     path: 'ranks',
-    loadComponent: () => import('./ranks/ranks.component').then(m => m.RanksComponent)
+    loadComponent: () => import('./pages/reference/ranks/ranks.component').then(m => m.RanksComponent)
   },
   {
     path: 'commandlist',
-    loadComponent: () => import('./commandlist/commandlist.component').then(m => m.CommandlistComponent)
+    loadComponent: () => import('./pages/reference/commandlist/commandlist.component').then(m => m.CommandlistComponent)
   },
   {
     path: 'mapart',
-    loadComponent: () => import('./mapart/mapart.component').then(m => m.MapartComponent)
+    loadComponent: () => import('./pages/reference/mapart/mapart.component').then(m => m.MapartComponent)
   },
   {
     path: 'lag',
-    loadComponent: () => import('./lag/lag.component').then(m => m.LagComponent)
+    loadComponent: () => import('./pages/reference/lag/lag.component').then(m => m.LagComponent)
   },
   {
     path: 'staffpowers',
-    loadComponent: () => import('./staffpowers/staffpowers.component').then(m => m.StaffpowersComponent)
+    loadComponent: () => import('./pages/reference/staffpowers/staffpowers.component').then(m => m.StaffpowersComponent)
   },
   {
-    path: 'forms/:form',
+    path: 'forms/appeal',
-    loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
+    loadComponent: () => import('./pages/forms/appeal/appeal.component').then(m => m.AppealComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_user']
+    }
   },
   {
     path: 'forms',
-    loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
+    loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
+  },
+  {
+    path: 'community',
+    loadComponent: () => import('./pages/altitude/community/community.component').then(m => m.CommunityComponent)
+  },
+  {
+    path: 'nicknames',
+    loadComponent: () => import('./pages/reference/nicknames/nicknames.component').then(m => m.NicknamesComponent)
+  },
+  {
+    path: 'nickgenerator',
+    loadComponent: () => import('./pages/reference/nickgenerator/nickgenerator.component').then(m => m.NickgeneratorComponent)
   },
 ];
-
-

frontend/src/app/bans/bans.component.html

@@ -1,90 +0,0 @@
-<ng-container>
-  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
-              [overlay_gradient]="0.5">>
-    <div class="title" header-content>
-      <h1>Minecraft Punishments</h1>
-    </div>
-  </app-header>
-
-  <main>
-    <section class="darkmodeSection">
-      <div class="container">
-        <div class="columnSection">
-          <div class="historyButtonContainer">
-            <div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
-              <span class="button-inner"
-                    [ngClass]="active">All</span>
-            </div>
-            <div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
-              <span class="button-inner"
-                    [ngClass]="active">Bans</span>
-            </div>
-            <div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
-              <span class="button-inner"
-                    [ngClass]="active">Mutes</span>
-            </div>
-            <div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
-              <span class="button-inner"
-                    [ngClass]="active">Warnings</span>
-            </div>
-            <div [id]="getCurrentUserTypeButtonId('player')" class="button-outer" (click)="changeUserType('player')"
-                 style="margin-left: 120px;">
-              <span class="button-inner"
-                    [ngClass]="active">Player</span>
-            </div>
-            <div [id]="getCurrentUserTypeButtonId('staff')" class="button-outer" (click)="changeUserType('staff')">
-              <span class="button-inner"
-                    [ngClass]="active">Staff</span>
-            </div>
-          </div>
-          <div class="historySearchContainer">
-            <input class="historySearch"
-                   type="search"
-                   placeholder="Search.."
-                   [(ngModel)]="searchTerm"
-                   (input)="filterNames()"
-                   (keyup.enter)="search()"
-            >
-            <div class="dropdown-results" *ngIf="filteredNames.length > 0 && searchTerm">
-              <div
-                class="dropdown-item"
-                *ngFor="let name of filteredNames"
-                (mousedown)="selectName(name)">
-                {{ name }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="historyTable">
-          <app-history [userType]="userType" [punishmentType]="punishmentType"
-                       [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="updatePageSize($event)"
-                       (selectItem)="setSearch($event)">
-          </app-history>
-        </div>
-        <div class="changePageButtons">
-          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
-                  [disabled]="!buttonActive(0)"
-                  (click)="setPage(0)" class="historyPageButton">
-            First page
-          </button>
-          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
-                  [disabled]="!buttonActive(0)"
-                  (click)="previousPage()" class="historyPageButton">
-            Previous page
-          </button>
-          <span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
-          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
-                  [disabled]="!buttonActive(getMaxPage())"
-                  (click)="nextPage()" class="historyPageButton">
-            Next page
-          </button>
-          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
-                  [disabled]="!buttonActive(getMaxPage())"
-                  (click)="setPage(getMaxPage())" class="historyPageButton">
-            Last page
-          </button>
-        </div>
-      </div>
-    </section>
-  </main>
-</ng-container>

frontend/src/app/bans/details/details.component.html

@@ -1,109 +0,0 @@
-<ng-container>
-  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
-              [overlay_gradient]="0.5">>
-    <div class="title" header-content>
-      <h1>Minecraft Punishments</h1>
-    </div>
-  </app-header>
-
-  <main>
-    <section class="darkmodeSection">
-      <section class="columnSection">
-        <div class="detailsBackButton">
-          <ng-container *ngIf="punishment === undefined">
-            <p>Loading...</p>
-          </ng-container>
-
-          <a [routerLink]="['/bans']">< Back</a>
-        </div>
-      </section>
-      <section class="columnSection center">
-        <ng-container *ngIf="punishment">
-          <div>
-            <span class="tag tagInfo"
-                  [ngClass]="{
-                        'tagPermanent': this.historyFormat.isPermanent(punishment),
-                        'tagExpired': !this.historyFormat.isPermanent(punishment)
-                      }">
-              {{ this.historyFormat.getType(punishment) }}
-            </span>
-          </div>
-          <div>
-            <span
-              class="tag tagInfo"
-              [ngClass]="{
-                    'tagActive': this.historyFormat.isActive(punishment),
-                    'tagInactive': !this.historyFormat.isActive(punishment)
-                  }">
-              {{ this.historyFormat.isActive(punishment) ? 'Active' : 'Inactive' }}
-            </span>
-          </div>
-        </ng-container>
-      </section>
-      <section class="columnSection">
-        <div class="columnContainer">
-          <div class="columnParagraph">
-            <ng-container *ngIf="punishment">
-              <div class="playerContainer">
-                <h2>Player</h2>
-                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid, '150')"
-                     width="150"
-                     height="150"
-                     alt="{{punishment.username}}'s Minecraft skin"
-                >
-                <h3 class="detailsUsername">{{ punishment.username }}</h3>
-              </div>
-            </ng-container>
-          </div>
-        </div>
-        <div class="columnContainer">
-          <div class="columnParagraph">
-            <ng-container *ngIf="punishment">
-              <div class="playerContainer">
-                <h2>Moderator</h2>
-                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid, '150')"
-                     width="150"
-                     height="150"
-                     alt="{{punishment.punishedBy}}'s Minecraft skin"
-                >
-                <h3 class="detailsUsername">{{ punishment.punishedBy }}</h3>
-              </div>
-            </ng-container>
-          </div>
-        </div>
-        <div class="columnContainer">
-          <div class="columnParagraph">
-            <ng-container *ngIf="punishment">
-              <div class="detailsInfo">
-                <h2>Reason</h2>
-                <p>{{ punishment.reason | removeTrailingPeriod }}</p>
-              </div>
-            </ng-container>
-          </div>
-        </div>
-        <div class="columnContainer">
-          <div class="columnParagraph">
-            <ng-container *ngIf="punishment">
-              <div class="detailsInfo">
-                <h2>Date</h2>
-                <p>{{ this.historyFormat.getPunishmentTime(punishment) }}</p>
-              </div>
-            </ng-container>
-          </div>
-        </div>
-      </section>
-    </section>
-  </main>
-</ng-container>
-
-
-<section class="columnSection">
-  <ng-container *ngIf="punishment">
-    <span>Expires</span>
-    <span>{{ this.historyFormat.getExpiredTime(punishment) }}</span>
-    <ng-container *ngIf="punishment.removedBy !== undefined && punishment.removedBy.length > 0">
-      <span>Un{{ this.historyFormat.getType(punishment).toLocaleLowerCase() }} reason</span>
-      <span>{{ punishment.removedReason == null ? 'No reason specified' : punishment.removedReason }}</span>
-    </ng-container>
-  </ng-container>
-</section>

frontend/src/app/bans/history/history.component.html

@@ -1,53 +0,0 @@
-<ng-container *ngIf="history.length === 0">
-  <p>No history found</p>
-</ng-container>
-
-<ng-container *ngIf="history.length > 0">
-  <table [cellSpacing]="0">
-    <div class="historyTableHead">
-      <thead>
-      <tr>
-        <th class="historyType">Type</th>
-        <th class="historyPlayer">Player</th>
-        <th class="historyPlayer">Banned By</th>
-        <th class="historyReason">Reason</th>
-        <th class="historyDate">Date</th>
-        <th class="historyDate">Expires</th>
-      </tr>
-      </thead>
-    </div>
-    <div>
-      <tbody>
-      <tr class="historyPlayerRow" *ngFor="let entry of history">
-        <td class="historyType" (click)="showDetailedPunishment(entry)">
-          {{ this.historyFormat.getType(entry) }}
-        </td>
-        <td class="historyPlayer" (click)="setSearch(entry.username, 'player')">
-          <div class="playerContainer">
-            <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(entry.uuid)" width="25" height="25"
-                 alt="{{entry.username}}'s Minecraft skin">
-            <span class="username">{{ entry.username }}</span>
-          </div>
-        </td>
-        <td class="historyPlayer" (click)="setSearch(entry.punishedBy, 'staff')">
-          <div class="playerContainer">
-            <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(entry.punishedByUuid)" width="25" height="25"
-                 alt="{{entry.punishedBy}}'s Minecraft skin">
-            <span>{{ entry.punishedBy }}</span>
-          </div>
-        </td>
-        <td class="historyReason" (click)="showDetailedPunishment(entry)">
-          {{ entry.reason | removeTrailingPeriod }}
-        </td>
-        <td class="historyDate" (click)="showDetailedPunishment(entry)">
-          {{ this.historyFormat.getPunishmentTime(entry) }}
-        </td>
-        <td class="historyDate" (click)="showDetailedPunishment(entry)">
-          {{ this.historyFormat.getExpiredTime(entry) }}
-        </td>
-      </tr>
-      </tbody>
-    </div>
-  </table>
-</ng-container>
-

frontend/src/app/forms/appeal/appeal.component.html

@@ -1,5 +0,0 @@
-<app-forms [currentPage]="'appeal'" [formTitle]="'Minecraft Appeal'">
-  <div form-content>
-
-  </div>
-</app-forms>

frontend/src/app/forms/appeal/appeal.component.ts

@@ -1,69 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormsComponent} from '../forms.component';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {AppealsService, MinecraftAppeal} from '../../../api';
-
-@Component({
-  selector: 'app-appeal',
-  imports: [
-    FormsComponent
-  ],
-  templateUrl: './appeal.component.html',
-  styleUrl: './appeal.component.scss'
-})
-export class AppealComponent implements OnInit {
-
-  public form: FormGroup<Appeal>;
-
-  constructor(private appealApi: AppealsService) {
-    this.form = new FormGroup({
-      username: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
-      punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
-      email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
-      appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
-    });
-  }
-
-  ngOnInit() {
-  }
-
-  public onSubmit() {
-    if (this.form === undefined) {
-      console.error('Form is undefined');
-      return
-    }
-    if (this.form.valid) {
-      this.sendForm()
-    } else {
-      // Mark all fields as touched to trigger validation display
-      Object.keys(this.form.controls).forEach(field => {
-        const control = this.form!.get(field);
-        if (!(control instanceof FormGroup)) {
-          console.error('Control [' + control + '] is not a FormGroup');
-          return;
-        }
-        control.markAsTouched({onlySelf: true});
-      });
-    }
-  }
-
-  private sendForm() {
-    const rawValue = this.form.getRawValue();
-    const appeal: MinecraftAppeal = {
-      appeal: rawValue.appeal,
-      email: rawValue.email,
-      punishmentId: parseInt(rawValue.punishmentId),
-      username: rawValue.username,
-      uuid: ''//TODO
-    }
-    this.appealApi.submitMinecraftAppeal(appeal).subscribe()
-  }
-
-}
-
-interface Appeal {
-  username: FormControl<string>;
-  punishmentId: FormControl<string>;
-  email: FormControl<string>;
-  appeal: FormControl<string>;
-}

frontend/src/app/forms/forms.component.html

@@ -1,18 +0,0 @@
-<ng-container>
-  <app-header [current_page]="currentPage" height="200px" background_image="/public/img/backgrounds/staff.png"
-              [overlay_gradient]="0.5">
-    <div class="title" header-content>
-      <h1>{{ formTitle }}</h1>
-    </div>
-  </app-header>
-  <ng-container *ngIf="!type">
-    <ng-container *ngFor="let formType of FormType | keyvalue">
-      <button mat-raised-button (click)="setFormType(formType.value)">
-        {{ formType }}
-      </button>
-    </ng-container>
-  </ng-container>
-  <div>
-    <ng-content select="[form-content]"></ng-content>
-  </div>
-</ng-container>

frontend/src/app/forms/forms.component.ts

@@ -1,68 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
-import {MatDialog} from '@angular/material/dialog';
-import {ActivatedRoute} from '@angular/router';
-import {LoginDialogComponent} from '../login/login.component';
-import {KeyValuePipe, NgForOf, NgIf} from '@angular/common';
-import {FormType} from './form_type';
-import {MatButton} from '@angular/material/button';
-import {AuthService} from '../services/auth.service';
-
-@Component({
-  selector: 'app-forms',
-  imports: [
-    HeaderComponent,
-    NgIf,
-    NgForOf,
-    MatButton,
-    KeyValuePipe
-  ],
-  templateUrl: './forms.component.html',
-  styleUrl: './forms.component.scss'
-})
-export class FormsComponent implements OnInit {
-  @Input() formTitle: string = 'Form';
-  @Input() currentPage: string = 'forms';
-
-  public type: FormType | undefined;
-
-  constructor(private authService: AuthService,
-              private dialog: MatDialog,
-              private route: ActivatedRoute,
-  ) {
-    this.route.paramMap.subscribe(async params => {
-      const code = params.get('code');
-
-      if (code) {
-        this.authService.login(code).subscribe();
-      } else if (!this.authService.checkAuthStatus()) {
-        const dialogRef = this.dialog.open(LoginDialogComponent, {
-          width: '400px',
-          disableClose: true
-        });
-
-        dialogRef.afterClosed().subscribe();
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.route.paramMap.subscribe(params => {
-      switch (params.get('form')) {
-        case FormType.APPEAL:
-          this.type = FormType.APPEAL;
-          this.currentPage = 'appeal';
-          break;
-        default:
-          throw new Error("Invalid type");
-      }
-    });
-  }
-
-  protected readonly FormType = FormType;
-  protected readonly Object = Object;
-
-  public setFormType(formType: FormType) {
-    this.type = formType;
-  }
-}

frontend/src/app/guards/auth.guard.ts

@@ -0,0 +1,44 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {Observable} from 'rxjs';
+import {AuthService} from '@services/auth.service';
+import {environment} from '@environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {
+  }
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (environment.defaultAuthStatus) {
+      return true;
+    }
+    if (!this.authService.checkAuthStatus()) {
+      return this.router.createUrlTree(['/']);
+    }
+
+    const requiredAuthorizations = route.data['requiredAuthorizations'] as string[];
+
+    if (!requiredAuthorizations || requiredAuthorizations.length === 0) {
+      return true;
+    }
+
+    const userAuthorizations = this.authService.getUserAuthorizations();
+    const hasAccess = requiredAuthorizations.some(auth => userAuthorizations.includes(auth));
+
+    if (!hasAccess) {
+      return this.router.createUrlTree(['/']);
+    }
+
+    return true;
+  }
+}

frontend/src/app/home/home.component.html

@@ -1,157 +0,0 @@
-<ng-container>
-  <app-header [current_page]="'home'" height="100vh"
-              [background_image]="'/public/img/backgrounds/120spawn-min.png'">
-    <div class="title" header-content>
-      <h1 style="display: none;">Altitude</h1>
-      <img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
-           width="550">
-      <h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
-      <a id="scroll-button" (click)="scrollToSection()">
-        <span></span>
-        <p style="display: none;">Scroll Down</p>
-      </a>
-    </div>
-  </app-header>
-  <main>
-    <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0;">
-      <!--      TODO load player count from old api or backend?-->
-      <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
-      <h2 style="color: white;">Server IP: play.alttd.com</h2>
-      <div style="padding-top: 35px;">
-        <app-copy-ip></app-copy-ip>
-      </div>
-    </section>
-    <section class="darkmodeSection">
-      <div class="container">
-        <div class="paragraph">
-          <h2>Adventure Begins</h2>
-          <p>You awake in a strange town, where are you? There are residents running about trading with each other and
-            stories of distant realms with more towns. It's time to write your story. Welcome to Altitude, the laid-back
-            community-oriented server that hosts your home for Minecraft.</p>
-        </div>
-        <img ngSrc="/public/img/items/bookquill.png" style="width: 150px; align-self: center; margin: 0 auto;"
-             alt="Alternative Altitude Server Logo"
-             height="150" width="150">
-      </div>
-    </section>
-    <!--
-    <section id="section1">
-        <div class="container" id="video">
-            <h2 style="display: none;">YouTube Trailer</h2>
-            <div style="border-radius:5px;overflow:hidden;position:relative;width:100%">
-                <img style="width: 100%" src="https://img.youtube.com/vi/Nzbj9Dbv5Wk/maxresdefault.jpg" alt="Altitude YouTube Trailer">
-                <div id="youtube">
-                    <div class="play" onclick="playVideo()"></div>
-                </div>
-            </div>
-        </div>
-    </section>
-    -->
-    <section class="darkmodeSection">
-      <div class="container" style="padding: 10px 0 80px 0">
-        <iframe id="discord-widget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
-        <div class="paragraph" id="discordp">
-          <h2>Meet the Community</h2>
-          <p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude
-            is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is
-            intended for older players, but all are welcome!</p>
-          <p>Don't have Discord? Keep up with news and announcements at the <a href="alttd.com/blog">blog</a>.</p>
-          <div style="display: flex; justify-content: center;">
-            <a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
-              <div style="margin-top: 30px;" class="button-outer">
-                <span class="button-inner">Join Our Discord</span>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section id="section2">
-      <div class="customContainer">
-        <h2 style="color: white; padding-bottom: 35px; font-size: 2.8em;">Survival Shaped by You</h2>
-        <p style="color: white; padding-bottom: 35px; font-size: 1.1em; margin: auto;">Altitude is built by the
-          community, for the community. We've added features requested by our members and several custom plugins to
-          create our "perfect" survival experience.</p>
-        <div class="survivalShapedContainerPlugins">
-          <div class="pluginColumn">
-            <h2>McMMO & MyPet</h2>
-            <p>Two of the most requested plugins on Altitude, level up yourself and your pet with these MMO-based
-              plugins!</p>
-            <a [routerLink]="['/mypet']">
-              <div class="button-outer">
-                <span class="button-inner">MyPet Info</span>
-              </div>
-            </a>
-          </div>
-          <div class="pluginColumn">
-            <h2>Dynamic map</h2>
-            <p>See the world and the players around it in real-time! The map shows the entire survival world with claims
-              and warps.</p>
-            <a [routerLink]="['/map']">
-              <div class="button-outer">
-                <span class="button-inner">Visit Map</span>
-              </div>
-            </a>
-          </div>
-          <div class="pluginColumn">
-            <h2>Player Shops</h2>
-            <p>Our economy is built on player shops, encouraging player interaction and putting the control in your
-              hands.</p>
-            <a [routerLink]="['/economy']">
-              <div class="button-outer">
-                <span class="button-inner">Shop Guide</span>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="removemobile darkmodeSection">
-      <div class="customContainer">
-        <h2 style="padding-bottom: 35px; font-size: 2.8em;">Community Builds</h2>
-        <p style="padding-bottom: 35px; font-size: 1.1em; margin: auto;">Thank you to our brilliant players for sharing
-          their impressive builds. Take a look at some of them here!<br>
-          If you know of any builds that should be featured, please let us know!</p>
-        <div class="sliderWrapper">
-          <div class="sliderContent">
-            <div class="indexSlider">
-              <div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div>
-              <div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div>
-              <div class="display">
-                <span class="slide"
-                      [style.background-image]="'url(' + slide + ')'"
-                      [style.opacity]="carouselOpacity"
-                      [style.display]="'block'"></span>
-              </div>
-            </div>
-            <div class="dots">
-              <ng-container *ngFor="let slide of getSlideIndices();">
-                <span class="dot" (click)="setSlide(slide)" [ngClass]="getDotClass(slide)"></span>
-              </ng-container>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section style="background: #202020;">
-      <div class="customContainer">
-        <h2 id="quote" style="color: white; font-family: 'minecraft-text',sans-serif; line-height: 1.3em;">"Great
-          community, great people, great server all round . . . If it can bring back my love for minecraft, it could
-          work wonders for you."</h2>
-        <p style="color: white; margin-top:30px;">- /u/seanhanley1993</p>
-      </div>
-    </section>
-    <section class="darkmodeSection">
-      <div class="customContainer">
-        <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
-             width="120">
-        <h2 style="margin: 20px 0; font-size: 1.8em; padding-bottom: 0 !important;">play.alttd.com</h2>
-        <app-copy-ip></app-copy-ip>
-      </div>
-    </section>
-    <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">
-      <span></span>
-      <p style="display: none;">Scroll Down</p>
-    </a>
-  </main>
-</ng-container>

frontend/src/app/login/login.component.html

@@ -1,18 +0,0 @@
-<h2 mat-dialog-title>Login</h2>
-<div mat-dialog-content>
-  <form [formGroup]="loginForm">
-    <mat-form-field appearance="fill" style="width: 100%">
-      <mat-label>Enter your code</mat-label>
-      <input matInput formControlName="code" type="text">
-      <mat-error *ngIf="formHasError()">
-        Code is required
-      </mat-error>
-    </mat-form-field>
-  </form>
-</div>
-<div mat-dialog-actions align="end">
-  <button mat-button (click)="onCancel()">Cancel</button>
-  <button mat-flat-button color="primary" (click)="onSubmit()" [disabled]="!loginForm.valid">
-    Submit
-  </button>
-</div>

frontend/src/app/pages/altitude/about/about.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {ScrollService} from '@services/scroll.service';
+
+import {HeaderComponent} from '@header/header.component';
+
+@Component({
+  selector: 'app-about',
+  standalone: true,
+  imports: [
+    HeaderComponent
+],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.scss'
+})
+export class AboutComponent {
+  constructor(public scrollService: ScrollService) {
+  }
+}

frontend/src/app/pages/altitude/birthdays/birthdays.component.ts

@@ -1,15 +1,14 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
-import {CommonModule} from '@angular/common';
+
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-birthdays',
   standalone: true,
   imports: [
-    CommonModule,
     HeaderComponent
-  ],
+],
   templateUrl: './birthdays.component.html',
   styleUrl: './birthdays.component.scss'
 })

frontend/src/app/pages/altitude/community/community.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "../header/header.component";
+import {HeaderComponent} from "@header/header.component";
 
 @Component({
   selector: 'app-community',

frontend/src/app/pages/altitude/socials/socials.component.ts

@@ -1,16 +1,15 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-socials',
   standalone: true,
   imports: [
-    CommonModule,
     HeaderComponent,
     NgOptimizedImage
-  ],
+],
   templateUrl: './socials.component.html',
   styleUrl: './socials.component.scss'
 })

frontend/src/app/pages/altitude/team/team.component.html

@@ -0,0 +1,86 @@
+<ng-container>
+  <app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
+    [overlay_gradient]="0.5">>
+    <div class="title" header-content>
+      <h1>Staffing Team</h1>
+      <h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to
+      create Altitude, to create home. This is where the magic happens.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Management</h2>
+        @for (member of getTeamMembers('owner') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+              height="160" width="160" style="width: 160px;">
+              <h2>{{ member.name }}</h2>
+              <p>Owner</p>
+            </div>
+          }
+          @for (member of getTeamMembers('manager') | async; track member) {
+            <div class="member">
+              <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                height="160" width="160" style="width: 160px;">
+                <h2>{{ member.name }}</h2>
+                <p>Manager</p>
+              </div>
+            }
+          </div>
+        </section>
+        <section class="darkmodeSectionThree">
+          <div class="container teamContainer">
+            <h2 class="sectionTitle">Admins</h2>
+            @for (member of getTeamMembers('admin') | async; track member) {
+              <div class="member">
+                <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                  height="160" width="160" style="width: 160px;">
+                  <h2>{{ member.name }}</h2>
+                  <p>Admin</p>
+                </div>
+              }
+            </div>
+          </section>
+          <section class="darkmodeSection">
+            <div class="container teamContainer">
+              <h2 class="sectionTitle">Head Moderators</h2>
+              @for (member of getTeamMembers('headmod') | async; track member) {
+                <div class="member">
+                  <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                    height="160" width="160" style="width: 160px;">
+                    <h2>{{ member.name }}</h2>
+                    <p>Head Mod</p>
+                  </div>
+                }
+              </div>
+            </section>
+            <section class="darkmodeSectionThree">
+              <div class="container teamContainer">
+                <h2 class="sectionTitle">Moderators</h2>
+                @for (member of getTeamMembers('moderator') | async; track member) {
+                  <div class="member">
+                    <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                      height="160" width="160" style="width: 160px;">
+                      <h2>{{ member.name }}</h2>
+                    </div>
+                  }
+                </div>
+              </section>
+              @if ((getTeamMembers('trainee') | async)?.length  ?? 0 > 0) {
+                <section class="darkmodeSection">
+                  <div class="container teamContainer">
+                    <h2 class="sectionTitle">Trainees</h2>
+                    @for (member of getTeamMembers('trainee') | async; track member) {
+                      <div class="member">
+                        <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                          height="160" width="160" style="width: 160px;">
+                          <h2>{{ member.name }}</h2>
+                        </div>
+                      }
+                    </div>
+                  </section>
+                }
+              </main>
+            </ng-container>

frontend/src/app/pages/altitude/team/team.component.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {ScrollService} from '../scroll/scroll.service';
+import {ScrollService} from '@services/scroll.service';
-import {BASE_PATH, Player, TeamService} from '../../api';
+import {BASE_PATH, Player, TeamService} from '@api';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {CookieService} from 'ngx-cookie-service';
 import {map, Observable, shareReplay} from 'rxjs';
-import {environment} from '../../environments/environment';
+import {environment} from '@environment';
 
 @Component({
   selector: 'app-team',

frontend/src/app/pages/features/claiming/claiming.component.html

@@ -19,8 +19,8 @@
             <p>To claim land, you will need some basic tools: a golden shovel, and a stick. You can craft these items
               yourself or do <b>/claim</b> to receive them for free. The shovel is used for modifying claims and the
               stick is used for viewing claim information.</p>
-            <img ngSrc="/public/img/items/shovel.png" alt="Minecraft golden shovel" style="width: 25%;" height="114"
+            <img ngSrc="/public/img/items/shovel.png" alt="Minecraft golden shovel"
-                 width="114">
+                 class="shovelClaiming" style="width: 25%;" height="114" width="114">
             <p>Players start with an allowance of 500 “claim blocks” and can purchase additional “claim blocks” with
               in-game currency using <span style="font-family: 'opensans-bold', sans-serif;">/buyclaimblocks</span>. How
               many claims you can create depends on the rank you have - the amount can be found on the <a

frontend/src/app/pages/features/claiming/claiming.component.scss

@@ -7,3 +7,10 @@ main li {
   margin-left: 30px;
   padding-bottom: 10px;
 }
+
+
+@media (max-width: 690px) {
+  .shovelClaiming {
+    height: 100px;
+  }
+}

frontend/src/app/pages/features/claiming/claiming.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/features/customfeatures/customfeatures.component.html

@@ -163,14 +163,13 @@
           <div class="columnParagraph">
             <h2>Miscellaneous</h2>
             <p>Grindstones can strip shulker box & beehive NBT data</p>
-            <p>Sneak click mending</p>
             <p>/iwanttobreakthisblock, required to break some natural generated blocks</p>
             <p>/sneakclickmending, allows you to mend your items by right clicking while sneaking</p>
             <p>Swift Sneak enchantment can be found in villager trades</p>
             <p>Nether portals can be as small as 1x2 (1x2 portal, 3x4 base)</p>
             <p>Lootchests refill once for every player</p>
             <p>Empty maps can be duplicated using paper in a cartography table</p>
-            <p>Eating glowberries gives you a glowing effect</p>
+            <p>Eating glow berries gives you a glowing effect</p>
           </div>
         </div>
       </section>

frontend/src/app/pages/features/customfeatures/customfeatures.component.scss

@@ -7,3 +7,9 @@ main li {
   margin-left: 30px;
   padding-bottom: 10px;
 }
+
+@media (max-width: 690px) {
+  .columnContainer {
+    text-align: left !important;
+  }
+}

frontend/src/app/pages/features/customfeatures/customfeatures.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "../header/header.component";
+import {HeaderComponent} from "@header/header.component";
 import {RouterLink} from '@angular/router';
 
 @Component({

frontend/src/app/pages/features/economy/economy.component.html

@@ -104,7 +104,7 @@
               prices will become more and more extreme. You can see where these thresholds are based on your current
               points here:</p>
             <img ngSrc="/public/img/random/pointbracket.png" alt="Visualization of the point bracket."
-                 style="width: 100%; padding: 0 0 15px 0;"
+                 class="visEconomy" style="width: 100%; padding: 0 0 15px 0;"
                  height="100" width="800">
           </div>
           <div class="columnParagraph">

frontend/src/app/pages/features/economy/economy.component.scss

@@ -0,0 +1,25 @@
+main ul {
+  font-family: opensans, sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}
+
+@media (max-width: 690px) {
+  .title {
+    height: calc(100% - 110px);
+    margin-top: 100px;
+  }
+
+  .title h2 {
+    font-size: 0.9em;
+  }
+
+  .visEconomy {
+    height: 50px;
+    width: 357px;
+  }
+}

frontend/src/app/pages/features/economy/economy.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 
 @Component({

frontend/src/app/pages/features/map/map.component.scss

@@ -11,3 +11,13 @@
   padding-bottom: 25px;
   font-weight: 100;
 }
+
+@media (max-width: 670px) {
+  .title h1 {
+    font-size: 2em;
+  }
+
+  .title h2 {
+    font-size: 1em;
+  }
+}

frontend/src/app/pages/features/map/map.component.ts

@@ -1,13 +1,12 @@
 import {Component} from '@angular/core';
-import {CommonModule} from '@angular/common';
+
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   standalone: true,
   imports: [
-    CommonModule,
     HeaderComponent
-  ],
+],
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrl: './map.component.scss'

frontend/src/app/pages/features/mypet/mypet.component.html

@@ -24,8 +24,8 @@
               your other pets while they are in storage. To interact with your MyPet you will need to make it your
               active MyPet by doing <span style="font-family: 'opensans-bold', sans-serif;">/petswitch</span> and
               selecting the one you want to use.</p>
-            <img ngSrc="/public/img/items/lead.png" alt="Minecraft lead/leash" style="width: 20%;" height="96"
+            <img ngSrc="/public/img/items/lead.png" alt="Minecraft lead/leash"
-                 width="96">
+                 class="leadMyPet" style="width: 20%;" height="96" width="96">
           </div>
           <div class="columnParagraph">
             <h2>Skilltrees and Levels</h2>

frontend/src/app/pages/features/mypet/mypet.component.scss

@@ -13,3 +13,9 @@ main li {
   justify-content: space-between;
   flex-wrap: wrap;
 }
+
+@media (max-width: 690px) {
+  .leadMyPet {
+    height: 70px;
+  }
+}

frontend/src/app/pages/features/mypet/mypet.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 
 @Component({

frontend/src/app/pages/features/skyblock/skyblock.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-skyblock',

frontend/src/app/pages/features/warps/warps.component.html

@@ -19,10 +19,8 @@
               name, description, and icon) on their own! This lets you easily promote your town, shop, farm, or just
               about anything else.</p>
             <p>All warps are separated into categories so it's easy to find the category of warp you're looking for.</p>
-            <img ngSrc="/public/img/random/warpgui.png"
+            <img ngSrc="/public/img/random/warpgui.png" alt="In-game warp GUI"
-                 alt="In-game warp GUI"
+                 class="guiWarp" style="width: 80%; padding-bottom: 15px;" height="232" width="356">
-                 style="width: 80%; padding-bottom: 15px;"
-                 height="232" width="356">
           </div>
         </div>
         <div class="columnContainer">
@@ -45,7 +43,7 @@
         </div>
       </section>
       <section class="columnSection" style="padding-top: 0;">
-        <div class="columnParagraph" style="padding-left: 15px;">
+        <div class="columnParagraph" style="padding-left: 15px; text-align: center;">
           <h2>Warp Requirements</h2>
           <p>You need to be the owner of the claim your warp is placed in. It should look good, and be as finished as
             your warp type allows you to have it. Safety is an important aspect as well, visitors should not be
@@ -207,10 +205,8 @@
               warp, just do <span style="font-family: 'opensans-bold', sans-serif;">/warps</span> and click on the chest
               labeled "<span style="font-family: 'opensans-bold', sans-serif;">My Warps</span>" in the bottom left
               corner.</p>
-            <img ngSrc="/public/img/random/editwarpgui.png"
+            <img ngSrc="/public/img/random/editwarpgui.png" alt="In-game warp edit GUI"
-                 alt="In-game warp edit GUI"
+                 class="editWarp" style="width: 80%;" width="384" height="170">
-                 style="width: 80%;"
-                 width="384" height="170">
             <p>Maintaining a warp also involves making sure it looks nice, shops are well stocked, and, if it's a town,
               open plots are always available for residents to move in. Make sure you keep up on maintaining your warp
               or it could be deleted! If a warp is deleted by a staff member you will not receive a refund for the

frontend/src/app/pages/features/warps/warps.component.scss

@@ -12,3 +12,13 @@ main li {
   color: var(--font-color);
   transition: 0.5s ease;
 }
+
+@media (max-width: 690px) {
+  .guiWarp {
+    height: 190px;
+  }
+
+  .editWarp {
+    height: 130px;
+  }
+}

frontend/src/app/pages/features/warps/warps.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from '../header/header.component';
+import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/footer/footer/footer.component.html

@@ -3,12 +3,12 @@
     <div class="footerInner">
       <div class="footerText">
         <h2>ABOUT US</h2>
-        <p>​Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
+        <p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
           to call "home". We are your place to get together with friends and play survival, with a few extra features
           suggested by our community!</p>
         <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
           <a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
-            <img ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
+            <img priority ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
           </a>
           <a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
             <img ngSrc="/public/img/logos/twitter.png" alt="Twitter Button" height="32" width="32">

frontend/src/app/pages/footer/footer/footer.component.scss

@@ -67,3 +67,40 @@ footer ul, footer p {
 .copyright {
   margin-top: 50px;
 }
+
+@media (max-width: 1150px) {
+  .footerInner {
+    flex-wrap: wrap;
+    text-align: center;
+  }
+
+  .footerText {
+    flex: 1 1 100%;
+    margin-right: 0;
+    margin-bottom: 30px;
+  }
+
+  .footerNav {
+    border-left: none;
+    padding-left: 0px;
+    padding-bottom: 15px;
+    min-width: 200px;
+  }
+
+  .followUs {
+    width: 100px;
+    margin: 0 auto;
+  }
+
+  .footerNav {
+    border-left: none;
+    padding-left: 0px;
+    padding-bottom: 15px;
+    min-width: 200px;
+  }
+
+  .copyright {
+    margin-top: 30px;
+    text-align: center;
+  }
+}

frontend/src/app/pages/footer/footer/footer.component.ts

@@ -1,16 +1,15 @@
 import {Component} from '@angular/core';
-import {ALTITUDE_VERSION} from '../constant';
+import {ALTITUDE_VERSION} from '@custom-types/constant';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
 import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
   imports: [
-    CommonModule,
     RouterLink,
     NgOptimizedImage
-  ],
+],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'
 })