Merge remote-tracking branch 'origin/bans' into bans

# Conflicts:
#	frontend/src/app/app.routes.ts

backend/build.gradle.kts

@@ -27,14 +27,15 @@ dependencies {
     implementation(project(":open_api"))
     implementation(project(":database"))
     implementation(project(":frontend"))
-    implementation("org.springframework.boot:spring-boot-starter-web")
     annotationProcessor("org.projectlombok:lombok")
-    testImplementation("org.springframework.boot:spring-boot-starter-test")
     implementation("com.mysql:mysql-connector-j:8.0.32")
     implementation("org.mybatis:mybatis:3.5.13")
-    testRuntimeOnly("org.junit.platform:junit-platform-launcher")
+    implementation("org.springframework.boot:spring-boot-starter-web")
     implementation("org.springframework.boot:spring-boot-configuration-processor")
     implementation("org.springframework.boot:spring-boot-starter-hateoas")
+    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")
 
     //AOP
     implementation("org.aspectj:aspectjrt:1.9.19")
@@ -42,6 +43,8 @@ dependencies {
     implementation("org.springframework:spring-aop")
     implementation("org.springframework:spring-aspects")
 
+    testRuntimeOnly("org.junit.platform:junit-platform-launcher")
+    testImplementation("org.springframework.boot:spring-boot-starter-test")
 }
 
 tasks.compileJava {

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

@@ -10,8 +10,8 @@ import org.springframework.context.annotation.EnableAspectJAutoProxy;
 public class AltitudeWebApplication {
 
     public static void main(String[] args) {
-        SpringApplication.run(AltitudeWebApplication.class, args);
         Connection.initDatabases();
+        SpringApplication.run(AltitudeWebApplication.class, args);
     }
 
 }

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

@@ -0,0 +1,65 @@
+package com.alttd.altitudeweb.config;
+
+import com.alttd.altitudeweb.controllers.login.KeyPairService;
+import com.alttd.altitudeweb.model.PermissionClaimDto;
+import com.nimbusds.jose.jwk.JWK;
+import com.nimbusds.jose.jwk.JWKSet;
+import com.nimbusds.jose.jwk.RSAKey;
+import com.nimbusds.jose.jwk.source.ImmutableJWKSet;
+import com.nimbusds.jose.jwk.source.JWKSource;
+import com.nimbusds.jose.proc.SecurityContext;
+import lombok.RequiredArgsConstructor;
+import org.springframework.context.annotation.Bean;
+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.http.SessionCreationPolicy;
+import org.springframework.security.oauth2.jwt.JwtDecoder;
+import org.springframework.security.oauth2.jwt.JwtEncoder;
+import org.springframework.security.oauth2.jwt.NimbusJwtDecoder;
+import org.springframework.security.oauth2.jwt.NimbusJwtEncoder;
+import org.springframework.security.web.SecurityFilterChain;
+
+import java.security.KeyPair;
+import java.security.interfaces.RSAPrivateKey;
+import java.security.interfaces.RSAPublicKey;
+
+@Configuration
+@EnableWebSecurity
+@RequiredArgsConstructor
+public class SecurityConfig {
+
+    private final KeyPairService keyPairService;
+
+    @Bean
+    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
+        return http
+            .authorizeHttpRequests(auth -> auth
+                .requestMatchers("/login/userLogin/**", "/login/requestNewUserLogin/**").permitAll()
+                .requestMatchers("/team/**", "/history/**").permitAll()
+                .requestMatchers("/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
+                .requestMatchers("/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
+                .anyRequest().authenticated()
+            )
+            .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
+            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
+            .build();
+    }
+
+    @Bean
+    public JwtEncoder jwtEncoder() {
+        KeyPair keyPair = keyPairService.getJwtSigningKeyPair();
+        JWK jwk = new RSAKey.Builder((RSAPublicKey) keyPair.getPublic())
+                .privateKey((RSAPrivateKey) keyPair.getPrivate())
+                .build();
+        JWKSource<SecurityContext> jwkSource = new ImmutableJWKSet<>(new JWKSet(jwk));
+        return new NimbusJwtEncoder(jwkSource);
+    }
+
+    @Bean
+    public JwtDecoder jwtDecoder() {
+        KeyPair keyPair = keyPairService.getJwtSigningKeyPair();
+        return NimbusJwtDecoder.withPublicKey((RSAPublicKey) keyPair.getPublic()).build();
+    }
+}

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

@@ -0,0 +1,36 @@
+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/history/HistoryApiController.java

@@ -1,13 +1,13 @@
 package com.alttd.altitudeweb.controllers.history;
 
 import com.alttd.altitudeweb.api.HistoryApi;
-import com.alttd.altitudeweb.controllers.limits.RateLimit;
+import com.alttd.altitudeweb.services.limits.RateLimit;
 import com.alttd.altitudeweb.model.HistoryCountDto;
+import com.alttd.altitudeweb.model.PunishmentHistoryListDto;
 import com.alttd.altitudeweb.setup.Connection;
 import com.alttd.altitudeweb.database.Databases;
 import com.alttd.altitudeweb.database.litebans.*;
 import com.alttd.altitudeweb.model.PunishmentHistoryDto;
-import com.alttd.altitudeweb.model.PunishmentHistoryInnerDto;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.RestController;
@@ -19,19 +19,19 @@ import java.util.concurrent.TimeUnit;
 
 @Slf4j
 @RestController
-@RateLimit(limit = 30, timeValue = 1, timeUnit = TimeUnit.MINUTES)
+@RateLimit(limit = 30, timeValue = 10, timeUnit = TimeUnit.SECONDS)
 public class HistoryApiController implements HistoryApi {
 
     @Override
-    public ResponseEntity<PunishmentHistoryDto> getHistoryForAll(String userType, String type, Integer page) {
+    public ResponseEntity<PunishmentHistoryListDto> getHistoryForAll(String userType, String type, Integer page) {
         return getHistoryForUsers(userType, type, "", page);
     }
 
     @Override
-    public ResponseEntity<PunishmentHistoryDto> getHistoryForUsers(String userType, String type, String user, Integer page) {
+    public ResponseEntity<PunishmentHistoryListDto> getHistoryForUsers(String userType, String type, String user, Integer page) {
         UserType userTypeEnum = UserType.getUserType(userType);
         HistoryType historyTypeEnum = HistoryType.getHistoryType(type);
-        PunishmentHistoryDto punishmentHistory = new PunishmentHistoryDto();
+        PunishmentHistoryListDto punishmentHistoryList = new PunishmentHistoryListDto();
         CompletableFuture<List<HistoryRecord>> historyRecords = new CompletableFuture<>();
 
         Connection.getConnection(Databases.LITE_BANS)
@@ -46,14 +46,14 @@ public class HistoryApiController implements HistoryApi {
                         historyRecords.completeExceptionally(e);
                     }
                 });
-        return mapPunishmentHistory(punishmentHistory, historyRecords);
+        return mapPunishmentHistory(punishmentHistoryList, historyRecords);
     }
 
     @Override
-    public ResponseEntity<PunishmentHistoryDto> getHistoryForUuid(String userType, String type, String uuid, Integer page) {
+    public ResponseEntity<PunishmentHistoryListDto> getHistoryForUuid(String userType, String type, String uuid, Integer page) {
         UserType userTypeEnum = UserType.getUserType(userType);
         HistoryType historyTypeEnum = HistoryType.getHistoryType(type);
-        PunishmentHistoryDto punishmentHistory = new PunishmentHistoryDto();
+        PunishmentHistoryListDto punishmentHistoryList = new PunishmentHistoryListDto();
         CompletableFuture<List<HistoryRecord>> historyRecords = new CompletableFuture<>();
 
         Connection.getConnection(Databases.LITE_BANS)
@@ -68,7 +68,7 @@ public class HistoryApiController implements HistoryApi {
                         historyRecords.completeExceptionally(e);
                     }
                 });
-        return mapPunishmentHistory(punishmentHistory, historyRecords);
+        return mapPunishmentHistory(punishmentHistoryList, historyRecords);
     }
 
     @Override
@@ -153,6 +153,44 @@ public class HistoryApiController implements HistoryApi {
         return ResponseEntity.ok().body(searchResultCountCompletableFuture.join());
     }
 
+    @Override
+    public ResponseEntity<PunishmentHistoryListDto> getAllHistoryForUUID(String uuid) {
+        PunishmentHistoryListDto punishmentHistoryList = new PunishmentHistoryListDto();
+        CompletableFuture<List<HistoryRecord>> historyRecordsCompletableFuture = new CompletableFuture<>();
+        Connection.getConnection(Databases.LITE_BANS).runQuery(sqlSession -> {
+            log.debug("Loading all history for uuid {}", uuid);
+            try {
+                List<HistoryRecord> punishments = sqlSession.getMapper(UUIDHistoryMapper.class)
+                        .getAllHistoryForUUID(UUID.fromString(uuid));
+                historyRecordsCompletableFuture.complete(punishments);
+            } catch (Exception e) {
+                log.error("Failed to load all history for uuid {}", uuid, e);
+                historyRecordsCompletableFuture.completeExceptionally(e);
+            }
+        });
+        return mapPunishmentHistory(punishmentHistoryList, historyRecordsCompletableFuture);
+    }
+
+    @Override
+    public ResponseEntity<PunishmentHistoryDto> getHistoryById(String type, Integer 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 ResponseEntity.ok().body(mapPunishmentHistory(historyRecordCompletableFuture.join()));
+    }
+
     private ResponseEntity<HistoryCountDto> mapHistoryCount(HistoryCount historyCount) {
         HistoryCountDto historyCountDto = new HistoryCountDto();
         historyCountDto.setBans(historyCount.getBans());
@@ -162,16 +200,23 @@ public class HistoryApiController implements HistoryApi {
         return ResponseEntity.ok().body(historyCountDto);
     }
 
-    private ResponseEntity<PunishmentHistoryDto> mapPunishmentHistory(PunishmentHistoryDto punishmentHistory, CompletableFuture<List<HistoryRecord>> historyRecords) {
+    private ResponseEntity<PunishmentHistoryListDto> mapPunishmentHistory(PunishmentHistoryListDto punishmentHistoryList, CompletableFuture<List<HistoryRecord>> historyRecords) {
         historyRecords.join().forEach(historyRecord -> {
-            PunishmentHistoryInnerDto.TypeEnum type = switch (historyRecord.getType().toLowerCase()) {
-                case "ban" -> PunishmentHistoryInnerDto.TypeEnum.BAN;
-                case "mute" -> PunishmentHistoryInnerDto.TypeEnum.MUTE;
-                case "warn" -> PunishmentHistoryInnerDto.TypeEnum.WARN;
-                case "kick" -> PunishmentHistoryInnerDto.TypeEnum.KICK;
+            PunishmentHistoryDto innerDto = mapPunishmentHistory(historyRecord);
+            punishmentHistoryList.add(innerDto);
+        });
+        return ResponseEntity.ok().body(punishmentHistoryList);
+    }
+
+    private static PunishmentHistoryDto mapPunishmentHistory(HistoryRecord historyRecord) {
+        PunishmentHistoryDto.TypeEnum type = switch (historyRecord.getType().toLowerCase()) {
+            case "ban" -> PunishmentHistoryDto.TypeEnum.BAN;
+            case "mute" -> PunishmentHistoryDto.TypeEnum.MUTE;
+            case "warn" -> PunishmentHistoryDto.TypeEnum.WARN;
+            case "kick" -> PunishmentHistoryDto.TypeEnum.KICK;
             default -> throw new IllegalStateException("Unexpected value: " + historyRecord.getType());
         };
-            PunishmentHistoryInnerDto innerDto = new PunishmentHistoryInnerDto()
+        return new PunishmentHistoryDto()
                 .uuid(historyRecord.getUuid())
                 .username(historyRecord.getPunishedName())
                 .reason(historyRecord.getReason())
@@ -181,9 +226,7 @@ public class HistoryApiController implements HistoryApi {
                 .punishmentTime(historyRecord.getTime())
                 .expiryTime(historyRecord.getUntil())
                 .removedReason(historyRecord.getRemovedByReason())
-                    .type(type);
-            punishmentHistory.add(innerDto);
-        });
-        return ResponseEntity.ok().body(punishmentHistory);
+                .type(type)
+                .id(historyRecord.getId());
     }
 }

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

@@ -0,0 +1,102 @@
+package com.alttd.altitudeweb.controllers.login;
+
+import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.web_db.KeyPairEntity;
+import com.alttd.altitudeweb.database.web_db.KeyPairMapper;
+import com.alttd.altitudeweb.setup.Connection;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+
+import java.security.*;
+import java.security.spec.PKCS8EncodedKeySpec;
+import java.security.spec.X509EncodedKeySpec;
+import java.time.Instant;
+import java.util.Base64;
+import java.util.concurrent.CompletableFuture;
+
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class KeyPairService {
+
+    private KeyPair cachedKeyPair = null;
+    private static final String RSA_ALGORITHM = "RSA";
+    private static final int RSA_KEY_SIZE = 2048;
+
+    public KeyPair getJwtSigningKeyPair() {
+        if (cachedKeyPair != null) {
+            return cachedKeyPair;
+        }
+        KeyPair keyPair = getOrCreateKeyPair();
+        if (keyPair != null) {
+            cachedKeyPair = keyPair;
+            return cachedKeyPair;
+        }
+        throw new IllegalStateException("Failed to generate or load key pair");
+    }
+
+    public KeyPair getOrCreateKeyPair() {
+        CompletableFuture<KeyPairEntity> keyPairFuture = new CompletableFuture<>();
+        Connection.getConnection(Databases.DEFAULT)
+                .runQuery(sqlSession -> {
+                    log.debug("Loading key pair");
+                    try {
+                        KeyPairEntity entity = sqlSession.getMapper(KeyPairMapper.class).getKeyPair();
+                        keyPairFuture.complete(entity);
+                    } catch (Exception e) {
+                        log.error("Failed to key pair", e);
+                        keyPairFuture.completeExceptionally(e);
+                    }
+                });
+        KeyPairEntity keyPairEntity = keyPairFuture.join();
+        if (keyPairEntity != null) {
+            try {
+                byte[] privateKeyBytes = Base64.getDecoder().decode(keyPairEntity.getPrivateKey());
+                byte[] publicKeyBytes = Base64.getDecoder().decode(keyPairEntity.getPublicKey());
+
+                KeyFactory keyFactory = KeyFactory.getInstance(RSA_ALGORITHM);
+                PrivateKey privateKey = keyFactory.generatePrivate(new PKCS8EncodedKeySpec(privateKeyBytes));
+                PublicKey publicKey = keyFactory.generatePublic(new X509EncodedKeySpec(publicKeyBytes));
+
+                return new KeyPair(publicKey, privateKey);
+            } catch (Exception e) {
+                log.error("Failed to load key pair from database", e);
+            }
+        }
+
+        KeyPair keyPair = generateKeyPair();
+
+        try {
+            KeyPairEntity entity = new KeyPairEntity();
+            entity.setPrivateKey(Base64.getEncoder().encodeToString(keyPair.getPrivate().getEncoded()));
+            entity.setPublicKey(Base64.getEncoder().encodeToString(keyPair.getPublic().getEncoded()));
+            entity.setCreatedAt(Instant.now());
+
+            Connection.getConnection(Databases.DEFAULT)
+                    .runQuery(sqlSession -> {
+                        log.debug("Saving key pair");
+                        try {
+                            sqlSession.getMapper(KeyPairMapper.class).save(entity);
+                            log.info("Generated and saved new key pair");
+                        } catch (Exception e) {
+                            log.error("Failed to key pair", e);
+                        }
+                    });
+        } catch (Exception e) {
+            log.error("Failed to save key pair to database", e);
+        }
+
+        return keyPair;
+    }
+
+    private KeyPair generateKeyPair() {
+        try {
+            KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance(RSA_ALGORITHM);
+            keyPairGenerator.initialize(RSA_KEY_SIZE);
+            return keyPairGenerator.generateKeyPair();
+        } catch (NoSuchAlgorithmException e) {
+            throw new IllegalStateException("Error generating key pair", e);
+        }
+    }
+}

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

@@ -0,0 +1,172 @@
+package com.alttd.altitudeweb.controllers.login;
+
+import com.alttd.altitudeweb.api.LoginApi;
+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.setup.Connection;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+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.oauth2.jwt.JwtClaimsSet;
+import org.springframework.security.oauth2.jwt.JwtEncoder;
+import org.springframework.security.oauth2.jwt.JwtEncoderParameters;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.time.Instant;
+import java.util.*;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.ConcurrentMap;
+import java.util.concurrent.TimeUnit;
+
+@Slf4j
+@RequiredArgsConstructor
+@RestController
+public class LoginController implements LoginApi {
+
+    private final JwtEncoder jwtEncoder;
+
+    @Value("${login.secret:#{null}}")
+    private String loginSecret;
+
+    private record CacheEntry(UUID uuid, Instant expiry) {}
+
+    private static final ConcurrentMap<String, CacheEntry> cache = new ConcurrentHashMap<>();
+
+    @Scheduled(fixedRate = 300000) // 5 minutes in milliseconds
+    private void clearExpiredCacheEntries() {
+        Instant now = Instant.now();
+        int initialCacheSize = cache.size();
+        cache.entrySet().removeIf(entry -> entry.getValue().expiry().isBefore(now));
+        log.info("Cleared {} expired cache entries", initialCacheSize - cache.size());
+    }
+
+    @RateLimit(limit = 100, timeValue = 1, timeUnit = TimeUnit.MINUTES, key = "addLogin")
+    @Override
+    public ResponseEntity<String> requestLogin(String authorization, String uuid) {
+        UUID uuidFromString;
+        try {
+            uuidFromString = UUID.fromString(uuid);
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.badRequest().build();
+        }
+
+        if (authorization == null || !authorization.startsWith("SECRET ")) {
+            return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
+        }
+
+        String secret = authorization.substring("SECRET ".length());
+        if (!isValidSecret(secret)) {
+            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, "Invalid secret");
+        }
+
+        Optional<String> key = cache.entrySet().stream()
+                .filter(entry -> entry.getValue().uuid.equals(uuidFromString))
+                .map(Map.Entry::getKey)
+                .findFirst();
+
+        if (key.isPresent()) {
+            return ResponseEntity.ok(key.get());
+        }
+
+        String loginCode = generateLoginCode(uuidFromString);
+        return ResponseEntity.ok(loginCode);
+    }
+
+    @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) {
+            return ResponseEntity.badRequest().build();
+        }
+
+        CacheEntry cacheEntry = cache.get(code);
+        if (cacheEntry == null || cacheEntry.expiry().isBefore(Instant.now())) {
+            return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
+        }
+
+        String token = generateToken(cacheEntry.uuid);
+
+        cache.remove(code);
+
+        return ResponseEntity.ok(token);
+    }
+
+    private String generateLoginCode(UUID uuid) {
+        String characters = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+        StringBuilder loginCode = new StringBuilder();
+        for (int i = 0; i < 8; i++) {
+            int index = (int) (Math.random() * characters.length());
+            loginCode.append(characters.charAt(index));
+        }
+        CacheEntry cacheEntry = new CacheEntry(uuid,
+                                               Instant.now().plusSeconds(TimeUnit.MINUTES.toSeconds(15)));
+        cache.put(loginCode.toString(), cacheEntry);
+        return loginCode.toString();
+    }
+
+    private boolean isValidSecret(String secret) {
+        if (loginSecret == null) {
+            log.warn("No login secret set, skipping secret validation");
+            return false;
+        }
+        if (loginSecret.length() < 16) {
+            log.warn("Login secret is too short, skipping secret validation");
+            return false;
+        }
+        if (!loginSecret.equals(secret)) {
+            log.info("Received invalid secret attempt");
+            return false;
+        }
+        return true;
+    }
+
+    private String generateToken(UUID uuid) {
+        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<>();
+        List<PermissionClaimDto> claimList = new ArrayList<>();
+        Connection.getConnection(Databases.DEFAULT)
+                .runQuery(sqlSession -> {
+                    try {
+                        PrivilegedUser privilegedUser = sqlSession.getMapper(PrivilegedUserMapper.class)
+                                .getUserByUuid(uuid.toString());
+
+                        privilegedUserCompletableFuture.complete(privilegedUser);
+                    } catch (Exception e) {
+                        log.error("Failed to load user by uuid", e);
+                        privilegedUserCompletableFuture.completeExceptionally(e);
+                    }
+                });
+        PrivilegedUser privilegedUser = privilegedUserCompletableFuture.join();
+        claimList.add(PermissionClaimDto.USER);
+        if (privilegedUser != null) {
+            privilegedUser.getPermissions().forEach(permission -> {
+                try {
+                    claimList.add(PermissionClaimDto.valueOf(permission));
+                } catch (IllegalArgumentException e) {
+                    log.warn("Received invalid permission claim: {}", permission);
+                }
+            });
+        }
+        JwtClaimsSet claims = JwtClaimsSet.builder()
+                .issuer("altitudeweb")
+                .claim("authorities", claimList.stream().map(PermissionClaimDto::getValue).toList())
+                .issuedAt(now)
+                .expiresAt(expiryTime)
+                .subject(uuid.toString())
+                .build();
+
+        return jwtEncoder.encode(JwtEncoderParameters.from(claims)).getTokenValue();
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/controllers/team/TeamApiController.java

@@ -1,7 +1,7 @@
 package com.alttd.altitudeweb.controllers.team;
 
 import com.alttd.altitudeweb.api.TeamApi;
-import com.alttd.altitudeweb.controllers.limits.RateLimit;
+import com.alttd.altitudeweb.services.limits.RateLimit;
 import com.alttd.altitudeweb.setup.Connection;
 import com.alttd.altitudeweb.database.Databases;
 import com.alttd.altitudeweb.database.luckperms.Player;

backend/src/main/java/com/alttd/altitudeweb/services/limits/InMemoryRateLimiterService.java

@@ -1,4 +1,4 @@
-package com.alttd.altitudeweb.controllers.limits;
+package com.alttd.altitudeweb.services.limits;
 
 import org.springframework.stereotype.Service;
 

backend/src/main/java/com/alttd/altitudeweb/services/limits/RateLimit.java

@@ -1,4 +1,4 @@
-package com.alttd.altitudeweb.controllers.limits;
+package com.alttd.altitudeweb.services.limits;
 
 import java.lang.annotation.ElementType;
 import java.lang.annotation.Retention;

backend/src/main/java/com/alttd/altitudeweb/services/limits/RateLimitAspect.java

@@ -1,4 +1,4 @@
-package com.alttd.altitudeweb.controllers.limits;
+package com.alttd.altitudeweb.services.limits;
 
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
@@ -26,8 +26,8 @@ public class RateLimitAspect {
     private final InMemoryRateLimiterService rateLimiterService;
     
     @Around("""
-            @annotation(com.alttd.altitudeweb.controllers.limits.RateLimit)
-            || @within(com.alttd.altitudeweb.controllers.limits.RateLimit)""")
+            @annotation(com.alttd.altitudeweb.services.limits.RateLimit)
+            || @within(com.alttd.altitudeweb.services.limits.RateLimit)""")
     public Object rateLimit(ProceedingJoinPoint joinPoint) throws Throwable {
         ServletRequestAttributes requestAttributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
         if (requestAttributes == null) {

backend/src/main/java/com/alttd/altitudeweb/services/limits/RequestCounter.java

@@ -1,4 +1,4 @@
-package com.alttd.altitudeweb.controllers.limits;
+package com.alttd.altitudeweb.services.limits;
 
 import java.time.Duration;
 import java.time.Instant;

backend/src/main/java/com/alttd/altitudeweb/services/user/UserDetailsServiceImpl.java

@@ -0,0 +1,27 @@
+package com.alttd.altitudeweb.services.user;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.userdetails.User;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.stereotype.Service;
+
+import java.util.Collections;
+import java.util.UUID;
+
+@Service
+@RequiredArgsConstructor
+public class UserDetailsServiceImpl implements UserDetailsService {
+
+    @Override
+    public UserDetails loadUserByUsername(String uuid) throws UsernameNotFoundException {
+        try {
+            //Validate uuid
+            UUID.fromString(uuid);
+            return new User(uuid, "", Collections.emptyList());
+        } catch (IllegalArgumentException e) {
+            throw new UsernameNotFoundException("Invalid UUID format: " + uuid);
+        }
+    }
+}

backend/src/main/resources/application.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://alttd.com}
+login.secret=${LOGIN_SECRET:SET_TOKEN}
 logging.level.com.alttd.altitudeweb=INFO

database/build.gradle.kts

@@ -16,6 +16,7 @@ dependencies {
     implementation("org.mybatis:mybatis:3.5.13")
     compileOnly("org.slf4j:slf4j-api:2.0.17")
     compileOnly("org.slf4j:slf4j-simple:2.0.17")
+    compileOnly("org.jetbrains:annotations:26.0.2")
 }
 
 tasks.test {

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

@@ -5,6 +5,7 @@ import lombok.Data;
 @Data
 public class HistoryRecord {
     private String uuid;
+    private int id;
     private String punishedName;
     private String reason;
     private String bannedByUuid;

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

@@ -0,0 +1,54 @@
+package com.alttd.altitudeweb.database.litebans;
+
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Result;
+import org.apache.ibatis.annotations.Results;
+import org.apache.ibatis.annotations.Select;
+
+public interface IdHistoryMapper {
+    @Results({
+            @Result(property = "id", column = "id"),
+            @Result(property = "uuid", column = "uuid"),
+            @Result(property = "punishedName", column = "punished_name"),
+            @Result(property = "reason", column = "reason"),
+            @Result(property = "bannedByUuid", column = "banned_by_uuid"),
+            @Result(property = "bannedByName", column = "banned_by_name"),
+            @Result(property = "removedByName", column = "removed_by_name"),
+            @Result(property = "time", column = "time"),
+            @Result(property = "until", column = "until"),
+            @Result(property = "removedByReason", column = "removed_by_reason")
+    })
+    @Select("""
+            SELECT punishment.id,
+                   punishment.uuid,
+                   user_lookup.name AS punished_name,
+                   punishment.reason,
+                   punishment.banned_by_uuid,
+                   punishment.banned_by_name,
+                   punishment.removed_by_name,
+                   punishment.time,
+                   punishment.until,
+                   punishment.removed_by_reason
+            FROM (SELECT *
+                  FROM ${table_name} AS punishment
+                  WHERE punishment.id = #{id})
+                     AS punishment
+            INNER JOIN user_lookup
+                ON user_lookup.uuid = punishment.uuid
+            """)
+    HistoryRecord getHistoryForId(@Param("table_name") String tableName,
+                                  @Param("type") String type,
+                                  @Param("id") int id);
+
+    default HistoryRecord getRecentHistory(HistoryType historyType, int id) {
+        HistoryRecord historyRecord = switch (historyType) {
+            case ALL -> throw new IllegalArgumentException("HistoryType.ALL is not supported");
+            case BAN -> getHistoryForId("litebans_bans", "ban", id);
+            case MUTE -> getHistoryForId("litebans_mutes", "mute", id);
+            case KICK -> getHistoryForId("litebans_kicks", "kick", id);
+            case WARN -> getHistoryForId("litebans_warnings", "warn", id);
+        };
+        historyRecord.setType(historyType.name().toLowerCase());
+        return historyRecord;
+    }
+}

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

@@ -4,6 +4,7 @@ import org.apache.ibatis.annotations.Param;
 import org.apache.ibatis.annotations.Result;
 import org.apache.ibatis.annotations.Results;
 import org.apache.ibatis.annotations.Select;
+import org.jetbrains.annotations.NotNull;
 
 import java.util.List;
 
@@ -24,6 +25,7 @@ public interface NameHistoryMapper {
      * order
      */
     @Results({
+            @Result(property = "id", column = "id"),
             @Result(property = "uuid", column = "uuid"),
             @Result(property = "punishedName", column = "punished_name"),
             @Result(property = "reason", column = "reason"),
@@ -36,7 +38,8 @@ public interface NameHistoryMapper {
             @Result(property = "type", column = "type")
     })
     @Select("""
-            SELECT all_punishments.uuid,
+            SELECT id,
+                   all_punishments.uuid,
                    user_lookup.name AS punished_name,
                    reason,
                    banned_by_uuid,
@@ -62,7 +65,6 @@ public interface NameHistoryMapper {
      * Retrieves a list of all types of recent punishment history records sorted
      * in descending time order. This result does NOT contain kicks history
      *
-     * @param nameColumn  the column name in the database indicating the name to use for filtering
      * @param limit       the maximum number of records to fetch
      * @param offset      the starting offset position of the result set
      *
@@ -70,6 +72,7 @@ public interface NameHistoryMapper {
      * order
      */
     @Results({
+            @Result(property = "id", column = "id"),
             @Result(property = "uuid", column = "uuid"),
             @Result(property = "punishedName", column = "punished_name"),
             @Result(property = "reason", column = "reason"),
@@ -82,17 +85,19 @@ public interface NameHistoryMapper {
             @Result(property = "type", column = "type")
     })
     @Select("""
-            SELECT punishments.uuid,
+            SELECT punishment.id,
+                   punishment.uuid,
                    user_lookup.name AS punished_name,
-                   punishments.reason,
-                   punishments.banned_by_uuid,
-                   punishments.banned_by_name,
-                   punishments.removed_by_name,
-                   punishments.time,
-                   punishments.until,
-                   punishments.removed_by_reason,
-                   punishments.type
+                   punishment.reason,
+                   punishment.banned_by_uuid,
+                   punishment.banned_by_name,
+                   punishment.removed_by_name,
+                   punishment.time,
+                   punishment.until,
+                   punishment.removed_by_reason,
+                   punishment.type
             FROM (SELECT uuid,
+                         id,
                          reason,
                          banned_by_uuid,
                          banned_by_name,
@@ -103,9 +108,9 @@ public interface NameHistoryMapper {
                          type
                   FROM all_punishments
                   ORDER BY time DESC
-                  LIMIT #{limit} OFFSET #{offset}) AS punishments
+                  LIMIT #{limit} OFFSET #{offset}) AS punishment
                      INNER JOIN user_lookup
-                                ON user_lookup.uuid = punishments.uuid;
+                                ON user_lookup.uuid = punishment.uuid;
             """)
     List<HistoryRecord> getRecentAllHistory(@Param("limit") int limit,
                                             @Param("offset") int offset);
@@ -124,6 +129,7 @@ public interface NameHistoryMapper {
      * order
      */
     @Results({
+            @Result(property = "id", column = "id"),
             @Result(property = "uuid", column = "uuid"),
             @Result(property = "punishedName", column = "punished_name"),
             @Result(property = "reason", column = "reason"),
@@ -135,7 +141,8 @@ public interface NameHistoryMapper {
             @Result(property = "removedByReason", column = "removed_by_reason")
     })
     @Select("""
-            SELECT punishment.uuid,
+            SELECT punishment.id,
+                   punishment.uuid,
                    user_lookup.name AS punished_name,
                    punishment.reason,
                    punishment.banned_by_uuid,
@@ -162,8 +169,6 @@ public interface NameHistoryMapper {
      * parameters. The records are sorted in descending order by time and limited to a specified range.
      *
      * @param tableName   the name of the database table to query the history records from
-     * @param partialName a partial or complete name of the user to filter the records, case-insensitive
-     * @param nameColumn  the column name in the database indicating the name to use for filtering
      * @param limit       the maximum number of records to fetch
      * @param offset      the starting offset position of the result set
      *
@@ -171,6 +176,7 @@ public interface NameHistoryMapper {
      * order
      */
     @Results({
+            @Result(property = "id", column = "id"),
             @Result(property = "uuid", column = "uuid"),
             @Result(property = "punishedName", column = "punished_name"),
             @Result(property = "reason", column = "reason"),
@@ -182,7 +188,8 @@ public interface NameHistoryMapper {
             @Result(property = "removedByReason", column = "removed_by_reason")
     })
     @Select("""
-            SELECT punishment.uuid,
+            SELECT punishment.id,
+                   punishment.uuid,
                    user_lookup.name AS punished_name,
                    punishment.reason,
                    punishment.banned_by_uuid,
@@ -192,7 +199,8 @@ public interface NameHistoryMapper {
                    punishment.until,
                    punishment.removed_by_reason
             FROM (
-                     SELECT uuid,
+                     SELECT id,
+                            uuid,
                             reason,
                             banned_by_uuid,
                             banned_by_name,
@@ -254,23 +262,23 @@ public interface NameHistoryMapper {
         }
     }
 
-    private List<HistoryRecord> getRecentBans(UserType userType, String partialName, int page) {
+    private @NotNull List<HistoryRecord> getRecentBans(UserType userType, String partialName, int page) {
         return addType(getRecent("litebans_bans", userType, partialName, page), "ban");
     }
 
-    private List<HistoryRecord> getRecentKicks(UserType userType, String partialName, int page) {
+    private @NotNull List<HistoryRecord> getRecentKicks(UserType userType, String partialName, int page) {
         return addType(getRecent("litebans_kicks", userType, partialName, page), "kick");
     }
 
-    private List<HistoryRecord> getRecentMutes(UserType userType, String partialName, int page) {
+    private @NotNull List<HistoryRecord> getRecentMutes(UserType userType, String partialName, int page) {
         return addType(getRecent("litebans_mutes", userType, partialName, page), "mute");
     }
 
-    private List<HistoryRecord> getRecentWarns(UserType userType, String partialName, int page) {
+    private @NotNull List<HistoryRecord> getRecentWarns(UserType userType, String partialName, int page) {
         return addType(getRecent("litebans_warnings", userType, partialName, page), "warn");
     }
 
-    private List<HistoryRecord> addType(List<HistoryRecord> historyRecords, String type) {
+    private @NotNull List<HistoryRecord> addType(@NotNull List<HistoryRecord> historyRecords, String type) {
         historyRecords.forEach(historyRecord -> historyRecord.setType(type));
         return historyRecords;
     }

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

@@ -1,10 +1,11 @@
 package com.alttd.altitudeweb.database.litebans;
 
-import com.alttd.altitudeweb.type_handler.UUIDTypeHandler;
 import org.apache.ibatis.annotations.Param;
 import org.apache.ibatis.annotations.Result;
 import org.apache.ibatis.annotations.Results;
 import org.apache.ibatis.annotations.Select;
+import org.jetbrains.annotations.Contract;
+import org.jetbrains.annotations.NotNull;
 
 import java.util.List;
 import java.util.UUID;
@@ -14,10 +15,11 @@ public interface UUIDHistoryMapper {
     int PAGE_SIZE = 10;
 
     @Results({
-            @Result(property = "uuid", column = "uuid", javaType = UUID.class, typeHandler = UUIDTypeHandler.class),
+            @Result(property = "id", column = "id"),
+            @Result(property = "uuid", column = "uuid"),
             @Result(property = "punishedName", column = "punished_name"),
             @Result(property = "reason", column = "reason"),
-            @Result(property = "bannedByUuid", column = "banned_by_uuid", javaType = UUID.class, typeHandler = UUIDTypeHandler.class),
+            @Result(property = "bannedByUuid", column = "banned_by_uuid"),
             @Result(property = "bannedByName", column = "banned_by_name"),
             @Result(property = "removedByName", column = "removed_by_name"),
             @Result(property = "time", column = "time"),
@@ -26,7 +28,7 @@ public interface UUIDHistoryMapper {
             @Result(property = "type", column = "type")
     })
     @Select("""
-            SELECT all_punishments.uuid, user_lookup.name AS punished_name, reason, banned_by_uuid, banned_by_name,
+            SELECT id, all_punishments.uuid, user_lookup.name AS punished_name, reason, banned_by_uuid, banned_by_name,
                    removed_by_name, time, until, removed_by_reason, type
             FROM all_punishments
             INNER JOIN user_lookup
@@ -41,10 +43,11 @@ public interface UUIDHistoryMapper {
                                             @Param("offset") int offset);
 
     @Results({
-            @Result(property = "uuid", column = "uuid", javaType = UUID.class, typeHandler = UUIDTypeHandler.class),
+            @Result(property = "id", column = "id"),
+            @Result(property = "uuid", column = "uuid"),
             @Result(property = "punishedName", column = "punished_name"),
             @Result(property = "reason", column = "reason"),
-            @Result(property = "bannedByUuid", column = "banned_by_uuid", javaType = UUID.class, typeHandler = UUIDTypeHandler.class),
+            @Result(property = "bannedByUuid", column = "banned_by_uuid"),
             @Result(property = "bannedByName", column = "banned_by_name"),
             @Result(property = "removedByName", column = "removed_by_name"),
             @Result(property = "time", column = "time"),
@@ -52,7 +55,7 @@ public interface UUIDHistoryMapper {
             @Result(property = "removedByReason", column = "removed_by_reason")
     })
     @Select("""
-            SELECT punishment.uuid, user_lookup.name AS punished_name, reason, banned_by_uuid, banned_by_name,
+            SELECT punishment.id, punishment.uuid, user_lookup.name AS punished_name, reason, banned_by_uuid, banned_by_name,
                    removed_by_name, time, until, removed_by_reason
             FROM ${tableName} AS punishment
             INNER JOIN user_lookup ON user_lookup.uuid = punishment.uuid
@@ -66,7 +69,8 @@ public interface UUIDHistoryMapper {
                                          @Param("limit") int limit,
                                          @Param("offset") int offset);
 
-    default List<HistoryRecord> getRecent(HistoryType historyType, UserType userType, UUID uuid, int page) {
+    default List<HistoryRecord> getRecent(@NotNull HistoryType historyType, @NotNull UserType userType,
+                                          @NotNull UUID uuid, int page) {
         return switch (historyType) {
             case ALL -> getRecentAll(userType, uuid, page);
             case BAN -> getRecentBans(userType, uuid, page);
@@ -76,7 +80,12 @@ public interface UUIDHistoryMapper {
         };
     }
 
-    private List<HistoryRecord> getRecent(String tableName, UserType userType, UUID uuid, int page) {
+    default List<HistoryRecord> getAllHistoryForUUID(@NotNull UUID uuid) {
+        return getRecentAllHistory(uuid.toString(), "uuid", 100, 0);
+    }
+
+    private List<HistoryRecord> getRecent(@NotNull String tableName, @NotNull UserType userType,
+                                          @NotNull UUID uuid, int page) {
         int offset = page * PAGE_SIZE;
         int limit = PAGE_SIZE;
         return switch (userType) {
@@ -85,7 +94,7 @@ public interface UUIDHistoryMapper {
         };
     }
 
-    private List<HistoryRecord> getRecentAll(UserType userType, UUID uuid, int page) {
+    private List<HistoryRecord> getRecentAll(@NotNull UserType userType, @NotNull UUID uuid, int page) {
         int offset = page * PAGE_SIZE;
         int limit = PAGE_SIZE;
         return switch (userType) {
@@ -96,23 +105,24 @@ public interface UUIDHistoryMapper {
         };
     }
 
-    private List<HistoryRecord> getRecentBans(UserType userType, UUID uuid, int page) {
+    private @NotNull List<HistoryRecord> getRecentBans(@NotNull UserType userType, @NotNull UUID uuid, int page) {
         return addType(getRecent("litebans_bans", userType, uuid, page), "ban");
     }
 
-    private List<HistoryRecord> getRecentKicks(UserType userType, UUID uuid, int page) {
+    private @NotNull List<HistoryRecord> getRecentKicks(@NotNull UserType userType, @NotNull UUID uuid, int page) {
         return addType(getRecent("litebans_kicks", userType, uuid, page), "kick");
     }
 
-    private List<HistoryRecord> getRecentMutes(UserType userType, UUID uuid, int page) {
+    private @NotNull List<HistoryRecord> getRecentMutes(@NotNull UserType userType, @NotNull UUID uuid, int page) {
         return addType(getRecent("litebans_mutes", userType, uuid, page), "mute");
     }
 
-    private List<HistoryRecord> getRecentWarns(UserType userType, UUID uuid, int page) {
+    private @NotNull List<HistoryRecord> getRecentWarns(@NotNull UserType userType, @NotNull UUID uuid, int page) {
         return addType(getRecent("litebans_warnings", userType, uuid, page), "warn");
     }
 
-    private List<HistoryRecord> addType(List<HistoryRecord> historyRecords, String type) {
+    @Contract("_, _ -> param1")
+    private @NotNull List<HistoryRecord> addType(@NotNull List<HistoryRecord> historyRecords, @NotNull String type) {
         historyRecords.forEach(historyRecord -> historyRecord.setType(type));
         return historyRecords;
     }

database/src/main/java/com/alttd/altitudeweb/database/luckperms/TeamMemberMapper.java

@@ -16,6 +16,7 @@ public interface TeamMemberMapper {
             FROM luckperms_user_permissions AS permissions
             INNER JOIN luckperms_players AS players ON players.uuid = permissions.uuid
             WHERE permission = #{groupPermission}
+            AND world = 'global'
             """)
     List<Player> getTeamMembers(@Param("groupPermission") String groupPermission);
 }

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

@@ -0,0 +1,16 @@
+package com.alttd.altitudeweb.database.web_db;
+
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import lombok.AllArgsConstructor;
+import java.time.Instant;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class KeyPairEntity {
+    private int id;
+    private String privateKey;
+    private String publicKey;
+    private Instant createdAt;
+}

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

@@ -0,0 +1,15 @@
+package com.alttd.altitudeweb.database.web_db;
+
+import org.apache.ibatis.annotations.*;
+
+public interface KeyPairMapper {
+    
+    @Select("SELECT * FROM key_pair ORDER BY id DESC LIMIT 1")
+    KeyPairEntity getKeyPair();
+    
+    @Insert("""
+            INSERT INTO key_pair (id, private_key, public_key, created_at)
+            VALUES (#{id}, #{privateKey}, #{publicKey}, #{createdAt})
+            """)
+    void save(KeyPairEntity keyPair);
+}

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

@@ -0,0 +1,16 @@
+package com.alttd.altitudeweb.database.web_db;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.List;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class PrivilegedUser {
+    private int id;
+    private String uuid;
+    private List<String> permissions;
+}

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

@@ -0,0 +1,102 @@
+package com.alttd.altitudeweb.database.web_db;
+
+import org.apache.ibatis.annotations.*;
+
+import java.util.List;
+
+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
+     */
+    @Select("""
+            SELECT privileged_users.id, privileged_users.uuid, privileges.privileges as permission
+            FROM privileged_users
+            LEFT JOIN privileges ON privileged_users.id = privileges.user_id
+            WHERE privileged_users.uuid = #{uuid}
+            """)
+    @Results({
+            @Result(property = "id", column = "id"),
+            @Result(property = "uuid", column = "uuid"),
+            @Result(property = "permissions", column = "id", javaType = List.class,
+                    many = @Many(select = "getPermissionsForUser"))
+    })
+    PrivilegedUser getUserByUuid(@Param("uuid") String uuid);
+
+    /**
+     * Retrieves all privileged users with their permissions
+     * @return List of all privileged users with their permissions
+     */
+    @Select("""
+            SELECT id, uuid
+            FROM privileged_users
+            """)
+    @Results({
+            @Result(property = "id", column = "id"),
+            @Result(property = "uuid", column = "uuid"),
+            @Result(property = "permissions", column = "id", javaType = List.class,
+                    many = @Many(select = "getPermissionsForUser"))
+    })
+    List<PrivilegedUser> getAllUsers();
+
+    /**
+     * Gets all permissions for a specific user
+     * @param userId The ID of the user
+     * @return List of permission strings
+     */
+    @Select("""
+            SELECT privileges
+            FROM privileges
+            WHERE user_id = #{userId}
+            """)
+    List<String> getPermissionsForUser(@Param("userId") int userId);
+
+    /**
+     * Adds a new privileged user
+     * @param user The PrivilegedUser object to add
+     * @return The number of rows affected
+     */
+    @Insert("""
+            INSERT INTO privileged_users (uuid)
+            VALUES (#{user.uuid})
+            """)
+    @Options(useGeneratedKeys = true, keyProperty = "user.id", keyColumn = "id")
+    int addUser(@Param("user") PrivilegedUser user);
+
+    /**
+     * Deletes a privileged user by their UUID
+     * @param uuid The UUID of the user to delete
+     * @return The number of rows affected
+     */
+    @Delete("""
+            DELETE FROM privileged_users
+            WHERE uuid = #{uuid}
+            """)
+    int deleteUserByUuid(@Param("uuid") String uuid);
+
+    /**
+     * Adds a permission to a user
+     * @param userId The ID of the user
+     * @param permission The permission to add
+     * @return The number of rows affected
+     */
+    @Insert("""
+            INSERT INTO privileges (user_id, privileges)
+            VALUES (#{userId}, #{permission})
+            """)
+    int addPermissionToUser(@Param("userId") int userId, @Param("permission") String permission);
+
+    /**
+     * Removes a permission from a user
+     * @param userId The ID of the user
+     * @param permission The permission to remove
+     * @return The number of rows affected
+     */
+    @Delete("""
+            DELETE FROM privileges
+            WHERE user_id = #{userId} AND privileges = #{permission}
+            """)
+    int removePermissionFromUser(@Param("userId") int userId, @Param("permission") String permission);
+}

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

@@ -87,6 +87,7 @@ public class Connection {
         log.debug("Loaded default database settings {}", databaseSettings);
         Connection connection = new Connection(databaseSettings, addMappers);
         log.debug("Created default database connection {}", connection);
+        connections.put(Databases.DEFAULT, connection);
         return CompletableFuture.completedFuture(connection);
     }
 

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

@@ -18,6 +18,7 @@ public class InitializeLiteBans {
                     configuration.addMapper(NameHistoryMapper.class);
                     configuration.addMapper(UUIDHistoryMapper.class);
                     configuration.addMapper(HistoryCountMapper.class);
+                    configuration.addMapper(IdHistoryMapper.class);
                 }).join()
                 .runQuery(sqlSession -> {
                     createAllPunishmentsView(sqlSession);
@@ -29,15 +30,15 @@ public class InitializeLiteBans {
     private static void createAllPunishmentsView(SqlSession sqlSession) {
         String query = """
                 CREATE VIEW IF NOT EXISTS all_punishments AS
-                SELECT uuid, reason, banned_by_uuid, banned_by_name, removed_by_name, time, until, removed_by_reason,
+                SELECT id, uuid, reason, banned_by_uuid, banned_by_name, removed_by_name, time, until, removed_by_reason,
                     'ban' as type
                 FROM litebans_bans
                 UNION ALL
-                SELECT uuid, reason, banned_by_uuid, banned_by_name, removed_by_name, time, until, removed_by_reason,
+                SELECT id, uuid, reason, banned_by_uuid, banned_by_name, removed_by_name, time, until, removed_by_reason,
                        'mute' as type
                 FROM litebans_mutes
                 UNION ALL
-                SELECT uuid, reason, banned_by_uuid, banned_by_name, removed_by_name, time, until, removed_by_reason,
+                SELECT id, uuid, reason, banned_by_uuid, banned_by_name, removed_by_name, time, until, removed_by_reason,
                        'warn' as type
                 FROM litebans_warnings
                 ORDER BY time DESC;

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

@@ -1,9 +1,11 @@
 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.SettingsMapper;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.ibatis.session.SqlSession;
+import org.jetbrains.annotations.NotNull;
 
 import java.sql.SQLException;
 import java.sql.Statement;
@@ -12,15 +14,21 @@ import java.sql.Statement;
 public class InitializeWebDb {
 
     protected static void init() {
-        log.info("Initializing LiteBans");
+        log.info("Initializing WebDb");
         Connection.getConnection(Databases.DEFAULT, (configuration) -> {
                     configuration.addMapper(SettingsMapper.class);
+                    configuration.addMapper(KeyPairMapper.class);
                 }).join()
-                .runQuery(InitializeWebDb::createSettingsTable);
-        log.debug("Initialized LuckPerms");
+                .runQuery(SqlSession -> {
+                    createSettingsTable(SqlSession);
+                    createKeyTable(SqlSession);
+                    createPrivilegedUsersTable(SqlSession);
+                    createPrivilegesTable(SqlSession);
+                });
+        log.debug("Initialized WebDb");
     }
 
-    private static void createSettingsTable(SqlSession sqlSession) {
+    private static void createSettingsTable(@NotNull SqlSession sqlSession) {
         String query = """
                 CREATE TABLE IF NOT EXISTS db_connection_settings
                 (
@@ -40,4 +48,53 @@ public class InitializeWebDb {
         }
     }
 
+    private static void createKeyTable(@NotNull SqlSession sqlSession) {
+        String query = """
+                CREATE TABLE IF NOT EXISTS key_pair (
+                    id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
+                    private_key TEXT NOT NULL,
+                    public_key TEXT NOT NULL,
+                    created_at TIMESTAMP NOT NULL
+                );
+                """;
+        try (Statement statement = sqlSession.getConnection().createStatement()) {
+            statement.execute(query);
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
+    private static void createPrivilegedUsersTable(@NotNull SqlSession sqlSession) {
+        String query = """
+                CREATE TABLE IF NOT EXISTS privileged_users (
+                    id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
+                    uuid VARCHAR(36) NOT NULL
+                );
+                """;
+        try (Statement statement = sqlSession.getConnection().createStatement()) {
+            statement.execute(query);
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
+    private static void createPrivilegesTable(@NotNull SqlSession sqlSession) {
+        String query = """
+                CREATE TABLE IF NOT EXISTS privileges (
+                    id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
+                    user_id int NOT NULL,
+                    privileges VARCHAR(36) NOT NULL,
+                    CONSTRAINT fk_privileges_user FOREIGN KEY (user_id)
+                        REFERENCES privileged_users(id)
+                        ON DELETE CASCADE
+                        ON UPDATE CASCADE
+                );
+                """;
+        try (Statement statement = sqlSession.getConnection().createStatement()) {
+            statement.execute(query);
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
 }

frontend/package.json

@@ -13,10 +13,12 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/cdk": "^19.2.18",
     "@angular/common": "^19.2.0",
     "@angular/compiler": "^19.2.0",
     "@angular/core": "^19.2.0",
     "@angular/forms": "^19.2.0",
+    "@angular/material": "^19.2.18",
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",

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

@@ -2,13 +2,15 @@ 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
+    HeaderComponent,
+    RemoveTrailingPeriodPipe
   ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'

frontend/src/app/app.routes.ts

@@ -45,6 +45,10 @@ export const routes: Routes = [
     path: 'bans',
     loadComponent: () => import('./bans/bans.component').then(m => m.BansComponent)
   },
+  {
+    path: 'bans/:type/:id',
+    loadComponent: () => import('./bans/details/details.component').then(m => m.DetailsComponent)
+  },
   {
     path: 'economy',
     loadComponent: () => import('./economy/economy.component').then(m => m.EconomyComponent)
@@ -52,7 +56,55 @@ export const routes: Routes = [
   {
     path: 'claiming',
     loadComponent: () => import('./claiming/claiming.component').then(m => m.ClaimingComponent)
-  }
+  },
+  {
+    path: 'mypet',
+    loadComponent: () => import('./mypet/mypet.component').then(m => m.MypetComponent)
+  },
+  {
+    path: 'warps',
+    loadComponent: () => import('./warps/warps.component').then(m => m.WarpsComponent)
+  },
+  {
+    path: 'skyblock',
+    loadComponent: () => import('./skyblock/skyblock.component').then(m => m.SkyblockComponent)
+  },
+  {
+    path: 'customfeatures',
+    loadComponent: () => import('./customfeatures/customfeatures.component').then(m => m.CustomfeaturesComponent)
+  },
+  {
+    path: 'guide',
+    loadComponent: () => import('./guide/guide.component').then(m => m.GuideComponent)
+  },
+  {
+    path: 'ranks',
+    loadComponent: () => import('./ranks/ranks.component').then(m => m.RanksComponent)
+  },
+  {
+    path: 'commandlist',
+    loadComponent: () => import('./commandlist/commandlist.component').then(m => m.CommandlistComponent)
+  },
+  {
+    path: 'mapart',
+    loadComponent: () => import('./mapart/mapart.component').then(m => m.MapartComponent)
+  },
+  {
+    path: 'lag',
+    loadComponent: () => import('./lag/lag.component').then(m => m.LagComponent)
+  },
+  {
+    path: 'staffpowers',
+    loadComponent: () => import('./staffpowers/staffpowers.component').then(m => m.StaffpowersComponent)
+  },
+  {
+    path: 'forms/:form',
+    loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
+  },
+  {
+    path: 'forms',
+    loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
+  },
 ];
 
 

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

@@ -57,7 +57,8 @@
         </div>
         <div class="historyTable">
           <app-history [userType]="userType" [punishmentType]="punishmentType"
-                       [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="updatePageSize($event)">
+                       [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="updatePageSize($event)"
+                       (selectItem)="setSearch($event)">
           </app-history>
         </div>
         <div class="changePageButtons">

frontend/src/app/bans/bans.component.ts

@@ -5,6 +5,7 @@ import {HistoryCount, HistoryService} from '../../api';
 import {NgClass, NgForOf, NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {catchError, map, Observable} from 'rxjs';
+import {SearchParams} from './search-terms';
 
 @Component({
   selector: 'app-bans',
@@ -210,4 +211,11 @@ export class BansComponent implements OnInit {
       this.actualPage = this.page;
     }
   }
+
+  public setSearch(searchParams: SearchParams) {
+    this.userType = searchParams.userType
+    this.searchTerm = searchParams.searchTerm
+    this.punishmentType = searchParams.punishmentType
+    this.search();
+  }
 }

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

@@ -0,0 +1,109 @@
+<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/details/details.component.scss

@@ -0,0 +1,68 @@
+.detailsBackButton {
+  font-family: open-sans, sans-serif;
+}
+
+.columnSection {
+  padding-top: 30px;
+}
+
+h2 {
+  text-align: center;
+}
+
+h3 {
+  text-align: center;
+}
+
+.avatar {
+  padding: 10px 0;
+}
+
+.detailsUsername {
+  font-size: 1.2em;
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.detailsInfo {
+  padding-top: 50px;
+}
+
+.detailsInfo p {
+  text-align: center;
+}
+
+.tag {
+  display: inline-block;
+  padding: 5px 10px;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.tagInfo {
+  margin: 0 20px;
+  font-size: 1.1em;
+}
+
+.tagActive {
+  color: #FFFFFF;
+  background-color: #EE5555;
+}
+
+.tagInactive {
+  color: #FFFFFF;
+  background-color: #F79720;
+}
+
+.tagPermanent {
+  color: #FFFFFF;
+  background-color: #EE5555;
+}
+
+.tagExpired {
+  color: #FFFFFF;
+  background-color: #777777
+}

frontend/src/app/bans/details/details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,71 @@
+import {Component, OnInit} from '@angular/core';
+import {HistoryService, PunishmentHistory} from '../../../api';
+import {NgClass, NgIf, NgOptimizedImage} from '@angular/common';
+import {RemoveTrailingPeriodPipe} from '../../util/RemoveTrailingPeriodPipe';
+import {HistoryFormatService} from '../history-format.service';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {catchError, map} from 'rxjs';
+import {HeaderComponent} from '../../header/header.component';
+
+@Component({
+  selector: 'app-details',
+  imports: [
+    NgIf,
+    NgOptimizedImage,
+    RemoveTrailingPeriodPipe,
+    HeaderComponent,
+    RouterLink,
+    NgClass
+  ],
+  templateUrl: './details.component.html',
+  styleUrl: './details.component.scss'
+})
+export class DetailsComponent implements OnInit {
+  type: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = 'all';
+  id: number = -1;
+  punishment: PunishmentHistory | undefined;
+
+  constructor(private route: ActivatedRoute,
+              private historyApi: HistoryService,
+              public historyFormat: HistoryFormatService) {
+  }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      switch (params.get('type')) {
+        case 'ban':
+          this.type = 'ban';
+          break;
+        case 'mute':
+          this.type = 'mute';
+          break;
+        case 'kick':
+          this.type = 'kick';
+          break;
+        case 'warn':
+          this.type = 'warn';
+          break;
+        default:
+          throw new Error("Invalid type");
+      }
+      this.id = Number(params.get('id') || '-1');
+      this.loadPunishmentData();
+    });
+  }
+
+  private loadPunishmentData() {
+    if (!this.type || this.type === 'all' || this.id < 0 || isNaN(this.id)) {
+      console.error("Invalid type or id");
+      return;
+    }
+    this.historyApi.getHistoryById(this.type, this.id).pipe(
+      map(punishment => {
+        this.punishment = punishment;
+      }),
+      catchError(err => {
+        console.error(err);
+        return [];
+      })
+    ).subscribe();
+  }
+}

frontend/src/app/bans/history-format.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HistoryFormatService } from './history-format.service';
+
+describe('HistoryFormatService', () => {
+  let service: HistoryFormatService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HistoryFormatService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/bans/history-format.service.ts

@@ -0,0 +1,68 @@
+import {Injectable} from '@angular/core';
+import {PunishmentHistory} from '../../api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HistoryFormatService {
+
+  constructor() {
+  }
+
+  public getPunishmentTime(entry: PunishmentHistory) {
+    const date = new Date(entry.punishmentTime);
+    return date.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  }
+
+  public isActive(entry: PunishmentHistory): boolean {
+    if (entry.removedBy !== null) {
+      return false;
+    }
+    if (entry.expiryTime <= 0) {
+      return true;
+    }
+    return entry.expiryTime > Date.now();
+  }
+
+  public isPermanent(entry: PunishmentHistory): boolean {
+    return entry.expiryTime <= 0;
+  }
+
+  public getType(entry: PunishmentHistory): string {
+    return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
+  }
+
+  public getExpiredTime(entry: PunishmentHistory): string {
+    let suffix: string = '';
+    if (entry.removedBy !== null && entry.removedBy !== undefined) {
+      suffix = '(Unbanned by ' + entry.removedBy + ')';
+    }
+    if (entry.expiryTime <= 0) {
+      return "Permanent " + this.getType(entry) + " " + suffix;
+    }
+    const date = new Date(entry.expiryTime);
+    return date.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }) + " " + suffix;
+  }
+
+  public getAvatarUrl(entry: string, size: string = '25'): string {
+    let uuid = entry.replace('-', '');
+    if (uuid === 'C') {
+      uuid = "f78a4d8dd51b4b3998a3230f2de0c670"
+    }
+    return `https://crafatar.com/avatars/${uuid}?size=${size}&overlay`;
+  }
+}

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

@@ -19,24 +19,32 @@
     <div>
       <tbody>
       <tr class="historyPlayerRow" *ngFor="let entry of history">
-        <td class="historyType">{{ getType(entry) }}</td>
-        <td class="historyPlayer">
+        <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]="getAvatarUrl(entry.uuid)" width="25" height="25"
+            <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">
+        <td class="historyPlayer" (click)="setSearch(entry.punishedBy, 'staff')">
           <div class="playerContainer">
-            <img class="avatar" [ngSrc]="getAvatarUrl(entry.punishedByUuid)" width="25" height="25"
+            <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">{{ entry.reason | removeTrailingPeriod }}</td>
-        <td class="historyDate">{{ getPunishmentTime(entry) }}</td>
-        <td class="historyDate">{{ getExpiredTime(entry) }}</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>

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

@@ -62,6 +62,7 @@ table tr td {
 
 .historyPlayerRow:hover {
   background-color: var(--history-table-row-color);
+  cursor: pointer;
 }
 
 .historyTableHead {

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

@@ -1,11 +1,14 @@
 import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
-import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
+import {BASE_PATH, HistoryService, PunishmentHistory} from '../../../api';
 import {catchError, map, Observable, shareReplay} from 'rxjs';
 import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
 import {CookieService} from 'ngx-cookie-service';
 import {RemoveTrailingPeriodPipe} from '../../util/RemoveTrailingPeriodPipe';
 import {HttpErrorResponse} from '@angular/common/http';
 import {environment} from '../../../environments/environment';
+import {HistoryFormatService} from '../history-format.service';
+import {SearchParams} from '../search-terms';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-history',
@@ -30,12 +33,13 @@ export class HistoryComponent implements OnInit, OnChanges {
   @Input() searchTerm: string = '';
 
   @Output() pageChange = new EventEmitter<number>();
+  @Output() selectItem = new EventEmitter<SearchParams>();
 
   private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
 
-  public history: PunishmentHistoryInner[] = []
+  public history: PunishmentHistory[] = []
 
-  constructor(private historyApi: HistoryService) {
+  constructor(private historyApi: HistoryService, public historyFormat: HistoryFormatService, private router: Router) {
   }
 
   ngOnChanges(): void {
@@ -47,7 +51,7 @@ export class HistoryComponent implements OnInit, OnChanges {
   }
 
   private reloadHistory(): void {
-    let historyObservable: Observable<PunishmentHistoryInner[]>;
+    let historyObservable: Observable<PunishmentHistory[]>;
     if (this.searchTerm.length === 0) {
       historyObservable = this.historyApi.getHistoryForAll(this.userType, this.punishmentType, this.page);
     } else {
@@ -89,42 +93,16 @@ export class HistoryComponent implements OnInit, OnChanges {
     ).subscribe();
   }
 
-  public getPunishmentTime(entry: PunishmentHistoryInner) {
-    const date = new Date(entry.punishmentTime);
-    return date.toLocaleString(navigator.language, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    });
+  setSearch(name: string, userType: 'player' | 'staff') {
+    let searchParams: SearchParams = {
+      userType: userType,
+      punishmentType: 'all',
+      searchTerm: name
+    }
+    this.selectItem.emit(searchParams);
   }
 
-  public getType(entry: PunishmentHistoryInner) {
-    return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
-  }
-
-  public getExpiredTime(entry: PunishmentHistoryInner) {
-    if (entry.expiryTime <= 0) {
-      return "Permanent " + this.getType(entry);
-    }
-    const date = new Date(entry.expiryTime);
-    return date.toLocaleString(navigator.language, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    });
-  }
-
-  public getAvatarUrl(entry: string): string {
-    let uuid = entry.replace('-', '');
-    if (uuid === 'C') {
-      uuid = "f78a4d8dd51b4b3998a3230f2de0c670"
-    }
-    return `https://crafatar.com/avatars/${uuid}?size=25&overlay`;
+  public showDetailedPunishment(entry: PunishmentHistory) {
+    this.router.navigate([`bans/${entry.type}/${entry.id}`]).then();
   }
 }

frontend/src/app/bans/search-terms.ts

@@ -0,0 +1,5 @@
+export interface SearchParams {
+  userType: 'player' | 'staff';
+  searchTerm: string;
+  punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn';
+}

frontend/src/app/commandlist/commandlist.component.html

@@ -0,0 +1,496 @@
+<ng-container>
+  <app-header [current_page]="'commandlist'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Command list</h1>
+      <h2>Looking for a specific command, or the description of one? This is where you find it.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <p style="font-family: 'opensans-bold', sans-serif; padding-bottom: 5px !important;">Claiming</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/claim -</span> Gives you the claim kit</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/buyclaimblocks &lt;amount&gt; -</span> Allows
+                you to buy claimblocks (0.5 in game per block)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sellclaimblocks &lt;amount&gt; -</span>
+                Allows you to sell claimblocks (0.5 in game per block)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/abandonallclaims -</span> Deletes all your
+                claims
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/abandonclaim -</span> Deletes the
+                claim/subdivision you're currently in
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/delclaim -</span> Deletes the
+                claim/subdivision you're currently in
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/unclaim -</span> Deletes the
+                claim/subdivision you're currently in
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/claimlist -</span> Shows you all your claims
+                and claimblocks
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/accesstrust &lt;username/public&gt; -</span>
+                Gives accesstrust to a user/everyone
+              </li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/containertrust &lt;username/public&gt; -</span> Gives
+                containertrust to a user/everyone
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/expandclaim &lt;amount&gt; -</span> Expands
+                claim by the specified amount in the direction you're facing
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/restrictsubclaim -</span> Seperates
+                permissions for the subclaim you are standing in from the main claim
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/subdivide -</span> Turns on subdivide mode
+                (hold golden shovel) to allow you to create subdivisions
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/trustlist -</span> Shows users trusted in the
+                claim/subclaim you're standing it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/claimnearbytrust -</span> Allows other
+                players to claim within 100 blocks to your claim
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Creative</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot help -</span> Display all creative
+                commands
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot info -</span> Display plot info</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot confirm -</span> Confirm an action</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot claim -</span> Claim the current plot
+                you're standing on
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot auto -</span> Claim a random available
+                plot nearby
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot delete -</span> Delete your plot</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot trust -</span> Allow a player to build
+                in your plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot add -</span> Allow a user to build while
+                you are online
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot setowner -</span> Set the plot owner
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot setbiome -</span> Set the plot biome
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot visit -</span> Visit someone (or your
+                own) plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot kick -</span> Kick a player from your
+                plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot middle -</span> Teleports you to the
+                center of the current plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot untrust -</span> Remove a player from
+                your plot
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot merge [auto] -</span> Merge a plot (or
+                multiple)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot unmerge -</span> Unmerge plots</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot sethome -</span> Set the plot home</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/plot clear -</span> Clear a plot</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nightvision -</span> Enables nightvision</li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Dynamic Map</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dynmap -</span> Sends you a link to the
+                Altitude map page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dynmap hide -</span> Hides you on the map
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dynmap show -</span> Shows you on the map
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">McMMO</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mctop &lt;ability&gt; -</span> Shows the top
+                10 players for Power Level or the specified ability
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mcrank -</span> Shows where you are on the
+                mctop per skill
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mcstats -</span> Shows your mcmmo levels in a
+                scoreboard
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mcability -</span> Toggles ability use on or
+                off
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/acrobatics [?] [page] -</span> Shows your
+                stats for Acrobatics. If you add ? it will show the guide for Acrobatics
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/archery [?] [page] -</span> Shows your stats
+                for Archery. If you add ? it will show the guide for Archery
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/axes [?] [page] -</span> Shows your stats for
+                Axes. If you add ? it will show the guide for Axes
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/excavation [?] [page] -</span> Shows your
+                stats for Excavation. If you add ? it will show the guide for Excavation
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/fishing [?] [page] -</span> Shows your stats
+                for Fishing. If you add ? it will show the guide for Fishing
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/herbalism [?] [page] -</span> Shows your
+                stats for Herbalism. If you add ? it will show the guide for Herbalism
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mining [?] [page] -</span> Shows your stats
+                for Mining. If you add ? it will show the guide for Mining
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/repair [?] [page] -</span> Shows your stats
+                for Repair. If you add ? it will show the guide for Repair
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/swords [?] [page] -</span> Shows your stats
+                for Swords. If you add ? it will show the guide for Swords
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/taming [?] [page] -</span> Shows your stats
+                for Taming. If you add ? it will show the guide for Taming
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/unarmed [?] [page] -</span> Shows your stats
+                for Unarmed. If you add ? it will show the guide for Unarmed
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/woodcutting [?] [page] -</span> Shows your
+                stats for Woodcutting. If you add ? it will show the guide for Woodcutting
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/inspect &lt;username&gt; -</span> Shows mcmmo
+                levels for specified user in a scoreboard if they are near you
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">MyPet</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petinfo -</span> Shows information about your
+                MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petname &lt;name&gt; -</span> Gives your
+                current MyPet the specified name
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petrelease &lt;name&gt; -</span> Release the
+                specified MyPet (this will despawn it)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petcall (/petc) -</span> Teleports your
+                current MyPet to you
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/psa -</span> Sends your MyPet away, it can
+                still be called using /petc (does not store your pet)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petswitch (/psw) -</span> Switches between
+                current and stored MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petstore (/pst) -</span> Stores your MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pettrade &lt;username&gt; [price] -</span>
+                Trades current MyPet with a player
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petshop -</span> Opens the MyPet shop</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petskill -</span> Shows information about the
+                skills of your MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petstop -</span> Stops your MyPet from
+                attacking a target if it's not in farm or aggressive behavior modes
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petchooseskilltree (/pcst) -</span> Allows
+                you to select a skilltree for your MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petcapturehelper (/pch) -</span>
+                Enables/disables the CaptureHelper for MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petoptions healthbar -</span> Toggles
+                actionbar healthbar on/off
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petoptions idle-volume &lt;%&gt; -</span>
+                Sets volume percentage for the MyPet
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petinventory (/peti) -</span> Opens the
+                inventory for your current MyPet if it has one
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petpickup (/pp) -</span> Toggles pet pickup
+                on/off if your pet has an inventory
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petbehavior [mode] (/pb) -</span> Switches
+                between pet behaviors or to the specified one
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petbeacon -</span> Opens the beacon editor
+                for your MyPet if it has one
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <p style="font-family: 'opensans-bold', sans-serif; padding-bottom: 5px !important;">Economy</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/bal -</span> Shows you your balance</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/cheque &lt;amount&gt; -</span> Creates a
+                cheque with the specified amount of money if you're holding a piece of paper
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pay &lt;username&gt; &lt;amount&gt; [-confirmed] -</span>
+                Pays the specified amount to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/shop -</span> Opens the shop GUI</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/points -</span> Displays your current amount
+                of sell/buy points
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sell &lt;item&gt; -</span> Tells you if the
+                entered item is sellable at spawn, and at what price
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/buy &lt;item&gt; -</span> Tells you if the
+                entered item is buyable at spawn, and at what price
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/playershop checkstock &lt;radius&gt; [max. stock] -</span>
+                highlights all of your shops which do not meet the minimum amount specified
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Party Chat</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party help -</span> Display the help menu
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party create &lt;partyname&gt; &lt;password&gt; -</span>
+                Creates a party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party info -</span> Displays information
+                about your current party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party invite &lt;username&gt; -</span> Invite
+                a user to your party
+              </li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/party join &lt;partyname&gt; [password] -</span> Join
+                a users party (password is required only if the party has one)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/p &lt;message&gt; -</span> Changes chat to
+                party chat. If a message is specified it is sent to party chat
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party leave -</span> Leave a party</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party name &lt;newname&gt; -</span> Leave a
+                party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party owner &lt;username&gt; -</span> Makes
+                the specified user owner of the party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party password &lt;password&gt; -</span> Sets
+                or changes a password for the party
+              </li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/party remove (/party kick) &lt;username&gt; -</span>
+                Kicks the specified user from the party
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/party disband -</span> Disband your party
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Voting</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/vote -</span> Sends a link to our vote page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votebest -</span> Shows highest total votes
+                you reached per day/week/month
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votelast -</span> Shows when you last voted
+                on each of the websites
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votenext -</span> Shows when you can vote
+                again per website
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votestreak -</span> Shows your current and
+                best vote streak
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votetop [page] -</span> Shows the vote top
+                page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/votetotal -</span> Shows you your total votes
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Warps</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/warps [warp] -</span> Opens the warp GUI or
+                teleports you to the specified warp
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/warp apply -</span> Starts application
+                process for a new warp (costs 25k)
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Altitude</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/queue -</span> Shows what server you are
+                queued for
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/find &lt;username&gt; -</span> Shows if and
+                where this user is online
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/back -</span> Teleports you back to where you
+                last teleported from
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dback -</span> Brings you back to the last
+                location you died at
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/colors -</span> Shows all color and format
+                codes
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/home [name] -</span> Shows your homes (click
+                to teleport), if a home is specified it will teleport you there
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/list -</span> Lists all online players on the
+                server
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/stafflist -</span> Lists all online staff
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/seen &lt;username&gt; -</span> Shows when a
+                player is/was online
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/playtime -</span> Shows your playtime</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sit -</span> Allows you to sit down</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/cooldown -</span> Shows the cooldown for the
+                rtp portal
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/hat -</span> Puts the current item on your
+                head
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/discord -</span> Sends you a link to the
+                Altitude Discord server
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/ranks -</span> Shows the ranks on the
+                Altitude server
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/contact -</span> Sends a link to our Contact
+                page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/report -</span> Sends a link to the report
+                form
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/rules -</span> Sends a link to the rules page
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/store -</span> Sends a link to the Altitude
+                store
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/guide -</span> Sends a link to the guide page
+                for getting started
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/info -</span> Sends some links to our website
+                and Discord
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/se &lt;signline&gt; &lt;text&gt; -</span>
+                While looking at a sign changes text on specified line to specified text.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/editsign -</span> Toggles shift click sign
+                editing
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/kickfromclaim -</span> Kicks specified user
+                from claim
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/kickpet -</span> Toggles kickpet mode, kicks
+                vanilla pets from claims after right clicking it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/warnings -</span> Shows all active warnings
+                for yourself
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/realname &lt;username/nickname&gt; -</span>
+                Shows the specified users username and nickname
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart remove -</span> Deletes map from the
+                database if you own it and are holding it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart save -</span> Saves map on the
+                database if you're holding it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sneakclickmending -</span> Allows you to mend
+                your items by right clicking while sneaking
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pu rotateblock -</span> Rotate already
+                placed, direction-specific, blocks
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pu xpcalc &lt;current xp&gt; &lt;goal xp&gt; -</span>
+                Calculates the amount of XP needed to get from level X to level Y
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pu xpcheque &lt;xp&gt; -</span> Creates a
+                'cheque' in the form of an XP bottle with the specified amount of XP
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pt top [daily/weekly/monthly/total]-</span>
+                Displays the players with the highest amount of playtime for the specified time
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/finditem &lt;item&gt; -</span> Enables you to
+                search your chest monster for a specific item
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/local -</span> Toggles local chat, where
+                messages will only be sent to players within a 200 block distance
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/blockitempickup -</span> Prevents picking up
+                items
+              </li>
+            </ul>
+            <p style="font-family: 'opensans-bold', sans-serif; padding: 25px 0 5px;">Miscellaneous</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/apart -</span> Opens particles GUI</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/cmi armorstand [last/near] -</span> Opens
+                Armorstand editor
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/ping -</span> Shows your ping</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/time -</span> Shows in-game time</li>
+              <li><span
+                style="font-family: 'opensans-bold', sans-serif;">/mail send &lt;username&gt; &lt;message&gt; -</span>
+                Sends a mail to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/ignore &lt;username&gt; -</span> Ignores a
+                users messages to you and hides their public chat messages from you
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/r &lt;message&gt; -</span> Replies to the
+                last user to send you a message
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/c &lt;message&gt; -</span> Replies to the
+                last user you sent a message to
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/msg &lt;username&gt; &lt;message&gt; -</span>
+                Sends a message to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pvp [on/off] -</span> Toggles your pvp on/off
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/sethome &lt;homename&gt; -</span> Sets a home
+                with the specified name
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/delhome &lt;homename&gt; -</span> Shows your
+                homes (click to remove), or removes the specified home
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/spawn -</span> Teleports you to spawn</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpa &lt;username&gt; -</span> Sends a
+                teleport request to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpaaccept [username] -</span> Accepts last
+                teleport request, or the teleport request of the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpahere &lt;username&gt; -</span> Sends a
+                teleport here request to the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpbypass -</span> Used to teleport to a
+                location the plugin marks as unsafe (such as void or lava)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/tpdeny [username] -</span> Denies last
+                teleport request, or the teleport request of the specified user
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/givepet &lt;username&gt; -</span> Gives
+                vanilla pet to specified user after you right click it
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/trapped -</span> Teleports you out of the
+                claim you are in if you do not have build permission there
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/colorsextra -</span> Displays useable RGB
+                colors (shift+lmb to paste in chat)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dispose (/trash) -</span> Opens a GUI where
+                you can dispose of items
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/commandlist/commandlist.component.scss

@@ -0,0 +1,14 @@
+main ul {
+  font-family: 'opensans', sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}
+
+li {
+  color: var(--font-color);
+  transition: 0.5s ease;
+}

frontend/src/app/commandlist/commandlist.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandlistComponent } from './commandlist.component';
+
+describe('CommandlistComponent', () => {
+  let component: CommandlistComponent;
+  let fixture: ComponentFixture<CommandlistComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommandlistComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommandlistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/commandlist/commandlist.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-commandlist',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './commandlist.component.html',
+  styleUrl: './commandlist.component.scss'
+})
+export class CommandlistComponent {
+
+}

frontend/src/app/community/community.component.html

@@ -0,0 +1,79 @@
+<ng-container>
+  <app-header [current_page]="'community'" height="460px" background_image="/public/img/backgrounds/community.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Community</h1>
+      <h2>Talented people who help Altitude in more than one way.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="customContainer">
+        <h2>Current Nitro Boosters</h2>
+      </div>
+    </section>
+    <section id="social" class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Social Media</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">We're currently not looking for more people to help manage our socials.</p>
+      </div>
+    </section>
+    <section id="crateTeam" class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Crate Team</h2>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Event Leaders</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">We're currently not looking for more Event Leaders.</p>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Event Team</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column;">
+          <p style="text-align: center;">We occasionally open applications for the event team.</p>
+          <p style="text-align: center;">If you're interested in joining you simply need to keep an eye on the Discord
+            announcements.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">YouTubers & Streamers</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column;">
+          <p style="text-align: center;"><a style="cursor: pointer;" id="reqButton">Show Requirements...</a></p>
+        </div>
+      </div>
+      <div id="req" class="hide" style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column; justify-content: center; max-width: 800px;">
+          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Requirements:</span>
+          </p>
+          <p style="text-align: center;">You need to have at least one recent stream/video on Altitude which we can use
+            to gauge if your audience enjoys your content on Altitude.</p>
+          <br>
+          <p style="text-align: center;">Twitch: You need to be affiliate and get at least 5 viewers on average while
+            streaming on Altitude.</p>
+          <p style="text-align: center;">YouTube videos: You need at least 500 subs and have at least 200 views per
+            video within a week on average for Altitude content.</p>
+          <p style="text-align: center;">YouTube streamers: You need at least 500 subs and have at least 5 viewers on
+            average while streaming on Altitude.</p>
+          <br>
+          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Note:</span> Before
+            accepting or denying you we will watch your latest video/stream on Altitude (so keep your broadcasts public
+            on twitch).</p>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/community/community.component.scss

@@ -0,0 +1,12 @@
+.customContainer {
+  width: 80%;
+  max-width: 1020px;
+  margin: auto;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.hide {
+  display: none !important;
+}
+

frontend/src/app/community/community.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommunityComponent } from './community.component';
+
+describe('CommunityComponent', () => {
+  let component: CommunityComponent;
+  let fixture: ComponentFixture<CommunityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommunityComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommunityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-community',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './community.component.html',
+  styleUrl: './community.component.scss'
+})
+export class CommunityComponent {
+
+}

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

@@ -0,0 +1,179 @@
+<ng-container>
+  <app-header [current_page]="'skyblock'" height="460px" background_image="/public/img/backgrounds/path.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Custom Features</h1>
+      <h2>A list of custom features created specifically to enhance the survival experience on Altitude.</h2>
+      <h3
+        style="font-family: 'minecraft-text', sans-serif; font-size: 0.8rem; margin-top: 10px; color: #FFFFFF !important;">
+        Commands for the features are listed <a [routerLink]="['/commandlist']">here</a></h3>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Blocks</h2>
+            <p style="padding-bottom: 0 !important;">Beacons can be activated by redstone</p>
+            <ul class="full-page-list">
+              <li>Powering the block above a beacon disables the beam</li>
+            </ul>
+            <p>Glow lichen can be silk touched</p>
+            <p>Vines can be silk touched and bonemealed</p>
+            <p>Coral and coral fans can be bonemealed to grow a new coral tree</p>
+            <p>Mushroom blocks can be stripped with an axe</p>
+            <p>Candles can be placed without a block beneath them</p>
+            <p>Crying obsidian can be used to create nether portals</p>
+            <p style="padding-bottom: 0 !important;">Gravel and sand are craftable in stonecutters</p>
+            <ul class="full-page-list">
+              <li>Cobblestone -> Gravel</li>
+              <li>Gravel -> Sand</li>
+            </ul>
+            <p>Sponges can remove lava - wet sponges remove more (Note: the sponge will be consumed)</p>
+            <p>Item frames can be made invisible using a diamond</p>
+            <p>Rotation of item frames can be locked using a slime ball</p>
+            <p>Copper can be oxidized using a cauldron of water</p>
+            <p>Pink petals can be placed on any surface</p>
+            <p>Wither roses can be bonemealed</p>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSectionThree">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Containers</h2>
+            <p>Dispensers can interact with campfires</p>
+            <p>Dispensers can interact with cauldrons</p>
+            <p>Dispensers can place pumpkins</p>
+            <p>Dispensers can carve pumpkins</p>
+            <p>Barrels have 54 inventory slots</p>
+            <p>Furnaces have a built in item filter, this moves any item they can't process to the output</p>
+            <p>Naming a container or villager "public" makes them publically available</p>
+            <p>Natual loot chests (in dungeons, etc.) are not protected by claims (but can only be broken by the claim
+              owner)</p>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Compostable items</h2>
+            <ul class="full-page-list">
+              <li>leather: 0.10</li>
+              <li>wooden_shovel: 0.10</li>
+              <li>rotten_flesh: 0.15</li>
+              <li>salmon: 0.15</li>
+              <li>cod: 0.15</li>
+              <li>porkchop: 0.15</li>
+              <li>beef: 0.15</li>
+              <li>chicken: 0.15</li>
+              <li>rabbit: 0.15</li>
+              <li>mutton: 0.15</li>
+              <li>bamboo: 0.15</li>
+              <li>wooden_sword: 0.20</li>
+              <li>wooden_hoe: 0.20</li>
+              <li>wooden_pickaxe: 0.30</li>
+              <li>wooden_axe: 0.30</li>
+              <li>poisonous_potato: 0.35</li>
+              <li>leather_boots: 0.40</li>
+              <li>flowering_azalea_leaves: 0.50</li>
+              <li>leather_helmet: 0.50</li>
+              <li>leather_leggings: 0.70</li>
+              <li>leather_chestplate: 0.80</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSectionThree">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Ender Dragon</h2>
+            <p>First kill of the month awards a dragon egg</p>
+            <p style="padding-bottom: 0 !important;">Can drop items when killed</p>
+            <ul class="full-page-list">
+              <li>elytra: 30%</li>
+              <li>dragon_head: 30%</li>
+              <li>dragon_breath: 40%</li>
+              <li>and seperately from the rest, a 0.1% chance for a dragon_egg</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Mobs</h2>
+            <p>Bats can spawn above sea level (bat spawning only enabled during halloween)</p>
+            <p style="padding-bottom: 0 !important;">Mobs can respawn in structures</p>
+            <ul class="full-page-list">
+              <li>Shulker -> End City</li>
+              <li>Piglin Brute, Piglin -> Bastion</li>
+              <li>Evoker, Vindicator, Allay -> Woodland Mansion</li>
+              <li>Allay -> Pillager Outpost</li>
+              <li>Camel -> Desert Village</li>
+            </ul>
+            <p>Naming a mob "muted", "silenced", "silent" or "silence me" silences a mob</p>
+            <p>Naming a mob "muted", "silenced", "silent", "silence me", "protected" or "protect me" prevents it from
+              being damaged by non-trusted players in a claim</p>
+            <p>Naming a mob "baby" prevents it from growing up</p>
+            <p>Wither health bar is removed when silenced</p>
+            <p>Turtles can hatch during daytime</p>
+            <p>Unclaim vanilla player pets (dogs, cats, parrots, horses) if the owner has been offline for 60+ days by
+              right clicking with a lead</p>
+            <p>Fisherman villagers can sell Bucket of Salmon</p>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSectionThree">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Restrictions & disabled vanilla features</h2>
+            <p>Restricted iron golem spawning (10 golems spawning in a radius of 112 blocks in a time span of 1
+              minute)</p>
+            <p>Disabled stacking raids (having multiple raids going on at once)</p>
+            <p>Disabled TNT duping</p>
+            <p>Disabled bat spawning</p>
+            <p>Disabled patrol spawning</p>
+            <p>Zombies don't attack villagers</p>
+            <p>Disabled processing of most things around AFK players</p>
+            <p>Disabled AI for villagers in a 1x1 area</p>
+            <p>Shulkers shooting each other does not spawn a new shulker since they respawn naturally in End Cities</p>
+            <p>Pigmen cannot spawn from portals</p>
+            <p>Allay duplication is disabled since they respawn natually in Mansions and Outposts</p>
+            <p>Players cannot claim land within 100 blocks of another claim without the owner's permission</p>
+          </div>
+        </div>
+      </section>
+    </section>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <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>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

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

@@ -0,0 +1,9 @@
+main ul {
+  font-family: opensans, sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}

frontend/src/app/customfeatures/customfeatures.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomfeaturesComponent } from './customfeatures.component';
+
+describe('CustomfeaturesComponent', () => {
+  let component: CustomfeaturesComponent;
+  let fixture: ComponentFixture<CustomfeaturesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomfeaturesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CustomfeaturesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-customfeatures',
+  imports: [
+    HeaderComponent,
+    RouterLink
+  ],
+  templateUrl: './customfeatures.component.html',
+  styleUrl: './customfeatures.component.scss'
+})
+export class CustomfeaturesComponent {
+
+}

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

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppealComponent } from './appeal.component';
+
+describe('AppealComponent', () => {
+  let component: AppealComponent;
+  let fixture: ComponentFixture<AppealComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppealComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppealComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,69 @@
+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/form_type.ts

@@ -0,0 +1,5 @@
+export enum FormType {
+  APPEAL = 'appeal',
+  STAFF_APPLICATION = 'staff_application',
+  CONTACT = 'contact'
+}

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

@@ -0,0 +1,18 @@
+<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.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsComponent } from './forms.component';
+
+describe('FormsComponent', () => {
+  let component: FormsComponent;
+  let fixture: ComponentFixture<FormsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FormsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,68 @@
+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/guide/guide.component.html

@@ -0,0 +1,110 @@
+<ng-container>
+  <app-header [current_page]="'guide'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Guide Book</h1>
+      <h2>We aim to be an inclusive community server where players of all ages can find something to enjoy.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Backstory</h2>
+            <p>Altitude is a community-centered survival Minecraft server for {{ ALTITUDE_VERSION }}. Altitude opened
+              in January of 2015 and was originally a private server for a small group of friends. We’ve since opened
+              our doors to welcome anyone and everyone to enjoy the custom survival experience we’ve crafted!</p>
+            <p>The community grew rapidly in the beginning of 1.13 and therefore grew beyond the capacity of a single
+              server, so we opened two survival servers that each offered the same features and plugins, but a different
+              seed so that there is lots of land to explore!. The two servers later became four servers.</p>
+            <p>The Minecraft hype slowly died down and therefore we had to downscale first to two servers for 1.18 and
+              then for 1.20 down to one server again.</p>
+            <p>If you would like to learn more about the history of Altitude, you can visit our <a
+              [routerLink]="['/about']">about page</a>.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Claiming Land</h2>
+            <p>You should protect your home by “claiming” it to prevent others stealing your items or damaging your
+              build. This is important because we allow players to loot unclaimed buildings, claim them as their own,
+              and even completely remove them because we otherwise would have a world full of abandoned buildings. This
+              means that if your home is damaged in any way because it wasn’t protected, staff will not be able to
+              restore your items!</p>
+            <p>Claiming land on Altitude is easy. We use the very popular plugin “GriefPrevention”, which allows players
+              to use a golden shovel to make their claim.To get started enter the command <span
+                style="font-family: 'opensans-bold', sans-serif;">/claim</span> which will give you the necessary tools.
+              After that you simply click two opposite corners with the golden shovel (can be any golden shovel, not
+              only the one given through /claim) to claim the area between the points.</p>
+            <p>If you need more help with claiming, including trusting others and expanding your claim, visit our <a
+              [routerLink]="['/claiming']">claiming page</a>.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Economy</h2>
+            <p>We offer a collection of economy features to provide a player-focused and player-operated economy.
+              Players can create their own shops with the ChestShop plugin to buy and sell goods with others, apply for
+              a warp so that other players can travel directly to their shop, and pay other players directly with the
+              <b>/pay</b> command.</p>
+            <p>There are also shops in the spawn of each world that sell basic items like raw ores, food, and building
+              blocks. The prices in the spawn shops are designed to be much higher than you would likely find at player
+              shops to encourage trading between players and only using spawn as a last resort.</p>
+            <p>If you would like to learn more about the economy and how to create your own chest shops, see our <a
+              [routerLink]="['/economy']">economy page</a>.</p>
+            <p>If you would like to learn about applying for your own warp, including the criteria you must meet, see
+              our <a [routerLink]="['/warps']">warps page</a>.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Survival Features</h2>
+            <p>On Altitude, we want to provide an authentic survival experience for every player. In a multiplayer
+              environment, this can be challenging! To provide the best experience we possibly can, we’ve kept some
+              vanilla features on that other servers disable:</p>
+            <ul>
+              <li>TNT and creepers do damage! (Claimed land is safe)</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/back</span> to return to your last position
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/dback</span> to return to your death
+                position. (This even works if you have used <b>/back</b> earlier)
+              </li>
+              <li>Loot chests by default cannot be broken. You can enable this by doing <b>/iwanttobreakthisblock &lt;block&gt;</b>
+              </li>
+            </ul>
+          </div>
+          <div class="columnParagraph">
+            <h2>McMMO &amp; MyPet</h2>
+            <p>Our server feature the very popular community-requested plugins: McMMO & MyPet. McMMO introduces an
+              RPG-like experience to the survival game with skill leveling, special abilities, rare loot, and new
+              mechanics. The primary feature of McMMO is the detailed leveling system that breaks down Minecraft into
+              fifteen skills including mining, woodcutting, and herbalism. Each skill will level up the more you do it
+              unlocking powerful abilities related to that skill.</p>
+            <p>If you’d like to learn more about McMMO, <a href="https://mcmmo.org/wiki/Main_Page">visit their wiki
+              here</a>!</p>
+            <p>MyPet allows you to claim nearly any mob in-game as your “pet”. Each pet can be assigned a skilltree that
+              gives it unique abilities. Pets can learn to fight alongside you against mobs, pick up items for you as
+              you mine, and even provide faster travel around the world. Pets will level up in their skilltree the more
+              you play with them to unlock more abilities.</p>
+            <p>If you would like to learn more about MyPet and their abiltiies, visit our <a [routerLink]="['/mypet']">MyPet
+              page</a></p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Creative</h2>
+            <p>Occasionally, you may find yourself with a creative itch, or need a way to experiment and collaborate
+              with other players on the server! We offer a creative server for just that purpose. Players can use as
+              many plots in creative as they need (just ask a staff for more if you reach the default limit) and each
+              plot is 100 by 100 blocks. Players frequently use these plots for testing our survival builds before
+              taking the time to collect the resources in survival to build it.</p>
+            <p>Due to the low traffic that the creative server gets, we do not moderate this server as closely. If you
+              see anything wrong with the server, please inform a staff member so that we can get it resolved!</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>More Help</h2>
+            <p>You are now on your way to becoming a member of the Altitude community! We hope we’ve provided you with
+              the tools necessary to be successful on our servers. If you have any other questions, please reach out to
+              a staff member in-game, or on <a href="https://discordapp.com/invite/TGqpzCJ">our Discord</a>!</p>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/guide/guide.component.scss

@@ -0,0 +1,9 @@
+main ul {
+  font-family: opensans, sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}

frontend/src/app/guide/guide.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuideComponent } from './guide.component';
+
+describe('GuideComponent', () => {
+  let component: GuideComponent;
+  let fixture: ComponentFixture<GuideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GuideComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GuideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/guide/guide.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+import {RouterLink} from '@angular/router';
+import {ALTITUDE_VERSION} from '../constant';
+
+@Component({
+  selector: 'app-guide',
+  imports: [
+    HeaderComponent,
+    RouterLink
+  ],
+  templateUrl: './guide.component.html',
+  styleUrl: './guide.component.scss'
+})
+export class GuideComponent {
+
+  protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
+}

frontend/src/app/header/header.component.html

@@ -89,7 +89,7 @@
           </li>
           <li class="nav_li">
           <span
-            [id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'art', 'lag', 'staffpowers',
+            [id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'mapart', 'lag', 'staffpowers',
              'nicknames', 'bans', 'discord-bans'])" class="nav_link fake_link" [ngClass]="active">Reference</span>
             <ul class="dropdown">
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>

frontend/src/app/lag/lag.component.html

@@ -0,0 +1,190 @@
+<ng-container>
+  <app-header [current_page]="'lag'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Reducing Server Lag</h1>
+      <h2>How can we minimize lag on the server? Together we can create a lag-free survival server, but it takes
+        everyone's help!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Introduction</h2>
+          <p>Lag is not caused by one person, it is caused by all of us. Some of us cause more than others, but we can
+            all do small things to reduce the amount of lag we cause. Remember: do not ever accuse anyone else of being
+            the problem. If you believe someone’s build or behavior is a large contributor to the lag, please privately
+            tell a staff member so we can look into it. If you have any specific questions, staff are always here to
+            help. This is especially true if you want to make a redstone contraption, but are unsure how to have it
+            automatically shut off when not needed or to make it less taxing on the server.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Mobs</h2>
+          <p style="margin-bottom: 0;">Mobs are the #1 cause of lag on a survival Minecraft server. They can be
+            surprisingly hard on the server and are a cause of lag that everyone contributes to. Because of this, never
+            keep more than you need of any given mob.</p>
+          <p>FarmLimiter is a plugin that introduces hard limits to mobs. The plugin groups mobs by chaining mobs
+            together that are within a minimum radius of each other. Please refer to the example image for a better idea
+            of how mob chaining works. We've provided the settings of this plugin below for your reference, but please
+            do not try to circumvent this system - it is in place for a reason!</p>
+          <ul class="full-page-list" style="margin-bottom: 0;">
+            <li>Villagers should not be allowed to build up from a breeder, and you should cull undesirables as needed
+              to keep your numbers as low as possible. Also think carefully about which villagers you really need and if
+              you can make dual use of some. Only use “infinite” villager breeder designs if you limit their breeding by
+              limiting their food.
+            </li>
+            <li>Villagers used for trading should be put on emerald blocks, emerald ore or smooth stone. This will
+              disable their AI for anything other than trading. This helps server performance a lot and any villagers
+              used for trading found without their AI disabled could be removed by staff if they are causing lag.
+              Villagers placed on these blocks will refresh their trades faster than normal. The following example
+              visualizes the 20 passive mobs within 5 blocks FarmLimiter restriction. <a style="cursor: pointer;"
+                                                                                         (click)="toggleExceptions()">Show
+                example...</a></li>
+          </ul>
+          <div id="exceptions" [ngClass]="{'hide': !showExceptions}"
+               style="display: flex; justify-content: center; padding-bottom: 30px;">
+            <img ngSrc="/public/img/random/farm_limiter_darker.png" alt="Visualization of the farm limiter"
+                 style="width: 70%; padding-top: 7px;" height="375" width="715">
+          </div>
+          <ul class="full-page-list">
+            <li>Turtles only need one breeding pair. The breeding mechanic of turtles allows you to breed one pair over
+              and over, as they become fertile immediately upon laying their eggs. Consider keeping only two adult
+              turtles in your farm.
+            </li>
+            <li>Consider not raising pigs at all, as their meat is exactly the same as beef and they have no secondary
+              drops
+            </li>
+            <li>Do not fill your base with more vanilla pets than you need</li>
+            <li>Never circumvent entity cramming. It is there because a lot of entities crammed into a small space is
+              hard on the server.
+            </li>
+            <li>FarmLimiter is a plugin that introduces hard limits to mobs. We've provided the settings of this plugin
+              below for your reference, but please do not try to circumvent this system - it is in place for a reason!
+            </li>
+          </ul>
+          <div class="highlightedContent">
+            <h3>Farm Limiter Plugin</h3>
+            <p>No more than 25 mobs (of all types) within a radius of 3 blocks (this gets the chickens).</p>
+            <p>No more than 20 passive mobs within a radius of 5 blocks (limits farms - including villagers and
+              excluding chickens).</p>
+            <p>No more than 10 hostile mobs within a single block (limits grinders).</p>
+            <p>No more than 10 turtles within a radius of 5 blocks (turtles cause a LOT of lag).</p>
+            <p>No more than 70 villagers within a radius of 50 blocks.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Minecarts</h2>
+          <p>Minecarts are another type of entity that cause a lot of lag. They are harder on the server than you might
+            think.</p>
+          <ul class="full-page-list">
+            <li>Do not store villagers or other mobs long-term in minecarts. Use them for transportation and drop them
+              off in an enclosed location on the other end.
+            </li>
+            <li>Do not use farm designs that rely on many hopper minecarts. They are convenient because they pick up
+              items through blocks and have a faster throughput than hoppers, but they are unnecessarily hard on the
+              server.
+            </li>
+            <li>Avoid using minecarts for entity cramming purposes when possible and try to design your farm to only
+              have one such killing chamber if it is necessary.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Hoppers</h2>
+          <p>Hoppers cause lag because they are constantly checking for items, even when nothing is in them, so you
+            should minimize your use of them.</p>
+          <ul class="full-page-list">
+            <li>When bringing items down through a vertical line of hoppers, try alternating them with single chests.
+              This saves you iron and saves the server a bit of lag.
+            </li>
+            <li>Bulk storage systems where random items are dropped in and sent into chests should be avoided because
+              they are likely to cause a situation that is especially taxing. More specifically: A hopper pushing items
+              into a full chest that are not in the chest OR A hopper trying to pull items from a chest to complete
+              stacks but none of the items in the chest match.
+            </li>
+            <li>Myth: Droppers/Furnaces on top of hoppers reduces lag. Droppers on top of hoppers do not reduce lag, and
+              furnaces are a slightly laggy object in their own right, so do not use them unnecessarily.
+            </li>
+            <li>When moving items long distances use water streams. Also try to use water to gather newly farmed items
+              rather than an array of hoppers. However, be aware that water streams have their own downfalls: First, the
+              item entity is at risk to be picked up by a pet with /petpickup turned on. So, do not use them near public
+              areas of your base or for high value items. Second, do not make water streams so long that they flow into
+              unloaded chunks, as the items can back up where chunks unload and create a ticking lag bomb of item
+              entities. Finally, set things up so that, if the storage system at the other end fills up, the extra items
+              get automatically destroyed rather than sitting on full hoppers to despawn.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Redstone Farms</h2>
+          <p>Redstone contraptions are, by their nature, going to contribute some lag. But you can do things to reduce
+            their impact.</p>
+          <ul class="full-page-list">
+            <li>Biggers is not better. Try to make farms a reasonable size for what you need and no larger. Think about
+              how much of a resource you actually need.
+            </li>
+            <li>Think about the design you use. If you have a farm with a lot of pistons to break crops automatically,
+              can you set it up so that the pistons fire in sequence instead of all at once? Can you use a slimeblock
+              push bar so that you only need one piston and one observer for every 12 plants instead of one per each?
+              Minimize how much redstone is running at once.
+            </li>
+            <li>Set up your machines to shut off when not in use.</li>
+            <li>If you use a minecart hopper/chest to transport items, make sure it automatically docks when there are
+              no items to move. You can set up the minecart pickup to only run after a harvest and an auto-smelter that
+              uses minecarts to fill the furnaces does not need to have the minecart running all the time, only when
+              it’s dropping off items.
+            </li>
+            <li>Redstone clocks rarely need to run all the time. For example, an item disposal dropper can be set up to
+              automatically trigger the clock when there are items in the dropper and to shut off the clock when the
+              dropper is empty.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2>Other Entities</h2>
+          <p>You may have noticed a theme in this list. Everything we've listed is an <span
+            style="font-family: 'opensans-bold', sans-serif;">entity</span>. Entities are the biggest cause of lag on
+            Altitude, and anything we can do to reduce the number of entities on the server will help!</p>
+          <ul class="full-page-list">
+            <li>Block Entities. Any block entity causes more lag than a normal block, but some cause more than others.
+              <a href="https://minecraft.gamepedia.com/Block_entity">minecraft.gamepedia.com/Block_entity</a></li>
+            <li>Signs with text on them are laggier than empty signs, so consider if you need to write that sign. Also,
+              be sure to not write anything on signs used for technical reasons, like to hold back lava or water.
+            </li>
+            <li>Item frames also are a small contributor to lag, but can add up, so please do not use a lot of them for
+              no reason.
+            </li>
+            <li>Brewing Stands cause more lag than you might think, so please do not have more placed than you need.
+            </li>
+            <li>Item Entities. Please pick up item entities when mining, even if you don’t actually want them. You can
+              dispose of them by throwing them in lava or on a cactus. But leaving mass amounts of items to despawn puts
+              an unnecessary strain on the server.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/lag/lag.component.scss

@@ -0,0 +1,55 @@
+.full-page-list {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  margin-bottom: 30px;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+
+.full-page-list li {
+  padding-bottom: 10px;
+}
+
+.highlightedContent {
+  width: 70%;
+  margin: auto;
+  background: var(--color-quinary);
+  padding: 20px;
+  margin-bottom: 30px;
+  text-align: center;
+  border-radius: 5px;
+  transition: 0.5s ease;
+}
+
+.highlightedContent p {
+  margin-bottom: 0px !important;
+}
+
+.paragraph {
+  width: 100%;
+  margin-bottom: -20px;
+}
+
+.paragraph p {
+  margin-bottom: 15px;
+}
+
+li {
+  padding-bottom: 10px;
+}
+
+.hide {
+  display: none !important;
+}
+
+@media (max-width: 1000px) {
+  main .container {
+    text-align: left;
+  }
+}
+
+@media (max-width: 670px) {
+  main .container {
+    text-align: center;
+  }
+}

frontend/src/app/lag/lag.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LagComponent } from './lag.component';
+
+describe('LagComponent', () => {
+  let component: LagComponent;
+  let fixture: ComponentFixture<LagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LagComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/lag/lag.component.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+import {NgClass, NgOptimizedImage} from '@angular/common';
+import {ScrollService} from '../scroll/scroll.service';
+
+@Component({
+  selector: 'app-lag',
+  imports: [
+    HeaderComponent,
+    NgOptimizedImage,
+    NgClass
+  ],
+  templateUrl: './lag.component.html',
+  styleUrl: './lag.component.scss'
+})
+export class LagComponent {
+  showExceptions: boolean = false;
+
+  constructor(public scrollService: ScrollService) {
+  }
+
+  public toggleExceptions() {
+    this.showExceptions = !this.showExceptions;
+  }
+}

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

@@ -0,0 +1,18 @@
+<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/login/login.component.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+  max-width: 400px;
+}
+
+.mat-dialog-content {
+  padding-top: 10px;
+}
+
+.mat-dialog-actions {
+  padding: 16px 0;
+}

frontend/src/app/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/login/login.component.ts

@@ -0,0 +1,71 @@
+import {Component} from '@angular/core';
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from '@angular/material/dialog';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {NgIf} from '@angular/common';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {AuthService} from '../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    NgIf
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss'
+})
+export class LoginDialogComponent {
+  public loginForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<LoginDialogComponent>,
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private snackBar: MatSnackBar
+  ) {
+    this.loginForm = this.fb.group({
+      code: ['', [
+        Validators.required,
+        Validators.minLength(8),
+        Validators.maxLength(8),
+        Validators.pattern('^[ABCDEFGHJKLMNPQRSTUVWXYZ23456789]+$')
+      ]]
+    });
+  }
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(): void {
+    if (!this.loginForm.valid) {
+      this.snackBar.open('Invalid code', '', {duration: 2000});
+      return;
+    }
+    this.snackBar.open('Logging in...', '', {duration: 2000});
+    this.authService.login(this.loginForm.value.code).subscribe({
+      next: (jwt) => {
+        this.dialogRef.close(jwt);
+      },
+      error: () => {
+        this.loginForm.get('code')?.setErrors({
+          invalid: true
+        });
+      }
+    });
+  }
+
+  public formHasError() {
+    return this.loginForm.get('code')?.hasError('required');
+  }
+}

frontend/src/app/mapart/mapart.component.html

@@ -0,0 +1,75 @@
+<ng-container>
+  <app-header [current_page]="'mapart'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Mapart</h1>
+      <h2>Altitude features a way to save maparts.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>What is mapart?</h2>
+            <p>Any map is a piece of art, but the common meaning of this is an actual drawing onto a map. By placing
+              blocks on a plot to color in a map one pixel at a time, you can create an image.</p>
+            <p>Creating these maps is time consuming, and Altitude wants to support these mapartists by offering an
+              easier way to share their mapart..</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>How to save mapart</h2>
+            <p>After you have placed all blocks on your plot and have the image recorded on your map, hold the map in
+              your main hand and do <span style="font-family: 'opensans-bold', sans-serif;">/mapart save</span>. This
+              will cost you $1000 in-game currency. The saving process can take several minutes.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful resources for creating mapart</h2>
+            <p>Mapart may be created simply by zooming in on an image you wish to create and placing pixels by eye.
+              First, however, you must know what blocks to use for each color. This <a
+                href="https://minecraft.gamepedia.com/Map_item_format">Minecraft wiki article</a> explains map item
+              formatting such as colors available on maps and the blocks that correspond.</p>
+            <p>Pick whichever blocks are the most convenient to collect and to break later if you plan on reusing blocks
+              for multiple maps.</p>
+            <p>Additionally, there is an incredibly useful online tool known as Mapartcraft by Rebane that can take an
+              image and automatically convert it to a schematic that can be used in conjunction with
+              litematica/schematica as a guide to create much more detailed mapart! Be sure to select the correct
+              version of Minecraft in the settings and pick your preferred blocks. This tool can be found <a
+                href="https://rebane2001.com/mapartcraft/">here</a>.</p>
+            <p>Reminder: While schematica and litematica are permitted mods on Altitude, any features like auto-build
+              and easy-place they may include are not!</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Is my mapart protected?</h2>
+            <p>The only person that can remove or clone saved maps is the one who created them. Mapart can be copied by
+              using the vanilla method on a cartography table.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>What mapart can I make</h2>
+            <p>If you plan on making some kind of map art that some may consider inappropriate, explicit, or
+              controversial, you can submit a request for review through our AltitudeBot support bot on Discord. Simply
+              message the bot anything, and the bot will reply with commands that you can utilize. For mapart review
+              requests, you will be using the command <span style="font-family: 'opensans-bold', sans-serif;">!mapart &lt;description of map art&gt;</span>.
+              Please be sure to also attach an image of the mapart (it is not possible to submit the request without an
+              image)!</p>
+            <p>Creating inappropriate mapart without prior approval may result in deletion of the mapart itself and
+              punishment for the creator.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful Commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart save -</span> Save a mapart</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart remove -</span> Delete a mapart</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/mapart find -</span> See who made a specific
+                mapart
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/mapart/mapart.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapartComponent } from './mapart.component';
+
+describe('MapartComponent', () => {
+  let component: MapartComponent;
+  let fixture: ComponentFixture<MapartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MapartComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MapartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/mapart/mapart.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-mapart',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './mapart.component.html',
+  styleUrl: './mapart.component.scss'
+})
+export class MapartComponent {
+
+}

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

@@ -0,0 +1,221 @@
+<ng-container>
+  <app-header [current_page]="'mypet'" height="460px" background_image="/public/img/backgrounds/babywither.png"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>MyPet</h1>
+      <h2>Tame almost any mob in-game as your pet and train it to fight along your side, collect dropped items for you,
+        and more!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Claim a Pet</h2>
+            <p>To claim a pet you will need to find the mob you want in the survival world and <span
+              style="font-family: 'opensans-bold', sans-serif;">kill it with a lead in your hand</span>. You must have a
+              lead in your hand when you kill the mob or it will die instead of becoming your pet.</p>
+            <p>New players can have up to 3 pets in storage and 1 active pet at a time. More pets can be stored by
+              ranking up. To claim an additional pet you must first store your current pet with <span
+                style="font-family: 'opensans-bold', sans-serif;">/petstore</span>. Once you have stored your current
+              pet you can simply kill another mob to make it your pet. You will not be able to call it or interact with
+              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"
+                 width="96">
+          </div>
+          <div class="columnParagraph">
+            <h2>Skilltrees and Levels</h2>
+            <p>Pets can be assigned to a skilltree with <span
+              style="font-family: 'opensans-bold', sans-serif;">/pcst</span>, which allows it to level up and unlock new
+              skills. There are 8 skilltrees to choose from, but Mage, Tank, Marksman, and Warrior all require you to
+              start with "Fighter". Pets earn XP when they kill mobs, and also earn a small amount of XP any time you
+              kill a mob.</p>
+            <p><b>Note:</b> pets with inventories will drop it on player death.</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Utility</span> - Specializes in mining with
+                pickup and inventory skills + a Haste II beacon at level 150. (150 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Mount</span> - A rideable pet specializes in
+                speed and jump height + jump beacon at level 150, and inventory at level 200. (200 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Defender</span> - Specializes in defending
+                you, it absorbs damage dealt towards you. High HP + regen beacon at level 200. (200 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Fighter</span> - Starter rank for all other
+                fighter categories. Increases pet attack damage. (50 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Mage</span> - Specializes in specialty attacks
+                like fireballs and lightning. No melee abilities. (100 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Tank</span> - Specializes in defense with
+                lots of HP, redirecting damage, and sweeping attacks. Resistance beacon at level 100. (100 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Marksman</span> - Specializes in ranged
+                attacks with arrow and poison damage, no melee abilities + invisibility beacon at level 50. (100 levels)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Warrior</span> - An all-around class with no
+                speciality, has some skills from every other class + a strength beacon at level 100. (100 levels)
+              </li>
+            </ul>
+          </div>
+          <div class="columnParagraph">
+            <h2>Equip Your Pet</h2>
+            <p>Some pets can hold items in their hands or wear armor. To equip a pet with something to hold or wear,
+              simply right click on your pet while shifting with the item in your hand. To remove the equipment right
+              click on your MyPet while shifting with shears in your hand.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Naming Your Pet</h2>
+            <p>You can name your pet with <span
+              style="font-family: 'opensans-bold', sans-serif;">/petname &lt;name&gt;</span>. Please note that
+              inappropriate names (anything that wouldn't be allowed to be said in chat) are not allowed.</p>
+            <p>Duke members and above can change the color of their pet's name. To get a list of all the color codes
+              please do <span style="font-family: 'opensans-bold', sans-serif;">/colors</span> in-game.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Pet Behavior</h2>
+            <p>You can change the way your pet attacks by changing its behavior. Different behaviors are unlocked as
+              your pet levels up. The available behaviors are listed below.</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Friendly:</span> Won't fight, even if it's
+                attacked by anything
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Normal:</span> Acts like a normal wolf</li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Aggressive:</span> Attacks everything within
+                15 blocks of the owner
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Farm:</span> Attacks every hostile mob within
+                15 blocks of the owner
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Raid:</span> Like normal, but the MyPet won't
+                attack players and their pets
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Duel</span> Attacks other pets with active
+                duel behavior within a 5 block radius
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Feed Your Pet</h2>
+            <p>You must feed your pet to keep its health up or it will die from hunger! If your pet is hungry it will
+              also be weaker and will deal less damage when attacking.</p>
+            <p>Each pet has a special food that it must be fed. You can see which food is right for your pet by doing
+              <span style="font-family: 'opensans-bold', sans-serif;">/petinfo</span>.</p>
+            <div class="inlineIcons">
+              <img ngSrc="/public/img/items/potato.png" alt="Minecraft potato" height="81" width="77">
+              <img ngSrc="/public/img/items/carrot.png" alt="Minecraft carrot" height="81" width="89">
+              <img ngSrc="/public/img/items/steak.png" alt="Minecraft steak" height="81" width="88">
+            </div>
+          </div>
+          <div class="columnParagraph">
+            <h2>How to Hide/Disable a MyPet</h2>
+            <p>There are two ways to disable a pet, and they work very differently. The first, <span
+              style="font-family: 'opensans-bold', sans-serif;">/petsendaway</span>, will hide your active MyPet until
+              you un-hide it with <span style="font-family: 'opensans-bold', sans-serif;">/petcall</span>. A pet that
+              has been hidden is still considered your "active MyPet", it just isn't visible right now. It also only
+              hides your pet during your current session.</p>
+            <p>The second way to disable a pet is to put it into storage with <span
+              style="font-family: 'opensans-bold', sans-serif;">/petstore</span>. Pets that are in storage are
+              completely deactivated until you use <span
+                style="font-family: 'opensans-bold', sans-serif;">/petswitch</span> to choose one you want to use. If
+              all of your pets are in storage, the server will tell you that you do not have a MyPet. This is also how
+              you can claim additional MyPets - by completely deactivating your current one first.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Blocked Mob Types</h2>
+            <p>The following mobs are not allowed to be claimed as a pet: the enderdragon, villagers and villager-like
+              mobs, shulkers, ghasts, and elder guardians. If you kill any of these mobs it will die and will NOT become
+              your pet.</p>
+            <p>Furthermore, all horses (including donkeys and mules) are currently disabled as pets due to them being
+              buggy.</p>
+            <div class="inlineIcons">
+              <img ngSrc="/public/img/items/enderdragon.png"
+                   style="padding: 25px 25px;"
+                   alt="Minecraft enderdragon mob"
+                   height="100" width="100">
+              <img ngSrc="/public/img/items/villager.png"
+                   style="padding: 25px 25px;"
+                   alt="Minecraft villager mob"
+                   height="100" width="100">
+              <img ngSrc="/public/img/items/zombievillager.png"
+                   style="padding: 25px 25px;"
+                   alt="Minecraft zombie villager mob"
+                   height="100" width="100">
+              <img ngSrc="/public/img/items/shulker.png"
+                   style="padding: 25px 25px;"
+                   alt="Minecraft shulker mob"
+                   height="100" width="100">
+              <img ngSrc="/public/img/items/ghast.png"
+                   style="padding: 25px 25px;"
+                   alt="Minecraft ghast mob"
+                   height="100" width="100">
+              <img ngSrc="/public/img/items/elderguardian.png"
+                   style="padding: 25px 25px;"
+                   alt="Minecraft elder guardian mob"
+                   height="100" width="100">
+            </div>
+          </div>
+          <div class="columnParagraph">
+            <h2>Disclaimer</h2>
+            <p>When you die with your MyPet out, the MyPet will drop all of the items in its inventory. This means that
+              if your MyPet is in a dangerous area when you die, your items can be lost. And if you die in pvp the items
+              won't be protected. If your MyPet dies on it’s own, it will not drop it’s inventory.</p>
+            <p>Some skill trees require a base skill to be able to select them. The fighter skill tree is a base skill
+              and will not level beyond 50. When you reach level 50, you will need to switch to one of the secondary
+              skill trees with <span style="font-family: 'opensans-bold', sans-serif;">/pcst.</span></p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful Commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petcall -</span> Make your pet come to you if
+                it vanished
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petsendaway -</span> Make your pet vanish
+                temporarily
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petrelease &lt;name&gt;-</span> Release
+                your pet forever
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petinfo -</span> Check your pet's health and
+                food as well as other stats
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/pcst -</span> Choose a skilltree for your
+                pet.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petskill -</span> Check your pet's skills and
+                strengths
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petname &lt;name&gt;-</span> Change the name
+                of your pet (see Naming Your Pet above)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petinventory -</span> Open your pet's
+                inventory to see what it has picked up
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petpickup -</span> Toggle whether your pet
+                will pick up items or not
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petbehavior -</span> Change the behavior
+                class of your pet (see Pet Behavior above)
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petbeacon -</span> Turn your pet into a
+                walking beacon to give you strength, speed, and other power-ups
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petswitch -</span> Allows you to switch
+                between your MyPets
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/petstore -</span> Store your current pet to
+                claim another
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

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

@@ -0,0 +1,15 @@
+main ul {
+  font-family: opensans, sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}
+
+.inlineIcons {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}

frontend/src/app/mypet/mypet.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MypetComponent } from './mypet.component';
+
+describe('MypetComponent', () => {
+  let component: MypetComponent;
+  let fixture: ComponentFixture<MypetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MypetComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MypetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from '../header/header.component';
+import {NgOptimizedImage} from '@angular/common';
+
+@Component({
+  selector: 'app-mypet',
+  imports: [
+    HeaderComponent,
+    NgOptimizedImage
+  ],
+  templateUrl: './mypet.component.html',
+  styleUrl: './mypet.component.scss'
+})
+export class MypetComponent {
+
+}

frontend/src/app/nickgenerator/nickgenerator.component.html

@@ -0,0 +1,53 @@
+<ng-container>
+  <app-header [current_page]="'nickgenerator'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Nickname Generator</h1>
+      <h2>Customize your in-game nickname</h2>
+      <h3 style="font-family: 'minecraft-text', sans-serif; font-size: 0.8rem; margin-top: 10px;">Made by TheParm</h3>
+    </div>
+  </app-header>
+
+  <main>
+    <!-- <section class="darkmodeSection">
+      <div class="container containerNick">
+        <div style="padding: 0 5% 0 5%;">
+          <div id="parts" class="previewNickDiv">
+          </div>
+          <div class="previewNickDiv">
+            <input type="button" class="button" value="Add Part" onclick="addPart()"/>
+            <input type="button" class="button" value="Remove Part" onclick="deletePart()"/>
+          </div>
+          <br><br><br><br>
+          <div id="commandTry" class="previewNickDiv">
+            <div id="try" class="command darkBg"></div>
+            <input type="button" class="button copy" value="Copy" onclick="copy(this)"/>
+          </div>
+          <div id="commandRequest" class="previewNickDiv">
+            <div id="request" class="command darkBg"></div>
+            <input type="button" class="button copy" value="Copy" onclick="copy(this)"/>
+          </div>
+          <div id="preview" class="preview darkBg previewNickDiv">
+          </div>
+          <div id="template" class='part' style="display: none">
+            <p style="font-family: 'minecraft-text', sans-serif">
+              Text: <input type="text" id="text" class="textPart" size=18 oninput="inputChanged()"/>
+              Gradient: <input type="checkbox" id="grad" class="gradPart" oninput="onGradient(this)"/>
+              <input id="colorA" type="text" class="coloris colorAPart color" value="#ffffff" oninput="inputChanged()"/>
+              <input id="colorB" type="text" class="coloris colorBPart color" value="#ffffff" oninput="inputChanged()"/>
+              Continuation: <input type="checkbox" id="cont" class="contPart" disabled oninput="onContinuation(this)"/>
+              <span id="invalid" class="invalidPart" style="display: none">(min 1 - max 16 chars)</span>
+            </p>
+          </div>
+          <div style="margin-top: 20px; text-align: center;">
+            <p style="font-family: 'minecraft-text', sans-serif">
+              Usage: Add as many parts as you wish, then apply the color and/or gradient, and copy/paste the command
+              into the minecraft chat. The total length of the nickname should be between 3 and 16 characters. Use the
+              continuation checkbox to continue the gradient from the last gradient color.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section> -->
+  </main>
+</ng-container>

frontend/src/app/nickgenerator/nickgenerator.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NickgeneratorComponent } from './nickgenerator.component';
+
+describe('NickgeneratorComponent', () => {
+  let component: NickgeneratorComponent;
+  let fixture: ComponentFixture<NickgeneratorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NickgeneratorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NickgeneratorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/nickgenerator/nickgenerator.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-nickgenerator',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './nickgenerator.component.html',
+  styleUrl: './nickgenerator.component.scss'
+})
+export class NickgeneratorComponent {
+
+}

frontend/src/app/nicknames/nicknames.component.html

@@ -0,0 +1,82 @@
+<ng-container>
+  <app-header [current_page]="'nicknames'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>How To Get A Nickname</h1>
+      <h2>Personalize your writing and nickname in-game by choosing some of the millions of custom colors that we have
+        to offer!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Creating a Nickname</h2>
+            <p>Donors that have the Duke or Archduke rank have the ability to create custom nicknames for themselves. A
+              nickname should be similar enough to the player’s username for that player to be identifiable, and it
+              <span style="font-family: 'opensans-bold', sans-serif;">must not exceed 16 characters in length</span>. In
+              general, a nickname should include the main part of a player’s actual username to avoid confusion.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Make it Your Own</h2>
+            <p>Altitude now supports the full range of RGB colors, which includes more than 16 million different hues.
+              In addition, the previous basic color codes still exist and are able to be used in combination with the
+              RGB colors. You can still use <span style="font-family: 'opensans-bold', sans-serif;">/colors</span> to
+              see the basic color codes that are available for use. You can also make use of <span
+                style="font-family: 'opensans-bold', sans-serif;">/colorsextra</span> which shows many different RGB
+              color options. These colors will be in the form of <span
+                style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
+              that you can easily use them later.</p>
+            <img ngSrc="/public/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
+                 width="480">
+            <p>Output of /colorsextra</p>
+            <p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to
+              make and preview potential nicknames - as well as copying the commands to use in-game.</p>
+            <p>Players are encouraged to play around and personalize their nicknames, as long as they follow the rules
+              and are legible! There are endless possibilities beyond simple gradients as well; players can create any
+              combination of standard colors and gradients that they choose.</p>
+            <p>Even if you aren’t a Duke or Archduke, you can try out colors like this on signs in-game.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Request Your Nickname</h2>
+            <p>Players can only submit a new nickname request using <span
+              style="font-family: 'opensans-bold', sans-serif;">/nick request &lt;name&gt;</span> once per day. When a
+              nickname is requested, it will notify staff for near-instant approval. Creating custom nicknames using RGB
+              can be difficult, so we have implemented <span style="font-family: 'opensans-bold', sans-serif;">/nick try &lt;name&gt;</span>
+              so that you can experiment with your nicknames as many times as you want. It is highly encouraged to use
+              this command before submitting a formal request to staff. You can select an RGB color by putting the <span
+                style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span> code into curly braces before your
+              text.</p>
+            <p>We also support gradients in nicknames. You can specify the start and finish color and your nickname will
+              automatically find a gradient that goes between the two endpoints. <span
+                style="font-family: 'opensans-bold', sans-serif;">The symbol &gt; is used to start a gradient, and the symbol &lt; is used to close a gradient.</span>
+              You can have as many gradients as you want in your nickname, as long as it is readable.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">/nick try &lbrace;#003380&rbrace;Player</span>
+              would result in a blue name that read as “Player”.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">/nick try &lbrace;#003380>&rbrace;Player&lbrace;#0000FF<&rbrace;</span>
+              would result in the nickname reading as “Player” with a blue gradient fading across the letters in the
+              name.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful Commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick help</span> - Shows a list of all useful
+                nickname commands and how to use them.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick try name</span> - Allows players to see
+                how a nickname would look as many times as you like.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick request name</span> - Allows players to
+                submit a new nickname to staff for approval. This function can only be used once per day.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/nicknames/nicknames.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NicknamesComponent } from './nicknames.component';
+
+describe('NicknamesComponent', () => {
+  let component: NicknamesComponent;
+  let fixture: ComponentFixture<NicknamesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NicknamesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NicknamesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/nicknames/nicknames.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+import {NgOptimizedImage} from '@angular/common';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-nicknames',
+  imports: [
+    HeaderComponent,
+    NgOptimizedImage,
+    RouterLink
+  ],
+  templateUrl: './nicknames.component.html',
+  styleUrl: './nicknames.component.scss'
+})
+export class NicknamesComponent {
+
+}

frontend/src/app/ranks/ranks.component.html

@@ -0,0 +1,228 @@
+<ng-container>
+  <app-header [current_page]="'ranks'" height="460px" background_image="/public/img/backgrounds/118fjord.png"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Server Ranks</h1>
+      <h2>The standard ranks are unlocked by playing on the server. As you accumulate time you will automatically rank
+        up. Do /rank to check your playtime.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <table>
+          <thead>
+          <tr>
+            <th scope="col" class="tableTitle">Rank</th>
+            <th scope="col" class="tableTitle">Requirements</th>
+            <th scope="col" class="tableTitle">Perks</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Drifter</span>]</td>
+            <td data-label="Requirements">Join the server!</td>
+            <td data-label="Perks" class="perks">
+              All basic permissions<br>
+              Up to 3 homes in survival<br>
+              Up to 2 MyPet slots<br>
+              Up to 5 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Nomad</span>]</td>
+            <td data-label="Requirements">Play for 2 hours</td>
+            <td data-label="Perks" class="perks">
+              Up to 4 homes in survival<br>
+              Up to 3 MyPet slots<br>
+              Up to 10 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Peddler</span>]</td>
+            <td data-label="Requirements">Play for 1 day</td>
+            <td data-label="Perks" class="perks">
+              Up to 5 homes in survival<br>
+              Up to 4 MyPet slots<br>
+              Up to 15 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Settler</span>]</td>
+            <td data-label="Requirements">Play for 3 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 6 homes in survival<br>
+              Up to 5 MyPet slots<br>
+              Up to 20 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Resident</span>]</td>
+            <td data-label="Requirements">Play for 7 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 7 homes in survival<br>
+              Up to 6 MyPet slots<br>
+              Up to 25 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Esquire</span>]</td>
+            <td data-label="Requirements">Play for 14 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 8 homes in survival<br>
+              Up to 7 MyPet slots<br>
+              Up to 30 claims in survival
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Knight</span>]</td>
+            <td data-label="Requirements">Play for 30 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 9 homes in survival<br>
+              Up to 8 MyPet slots
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Baron</span>]</td>
+            <td data-label="Requirements">Play for 60 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 10 homes in survival<br>
+              Up to 9 MyPet slots
+            </td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank1">Viscount</span>]</td>
+            <td data-label="Requirements">Play for 180 days</td>
+            <td data-label="Perks" class="perks">
+              Up to 11 homes in survival<br>
+              Up to 9 MyPet slots
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <section id="subheaderDonor">
+      <div class="title" style="margin-top: 0; height: 100%;">
+        <h1>Premium Ranks</h1>
+        <h2>Premium ranks are a symbol of those who have purchased a rank to support the server. Purchase a rank today
+          at: <a href="https://store.alttd.com">donate.alttd.com</a>. Thank you!</h2>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <table style="width:100%">
+          <thead>
+          <tr>
+            <th scope="col" class="tableTitle">Rank</th>
+            <th scope="col" class="tableTitle">Requirements</th>
+            <th scope="col" class="tableTitle">Perks</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Count</span>]</td>
+            <td data-label="Requirements">Purchase for $15 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Donor Discord channel access<br>
+              Up to 12 homes in survival<br>
+              Up to 10 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Viceroy</span>]</td>
+            <td data-label="Requirements">Purchase for $30 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Priority queue for full servers<br>
+              Up to 13 homes in survival<br>
+              Up to 18 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Duke</span>]</td>
+            <td data-label="Requirements">Purchase for $50 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Nickname in chat<br>
+              Up to 14 homes in survival<br>
+              Up to 27 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">Archduke</span>]</td>
+            <td data-label="Requirements">Purchase for $100 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Custom prefix in chat<br>
+              Up to 16 homes in survival<br>
+              Up to 36 MyPet slots<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank2">α</span>]</td>
+            <td data-label="Requirements">Purchase for $25 on <a href="https://store.alttd.com">Buycraft</a></td>
+            <td data-label="Perks" class="perks">
+              Time-limited rank<br>
+              Access to alpha testing<br>
+              This custom prefix<br>
+              More on the <a href="https://store.alttd.com/category/514458">store page</a></td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank4">▲</span>]</td>
+            <td data-label="Requirements">Boosting with <a href="https://discordapp.com/nitro">Discord Nitro</a></td>
+            <td data-label="Perks" class="perks">
+              Discord Nitro perks<br>
+              This custom prefix
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <section id="subheaderCommunity">
+      <div class="title" style="margin-top: 0; height: 100%;">
+        <h1>Community Ranks</h1>
+        <h2>Community ranks are for talented people who support Altitude in more than one way.</h2>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container">
+        <table style="width:100%">
+          <thead>
+          <tr>
+            <th scope="col" class="tableTitle">Rank</th>
+            <th scope="col" class="tableTitle">Requirements</th>
+            <th scope="col" class="tableTitle">Perks</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Social Media</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Streamer</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">YouTube</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">/record<br>/ptime<br>/pweather</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Event Leader</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">Build perms on event server</td>
+          </tr>
+          <tr>
+            <td data-label="Rank" class="rankTitle">[<span class="rank5">Event Team</span>]</td>
+            <td data-label="Requirements">See requirements on the <a href="/community.php">Community</a> page</td>
+            <td data-label="Perks" class="perks">Build perms on event server</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/ranks/ranks.component.scss

@@ -0,0 +1,151 @@
+#subheaderDonor {
+  height: 350px;
+  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
+  background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/newtown.jpg");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  text-align: center;
+}
+
+#subheaderCommunity {
+  height: 350px;
+  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
+  background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/caruselimage4.png");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  text-align: center;
+}
+
+td,
+th {
+  font-family: 'opensans', sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  table-layout: fixed;
+}
+
+table tr {
+  padding: .35em;
+}
+
+table th,
+table td {
+  padding: .625em;
+  text-align: center;
+}
+
+table th {
+  font-size: .85em;
+}
+
+.perks {
+  text-align: left;
+  padding-left: 105px;
+}
+
+.tableTitle {
+  font-family: 'opensans-bold', sans-serif;
+  font-size: 1.5em;
+}
+
+.rankTitle {
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.rank1 {
+  color: #265ac9;
+}
+
+.rank2 {
+  color: #980399;
+}
+
+.rank3 {
+  color: #0c3999;
+}
+
+.rank4 {
+  color: #c949c9;
+}
+
+.rank5 {
+  color: #ffaa00;
+}
+
+@media (max-width: 1200px) {
+  .perks {
+    padding-left: 80px;
+  }
+}
+
+@media (max-width: 900px) {
+  .perks {
+    padding-left: 50px;
+  }
+}
+
+@media (max-width: 690px) {
+  main .container {
+    width: 80% !important;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  table {
+    border: 0;
+  }
+
+  table th,
+  table td {
+    padding: .400em;
+  }
+
+  table thead {
+    border: none;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  table tr {
+    display: block;
+    margin-bottom: .625em;
+  }
+
+  table td {
+    display: block;
+    font-size: .8em;
+    text-align: right;
+  }
+
+  table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  table td:last-child {
+    border-bottom: 0;
+  }
+
+  .perks {
+    text-align: right;
+    padding-left: 6px;
+  }
+}

frontend/src/app/ranks/ranks.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RanksComponent } from './ranks.component';
+
+describe('RanksComponent', () => {
+  let component: RanksComponent;
+  let fixture: ComponentFixture<RanksComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RanksComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RanksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/ranks/ranks.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-ranks',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './ranks.component.html',
+  styleUrl: './ranks.component.scss'
+})
+export class RanksComponent {
+
+}

frontend/src/app/rules/rules.component.html

@@ -40,7 +40,7 @@
             <li>You can talk about current events and real-world topics. However, if staff recognizes the topic is
               causing players to become uncomfortable, they may shut the conversation down.
               <ul class="full-page-list-2">
-                <li>You are welcome to take conversations regarding sensitive topics to dm's and party chat with people
+                <li>You are welcome to take conversations regarding sensitive topics to DMs and party chat with people
                   who want to be involved, or off the server.
                 </li>
               </ul>

frontend/src/app/services/auth.service.ts

@@ -0,0 +1,115 @@
+import {Injectable} from '@angular/core';
+import {LoginService} from '../../api';
+import {CookieService} from 'ngx-cookie-service';
+import {BehaviorSubject, Observable, throwError} from 'rxjs';
+import {catchError, tap} from 'rxjs/operators';
+import {MatSnackBar} from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
+  public isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
+
+  private userClaimsSubject = new BehaviorSubject<any>(null);
+  public userClaims$ = this.userClaimsSubject.asObservable();
+
+  constructor(
+    private loginService: LoginService,
+    private cookieService: CookieService,
+    private snackBar: MatSnackBar
+  ) {
+    // Check if user is already logged in on service initialization
+    this.checkAuthStatus();
+  }
+
+  /**
+   * Attempt to login with the provided code
+   */
+  public login(code: string): Observable<any> {
+    return this.loginService.login(code).pipe(
+      tap(jwt => {
+        this.saveJwt(jwt as JsonWebKey);
+        this.isAuthenticatedSubject.next(true);
+      }),
+      catchError(error => {
+        this.snackBar.open('Login failed', '', {duration: 2000});
+        return throwError(() => error);
+      })
+    );
+  }
+
+  /**
+   * Log the user out by removing the JWT
+   */
+  public logout(): void {
+    this.cookieService.delete('jwt', '/');
+    this.isAuthenticatedSubject.next(false);
+    this.userClaimsSubject.next(null);
+  }
+
+  /**
+   * Check if the user is authenticated
+   */
+  public checkAuthStatus(): boolean {
+    const jwt = this.getJwt();
+    if (jwt) {
+      try {
+        const claims = this.extractJwtClaims(jwt as JsonWebKey);
+        // Check if token is expired
+        const currentTime = Math.floor(Date.now() / 1000);
+        if (claims.exp && claims.exp < currentTime) {
+          this.logout();
+          return false;
+        }
+
+        this.userClaimsSubject.next(claims);
+        this.isAuthenticatedSubject.next(true);
+        return true;
+      } catch (e) {
+        this.logout();
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Get the JWT from cookies
+   */
+  public getJwt(): string | null {
+    return this.cookieService.check('jwt') ? this.cookieService.get('jwt') : null;
+  }
+
+  /**
+   * Save the JWT to cookies
+   */
+  private saveJwt(jwt: JsonWebKey): void {
+    this.cookieService.set('jwt', jwt.toString(), {
+      path: '/',
+      secure: true,
+      sameSite: 'Strict'
+    });
+
+    const claims = this.extractJwtClaims(jwt);
+    this.userClaimsSubject.next(claims);
+  }
+
+  /**
+   * Extract claims from JWT
+   */
+  private extractJwtClaims(jwt: JsonWebKey): any {
+    const token = jwt.toString();
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(window.atob(base64));
+  }
+
+  /**
+   * Get user authorizations from claims
+   */
+  public getUserAuthorizations(): string[] {
+    const claims = this.userClaimsSubject.getValue();
+    return claims?.authorizations || [];
+  }
+}

frontend/src/app/skyblock/skyblock.component.html

@@ -0,0 +1,123 @@
+<ng-container>
+  <app-header [current_page]="'skyblock'" height="460px" background_image="/public/img/backgrounds/babywither.png"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Skyblock</h1>
+      <h2>A skyblock server blending vanilla gameplay with unique enhancements for an elevated, community-driven sky
+        adventure.</h2>
+    </div>
+  </app-header>
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Discover Comet</h2>
+            <p>Welcome to Comet, a skyblock server that offers players a unique blend of the features you know and love
+              with a dash of exiciting enhancements to elevate your sky-high adventure.</p>
+            <p>The heart of the skyblock challenge is the same as your traditional experience: start on a small island
+              in the sky with limited resources and aim to expand your domain and conquer the endless void. However,
+              Comet is not your ordinary skyblock experience. We've carefully introduced a selection of enhancements to
+              enrich the gameplay without overwhelming the core vanilla experience that players love and cherish.</p>
+            <p style="padding-bottom: 5px !important;">Some of the key features and enhancements includes:</p>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Explorable Biomes:</span> All islands are on
+                the same public seed, you can expand your island and explore to find different biomes. Certain mobs only
+                spawn in certain biomes.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Dynamic Economy:</span> Engage with our
+                vibrant server economy, where you can trade items with other players, visit the spawn shops or even set
+                up your own shops on your island.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Custom Achievements:</span> Beyond the
+                traditional skyblock objectives, Comet introduces a series of custom achievements which will test your
+                skills and reward you with valuable resources and unique items.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">Cooperative Play:</span> Team up with friends
+                or make new allies to build your sky empire together.
+              </li>
+            </ul>
+            <p style="padding-top: 10px;">Comet is the perfect experience for those who love skyblock but crave a bit
+              more excitement and community interaction. Whether you're a seasoned player or new to the sky life, Comet
+              provides a rich platform for exploration, creativity and fun.</p>
+            <p>Join Comet today and discover that in the world of skyblock, the sky is just the beginning.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island -</span> Opens a GUI where you can see
+                information about your island, change settings and do upgrades
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island go -</span> Start a new island or go
+                to your current island
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island invite &lt;username&gt; -</span>
+                Invite a player to your island
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island kick &lt;username&gt; -</span> Kick a
+                player from your island
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island leave -</span> Leave your current
+                island
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island restart -</span> Reset your island
+                without affecting removing your island members
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island setowner &lt;username&gt; -</span> Set
+                a new owner of your current island
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/island visit &lt;username&gt; -</span> Visit
+                the specificed player's island
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Cobble Generator Levels</h2>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">Note:</span> Did you mess up your generator and
+              accidentally made an obsidian block? No fear, simply right click the obsidian with your bucket and it will
+              change lava in your bucket!</p>
+            <ul>
+              <p style="padding-bottom: 5px !important;">Level 1, coal</p>
+              <li>Island level 20</li>
+              <li>64 cobblestone</li>
+              <p style="padding-bottom: 5px !important;">Level 2, iron</p>
+              <li>Island level 35</li>
+              <li>128 cobblestone</li>
+              <li>35 coal</li>
+              <p style="padding-bottom: 5px !important;">Level 3, redstone</p>
+              <li>Island level 50</li>
+              <li>192 cobblestone</li>
+              <li>50 iron</li>
+              <p style="padding-bottom: 5px !important;">Level 4, lapis</p>
+              <li>Island level 60</li>
+              <li>256 cobblestone</li>
+              <li>60 redstone</li>
+              <p style="padding-bottom: 5px !important;">Level 5, copper</p>
+              <li>Island level 70</li>
+              <li>320 cobblestone</li>
+              <li>70 lapis</li>
+              <p style="padding-bottom: 5px !important;">Level 6, gold</p>
+              <li>Island level 80</li>
+              <li>384 cobblestone</li>
+              <li>80 copper</li>
+              <p style="padding-bottom: 5px !important;">Level 7, emerald</p>
+              <li>Island level 90</li>
+              <li>448 cobblestone</li>
+              <li>90 gold</li>
+              <p style="padding-bottom: 5px !important;">Level 8, diamond</p>
+              <li>Island level 100</li>
+              <li>512 cobblestone</li>
+              <li>100 emerald</li>
+              <p style="padding-bottom: 5px !important;">Level 9, ancient debris</p>
+              <li>Island level 150</li>
+              <li>576 cobblestone</li>
+              <li>150 diamond</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/skyblock/skyblock.component.scss

@@ -0,0 +1,9 @@
+main ul {
+  font-family: opensans, sans-serif;
+  text-align: left;
+}
+
+main li {
+  margin-left: 30px;
+  padding-bottom: 10px;
+}