feat: NCS-63 User account implementation #2
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"features": {
|
||||||
|
"ghcr.io/devcontainer-config/features/dot-config:4": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "ghcr.io/devcontainer-config/features/dot-config@sha256:d9ca770ccb218e619d5725fd50f00dfacdf582d92a8c3901f11b53b1caddd878",
|
||||||
|
"integrity": "sha256:d9ca770ccb218e619d5725fd50f00dfacdf582d92a8c3901f11b53b1caddd878"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||||
|
// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
|
||||||
|
{
|
||||||
|
"name": "Alpine",
|
||||||
|
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||||
|
"image": "mcr.microsoft.com/devcontainers/base:alpine-3.22",
|
||||||
|
"features": {
|
||||||
|
"ghcr.io/devcontainer-config/features/dot-config:4": {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Features to add to the dev container. More info: https://containers.dev/features.
|
||||||
|
// "features": {},
|
||||||
|
|
||||||
|
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||||
|
// "forwardPorts": [],
|
||||||
|
|
||||||
|
// Use 'postCreateCommand' to run commands after the container is created.
|
||||||
|
// "postCreateCommand": "uname -a",
|
||||||
|
|
||||||
|
// Configure tool-specific properties.
|
||||||
|
// "customizations": {},
|
||||||
|
|
||||||
|
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
|
||||||
|
// "remoteUser": "root"
|
||||||
|
}
|
||||||
+5
-2
@@ -2,7 +2,8 @@
|
|||||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
"version": 1,
|
"version": 1,
|
||||||
"cli": {
|
"cli": {
|
||||||
"packageManager": "npm"
|
"packageManager": "npm",
|
||||||
|
"analytics": false
|
||||||
},
|
},
|
||||||
"newProjectRoot": "projects",
|
"newProjectRoot": "projects",
|
||||||
"projects": {
|
"projects": {
|
||||||
@@ -74,7 +75,9 @@
|
|||||||
"serve": {
|
"serve": {
|
||||||
"builder": "@angular/build:dev-server",
|
"builder": "@angular/build:dev-server",
|
||||||
"options": {
|
"options": {
|
||||||
"proxyConfig": "proxy.conf.json"
|
"proxyConfig": "proxy.conf.json",
|
||||||
|
"host": "0.0.0.0",
|
||||||
|
"port": 4200
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
|
|||||||
Generated
+3
-24
@@ -458,7 +458,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.19.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.19.tgz",
|
||||||
"integrity": "sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA==",
|
"integrity": "sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.3.0"
|
"tslib": "^2.3.0"
|
||||||
},
|
},
|
||||||
@@ -475,7 +474,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.19.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.19.tgz",
|
||||||
"integrity": "sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA==",
|
"integrity": "sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.3.0"
|
"tslib": "^2.3.0"
|
||||||
},
|
},
|
||||||
@@ -489,7 +487,6 @@
|
|||||||
"integrity": "sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA==",
|
"integrity": "sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "7.28.3",
|
"@babel/core": "7.28.3",
|
||||||
"@jridgewell/sourcemap-codec": "^1.4.14",
|
"@jridgewell/sourcemap-codec": "^1.4.14",
|
||||||
@@ -522,7 +519,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.19.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.19.tgz",
|
||||||
"integrity": "sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA==",
|
"integrity": "sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.3.0"
|
"tslib": "^2.3.0"
|
||||||
},
|
},
|
||||||
@@ -566,7 +562,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.19.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.19.tgz",
|
||||||
"integrity": "sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w==",
|
"integrity": "sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.3.0"
|
"tslib": "^2.3.0"
|
||||||
},
|
},
|
||||||
@@ -633,7 +628,6 @@
|
|||||||
"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
|
"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ampproject/remapping": "^2.2.0",
|
"@ampproject/remapping": "^2.2.0",
|
||||||
"@babel/code-frame": "^7.27.1",
|
"@babel/code-frame": "^7.27.1",
|
||||||
@@ -1607,7 +1601,6 @@
|
|||||||
"integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
|
"integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@inquirer/checkbox": "^4.2.1",
|
"@inquirer/checkbox": "^4.2.1",
|
||||||
"@inquirer/confirm": "^5.1.14",
|
"@inquirer/confirm": "^5.1.14",
|
||||||
@@ -3538,7 +3531,6 @@
|
|||||||
"integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
|
"integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"undici-types": "~7.19.0"
|
"undici-types": "~7.19.0"
|
||||||
}
|
}
|
||||||
@@ -3895,7 +3887,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.10.12",
|
"baseline-browser-mapping": "^2.10.12",
|
||||||
"caniuse-lite": "^1.0.30001782",
|
"caniuse-lite": "^1.0.30001782",
|
||||||
@@ -4911,7 +4902,6 @@
|
|||||||
"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
|
"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"accepts": "^2.0.0",
|
"accepts": "^2.0.0",
|
||||||
"body-parser": "^2.2.1",
|
"body-parser": "^2.2.1",
|
||||||
@@ -5353,7 +5343,6 @@
|
|||||||
"integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
|
"integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=16.9.0"
|
"node": ">=16.9.0"
|
||||||
}
|
}
|
||||||
@@ -5850,8 +5839,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
|
||||||
"integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
|
"integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/jose": {
|
"node_modules/jose": {
|
||||||
"version": "6.2.2",
|
"version": "6.2.2",
|
||||||
@@ -5953,7 +5941,6 @@
|
|||||||
"integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
|
"integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@colors/colors": "1.5.0",
|
"@colors/colors": "1.5.0",
|
||||||
"body-parser": "^1.19.0",
|
"body-parser": "^1.19.0",
|
||||||
@@ -6421,7 +6408,6 @@
|
|||||||
"integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
|
"integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cli-truncate": "^4.0.0",
|
"cli-truncate": "^4.0.0",
|
||||||
"colorette": "^2.0.20",
|
"colorette": "^2.0.20",
|
||||||
@@ -7934,7 +7920,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
|
||||||
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
|
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.1.0"
|
"tslib": "^2.1.0"
|
||||||
}
|
}
|
||||||
@@ -7970,7 +7955,6 @@
|
|||||||
"integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
|
"integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": "^4.0.0",
|
"chokidar": "^4.0.0",
|
||||||
"immutable": "^5.0.2",
|
"immutable": "^5.0.2",
|
||||||
@@ -8590,8 +8574,7 @@
|
|||||||
"version": "2.8.1",
|
"version": "2.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
"license": "0BSD",
|
"license": "0BSD"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/tuf-js": {
|
"node_modules/tuf-js": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
@@ -8629,7 +8612,6 @@
|
|||||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
"tsserver": "bin/tsserver"
|
"tsserver": "bin/tsserver"
|
||||||
@@ -8759,7 +8741,6 @@
|
|||||||
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
|
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.27.0",
|
"esbuild": "^0.27.0",
|
||||||
"fdir": "^6.5.0",
|
"fdir": "^6.5.0",
|
||||||
@@ -9557,7 +9538,6 @@
|
|||||||
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
|
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/colinhacks"
|
"url": "https://github.com/sponsors/colinhacks"
|
||||||
}
|
}
|
||||||
@@ -9576,8 +9556,7 @@
|
|||||||
"version": "0.15.1",
|
"version": "0.15.1",
|
||||||
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
|
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
|
||||||
"integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
|
"integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-1
@@ -1,8 +1,18 @@
|
|||||||
{
|
{
|
||||||
|
"/api/account": {
|
||||||
|
"target": "http://localhost:8083",
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true
|
||||||
|
},
|
||||||
|
"/api/challenge": {
|
||||||
|
"target": "http://localhost:8083",
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true
|
||||||
|
},
|
||||||
"/api": {
|
"/api": {
|
||||||
"target": "http://localhost:8080",
|
"target": "http://localhost:8080",
|
||||||
"secure": false,
|
"secure": false,
|
||||||
"changeOrigin": true,
|
"changeOrigin": true,
|
||||||
"ws": true
|
"ws": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,14 +1,15 @@
|
|||||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
|
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
|
||||||
import { provideHttpClient } from '@angular/common/http';
|
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||||
import { provideRouter } from '@angular/router';
|
import { provideRouter } from '@angular/router';
|
||||||
|
|
||||||
import { routes } from './app.routes';
|
import { routes } from './app.routes';
|
||||||
|
import { authInterceptor } from './services/auth.interceptor';
|
||||||
|
|
||||||
export const appConfig: ApplicationConfig = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [
|
providers: [
|
||||||
provideBrowserGlobalErrorListeners(),
|
provideBrowserGlobalErrorListeners(),
|
||||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||||
provideHttpClient(),
|
provideHttpClient(withInterceptors([authInterceptor])),
|
||||||
provideRouter(routes)
|
provideRouter(routes)
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1 +1,2 @@
|
|||||||
|
<app-toolbar />
|
||||||
<router-outlet />
|
<router-outlet />
|
||||||
|
|||||||
+6
-9
@@ -1,21 +1,18 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
import { ToolbarComponent } from './components/toolbar/toolbar.component';
|
||||||
|
import { ThemeService } from './services/theme.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [RouterOutlet],
|
imports: [RouterOutlet, ToolbarComponent],
|
||||||
templateUrl: './app.html',
|
templateUrl: './app.html',
|
||||||
styleUrl: './app.css'
|
styleUrl: './app.css'
|
||||||
})
|
})
|
||||||
export class App implements OnInit {
|
export class App implements OnInit {
|
||||||
ngOnInit(): void {
|
constructor(private readonly themeService: ThemeService) {}
|
||||||
this.initTheme();
|
|
||||||
}
|
|
||||||
|
|
||||||
private initTheme(): void {
|
ngOnInit(): void {
|
||||||
const savedTheme = localStorage.getItem('theme');
|
this.themeService.initTheme();
|
||||||
if (savedTheme === 'dark') {
|
|
||||||
document.documentElement.setAttribute('data-theme', 'dark');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,97 @@
|
|||||||
|
.dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(2, 2, 10, 0.58);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
z-index: 350;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-card {
|
||||||
|
width: min(460px, 100%);
|
||||||
|
background: var(--dlg-bg);
|
||||||
|
border: 1.5px solid var(--dlg-border);
|
||||||
|
box-shadow: var(--bb-glow);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-title {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 22px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: var(--bb-title);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.6rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-btn {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 120px;
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--btn-fg);
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
font-family: 'Space Mono', monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: var(--btn-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-btn:hover:enabled {
|
||||||
|
filter: brightness(1.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-btn:disabled {
|
||||||
|
opacity: 0.65;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-input {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(4, 4, 20, 0.62);
|
||||||
|
border: 1px solid var(--bb-border);
|
||||||
|
color: var(--bb-title);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0.6rem 0.7rem;
|
||||||
|
font-family: 'Space Mono', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-input:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-textarea {
|
||||||
|
min-height: 120px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-danger {
|
||||||
|
color: #dc3545;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
height: 1px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: -1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
clip: rect(0, 0, 0, 0) !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<div class="dialog-overlay" (click)="closeDialog()">
|
||||||
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||||
|
<div class="dialog-title">LOGIN</div>
|
||||||
|
|
||||||
|
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
|
||||||
|
<label for="username" class="sr-only">Username</label>
|
||||||
|
<input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
|
||||||
|
[disabled]="isLoading" />
|
||||||
|
@if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
|
||||||
|
<small class="text-danger">Username must be at least 3 characters</small>
|
||||||
|
}
|
||||||
|
|
||||||
|
<label for="password" class="sr-only">Password</label>
|
||||||
|
<input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
|
||||||
|
[disabled]="isLoading" />
|
||||||
|
@if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
|
||||||
|
<small class="text-danger">Password must be at least 6 characters</small>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (errorMessage) {
|
||||||
|
<div class="error-banner">{{ errorMessage }}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="dialog-actions">
|
||||||
|
<button type="button" class="dialog-btn" (click)="openRegister()">Create account</button>
|
||||||
|
<button type="button" class="dialog-btn" (click)="closeDialog()">Cancel</button>
|
||||||
|
<button type="button" class="dialog-btn" (click)="onSubmit()" [disabled]="isLoading || loginForm.invalid">
|
||||||
|
@if (isLoading) {
|
||||||
|
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||||
|
}
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import { Component, EventEmitter, Output, inject } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
|
import { AuthService } from '../../services/auth.service';
|
||||||
|
import { AuthDialogService } from '../../services/auth-dialog.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-login-dialog',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ReactiveFormsModule],
|
||||||
|
templateUrl: './login-dialog.component.html',
|
||||||
|
styleUrl: './login-dialog.component.css'
|
||||||
|
})
|
||||||
|
export class LoginDialogComponent {
|
||||||
|
@Output() onClose = new EventEmitter<void>();
|
||||||
|
@Output() onSuccess = new EventEmitter<void>();
|
||||||
|
|
||||||
|
private readonly authService = inject(AuthService);
|
||||||
|
private readonly authDialogService = inject(AuthDialogService);
|
||||||
|
private readonly formBuilder = inject(FormBuilder);
|
||||||
|
|
||||||
|
loginForm: FormGroup;
|
||||||
|
errorMessage: string | null = null;
|
||||||
|
isLoading = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loginForm = this.formBuilder.group({
|
||||||
|
username: ['', [Validators.required, Validators.minLength(3)]],
|
||||||
|
password: ['', [Validators.required, Validators.minLength(6)]]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
if (this.loginForm.invalid) {
|
||||||
|
this.errorMessage = 'Please fill in all fields correctly';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
this.errorMessage = null;
|
||||||
|
|
||||||
|
const { username, password } = this.loginForm.value;
|
||||||
|
this.authService.login(username, password).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.isLoading = false;
|
||||||
|
this.onSuccess.emit();
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.isLoading = false;
|
||||||
|
this.errorMessage = err.error?.message || 'Login failed. Please try again.';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDialog(): void {
|
||||||
|
this.onClose.emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
openRegister(): void {
|
||||||
|
this.authDialogService.openRegister();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
.dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(2, 2, 10, 0.58);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
z-index: 350;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-card {
|
||||||
|
width: min(460px, 100%);
|
||||||
|
background: var(--dlg-bg);
|
||||||
|
border: 1.5px solid var(--dlg-border);
|
||||||
|
box-shadow: var(--bb-glow);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-title {
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 22px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: var(--bb-title);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.6rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-btn {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 120px;
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--btn-fg);
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
font-family: 'Space Mono', monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: var(--btn-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-btn:hover:enabled {
|
||||||
|
filter: brightness(1.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-btn:disabled {
|
||||||
|
opacity: 0.65;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-input {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(4, 4, 20, 0.62);
|
||||||
|
border: 1px solid var(--bb-border);
|
||||||
|
color: var(--bb-title);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0.6rem 0.7rem;
|
||||||
|
font-family: 'Space Mono', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-input:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-textarea {
|
||||||
|
min-height: 120px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-danger {
|
||||||
|
color: #dc3545;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
height: 1px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: -1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
clip: rect(0, 0, 0, 0) !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<div class="dialog-overlay" (click)="closeDialog()">
|
||||||
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||||
|
<div class="dialog-title">CREATE ACCOUNT</div>
|
||||||
|
|
||||||
|
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
|
||||||
|
<input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
|
||||||
|
[disabled]="isLoading" />
|
||||||
|
@if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
|
||||||
|
<small class="text-danger">Username must be at least 3 characters</small>
|
||||||
|
}
|
||||||
|
|
||||||
|
<input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email"
|
||||||
|
[disabled]="isLoading" />
|
||||||
|
@if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
|
||||||
|
<small class="text-danger">Please enter a valid email</small>
|
||||||
|
}
|
||||||
|
|
||||||
|
<input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
|
||||||
|
[disabled]="isLoading" />
|
||||||
|
@if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
|
||||||
|
<small class="text-danger">Password must be at least 6 characters</small>
|
||||||
|
}
|
||||||
|
|
||||||
|
<input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
|
||||||
|
placeholder="Confirm Password" [disabled]="isLoading" />
|
||||||
|
|
||||||
|
@if (errorMessage) {
|
||||||
|
<div class="error-banner">{{ errorMessage }}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="dialog-actions">
|
||||||
|
<button type="button" class="dialog-btn" (click)="openLogin()">Already have an account?</button>
|
||||||
|
<button type="button" class="dialog-btn" (click)="closeDialog()">Cancel</button>
|
||||||
|
<button type="button" class="dialog-btn" (click)="onSubmit()" [disabled]="isLoading || registerForm.invalid">
|
||||||
|
@if (isLoading) {
|
||||||
|
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||||
|
}
|
||||||
|
Register
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import { Component, EventEmitter, Output, inject } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
|
import { AuthService } from '../../services/auth.service';
|
||||||
|
import { AuthDialogService } from '../../services/auth-dialog.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-register-dialog',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ReactiveFormsModule],
|
||||||
|
templateUrl: './register-dialog.component.html',
|
||||||
|
styleUrl: './register-dialog.component.css'
|
||||||
|
})
|
||||||
|
export class RegisterDialogComponent {
|
||||||
|
@Output() onClose = new EventEmitter<void>();
|
||||||
|
@Output() onSuccess = new EventEmitter<void>();
|
||||||
|
|
||||||
|
private readonly authService = inject(AuthService);
|
||||||
|
private readonly authDialogService = inject(AuthDialogService);
|
||||||
|
private readonly formBuilder = inject(FormBuilder);
|
||||||
|
|
||||||
|
registerForm: FormGroup;
|
||||||
|
errorMessage: string | null = null;
|
||||||
|
isLoading = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.registerForm = this.formBuilder.group({
|
||||||
|
username: ['', [Validators.required, Validators.minLength(3)]],
|
||||||
|
email: ['', [Validators.required, Validators.email]],
|
||||||
|
password: ['', [Validators.required, Validators.minLength(6)]],
|
||||||
|
confirmPassword: ['', [Validators.required]]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
if (this.registerForm.invalid) {
|
||||||
|
this.errorMessage = 'Please fill in all fields correctly';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { password, confirmPassword } = this.registerForm.value;
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
this.errorMessage = 'Passwords do not match';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
this.errorMessage = null;
|
||||||
|
|
||||||
|
const { username, email, password: pwd } = this.registerForm.value;
|
||||||
|
this.authService.register(username, pwd, email).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.isLoading = false;
|
||||||
|
this.onSuccess.emit();
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.isLoading = false;
|
||||||
|
this.errorMessage =
|
||||||
|
err.error?.message || 'Registration failed. Please try again.';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDialog(): void {
|
||||||
|
this.onClose.emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
openLogin(): void {
|
||||||
|
this.authDialogService.openLogin();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
.navbar {
|
||||||
|
background: var(--dlg-bg);
|
||||||
|
border: 1.5px solid var(--dlg-border);
|
||||||
|
box-shadow: var(--bb-glow);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--bb-title) !important;
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-2 {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<nav class="navbar">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<span class="navbar-brand">NowChess</span>
|
||||||
|
<div class="ms-auto">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<button type="button" class="dialog-btn" (click)="toggleTheme()">
|
||||||
|
{{ isDarkMode ? 'Light mode' : 'Dark mode' }}
|
||||||
|
</button>
|
||||||
|
@if (currentUser; as user) {
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<span style="color:var(--bb-title);font-weight:700">{{ user.username }}</span>
|
||||||
|
<button class="dialog-btn" (click)="logout()">Logout</button>
|
||||||
|
</div>
|
||||||
|
} @else {
|
||||||
|
<button class="dialog-btn" (click)="openLoginDialog()">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
<button class="dialog-btn" (click)="openRegisterDialog()">
|
||||||
|
Register
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
@if (showLoginDialog) {
|
||||||
|
<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (showRegisterDialog) {
|
||||||
|
<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||||
|
import { AuthService } from '../../services/auth.service';
|
||||||
|
import { AuthDialogService } from '../../services/auth-dialog.service';
|
||||||
|
import { CurrentUser } from '../../models/auth.models';
|
||||||
|
import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
|
||||||
|
import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
|
||||||
|
import { ThemeService } from '../../services/theme.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-toolbar',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
|
||||||
|
templateUrl: './toolbar.component.html',
|
||||||
|
styleUrl: './toolbar.component.css'
|
||||||
|
})
|
||||||
|
export class ToolbarComponent implements OnInit {
|
||||||
|
private readonly destroyRef = inject(DestroyRef);
|
||||||
|
private readonly authService = inject(AuthService);
|
||||||
|
private readonly authDialogService = inject(AuthDialogService);
|
||||||
|
private readonly themeService = inject(ThemeService);
|
||||||
|
|
||||||
|
currentUser: CurrentUser | null = null;
|
||||||
|
showLoginDialog = false;
|
||||||
|
showRegisterDialog = false;
|
||||||
|
isDarkMode = false;
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.authService.currentUser$
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe((user) => {
|
||||||
|
this.currentUser = user;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.authDialogService.dialogState$
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe((state) => {
|
||||||
|
this.showLoginDialog = state === 'login';
|
||||||
|
this.showRegisterDialog = state === 'register';
|
||||||
|
});
|
||||||
|
|
||||||
|
this.themeService.darkMode$
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe((isDarkMode) => {
|
||||||
|
this.isDarkMode = isDarkMode;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
openLoginDialog(): void {
|
||||||
|
this.authDialogService.openLogin();
|
||||||
|
}
|
||||||
|
|
||||||
|
closeLoginDialog(): void {
|
||||||
|
this.authDialogService.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
openRegisterDialog(): void {
|
||||||
|
this.authDialogService.openRegister();
|
||||||
|
}
|
||||||
|
|
||||||
|
closeRegisterDialog(): void {
|
||||||
|
this.authDialogService.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
logout(): void {
|
||||||
|
this.authService.logout();
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleTheme(): void {
|
||||||
|
this.themeService.toggleTheme();
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoginSuccess(): void {
|
||||||
|
this.closeLoginDialog();
|
||||||
|
}
|
||||||
|
|
||||||
|
onRegisterSuccess(): void {
|
||||||
|
this.closeRegisterDialog();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
export interface LoginRequest {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterRequest {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
email?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterResponse {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
rating: number;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoginResponse {
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CurrentUser {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
rating: number;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
@@ -1,15 +1,4 @@
|
|||||||
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
|
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
|
||||||
<div class="mode-badge">{{ modeBadge }}</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="tgl"
|
|
||||||
(click)="toggleTheme()"
|
|
||||||
[attr.aria-label]="isSunsetMode ? 'Switch to night mode' : 'Switch to sunset mode'"
|
|
||||||
title="Toggle theme"
|
|
||||||
>
|
|
||||||
<span class="tgl-icon">{{ isSunsetMode ? '🌙' : '☀' }}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="scene">
|
<div class="scene">
|
||||||
<div class="sky">
|
<div class="sky">
|
||||||
@@ -35,20 +24,12 @@
|
|||||||
<div class="ant" style="height:38px;"></div>
|
<div class="ant" style="height:38px;"></div>
|
||||||
<div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
|
<div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wA1']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
|
<div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
|
<div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wA2']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="height:36vh;">
|
<div class="bpart" style="height:36vh;">
|
||||||
@@ -62,11 +43,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wA3']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,11 +51,7 @@
|
|||||||
<div class="bwrap" style="left:21%;width:15%;">
|
<div class="bwrap" style="left:21%;width:15%;">
|
||||||
<div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
|
<div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
|
<div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wB1']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="height:44vh;">
|
<div class="bpart" style="height:44vh;">
|
||||||
@@ -95,11 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wB2']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -111,20 +80,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
|
<div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
|
<div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wC1']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="height:10vh;">
|
<div class="bpart" style="height:10vh;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
|
<div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wC2']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="height:48vh;">
|
<div class="bpart" style="height:48vh;">
|
||||||
@@ -133,17 +94,14 @@
|
|||||||
<div class="bb-tag">WELCOME</div>
|
<div class="bb-tag">WELCOME</div>
|
||||||
<div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
|
<div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
|
||||||
<div class="bb-subtitle">Play your next move from the skyline.</div>
|
<div class="bb-subtitle">Play your next move from the skyline.</div>
|
||||||
<button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()" [disabled]="creating">
|
<button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()"
|
||||||
|
[disabled]="creating">
|
||||||
{{ creating ? 'CREATING...' : 'START NOW →' }}
|
{{ creating ? 'CREATING...' : 'START NOW →' }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wins" style="grid-template-columns:repeat(7,1fr);">
|
<div class="wins" style="grid-template-columns:repeat(7,1fr);">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wC3']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -152,11 +110,7 @@
|
|||||||
<div class="ant" style="height:30px;"></div>
|
<div class="ant" style="height:30px;"></div>
|
||||||
<div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
|
<div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
|
<div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wD1']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bpart" style="height:42vh;">
|
<div class="bpart" style="height:42vh;">
|
||||||
@@ -171,11 +125,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);">
|
<div class="wins" style="grid-template-columns:repeat(6,1fr);">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wD2']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -183,11 +133,7 @@
|
|||||||
<div class="bwrap" style="left:83%;width:10%;">
|
<div class="bwrap" style="left:83%;width:10%;">
|
||||||
<div class="bpart" style="height:30vh;">
|
<div class="bpart" style="height:30vh;">
|
||||||
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
||||||
<div
|
<div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
|
||||||
class="w"
|
|
||||||
*ngFor="let win of windows['wE1']"
|
|
||||||
[ngStyle]="win.style"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -195,54 +141,46 @@
|
|||||||
|
|
||||||
<!-- Speech Bubble -->
|
<!-- Speech Bubble -->
|
||||||
@if (showSpeechBubble) {
|
@if (showSpeechBubble) {
|
||||||
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
|
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
|
||||||
<div class="speech-bubble">
|
<div class="speech-bubble">
|
||||||
<div class="bubble-text">{{ bubbleMessage }}</div>
|
<div class="bubble-text">{{ bubbleMessage }}</div>
|
||||||
<div class="bubble-tail"></div>
|
<div class="bubble-tail"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<!-- Zoomed Window View -->
|
<!-- Zoomed Window View -->
|
||||||
@if (isZoomedIn) {
|
@if (isZoomedIn) {
|
||||||
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()" (mouseleave)="onMouseUp()">
|
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
|
||||||
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
|
(mouseleave)="onMouseUp()">
|
||||||
<div class="zoom-window-frame">
|
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
|
||||||
<div class="zoom-player-2">
|
<div class="zoom-window-frame">
|
||||||
<img
|
<div class="zoom-player-2">
|
||||||
src="/assets/arabian-chess/player-two.gif"
|
<img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
|
||||||
alt="Player 2"
|
(click)="$event.stopPropagation()" />
|
||||||
class="player-2-gif"
|
@if (showSecondSpeechBubble) {
|
||||||
(click)="$event.stopPropagation()"
|
<div class="second-speech-bubble">
|
||||||
/>
|
<div class="bubble-text">Feed me! 🍖</div>
|
||||||
@if (showSecondSpeechBubble) {
|
<div class="bubble-tail"></div>
|
||||||
<div class="second-speech-bubble">
|
|
||||||
<div class="bubble-text">Feed me! 🍖</div>
|
|
||||||
<div class="bubble-tail"></div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@if (showHappyBubble) {
|
|
||||||
<div class="happy-speech-bubble">
|
|
||||||
<div class="bubble-text">Happy meow! 😸</div>
|
|
||||||
<div class="bubble-tail"></div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
@if (showHappyBubble) {
|
||||||
|
<div class="happy-speech-bubble">
|
||||||
|
<div class="bubble-text">Happy meow! 😸</div>
|
||||||
|
<div class="bubble-tail"></div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Draggable Meat Emoji -->
|
|
||||||
@if (showMeatEmoji) {
|
|
||||||
<div
|
|
||||||
class="meat-emoji"
|
|
||||||
[style.left.px]="meatX"
|
|
||||||
[style.top.px]="meatY"
|
|
||||||
(mousedown)="onMeatMouseDown($event)"
|
|
||||||
>
|
|
||||||
🍖
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Draggable Meat Emoji -->
|
||||||
|
@if (showMeatEmoji) {
|
||||||
|
<div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
|
||||||
|
🍖
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="haze"></div>
|
<div class="haze"></div>
|
||||||
@@ -250,83 +188,77 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (showDifficultyDialog) {
|
@if (showDifficultyDialog) {
|
||||||
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
|
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
|
||||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||||
<div class="dialog-title">SELECT DIFFICULTY</div>
|
<div class="dialog-title">SELECT DIFFICULTY</div>
|
||||||
<div class="dialog-actions">
|
<div class="dialog-actions">
|
||||||
<button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
|
<button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
|
||||||
<button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
|
<button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
|
||||||
<button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
|
<button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (showOptionsDialog) {
|
@if (showOptionsDialog) {
|
||||||
<div class="dialog-overlay" (click)="closeOptionsDialog()">
|
<div class="dialog-overlay" (click)="closeOptionsDialog()">
|
||||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||||
<div class="dialog-title">MORE OPTIONS</div>
|
<div class="dialog-title">MORE OPTIONS</div>
|
||||||
<div class="dialog-actions">
|
<div class="dialog-actions">
|
||||||
<button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
<button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (showJoinDialog) {
|
@if (showJoinDialog) {
|
||||||
<div class="dialog-overlay" (click)="closeJoinDialog()">
|
<div class="dialog-overlay" (click)="closeJoinDialog()">
|
||||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||||
<div class="dialog-title">JOIN GAME</div>
|
<div class="dialog-title">JOIN GAME</div>
|
||||||
<input
|
<input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
|
||||||
type="text"
|
[disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
|
||||||
class="dialog-input"
|
<div class="dialog-actions">
|
||||||
[(ngModel)]="gameIdInput"
|
<button type="button" class="dialog-btn" (click)="submitJoinGame()"
|
||||||
placeholder="Paste game ID here"
|
[disabled]="joiningGame || !gameIdInput.trim()">
|
||||||
[disabled]="joiningGame"
|
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
|
||||||
(keyup.enter)="submitJoinGame()"
|
</button>
|
||||||
/>
|
<button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
|
||||||
<div class="dialog-actions">
|
|
||||||
<button type="button" class="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
|
|
||||||
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
|
|
||||||
</button>
|
|
||||||
<button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (showImportDialog) {
|
@if (showImportDialog) {
|
||||||
<div class="dialog-overlay" (click)="closeImportDialog()">
|
<div class="dialog-overlay" (click)="closeImportDialog()">
|
||||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||||
<div class="dialog-title">IMPORT GAME</div>
|
<div class="dialog-title">IMPORT GAME</div>
|
||||||
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
|
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
|
||||||
<label class="import-mode-option">
|
<label class="import-mode-option">
|
||||||
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')" [disabled]="importing" />
|
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
|
||||||
<span>FEN</span>
|
[disabled]="importing" />
|
||||||
</label>
|
<span>FEN</span>
|
||||||
<label class="import-mode-option">
|
</label>
|
||||||
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
|
<label class="import-mode-option">
|
||||||
<span>PGN</span>
|
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
|
||||||
</label>
|
[disabled]="importing" />
|
||||||
</div>
|
<span>PGN</span>
|
||||||
<textarea
|
</label>
|
||||||
class="dialog-input dialog-textarea"
|
</div>
|
||||||
[(ngModel)]="importText"
|
<textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
|
||||||
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
|
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
|
||||||
[disabled]="importing"
|
rows="5"></textarea>
|
||||||
rows="5"
|
<div class="dialog-actions">
|
||||||
></textarea>
|
<button type="button" class="dialog-btn" (click)="submitImportGame()"
|
||||||
<div class="dialog-actions">
|
[disabled]="importing || !importText.trim()">
|
||||||
<button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
|
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
|
||||||
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
|
</button>
|
||||||
</button>
|
<button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
|
||||||
<button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (errorMessage) {
|
@if (errorMessage) {
|
||||||
<p class="error-banner">{{ errorMessage }}</p>
|
<p class="error-banner">{{ errorMessage }}</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
@@ -1,10 +1,15 @@
|
|||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
import { finalize } from 'rxjs';
|
import { finalize } from 'rxjs';
|
||||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||||
|
import { CurrentUser } from '../../models/auth.models';
|
||||||
|
import { AuthDialogService } from '../../services/auth-dialog.service';
|
||||||
|
import { AuthService } from '../../services/auth.service';
|
||||||
import { GameApiService } from '../../services/game-api.service';
|
import { GameApiService } from '../../services/game-api.service';
|
||||||
|
import { ThemeService } from '../../services/theme.service';
|
||||||
|
|
||||||
type Difficulty = 'easy' | 'medium' | 'hard';
|
type Difficulty = 'easy' | 'medium' | 'hard';
|
||||||
type ImportMode = 'fen' | 'pgn';
|
type ImportMode = 'fen' | 'pgn';
|
||||||
@@ -32,6 +37,11 @@ interface WindowCell {
|
|||||||
styleUrls: ['./welcome.component.css']
|
styleUrls: ['./welcome.component.css']
|
||||||
})
|
})
|
||||||
export class WelcomeComponent implements OnInit, OnDestroy {
|
export class WelcomeComponent implements OnInit, OnDestroy {
|
||||||
|
private readonly destroyRef = inject(DestroyRef);
|
||||||
|
private readonly authService = inject(AuthService);
|
||||||
|
private readonly authDialogService = inject(AuthDialogService);
|
||||||
|
private readonly themeService = inject(ThemeService);
|
||||||
|
|
||||||
creating = false;
|
creating = false;
|
||||||
joiningGame = false;
|
joiningGame = false;
|
||||||
importing = false;
|
importing = false;
|
||||||
@@ -48,6 +58,9 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
isSunsetMode = false;
|
isSunsetMode = false;
|
||||||
modeBadge = 'NIGHT MODE';
|
modeBadge = 'NIGHT MODE';
|
||||||
|
currentUser: CurrentUser | null = null;
|
||||||
|
private authDialogState: 'login' | 'register' | null = null;
|
||||||
|
private pendingAction: (() => void) | null = null;
|
||||||
|
|
||||||
// Speech bubble and zoom features
|
// Speech bubble and zoom features
|
||||||
showSpeechBubble = false;
|
showSpeechBubble = false;
|
||||||
@@ -82,10 +95,30 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
private readonly router: Router,
|
private readonly router: Router,
|
||||||
private readonly gameApi: GameApiService
|
private readonly gameApi: GameApiService
|
||||||
) {
|
) {
|
||||||
this.initTheme();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
this.themeService.darkMode$
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe((isDarkMode) => {
|
||||||
|
this.isSunsetMode = !isDarkMode;
|
||||||
|
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
|
||||||
|
});
|
||||||
|
|
||||||
|
this.authService.currentUser$
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe((user) => {
|
||||||
|
this.currentUser = user;
|
||||||
|
this.maybeRunPendingAction();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.authDialogService.dialogState$
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe((state) => {
|
||||||
|
this.authDialogState = state;
|
||||||
|
this.maybeRunPendingAction();
|
||||||
|
});
|
||||||
|
|
||||||
this.generateStars(220);
|
this.generateStars(220);
|
||||||
this.generateBackgroundBuildings();
|
this.generateBackgroundBuildings();
|
||||||
this.generateWindowsForAllBuildings();
|
this.generateWindowsForAllBuildings();
|
||||||
@@ -107,21 +140,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleTheme(): void {
|
openDifficultyDialog(): void {
|
||||||
this.isSunsetMode = !this.isSunsetMode;
|
if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
|
||||||
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
|
|
||||||
|
|
||||||
if (!this.isSunsetMode) {
|
|
||||||
document.documentElement.setAttribute('data-theme', 'dark');
|
|
||||||
localStorage.setItem('theme', 'dark');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.documentElement.removeAttribute('data-theme');
|
|
||||||
localStorage.removeItem('theme');
|
|
||||||
}
|
|
||||||
|
|
||||||
openDifficultyDialog(): void {
|
|
||||||
this.closeAllDialogs();
|
this.closeAllDialogs();
|
||||||
this.showDifficultyDialog = true;
|
this.showDifficultyDialog = true;
|
||||||
}
|
}
|
||||||
@@ -142,6 +165,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
openJoinDialog(): void {
|
openJoinDialog(): void {
|
||||||
|
if (!this.requireAuth(() => this.showJoinDialog = true)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.closeAllDialogs();
|
this.closeAllDialogs();
|
||||||
this.showJoinDialog = true;
|
this.showJoinDialog = true;
|
||||||
}
|
}
|
||||||
@@ -156,6 +183,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
openImportDialog(): void {
|
openImportDialog(): void {
|
||||||
|
if (!this.requireAuth(() => this.showImportDialog = true)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.closeAllDialogs();
|
this.closeAllDialogs();
|
||||||
this.showImportDialog = true;
|
this.showImportDialog = true;
|
||||||
}
|
}
|
||||||
@@ -176,101 +207,35 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
startOneVsOne(): void {
|
startOneVsOne(): void {
|
||||||
if (this.creating) {
|
if (!this.requireAuth(() => this.performStartOneVsOne())) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.errorMessage = '';
|
this.performStartOneVsOne();
|
||||||
this.creating = true;
|
|
||||||
|
|
||||||
this.gameApi
|
|
||||||
.createGame()
|
|
||||||
.pipe(finalize(() => (this.creating = false)))
|
|
||||||
.subscribe({
|
|
||||||
next: (game) => {
|
|
||||||
void this.router.navigate(['/game', game.gameId], {
|
|
||||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
|
||||||
});
|
|
||||||
},
|
|
||||||
error: (error) => {
|
|
||||||
this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
startVsBot(difficulty: Difficulty): void {
|
startVsBot(difficulty: Difficulty): void {
|
||||||
if (this.creating) {
|
if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.errorMessage = '';
|
this.performStartVsBot(difficulty);
|
||||||
this.creating = true;
|
|
||||||
this.showDifficultyDialog = false;
|
|
||||||
|
|
||||||
this.gameApi
|
|
||||||
.createGameVsBot(difficulty)
|
|
||||||
.pipe(finalize(() => (this.creating = false)))
|
|
||||||
.subscribe({
|
|
||||||
next: (game) => {
|
|
||||||
void this.router.navigate(['/game', game.gameId], {
|
|
||||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
|
||||||
});
|
|
||||||
},
|
|
||||||
error: (error) => {
|
|
||||||
this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
submitJoinGame(): void {
|
submitJoinGame(): void {
|
||||||
const gameId = this.gameIdInput.trim();
|
if (!this.requireAuth(() => this.performSubmitJoinGame())) {
|
||||||
if (this.joiningGame || !gameId) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.errorMessage = '';
|
this.performSubmitJoinGame();
|
||||||
this.joiningGame = true;
|
|
||||||
|
|
||||||
this.gameApi
|
|
||||||
.getGame(gameId)
|
|
||||||
.pipe(finalize(() => (this.joiningGame = false)))
|
|
||||||
.subscribe({
|
|
||||||
next: (game) => {
|
|
||||||
this.closeJoinDialog();
|
|
||||||
void this.router.navigate(['/game', game.gameId], {
|
|
||||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
|
||||||
});
|
|
||||||
},
|
|
||||||
error: (error) => {
|
|
||||||
this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
submitImportGame(): void {
|
submitImportGame(): void {
|
||||||
const trimmedImport = this.importText.trim();
|
if (!this.requireAuth(() => this.performSubmitImportGame())) {
|
||||||
if (this.importing || !trimmedImport) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.errorMessage = '';
|
this.performSubmitImportGame();
|
||||||
this.importing = true;
|
|
||||||
|
|
||||||
const importRequest =
|
|
||||||
this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
|
|
||||||
|
|
||||||
importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
|
|
||||||
next: (game) => {
|
|
||||||
this.closeImportDialog();
|
|
||||||
void this.router.navigate(['/game', game.gameId], {
|
|
||||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
|
||||||
});
|
|
||||||
},
|
|
||||||
error: (error) => {
|
|
||||||
const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
|
|
||||||
this.errorMessage = getErrorMessage(error, defaultMessage);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onSpeechBubbleClick(): void {
|
onSpeechBubbleClick(): void {
|
||||||
@@ -313,7 +278,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
this.meatX = event.clientX - this.meatDragOffsetX;
|
this.meatX = event.clientX - this.meatDragOffsetX;
|
||||||
this.meatY = event.clientY - this.meatDragOffsetY;
|
this.meatY = event.clientY - this.meatDragOffsetY;
|
||||||
|
|
||||||
// Get gif element position
|
|
||||||
const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
|
const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
|
||||||
if (!gifElement) {
|
if (!gifElement) {
|
||||||
return;
|
return;
|
||||||
@@ -323,7 +287,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
const gifCenterX = gifRect.left + gifRect.width / 2;
|
const gifCenterX = gifRect.left + gifRect.width / 2;
|
||||||
const gifCenterY = gifRect.top + gifRect.height / 2;
|
const gifCenterY = gifRect.top + gifRect.height / 2;
|
||||||
|
|
||||||
// Get meat center position
|
|
||||||
const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
|
const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
|
||||||
if (!meatElement) {
|
if (!meatElement) {
|
||||||
return;
|
return;
|
||||||
@@ -333,12 +296,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
const meatCenterX = meatRect.left + meatRect.width / 2;
|
const meatCenterX = meatRect.left + meatRect.width / 2;
|
||||||
const meatCenterY = meatRect.top + meatRect.height / 2;
|
const meatCenterY = meatRect.top + meatRect.height / 2;
|
||||||
|
|
||||||
// Calculate distance
|
|
||||||
const distance = Math.sqrt(
|
const distance = Math.sqrt(
|
||||||
Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
|
Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
|
||||||
);
|
);
|
||||||
|
|
||||||
// If meat is close enough to gif center (within 50px), trigger the interaction
|
|
||||||
if (distance < 50) {
|
if (distance < 50) {
|
||||||
this.onMeatFed();
|
this.onMeatFed();
|
||||||
}
|
}
|
||||||
@@ -355,6 +316,124 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
this.isDraggingMeat = false;
|
this.isDraggingMeat = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private requireAuth(action: () => void): boolean {
|
||||||
|
if (this.authService.isLoggedIn()) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pendingAction = action;
|
||||||
|
this.authDialogService.openLogin();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
private maybeRunPendingAction(): void {
|
||||||
|
if (!this.currentUser || this.authDialogState !== null || !this.pendingAction) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const action = this.pendingAction;
|
||||||
|
this.pendingAction = null;
|
||||||
|
action();
|
||||||
|
}
|
||||||
|
|
||||||
|
private performStartOneVsOne(): void {
|
||||||
|
if (this.creating) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.errorMessage = '';
|
||||||
|
this.creating = true;
|
||||||
|
|
||||||
|
this.gameApi
|
||||||
|
.createGame()
|
||||||
|
.pipe(finalize(() => (this.creating = false)))
|
||||||
|
.subscribe({
|
||||||
|
next: (game) => {
|
||||||
|
void this.router.navigate(['/game', game.gameId], {
|
||||||
|
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private performStartVsBot(difficulty: Difficulty): void {
|
||||||
|
if (this.creating) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.errorMessage = '';
|
||||||
|
this.creating = true;
|
||||||
|
this.showDifficultyDialog = false;
|
||||||
|
|
||||||
|
this.gameApi
|
||||||
|
.createGameVsBot(difficulty)
|
||||||
|
.pipe(finalize(() => (this.creating = false)))
|
||||||
|
.subscribe({
|
||||||
|
next: (game) => {
|
||||||
|
void this.router.navigate(['/game', game.gameId], {
|
||||||
|
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private performSubmitJoinGame(): void {
|
||||||
|
const gameId = this.gameIdInput.trim();
|
||||||
|
if (this.joiningGame || !gameId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.errorMessage = '';
|
||||||
|
this.joiningGame = true;
|
||||||
|
|
||||||
|
this.gameApi
|
||||||
|
.getGame(gameId)
|
||||||
|
.pipe(finalize(() => (this.joiningGame = false)))
|
||||||
|
.subscribe({
|
||||||
|
next: (game) => {
|
||||||
|
this.closeJoinDialog();
|
||||||
|
void this.router.navigate(['/game', game.gameId], {
|
||||||
|
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private performSubmitImportGame(): void {
|
||||||
|
const trimmedImport = this.importText.trim();
|
||||||
|
if (this.importing || !trimmedImport) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.errorMessage = '';
|
||||||
|
this.importing = true;
|
||||||
|
|
||||||
|
const importRequest =
|
||||||
|
this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
|
||||||
|
|
||||||
|
importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
|
||||||
|
next: (game) => {
|
||||||
|
this.closeImportDialog();
|
||||||
|
void this.router.navigate(['/game', game.gameId], {
|
||||||
|
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
|
||||||
|
this.errorMessage = getErrorMessage(error, defaultMessage);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
private closeAllDialogs(): void {
|
private closeAllDialogs(): void {
|
||||||
this.showDifficultyDialog = false;
|
this.showDifficultyDialog = false;
|
||||||
this.showOptionsDialog = false;
|
this.showOptionsDialog = false;
|
||||||
@@ -363,19 +442,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
|||||||
this.errorMessage = '';
|
this.errorMessage = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
private initTheme(): void {
|
|
||||||
const savedTheme = localStorage.getItem('theme');
|
|
||||||
this.isSunsetMode = savedTheme !== 'dark';
|
|
||||||
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
|
|
||||||
|
|
||||||
if (!this.isSunsetMode) {
|
|
||||||
document.documentElement.setAttribute('data-theme', 'dark');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.documentElement.removeAttribute('data-theme');
|
|
||||||
}
|
|
||||||
|
|
||||||
private generateStars(count: number): void {
|
private generateStars(count: number): void {
|
||||||
this.stars = Array.from({ length: count }, () => {
|
this.stars = Array.from({ length: count }, () => {
|
||||||
const size = Math.random() * 2 + 0.5;
|
const size = Math.random() * 2 + 0.5;
|
||||||
|
|||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject } from 'rxjs';
|
||||||
|
|
||||||
|
export type AuthDialogState = 'login' | 'register' | null;
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class AuthDialogService {
|
||||||
|
private readonly dialogStateSubject = new BehaviorSubject<AuthDialogState>(null);
|
||||||
|
|
||||||
|
readonly dialogState$ = this.dialogStateSubject.asObservable();
|
||||||
|
|
||||||
|
openLogin(): void {
|
||||||
|
this.dialogStateSubject.next('login');
|
||||||
|
}
|
||||||
|
|
||||||
|
openRegister(): void {
|
||||||
|
this.dialogStateSubject.next('register');
|
||||||
|
}
|
||||||
|
|
||||||
|
close(): void {
|
||||||
|
this.dialogStateSubject.next(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { HttpInterceptorFn } from '@angular/common/http';
|
||||||
|
|
||||||
|
export const authInterceptor: HttpInterceptorFn = (req, next) => {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
|
||||||
|
// Add token to protected endpoints only (not registration or login)
|
||||||
|
const isProtectedEndpoint =
|
||||||
|
req.url.includes('/api/account/me') ||
|
||||||
|
req.url.includes('/api/account/bots') ||
|
||||||
|
req.url.includes('/api/account/official-bots') ||
|
||||||
|
req.url.includes('/api/challenge');
|
||||||
|
|
||||||
|
if (token && isProtectedEndpoint) {
|
||||||
|
req = req.clone({
|
||||||
|
setHeaders: {
|
||||||
|
Authorization: `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return next(req);
|
||||||
|
};
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import { Injectable, inject } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { BehaviorSubject, Observable } from 'rxjs';
|
||||||
|
import { map, tap } from 'rxjs/operators';
|
||||||
|
import { environment } from '../../environments/environment';
|
||||||
|
import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class AuthService {
|
||||||
|
private readonly apiBase = environment.apiBaseUrl;
|
||||||
|
private readonly accountServiceUrl = environment.accountServiceUrl;
|
||||||
|
private readonly http = inject(HttpClient);
|
||||||
|
|
||||||
|
private currentUserSubject = new BehaviorSubject<CurrentUser | null>(null);
|
||||||
|
public currentUser$ = this.currentUserSubject.asObservable();
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.loadCurrentUser();
|
||||||
|
}
|
||||||
|
|
||||||
|
login(username: string, password: string): Observable<LoginResponse> {
|
||||||
|
return this.http
|
||||||
|
.post<LoginResponse>(`${this.accountServiceUrl}/api/account/login`, {
|
||||||
|
username,
|
||||||
|
password
|
||||||
|
})
|
||||||
|
.pipe(
|
||||||
|
tap((response) => {
|
||||||
|
localStorage.setItem('token', response.token);
|
||||||
|
localStorage.setItem('username', username);
|
||||||
|
// After login, fetch current user info
|
||||||
|
this.getCurrentUser().subscribe();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
register(username: string, password: string, email?: string): Observable<RegisterResponse> {
|
||||||
|
return this.http
|
||||||
|
.post<RegisterResponse>(`${this.accountServiceUrl}/api/account`, {
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
email
|
||||||
|
})
|
||||||
|
.pipe(
|
||||||
|
tap((response) => {
|
||||||
|
localStorage.setItem('username', response.username);
|
||||||
|
localStorage.setItem('userId', response.id);
|
||||||
|
this.currentUserSubject.next({
|
||||||
|
id: response.id,
|
||||||
|
username: response.username,
|
||||||
|
rating: response.rating,
|
||||||
|
createdAt: response.createdAt
|
||||||
|
});
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getCurrentUser(): Observable<CurrentUser> {
|
||||||
|
return this.http.get<CurrentUser>(`${this.accountServiceUrl}/api/account/me`).pipe(
|
||||||
|
tap((user) => {
|
||||||
|
localStorage.setItem('username', user.username);
|
||||||
|
localStorage.setItem('userId', user.id);
|
||||||
|
this.currentUserSubject.next(user);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
logout(): void {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
localStorage.removeItem('username');
|
||||||
|
localStorage.removeItem('userId');
|
||||||
|
this.currentUserSubject.next(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoggedIn(): boolean {
|
||||||
|
return !!localStorage.getItem('token');
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadCurrentUser(): void {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
const username = localStorage.getItem('username');
|
||||||
|
const userId = localStorage.getItem('userId');
|
||||||
|
if (token && username && userId) {
|
||||||
|
// Try to verify token is still valid by fetching current user
|
||||||
|
this.getCurrentUser().subscribe({
|
||||||
|
error: () => {
|
||||||
|
// Token is invalid, clear it
|
||||||
|
this.logout();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class ThemeService {
|
||||||
|
private readonly darkModeSubject = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
|
readonly darkMode$ = this.darkModeSubject.asObservable();
|
||||||
|
|
||||||
|
initTheme(): void {
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
this.applyDarkMode(savedTheme === 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleTheme(): void {
|
||||||
|
this.applyDarkMode(!this.darkModeSubject.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
setDarkMode(isDarkMode: boolean): void {
|
||||||
|
this.applyDarkMode(isDarkMode);
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyDarkMode(isDarkMode: boolean): void {
|
||||||
|
if (isDarkMode) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
|
localStorage.removeItem('theme');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.darkModeSubject.next(isDarkMode);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
export const environment = {
|
export const environment = {
|
||||||
production: false,
|
production: false,
|
||||||
apiBaseUrl: '',
|
apiBaseUrl: '',
|
||||||
|
accountServiceUrl: '',
|
||||||
wsBaseUrl: 'ws://localhost:8080',
|
wsBaseUrl: 'ws://localhost:8080',
|
||||||
apiPath: '/api/board/game'
|
apiPath: '/api/board/game'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
export const environment = {
|
export const environment = {
|
||||||
production: true,
|
production: true,
|
||||||
apiBaseUrl: '',
|
apiBaseUrl: '',
|
||||||
|
accountServiceUrl: '',
|
||||||
wsBaseUrl: 'ws://localhost:8080',
|
wsBaseUrl: 'ws://localhost:8080',
|
||||||
apiPath: '/api/board/game'
|
apiPath: '/api/board/game'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -122,4 +122,15 @@
|
|||||||
SHADOWS
|
SHADOWS
|
||||||
======================================== */
|
======================================== */
|
||||||
--shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
|
--shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
|
||||||
|
/* Neon dialog / card variables (used by welcome dialogs, toolbar, login/register) */
|
||||||
|
--bb-bg: rgba(8, 6, 28, 0.92);
|
||||||
|
--bb-border: #00d5ff;
|
||||||
|
--bb-glow: 0 0 18px rgba(0, 210, 255, 0.5), inset 0 0 10px rgba(0, 210, 255, 0.05);
|
||||||
|
--bb-tag: #00d5ff;
|
||||||
|
--bb-title: #d4f4ff;
|
||||||
|
--btn-bg: #00d5ff;
|
||||||
|
--btn-fg: #04000f;
|
||||||
|
--btn-glow: 0 0 14px rgba(0, 210, 255, 0.9);
|
||||||
|
--dlg-bg: rgba(8, 6, 28, 0.95);
|
||||||
|
--dlg-border: #00d5ff;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user