mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-15 10:04:44 +00:00
Compare commits
1 Commits
feat/auth-
...
4105914633
| Author | SHA1 | Date | |
|---|---|---|---|
|
4105914633 |
101
.github/pull_request_template.md
vendored
101
.github/pull_request_template.md
vendored
@@ -1,101 +0,0 @@
|
||||
## Summary
|
||||
|
||||
<!--
|
||||
State WHAT is changing and WHY, in two to five sentences.
|
||||
A reader should understand the change without opening the diff.
|
||||
Describe the problem first, then the outcome.
|
||||
-->
|
||||
|
||||
## Type of change
|
||||
|
||||
<!-- Tick the one option that best describes this PR. -->
|
||||
|
||||
- [ ] Bug fix
|
||||
- [ ] New feature
|
||||
- [ ] Refactor (no change in behaviour)
|
||||
- [ ] Performance improvement
|
||||
- [ ] Documentation
|
||||
- [ ] Tests only
|
||||
- [ ] Build, CI or dependency update
|
||||
- [ ] Other (please specify):
|
||||
|
||||
## Related issues
|
||||
|
||||
<!--
|
||||
Link the issue(s) this PR relates to. Use one keyword per issue so that each is closed on merge:
|
||||
|
||||
Fixes #123
|
||||
Fixes #124, fixes #125
|
||||
Fixes owner/other-repo#456
|
||||
|
||||
Closing keywords only take effect when the PR targets the repository's default branch.
|
||||
Use "Related to #123" if the PR should not close the issue.
|
||||
If there is no issue, write "N/A" and explain the motivation in the Summary.
|
||||
-->
|
||||
|
||||
## Approach and context
|
||||
|
||||
<!--
|
||||
Explain how the change works and why this approach was chosen.
|
||||
Include, where relevant:
|
||||
- The decisions you made that are not obvious from the code.
|
||||
- Alternatives you considered and why you rejected them.
|
||||
- Known limitations or shortcomings, and any planned follow-up work.
|
||||
- Background such as benchmark results or design documents.
|
||||
|
||||
Summarise the key points of any external link. Links may be inaccessible to future readers.
|
||||
-->
|
||||
|
||||
## How this was tested
|
||||
|
||||
<!--
|
||||
Describe what you ran and what you observed. Be specific, and state only what you actually did.
|
||||
For example: the automated tests added or changed, manual steps and their outcome,
|
||||
environments or platforms covered, and anything you were unable to test.
|
||||
For a bug fix, note the test that fails without the fix.
|
||||
-->
|
||||
|
||||
## Compatibility and risk
|
||||
|
||||
- [ ] This change is backwards compatible.
|
||||
- [ ] This change is **breaking** (complete the details below).
|
||||
- [ ] This change deprecates existing behaviour (complete the details below).
|
||||
|
||||
<!--
|
||||
If breaking or deprecating, describe: what changes, who is affected,
|
||||
and the migration path or recommended alternative.
|
||||
Also note any deployment, configuration, data migration or rollback considerations.
|
||||
-->
|
||||
|
||||
## User-facing change
|
||||
|
||||
<!--
|
||||
Does this PR change behaviour that users, operators or API consumers will notice?
|
||||
If not, write "None".
|
||||
If so, write one or two sentences suitable for release notes, in plain language and from the
|
||||
user's point of view. If users must take action when upgrading, state clearly that action is required.
|
||||
-->
|
||||
|
||||
```release-note
|
||||
|
||||
```
|
||||
|
||||
## Notes for reviewers
|
||||
|
||||
<!--
|
||||
Help reviewers focus. For example:
|
||||
- Where to start, or a suggested order in which to read the files.
|
||||
- Areas where you would particularly value scrutiny, or where you are uncertain.
|
||||
- How any mechanical, generated or bulk changes were produced (for example a search-and-replace
|
||||
or a code generator), so that reviewers can reproduce the steps.
|
||||
- Screenshots or recordings for visual changes (include before and after where useful).
|
||||
-->
|
||||
|
||||
## Checklist
|
||||
- [ ] The PR has a single, focused purpose and contains no unrelated changes.
|
||||
- [ ] The title is a clear, imperative summary of the change (for example, "Add retry to payment client").
|
||||
- [ ] I have added or updated tests that cover this change.
|
||||
- [ ] The build succeeds and the tests pass locally.
|
||||
- [ ] The code follows the existing patterns and style of this repository.
|
||||
- [ ] I have updated documentation, changelogs or API references where required.
|
||||
- [ ] I have reviewed my own diff, and this description reflects the final state of the change.
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -507,3 +507,4 @@ web/test-results/frontend/playwright-storybook.xml
|
||||
|
||||
# mkdocs build output
|
||||
/site
|
||||
|
||||
|
||||
@@ -565,12 +565,11 @@ are not seeded either.
|
||||
|
||||
**Environments**:
|
||||
|
||||
| Environment | Compose file |
|
||||
| --------------- | ------------------------------- |
|
||||
| Development | `docker-compose.dev.yaml` |
|
||||
| Testing | `docker-compose.test.yaml` |
|
||||
| Production | `docker-compose.prod.yaml` |
|
||||
| Production seed | `docker-compose.prod.seed.yaml` |
|
||||
| Environment | Compose file |
|
||||
| ----------- | -------------------------- |
|
||||
| Development | `docker-compose.dev.yaml` |
|
||||
| Testing | `docker-compose.test.yaml` |
|
||||
| Production | `docker-compose.prod.yaml` |
|
||||
|
||||
For details, see [Docker Guide](docker.md).
|
||||
|
||||
|
||||
@@ -76,14 +76,14 @@ updates (`UPDATE ... WHERE ... AND RowVersion = @RowVersion`).
|
||||
| `UserAccount` | `Domain.Entities.UserAccount`, `Features.Users` | `Username` and `Email` are unique |
|
||||
| `UserCredential` | `Domain.Entities.UserCredential`, `Features.Users` | Argon2id password hash; `IsRevoked`/`RevokedAt` track credential rotation, not JWTs |
|
||||
| `UserVerification` | `Domain.Entities.UserVerification`, `Features.Users` | Written when a user confirms their email |
|
||||
| `UserProfile` | `Domain.Entities.UserProfile`, `Features.Users` | 1:1 with `UserAccount`; holds the user's biography; written via `IUserProfileRepository`, read via `IUserListRepository`'s left joins in both `GetByIdAsync` and `GetAllAsync` |
|
||||
| `UserAvatar` | `Domain.Entities.UserAvatar`, `Features.Users` | Links a `UserProfile` to a `Photo` as its avatar; written via `IUserProfileRepository.SaveAvatarAsync`, read via `IUserListRepository`'s `ValidTo IS NULL` join for the active avatar |
|
||||
| `UserProfile` | `Domain.Entities.UserProfile`, `Features.Users` | 1:1 with `UserAccount`; holds the user's biography; written via `IUserProfileRepository`, read via `IUserListRepository.GetByIdAsync`'s left join |
|
||||
| `UserAvatar` | `Domain.Entities.UserAvatar`, `Features.Users` | Links a `UserProfile` to a `Photo` as its avatar; written via `IUserProfileRepository.SaveAvatarAsync` |
|
||||
| `BreweryPost` | `Domain.Entities.BreweryPost`, `Features.Breweries` | A user-submitted brewery listing |
|
||||
| `BreweryPostLocation` | `Domain.Entities.BreweryPostLocation`, `Features.Breweries` | 1:1 with `BreweryPost`; `Coordinates` is a `GEOGRAPHY` column, read via a plain Dapper query that selects `CONVERT(varbinary(max), Coordinates)`, since Dapper can't deserialize SQL Server UDTs directly |
|
||||
| `City` | `Domain.Entities.City`, `Features.Locations` | Referenced by `BreweryPostLocation.CityID`; `CityName` and `StateProvinceID` together are unique; written via `ILocationRepository`, read via `ILocationRepository` and `IBreweryRepository`'s location joins, currently written only by `Database.Seed` |
|
||||
| `StateProvince` | `Domain.Entities.StateProvince`, `Features.Locations` | Referenced by `City.StateProvinceID`; created on demand by `ILocationRepository.GetOrCreateCityIdAsync`, read via `IBreweryRepository`'s location joins |
|
||||
| `Country` | `Domain.Entities.Country`, `Features.Locations` | Referenced by `StateProvince.CountryID`; created on demand by `ILocationRepository.GetOrCreateCityIdAsync`, read via `IBreweryRepository`'s location joins |
|
||||
| `Photo` | `Domain.Entities.Photo`, `Features.PhotoUpload` | Written via `IPhotoUploadRepository.CreateAsync`, sent as an `UploadPhotoCommand` from other features' handlers; `Hyperlink` holds the object key within the bucket, which readers sign into a time-limited URL via `IFileStorageProvider.GetPresignedUrl`; the active avatar's row is also read via `IUserListRepository`'s `Media.Photo` join; not yet seeded by `Database.Seed` |
|
||||
| `Photo` | `Domain.Entities.Photo`, `Features.PhotoUpload` | Written via `IPhotoUploadRepository.CreateAsync`, sent as an `UploadPhotoCommand` from other features' handlers; not yet seeded by `Database.Seed` |
|
||||
|
||||
### Tables defined in the schema but not yet wired to a feature slice
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@ no data flowing over them.
|
||||
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Dev network** (`devnet`, bridge) | Internal DNS resolves service names such as `sqlserver` and `api.core`. Volumes: `sqlserverdata-dev`, `nuget-cache-dev`, `seaweedfsdata-dev`. Startup order: SQL Server (health check) → migrations (run-once) → seed (run-once, depends on `seaweedfs`) → API (long-running, depends on seed). |
|
||||
| **Test network** (`testnet`, bridge) | All test components are isolated; fresh DB instance each run (`CLEAR_DATABASE=true`, ephemeral `sqlserverdata-test` / `seaweedfsdata-test` volumes). `api.specs`, `unit.tests`, and `frontend.tests` all run as separate containers, in parallel once seeding completes; results are aggregated. |
|
||||
| **Prod network** (`prodnet`, bridge, named `biergarten-prodnet`) | Isolated from dev/test networks. Volumes: `biergartendata-prod` and `seaweedfsdata-prod`, both external, so `down -v` keeps them. Startup order: SeaweedFS (health check) → API (health check) → frontend, with `frontend` the only service publishing a host port, bound to `127.0.0.1`. Migrating and seeding run on demand as their own run-once jobs joining `biergarten-prodnet`, so an `up` or a reboot replays neither. |
|
||||
| **Prod network** (`prodnet`, bridge) | Isolated from dev/test networks. Volumes: `biergartendata-prod` and `seaweedfsdata-prod` (both external, so `down -v` keeps them), plus `nuget-cache-prod`. Startup order matches dev: SQL Server (health check) → migrations → seed → API → frontend, with `frontend` the only service publishing a host port. |
|
||||
| **Database-only environment** | Same devnet volumes/images as `docker-compose.dev.yaml`, minus `api.core`, `frontend`, and `mailpit` — for working against the database (and object storage, since `seaweedfs` is still included) without running the API or website. |
|
||||
| **Minimal environment** | Database + migrations + seed + `seaweedfs` + mailpit, no API or frontend container — for frontend development against an `API.Core` process run outside Docker. |
|
||||
| `unit.tests` | Builds `Dockerfile.tests`, which restores/builds against `Biergarten.API.slnx` and then runs `dotnet test` for every `Features/*.Tests` project in turn (`Features.Users.Tests`, `Features.Breweries.Tests`, `Features.Emails.Tests`, `Features.PhotoUpload.Tests`), mocking each handler's repository/service dependencies with Moq — no real database needed. |
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
sequenceDiagram
|
||||
box Production Environment (docker-compose.prod.yaml)
|
||||
participant ProdDB as SQL Server 2022<br/>Biergarten Database<br/>no host port published
|
||||
participant ProdS3 as SeaweedFS<br/>S3 gateway :8333<br/>no host port published
|
||||
participant ProdMig as Migrations (run-once)
|
||||
participant ProdAPI as API Container<br/>ASP.NET Core 10<br/>:8080 HTTP / :8081 HTTPS
|
||||
participant ProdWeb as Frontend Container<br/>Express + React Router<br/>127.0.0.1:5656
|
||||
end
|
||||
|
||||
ProdAPI-->>ProdS3: depends_on: seaweedfs healthy
|
||||
ProdWeb-->>ProdAPI: depends_on: api.core healthy
|
||||
ProdMig-->>ProdDB: depends_on
|
||||
ProdMig->>ProdDB: Run migrations
|
||||
ProdAPI-->>ProdDB: depends_on: sql-server healthy (not migrations/seed)
|
||||
ProdAPI->>ProdDB: Connect and serve
|
||||
ProdAPI->>ProdS3: Store and read photos
|
||||
Note over ProdDB: Migrating and seeding are separate run-once jobs,<br/>run at deploy time rather than by the stack
|
||||
|
||||
@@ -134,32 +134,26 @@ containers, which would end the run prematurely. See
|
||||
- Production logging levels
|
||||
- No database clearing
|
||||
- Optimized build configurations
|
||||
- Health checks on every long-running service
|
||||
- Restart policies that survive a reboot (see
|
||||
[Restart tolerance](#restart-tolerance))
|
||||
- Health checks enabled
|
||||
- Restart policies (unless-stopped)
|
||||
- Security hardening
|
||||
- Only `frontend` publishes a port to the host, bound to `127.0.0.1` so a reverse
|
||||
proxy can sit in front of it; `sqlserver`, `api.core` and `seaweedfs` are
|
||||
reachable only from other containers on `prodnet` (named `biergarten-prodnet`
|
||||
so the seed job can join it from its own Compose project)
|
||||
- Seeding is a separate, explicitly run compose file
|
||||
(`docker-compose.prod.seed.yaml`), so an `up` or a restart leaves the existing
|
||||
catalogue as it is. See [Production data](#production-data) below.
|
||||
reachable only from other containers on `prodnet`
|
||||
- Seeded catalogue, with its AI-generated origin disclosed in the app. See
|
||||
[Production data](#production-data) below.
|
||||
|
||||
**Services**:
|
||||
|
||||
```yaml
|
||||
sqlserver # Production SQL Server (internal only)
|
||||
sqlserver # Production SQL Server (internal only)
|
||||
database.migrations # Schema updates only
|
||||
database.seed # Loads the catalogue, runs once
|
||||
api.core # Production API (internal only, no published ports)
|
||||
seaweedfs # S3-compatible object storage (internal only)
|
||||
frontend # Production website (127.0.0.1:5656, the only host binding)
|
||||
```
|
||||
|
||||
Migrating and seeding are run-once jobs kept outside this file, so an `up` or a
|
||||
restart touches neither the schema nor the catalogue. Run them explicitly at
|
||||
deploy time: see [Migrating production](#migrating-production) and
|
||||
[Seeding production](#seeding-production-docker-composeprodseedyaml).
|
||||
|
||||
**Deploy Production**:
|
||||
|
||||
```bash
|
||||
@@ -175,94 +169,23 @@ Docker seeds each volume with the ownership the image expects and labels it for
|
||||
SELinux, so the host needs no `chown` and no `:z`/`:Z` mount options on
|
||||
enforcing distributions such as RHEL, AlmaLinux and Fedora.
|
||||
|
||||
#### Migrating production
|
||||
|
||||
`database.migrations` is a run-once job rather than a service in the prod stack,
|
||||
so the schema is migrated when an operator asks for it instead of on every boot.
|
||||
Build the image and run it against the network the prod stack creates:
|
||||
|
||||
```bash
|
||||
docker build -t database.migrations \
|
||||
-f web/backend/Database/Database.Migrations/Dockerfile \
|
||||
--build-arg BUILD_CONFIGURATION=Release --build-arg APP_UID=1000 \
|
||||
web/backend
|
||||
|
||||
docker run --rm --env-file web/.env.prod --network biergarten-prodnet \
|
||||
-e DOTNET_RUNNING_IN_CONTAINER=true database.migrations
|
||||
```
|
||||
|
||||
DbUp records every script it has applied, so a re-run applies only what is new.
|
||||
Run this with `sqlserver` already up and healthy, and before the seed job.
|
||||
|
||||
#### Restart tolerance
|
||||
|
||||
`sqlserver`, `api.core`, `seaweedfs` and `frontend` run under
|
||||
`restart: unless-stopped`, so the stack returns on its own after a container
|
||||
crash, a Docker daemon restart or a host reboot, provided Docker itself starts at
|
||||
boot (`systemctl enable docker`). The migration and seed jobs stay out of the
|
||||
stack, so a reboot replays neither.
|
||||
|
||||
The daemon replays restart policies without replaying the `depends_on` graph, so
|
||||
after a reboot the containers come back in arbitrary order and each one tolerates
|
||||
a dependency that arrives late. `api.core` opens its database and S3 connections
|
||||
per request rather than at startup, and `frontend` answers with its own error
|
||||
states while `api.core` is still coming up.
|
||||
|
||||
Health checks report when the stack has converged:
|
||||
|
||||
| Service | Probe |
|
||||
| --- | --- |
|
||||
| `sqlserver` | `sqlcmd -Q 'SELECT 1'`, with a 30s start period and 12 retries |
|
||||
| `api.core` | `GET /health` spoken over bash's `/dev/tcp` — the .NET runtime image carries bash and no HTTP client |
|
||||
| `seaweedfs` | `curl http://localhost:8333/status`, the S3 gateway, which serves once the master, volume and filer servers are up |
|
||||
| `frontend` | `wget --spider http://127.0.0.1:5656/healthz`, answered by Express alone and so independent of the API |
|
||||
|
||||
`sqlserver` also carries `stop_grace_period: 60s`, giving a checkpoint time to
|
||||
finish on shutdown instead of being recovered on the next start.
|
||||
|
||||
Deploy and wait for the stack to report healthy, or check convergence after a
|
||||
reboot:
|
||||
|
||||
```bash
|
||||
docker compose --env-file web/.env.prod -f web/docker-compose.prod.yaml up -d --wait
|
||||
docker compose --env-file web/.env.prod -f web/docker-compose.prod.yaml ps
|
||||
```
|
||||
|
||||
#### Seeding production (`docker-compose.prod.seed.yaml`)
|
||||
|
||||
`database.seed` lives in its own compose file, run on demand once the prod stack
|
||||
is up, `sqlserver` is healthy, and the schema is migrated:
|
||||
|
||||
```bash
|
||||
docker compose --env-file web/.env.prod -f web/docker-compose.prod.seed.yaml \
|
||||
run --rm --build database.seed
|
||||
```
|
||||
|
||||
The job runs as the `biergarten-prod-seed` Compose project and attaches to the
|
||||
external `biergarten-prodnet` network, which the main prod stack creates, so it
|
||||
reaches `sqlserver` and `seaweedfs` under the same hostnames the API uses. It
|
||||
exits when seeding finishes; `--rm` removes the container. Bring the prod stack
|
||||
up first, because the seed project has no visibility into the other project's
|
||||
health checks, so a run started before SQL Server is accepting connections fails.
|
||||
|
||||
#### Production data
|
||||
|
||||
A production deployment seeded this way serves the AI-generated fixture data
|
||||
produced by the pipeline. Per
|
||||
Production runs `database.seed`, so the catalogue it serves is the AI-generated
|
||||
fixture data produced by the pipeline. Per
|
||||
[Pipeline ethics, bias, and known issues](../pipeline/ETHICS-AND-KNOWN-ISSUES.md),
|
||||
anyone interacting with an application seeded from it has to be told upfront that
|
||||
the content is AI-generated.
|
||||
|
||||
The website meets that obligation with `AiDisclosureDialog`
|
||||
(`web/frontend/app/features/home/components/AiDisclosureDialog.tsx`), which
|
||||
(`web/frontend/app/features/disclosure/components/AiDisclosureDialog.tsx`), which
|
||||
the root route renders on every full page load, whichever route the visitor lands
|
||||
on. It is part of the server-rendered HTML rather than mounted after hydration, so
|
||||
the disclosure is on screen with the first paint. Acknowledging it hides the
|
||||
dialog for the remainder of that page load; a new load shows it again.
|
||||
|
||||
Keep the seed job and the dialog together: any deployment that runs
|
||||
`docker-compose.prod.seed.yaml` needs the disclosure in place to satisfy the
|
||||
ethics documentation.
|
||||
Keep `database.seed` and the dialog together. A production deployment that seeds
|
||||
the catalogue without the disclosure does not satisfy the ethics documentation.
|
||||
|
||||
### 4. Database only (`docker-compose.db.yaml`)
|
||||
|
||||
@@ -324,12 +247,6 @@ graph TD
|
||||
In development, `api.core` also depends on `seaweedfs`
|
||||
(`condition: service_started`, not a health check) alongside `database.seed`.
|
||||
|
||||
Production has a shorter chain, because the migration and seed jobs run outside
|
||||
the stack: `api.core` waits for `seaweedfs` to pass its health check, and
|
||||
`frontend` waits for `api.core` to report healthy. This ordering applies to
|
||||
`docker compose up`; see [Restart tolerance](#restart-tolerance) for what happens
|
||||
on a host reboot.
|
||||
|
||||
**Health Check Example** (SQL Server):
|
||||
|
||||
```yaml
|
||||
@@ -372,6 +289,7 @@ api.core:
|
||||
|
||||
- `biergartendata-prod` - Database files, external; survives `down -v`
|
||||
- `seaweedfsdata-prod` - SeaweedFS object storage, external; survives `down -v`
|
||||
- `nuget-cache-prod` - Production NuGet cache
|
||||
|
||||
See [Production data volumes](#production-data-volumes).
|
||||
|
||||
@@ -394,11 +312,10 @@ stack down and leaves the database and the uploaded photos in place. Deleting
|
||||
them takes an explicit `docker volume rm`.
|
||||
|
||||
The trade-off is that Compose creates neither one, and `up` fails with a clear
|
||||
error until both exist, hence the `docker volume create` step in
|
||||
error until both exist — hence the `docker volume create` step in
|
||||
[Deploy Production](#3-production-docker-composeprodyaml). External volumes also
|
||||
carry their literal name rather than a `<project>_` prefix, so `docker volume ls`
|
||||
shows `biergartendata-prod` and `seaweedfsdata-prod` unprefixed, unlike the
|
||||
`web_`-prefixed volumes of the dev and test stacks.
|
||||
carry their literal name rather than a `<project>_` prefix, which is why
|
||||
`docker volume ls` shows `biergartendata-prod` next to `web_nuget-cache-prod`.
|
||||
|
||||
Both live under `/var/lib/docker/volumes`. To put them on a specific disk, point
|
||||
the daemon's `data-root` at it in `/etc/docker/daemon.json`, or mount the disk at
|
||||
|
||||
@@ -260,25 +260,17 @@ and retrieving photos via an S3-compatible object store.
|
||||
|
||||
```bash
|
||||
SEAWEEDFS_SERVICE_URL=http://seaweedfs:8333 # Required, no default
|
||||
SEAWEEDFS_PUBLIC_URL=http://localhost:8333 # Optional, defaults to SEAWEEDFS_SERVICE_URL
|
||||
SEAWEEDFS_ACCESS_KEY_ID=admin # Required, no default
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY=secret # Required, no default
|
||||
SEAWEEDFS_BUCKET=my-bucket # Required, no default
|
||||
```
|
||||
|
||||
- **Implementation**: `S3FileStorageProvider` throws on construction if any of
|
||||
the four required values is missing
|
||||
these four values is missing
|
||||
- **Local dev**: point at the `seaweedfs` Docker service (S3 API on port 8333)
|
||||
- **Production**: point at any S3-compatible endpoint (AWS S3, a hosted
|
||||
SeaweedFS cluster, and so on); `ForcePathStyle` is always enabled, which
|
||||
SeaweedFS requires and AWS S3 also accepts
|
||||
- **`SEAWEEDFS_PUBLIC_URL`**: the endpoint download URLs are signed against,
|
||||
used by `GetPresignedUrl` and reaching the API response as
|
||||
`PublicUserProfileDto.AvatarUrl`. A presigned URL is signed over its host, so
|
||||
this has to be the address the browser uses (`http://localhost:8333` with the
|
||||
dev compose file, which publishes the S3 API port), separate from the
|
||||
in-network `SEAWEEDFS_SERVICE_URL` the API uploads through. The two can be the
|
||||
same value wherever one address serves both
|
||||
|
||||
## Docker-specific variables
|
||||
|
||||
@@ -325,7 +317,6 @@ from the template in place; edit them manually if you go that route.
|
||||
- `web/docker-compose.dev.yaml` → `web/.env.dev`
|
||||
- `web/docker-compose.test.yaml` → `web/.env.test`
|
||||
- `web/docker-compose.prod.yaml` → `web/.env.prod`
|
||||
- `web/docker-compose.prod.seed.yaml` → `web/.env.prod`
|
||||
|
||||
## Variable reference table
|
||||
|
||||
@@ -349,7 +340,6 @@ from the template in place; edit them manually if you go that route.
|
||||
| `SMTP_FROM_EMAIL` | ✓ | | ✓ | Yes | Email sender address |
|
||||
| `SMTP_FROM_NAME` | ✓ | | ✓ | No | Defaults to `The Biergarten` |
|
||||
| `SEAWEEDFS_SERVICE_URL` | ✓ | | ✓ | Yes | S3-compatible endpoint URL |
|
||||
| `SEAWEEDFS_PUBLIC_URL` | ✓ | | ✓ | No | Endpoint download URLs are signed against; defaults to `SEAWEEDFS_SERVICE_URL` |
|
||||
| `SEAWEEDFS_ACCESS_KEY_ID` | ✓ | | ✓ | Yes | S3 access key |
|
||||
| `SEAWEEDFS_SECRET_ACCESS_KEY` | ✓ | | ✓ | Yes | S3 secret key |
|
||||
| `SEAWEEDFS_BUCKET` | ✓ | | ✓ | Yes | S3 bucket name |
|
||||
@@ -424,7 +414,6 @@ SMTP_FROM_NAME=The Biergarten App
|
||||
|
||||
# SeaweedFS (S3-compatible storage)
|
||||
SEAWEEDFS_SERVICE_URL=http://seaweedfs:8333
|
||||
SEAWEEDFS_PUBLIC_URL=http://localhost:8333
|
||||
SEAWEEDFS_ACCESS_KEY_ID=<generated-with-openssl>
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY=<generated-with-openssl>
|
||||
SEAWEEDFS_BUCKET=my-bucket
|
||||
|
||||
@@ -257,8 +257,7 @@ API.Specs/
|
||||
│ └── ApiGeneralSteps.cs # Shared/general step definitions
|
||||
├── Mocks/
|
||||
│ ├── MockEmailDispatcher.cs # Substitutes Features.Emails' IEmailDispatcher
|
||||
│ ├── MockEmailProvider.cs # Substitutes Features.Emails' IEmailProvider
|
||||
│ └── MockFileStorageProvider.cs # Substitutes Features.ImageUploads' IFileStorageProvider
|
||||
│ └── MockEmailProvider.cs # Substitutes Features.Emails' IEmailProvider
|
||||
└── TestApiFactory.cs # Test server setup (swaps in the mocks above)
|
||||
```
|
||||
|
||||
|
||||
@@ -68,12 +68,8 @@ WEBSITE_BASE_URL=http://localhost:3000
|
||||
# ======================
|
||||
# SeaweedFS (S3) Configuration
|
||||
# ======================
|
||||
# Credentials and default bucket for the local SeaweedFS S3-compatible storage.
|
||||
# SEAWEEDFS_SERVICE_URL is the in-network endpoint the API uploads through;
|
||||
# SEAWEEDFS_PUBLIC_URL is the endpoint download URLs are signed against, so it has to be
|
||||
# reachable from the browser. It defaults to SEAWEEDFS_SERVICE_URL when left blank.
|
||||
# Credentials and default bucket for the local SeaweedFS S3-compatible storage
|
||||
SEAWEEDFS_SERVICE_URL=http://seaweedfs:8333
|
||||
SEAWEEDFS_PUBLIC_URL=http://localhost:8333
|
||||
SEAWEEDFS_ACCESS_KEY_ID=admin
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY=secret
|
||||
SEAWEEDFS_BUCKET=my-bucket
|
||||
|
||||
@@ -13,61 +13,9 @@ Scenario: Public profile exposes only allowlisted fields
|
||||
Then the response has HTTP status 200
|
||||
And the public profile response should match the registered account
|
||||
And the response JSON should have "biography" equal ""
|
||||
And the response JSON should have "avatarUrl" equal ""
|
||||
And the response JSON should not contain "email"
|
||||
And the response JSON should not contain "dateOfBirth"
|
||||
|
||||
Scenario: Public profile exposes the uploaded avatar
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have uploaded an avatar
|
||||
When I retrieve the public profile by ID
|
||||
Then the response has HTTP status 200
|
||||
And the public profile response should carry my current avatar
|
||||
|
||||
Scenario: Public profile exposes the current avatar after it is replaced
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have uploaded an avatar
|
||||
And I have uploaded a new avatar, replacing the previous one
|
||||
When I retrieve the public profile by ID
|
||||
Then the response has HTTP status 200
|
||||
And the public profile response should carry my current avatar
|
||||
And the public profile response should not carry my previous avatar
|
||||
|
||||
Scenario: Fetching the avatar without authentication succeeds
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have uploaded an avatar
|
||||
When I retrieve the public profile by ID without authentication
|
||||
Then the response has HTTP status 200
|
||||
And the public profile response should carry my current avatar
|
||||
|
||||
Scenario: A different user can read someone else's avatar
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have uploaded an avatar
|
||||
And I am logged in as a different user
|
||||
When I retrieve the public profile by ID
|
||||
Then the response has HTTP status 200
|
||||
And the public profile response should carry my current avatar
|
||||
|
||||
Scenario: Listing user accounts exposes each account's avatar
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have uploaded an avatar
|
||||
When I list user accounts
|
||||
Then the response has HTTP status 200
|
||||
And my listed account should carry my current avatar
|
||||
|
||||
Scenario: Listing user accounts exposes each account's biography
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have set my biography to "Drinks lagers."
|
||||
When I list user accounts
|
||||
Then the response has HTTP status 200
|
||||
And my listed account should carry my biography
|
||||
|
||||
Scenario: Public profile for a non-existent account returns not found
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
@@ -78,7 +26,6 @@ Scenario: Fetching the public profile without authentication succeeds
|
||||
Given I have registered a new account
|
||||
When I retrieve the public profile by ID without authentication
|
||||
Then the response has HTTP status 200
|
||||
And the response JSON should have "avatarUrl" equal ""
|
||||
And the response JSON should not contain "email"
|
||||
And the response JSON should not contain "dateOfBirth"
|
||||
|
||||
@@ -103,7 +50,6 @@ Scenario: Listing user accounts as an authenticated user excludes private fields
|
||||
And I have a valid access token for my account
|
||||
When I list user accounts
|
||||
Then the response has HTTP status 200
|
||||
And the response JSON should contain "avatarUrl"
|
||||
And the response JSON should not contain "email"
|
||||
And the response JSON should not contain "dateOfBirth"
|
||||
|
||||
@@ -114,14 +60,6 @@ Scenario: The caller can fetch their own account
|
||||
Then the response has HTTP status 200
|
||||
And the public profile response should match the registered account
|
||||
|
||||
Scenario: The caller's own account omits the avatar graph
|
||||
Given I have registered a new account
|
||||
And I have a valid access token for my account
|
||||
And I have uploaded an avatar
|
||||
When I retrieve my own account
|
||||
Then the response has HTTP status 200
|
||||
And the response JSON should not contain "userAvatar"
|
||||
|
||||
Scenario: The account endpoint serves the caller named by the access token
|
||||
Given I have registered a new account
|
||||
And I am logged in as a different user
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
using Features.ImageUploads.Services;
|
||||
|
||||
namespace API.Specs.Mocks;
|
||||
|
||||
/// <summary>
|
||||
/// Test double for <see cref="IFileStorageProvider" /> that records uploads in memory, so specs can
|
||||
/// exercise photo-backed features without object storage.
|
||||
/// </summary>
|
||||
public class MockFileStorageProvider : IFileStorageProvider
|
||||
{
|
||||
private readonly List<string> _keys = [];
|
||||
private readonly Dictionary<string, byte[]> _objects = new();
|
||||
|
||||
public IReadOnlyCollection<string> UploadedKeys => _keys.ToList();
|
||||
|
||||
/// <summary>The key of the most recent upload.</summary>
|
||||
/// <exception cref="InvalidOperationException">Thrown when nothing has been uploaded yet.</exception>
|
||||
public string LastUploadedKey =>
|
||||
_keys.Count > 0
|
||||
? _keys[^1]
|
||||
: throw new InvalidOperationException("no file has been uploaded");
|
||||
|
||||
public Task UploadAsync(
|
||||
string key,
|
||||
Stream content,
|
||||
string contentType,
|
||||
CancellationToken cancellationToken = default
|
||||
)
|
||||
{
|
||||
using MemoryStream buffer = new();
|
||||
content.CopyTo(buffer);
|
||||
|
||||
if (!_objects.ContainsKey(key))
|
||||
_keys.Add(key);
|
||||
|
||||
_objects[key] = buffer.ToArray();
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
public Task DeleteAsync(string key, CancellationToken cancellationToken = default)
|
||||
{
|
||||
_objects.Remove(key);
|
||||
_keys.Remove(key);
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Stands in for a signed download URL: an absolute URL on a host the object store would serve,
|
||||
/// carrying the key in its path, so specs can assert the shape callers actually receive.
|
||||
/// </summary>
|
||||
public string GetPresignedUrl(string key, TimeSpan expiresIn)
|
||||
{
|
||||
return $"https://storage.test/{key}?X-Amz-Expires={(int)expiresIn.TotalSeconds}";
|
||||
}
|
||||
}
|
||||
@@ -183,25 +183,6 @@ public class ApiGeneralSteps(ScenarioContext scenario)
|
||||
AssertFieldAbsent(payloadElem, field);
|
||||
}
|
||||
|
||||
[Then("the response JSON should contain {string}")]
|
||||
public void ThenTheResponseJsonShouldContainString(string field)
|
||||
{
|
||||
scenario.TryGetValue<string>(ResponseBodyKey, out string? responseBody).Should().BeTrue();
|
||||
|
||||
using JsonDocument doc = JsonDocument.Parse(responseBody!);
|
||||
JsonElement root = doc.RootElement;
|
||||
|
||||
if (root.ValueKind == JsonValueKind.Object &&
|
||||
!root.TryGetProperty(field, out _) &&
|
||||
root.TryGetProperty("payload", out JsonElement payloadElem))
|
||||
{
|
||||
AssertFieldPresent(payloadElem, field);
|
||||
return;
|
||||
}
|
||||
|
||||
AssertFieldPresent(root, field);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Recurses into arrays so a listing endpoint's response can be asserted the same way as a
|
||||
/// single-resource response.
|
||||
@@ -222,31 +203,4 @@ public class ApiGeneralSteps(ScenarioContext scenario)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Recurses into arrays so every item of a listing endpoint's response must carry the field.
|
||||
/// </summary>
|
||||
private static void AssertFieldPresent(JsonElement element, string field)
|
||||
{
|
||||
switch (element.ValueKind)
|
||||
{
|
||||
case JsonValueKind.Object:
|
||||
element
|
||||
.TryGetProperty(field, out _)
|
||||
.Should()
|
||||
.BeTrue("Expected field '{0}' to be present in the response", field);
|
||||
break;
|
||||
case JsonValueKind.Array:
|
||||
element
|
||||
.EnumerateArray()
|
||||
.Should()
|
||||
.NotBeEmpty(
|
||||
"Expected at least one item to assert field '{0}' against",
|
||||
field
|
||||
);
|
||||
foreach (JsonElement item in element.EnumerateArray())
|
||||
AssertFieldPresent(item, field);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
using System.Text.Json;
|
||||
using API.Specs.Mocks;
|
||||
using Features.ImageUploads.Services;
|
||||
using Features.Users.Commands.Profile.UploadAvatar;
|
||||
using Features.Users.Repository;
|
||||
using FluentAssertions;
|
||||
using MediatR;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Reqnroll;
|
||||
|
||||
namespace API.Specs.Steps;
|
||||
@@ -17,11 +10,6 @@ public class UserSteps(ScenarioContext scenario) : ApiStepsBase(scenario)
|
||||
private const string AccessTokenKey = "accessToken";
|
||||
private const string RegisteredUserIdKey = "registeredUserId";
|
||||
private const string RegisteredUsernameKey = "registeredUsername";
|
||||
private const string CurrentAvatarKeyKey = "currentAvatarKey";
|
||||
private const string PreviousAvatarKeyKey = "previousAvatarKey";
|
||||
private const string BiographyKey = "biography";
|
||||
|
||||
private static readonly byte[] PngSignature = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A];
|
||||
|
||||
private async Task SendAsync(HttpRequestMessage requestMessage)
|
||||
{
|
||||
@@ -48,193 +36,22 @@ public class UserSteps(ScenarioContext scenario) : ApiStepsBase(scenario)
|
||||
: throw new InvalidOperationException("registered user ID not found in scenario");
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Builds the smallest upload the photo validator accepts: a PNG signature padded out to the
|
||||
/// 1 KiB minimum.
|
||||
/// </summary>
|
||||
private static IFormFile CreateAvatarFile()
|
||||
{
|
||||
byte[] content = new byte[2048];
|
||||
PngSignature.CopyTo(content, 0);
|
||||
MemoryStream stream = new(content);
|
||||
|
||||
return new FormFile(stream, 0, content.Length, "file", "avatar.png")
|
||||
{
|
||||
Headers = new HeaderDictionary { ["Content-Type"] = "image/png" },
|
||||
};
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Uploads an avatar and records the object key the storage provider actually received, rather
|
||||
/// than re-deriving the key template the handler uses.
|
||||
/// </summary>
|
||||
private async Task UploadAvatarAsync()
|
||||
{
|
||||
Guid userId = GetRegisteredUserId();
|
||||
|
||||
using IServiceScope scope = GetFactory().Services.CreateScope();
|
||||
IMediator mediator = scope.ServiceProvider.GetRequiredService<IMediator>();
|
||||
await mediator.Send(new UploadAvatarCommand(userId, CreateAvatarFile()));
|
||||
|
||||
if (Scenario.TryGetValue<string>(CurrentAvatarKeyKey, out string? existing))
|
||||
Scenario[PreviousAvatarKeyKey] = existing;
|
||||
|
||||
Scenario[CurrentAvatarKeyKey] = GetStorageProvider().LastUploadedKey;
|
||||
}
|
||||
|
||||
private MockFileStorageProvider GetStorageProvider()
|
||||
{
|
||||
return (MockFileStorageProvider)
|
||||
GetFactory().Services.GetRequiredService<IFileStorageProvider>();
|
||||
}
|
||||
|
||||
private string GetCurrentAvatarKey()
|
||||
{
|
||||
return Scenario.TryGetValue(CurrentAvatarKeyKey, out string? key) && key is not null
|
||||
? key
|
||||
: throw new InvalidOperationException("no avatar has been uploaded in this scenario");
|
||||
}
|
||||
|
||||
private string GetPreviousAvatarKey()
|
||||
{
|
||||
return Scenario.TryGetValue(PreviousAvatarKeyKey, out string? key) && key is not null
|
||||
? key
|
||||
: throw new InvalidOperationException(
|
||||
"only one avatar has been uploaded in this scenario"
|
||||
);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Asserts that <paramref name="avatarUrl" /> is something a browser can fetch -- an absolute
|
||||
/// HTTP(S) URL -- pointing at the object stored under <paramref name="expectedKey" />. A bare
|
||||
/// storage key would resolve against the page's own origin, so the shape is the contract here,
|
||||
/// not just the value.
|
||||
/// </summary>
|
||||
private static Uri AssertFetchableUrl(string? avatarUrl, string expectedKey)
|
||||
{
|
||||
avatarUrl.Should().NotBeNullOrWhiteSpace();
|
||||
|
||||
Uri.TryCreate(avatarUrl, UriKind.Absolute, out Uri? uri)
|
||||
.Should()
|
||||
.BeTrue("avatarUrl must be an absolute URL, but was '{0}'", avatarUrl);
|
||||
uri!.Scheme.Should().BeOneOf("http", "https");
|
||||
uri.AbsolutePath.Should().EndWith(expectedKey, "the URL must address the uploaded object");
|
||||
|
||||
return uri;
|
||||
}
|
||||
|
||||
private string GetAvatarUrlFromResponse()
|
||||
{
|
||||
Scenario.TryGetValue<string>(ResponseBodyKey, out string? responseBody).Should().BeTrue();
|
||||
|
||||
using JsonDocument doc = JsonDocument.Parse(responseBody!);
|
||||
return doc.RootElement.GetProperty("avatarUrl").GetString()!;
|
||||
}
|
||||
|
||||
[Given("I have uploaded an avatar")]
|
||||
public async Task GivenIHaveUploadedAnAvatar()
|
||||
{
|
||||
await UploadAvatarAsync();
|
||||
}
|
||||
|
||||
[Given("I have uploaded a new avatar, replacing the previous one")]
|
||||
public async Task GivenIHaveUploadedANewAvatarReplacingThePreviousOne()
|
||||
{
|
||||
await UploadAvatarAsync();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Writes the biography straight through the repository: registration creates the profile row
|
||||
/// with an empty biography, and no endpoint edits it yet.
|
||||
/// </summary>
|
||||
[Given("I have set my biography to {string}")]
|
||||
public async Task GivenIHaveSetMyBiographyTo(string biography)
|
||||
{
|
||||
using IServiceScope scope = GetFactory().Services.CreateScope();
|
||||
IUserProfileRepository profiles =
|
||||
scope.ServiceProvider.GetRequiredService<IUserProfileRepository>();
|
||||
|
||||
await profiles.UpdateBiographyAsync(
|
||||
GetRegisteredUserId(),
|
||||
biography,
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
Scenario[BiographyKey] = biography;
|
||||
}
|
||||
|
||||
[Then("the public profile response should carry my current avatar")]
|
||||
public void ThenThePublicProfileResponseShouldCarryMyCurrentAvatar()
|
||||
{
|
||||
AssertFetchableUrl(GetAvatarUrlFromResponse(), GetCurrentAvatarKey());
|
||||
}
|
||||
|
||||
[Then("the public profile response should not carry my previous avatar")]
|
||||
public void ThenThePublicProfileResponseShouldNotCarryMyPreviousAvatar()
|
||||
{
|
||||
Uri uri = AssertFetchableUrl(GetAvatarUrlFromResponse(), GetCurrentAvatarKey());
|
||||
uri.AbsolutePath.Should().NotContain(GetPreviousAvatarKey());
|
||||
}
|
||||
|
||||
[Then("my listed account should carry my current avatar")]
|
||||
public void ThenMyListedAccountShouldCarryMyCurrentAvatar()
|
||||
{
|
||||
AssertFetchableUrl(
|
||||
GetMyListedAccount().GetProperty("avatarUrl").GetString(),
|
||||
GetCurrentAvatarKey()
|
||||
);
|
||||
}
|
||||
|
||||
[Then("my listed account should carry my biography")]
|
||||
public void ThenMyListedAccountShouldCarryMyBiography()
|
||||
{
|
||||
string expected =
|
||||
Scenario.TryGetValue(BiographyKey, out string? biography) && biography is not null
|
||||
? biography
|
||||
: throw new InvalidOperationException("no biography was set in this scenario");
|
||||
|
||||
GetMyListedAccount().GetProperty("biography").GetString().Should().Be(expected);
|
||||
}
|
||||
|
||||
/// <summary>Finds the registered account in a listing response.</summary>
|
||||
private JsonElement GetMyListedAccount()
|
||||
{
|
||||
Scenario.TryGetValue<string>(ResponseBodyKey, out string? responseBody).Should().BeTrue();
|
||||
|
||||
using JsonDocument doc = JsonDocument.Parse(responseBody!);
|
||||
doc.RootElement.ValueKind.Should().Be(JsonValueKind.Array);
|
||||
|
||||
return doc
|
||||
.RootElement.EnumerateArray()
|
||||
.Should()
|
||||
.ContainSingle(item =>
|
||||
item.GetProperty("userAccountId").GetGuid() == GetRegisteredUserId()
|
||||
)
|
||||
.Subject.Clone();
|
||||
}
|
||||
|
||||
[When("I retrieve the public profile by ID")]
|
||||
public async Task WhenIRetrieveThePublicProfileById()
|
||||
{
|
||||
await SendAsync(
|
||||
NewAuthenticatedRequest(HttpMethod.Get, $"/api/user/{GetRegisteredUserId()}/profile")
|
||||
);
|
||||
await SendAsync(NewAuthenticatedRequest(HttpMethod.Get, $"/api/user/{GetRegisteredUserId()}/profile"));
|
||||
}
|
||||
|
||||
[When("I retrieve the public profile by ID without authentication")]
|
||||
public async Task WhenIRetrieveThePublicProfileByIdWithoutAuthentication()
|
||||
{
|
||||
await SendAsync(
|
||||
new HttpRequestMessage(HttpMethod.Get, $"/api/user/{GetRegisteredUserId()}/profile")
|
||||
);
|
||||
await SendAsync(new HttpRequestMessage(HttpMethod.Get, $"/api/user/{GetRegisteredUserId()}/profile"));
|
||||
}
|
||||
|
||||
[When("I retrieve the public profile by a non-existent ID")]
|
||||
public async Task WhenIRetrieveThePublicProfileByANonExistentId()
|
||||
{
|
||||
await SendAsync(
|
||||
NewAuthenticatedRequest(HttpMethod.Get, $"/api/user/{Guid.NewGuid()}/profile")
|
||||
);
|
||||
await SendAsync(NewAuthenticatedRequest(HttpMethod.Get, $"/api/user/{Guid.NewGuid()}/profile"));
|
||||
}
|
||||
|
||||
[When("I retrieve my own account without authentication")]
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
using API.Core;
|
||||
using API.Specs.Mocks;
|
||||
using Features.Emails.Services;
|
||||
using Features.ImageUploads.Services;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.AspNetCore.Mvc.Testing;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
@@ -33,15 +32,6 @@ internal class TestApiFactory : WebApplicationFactory<Program>
|
||||
services.Remove(emailDispatcherDescriptor);
|
||||
|
||||
services.AddScoped<IEmailDispatcher, MockEmailDispatcher>();
|
||||
|
||||
ServiceDescriptor? fileStorageDescriptor = services.SingleOrDefault(d =>
|
||||
d.ServiceType == typeof(IFileStorageProvider)
|
||||
);
|
||||
|
||||
if (fileStorageDescriptor != null)
|
||||
services.Remove(fileStorageDescriptor);
|
||||
|
||||
services.AddSingleton<IFileStorageProvider, MockFileStorageProvider>();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,14 +23,6 @@ public static class ConfigurationKeys
|
||||
public const string SmtpFromName = "SMTP_FROM_NAME";
|
||||
|
||||
public const string SeaweedFsServiceUrl = "SEAWEEDFS_SERVICE_URL";
|
||||
|
||||
/// <summary>
|
||||
/// The browser-reachable base URL of the object store, used to sign download URLs. Falls back to
|
||||
/// <see cref="SeaweedFsServiceUrl" /> when unset: SigV4 covers the host, so a URL signed against
|
||||
/// the container-internal endpoint is only usable by callers that can resolve that host.
|
||||
/// </summary>
|
||||
public const string SeaweedFsPublicUrl = "SEAWEEDFS_PUBLIC_URL";
|
||||
|
||||
public const string SeaweedFsAccessKeyId = "SEAWEEDFS_ACCESS_KEY_ID";
|
||||
public const string SeaweedFsSecretAccessKey = "SEAWEEDFS_SECRET_ACCESS_KEY";
|
||||
public const string SeaweedFsBucket = "SEAWEEDFS_BUCKET";
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
using System.Text.Json.Serialization;
|
||||
|
||||
namespace Domain.Entities;
|
||||
|
||||
public sealed class UserAccount
|
||||
@@ -22,10 +20,4 @@ public sealed class UserAccount
|
||||
// Navigation properties
|
||||
public UserCredential? UserCredential { get; set; }
|
||||
public UserProfile? UserProfile { get; set; }
|
||||
|
||||
// GET /api/user/authenticated serializes this entity directly, and the avatar graph carries the
|
||||
// storage key and uploader of the underlying Photo. Clients read the avatar from
|
||||
// PublicUserProfileDto.AvatarUrl, which is a signed URL, so keep this one out of the response.
|
||||
[JsonIgnore]
|
||||
public UserAvatar? UserAvatar { get; set; }
|
||||
}
|
||||
|
||||
@@ -13,14 +13,11 @@ public class S3FileStorageProvider : IFileStorageProvider, IDisposable
|
||||
{
|
||||
private readonly string _bucket;
|
||||
private readonly IAmazonS3 _client;
|
||||
private readonly IAmazonS3 _presignClient;
|
||||
private readonly Protocol _presignProtocol;
|
||||
|
||||
/// <summary>
|
||||
/// Initializes a new instance of the <see cref="S3FileStorageProvider" /> class, reading storage
|
||||
/// configuration (<c>SEAWEEDFS_SERVICE_URL</c>, <c>SEAWEEDFS_ACCESS_KEY_ID</c>,
|
||||
/// <c>SEAWEEDFS_SECRET_ACCESS_KEY</c>, <c>SEAWEEDFS_BUCKET</c>, and the optional
|
||||
/// <c>SEAWEEDFS_PUBLIC_URL</c>) from <paramref name="configuration" />.
|
||||
/// <c>SEAWEEDFS_SECRET_ACCESS_KEY</c>, <c>SEAWEEDFS_BUCKET</c>) from <paramref name="configuration" />.
|
||||
/// </summary>
|
||||
/// <exception cref="InvalidOperationException">
|
||||
/// Thrown when any of the required configuration values is not set.
|
||||
@@ -48,31 +45,6 @@ public class S3FileStorageProvider : IFileStorageProvider, IDisposable
|
||||
AmazonS3Config config = new() { ServiceURL = serviceUrl, ForcePathStyle = true };
|
||||
|
||||
_client = new AmazonS3Client(accessKeyId, secretAccessKey, config);
|
||||
|
||||
// A presigned URL is signed over its host, so one signed against the container-internal
|
||||
// endpoint is only usable from inside the network. Sign downloads against the public
|
||||
// endpoint instead, so a browser can fetch the object.
|
||||
string? configuredPublicUrl = configuration[ConfigurationKeys.SeaweedFsPublicUrl];
|
||||
string publicUrl = string.IsNullOrWhiteSpace(configuredPublicUrl)
|
||||
? serviceUrl
|
||||
: configuredPublicUrl;
|
||||
|
||||
_presignClient =
|
||||
publicUrl == serviceUrl
|
||||
? _client
|
||||
: new AmazonS3Client(
|
||||
accessKeyId,
|
||||
secretAccessKey,
|
||||
new AmazonS3Config { ServiceURL = publicUrl, ForcePathStyle = true }
|
||||
);
|
||||
|
||||
// GetPreSignedUrlRequest.Protocol defaults to HTTPS and ignores the ServiceURL scheme, so
|
||||
// take the scheme from the endpoint the URL is signed against.
|
||||
_presignProtocol =
|
||||
Uri.TryCreate(publicUrl, UriKind.Absolute, out Uri? publicUri)
|
||||
&& publicUri.Scheme == Uri.UriSchemeHttp
|
||||
? Protocol.HTTP
|
||||
: Protocol.HTTPS;
|
||||
}
|
||||
|
||||
/// <inheritdoc/>
|
||||
@@ -110,18 +82,14 @@ public class S3FileStorageProvider : IFileStorageProvider, IDisposable
|
||||
BucketName = _bucket,
|
||||
Key = key,
|
||||
Expires = DateTime.UtcNow.Add(expiresIn),
|
||||
Protocol = _presignProtocol,
|
||||
};
|
||||
|
||||
return _presignClient.GetPreSignedURL(request);
|
||||
return _client.GetPreSignedURL(request);
|
||||
}
|
||||
|
||||
/// <inheritdoc/>
|
||||
public void Dispose()
|
||||
{
|
||||
if (!ReferenceEquals(_presignClient, _client))
|
||||
_presignClient.Dispose();
|
||||
|
||||
_client.Dispose();
|
||||
GC.SuppressFinalize(this);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
using Domain.Entities;
|
||||
using Features.ImageUploads.Services;
|
||||
using Features.Users.Dtos;
|
||||
using Features.Users.Queries.GetAllUsers;
|
||||
using Features.Users.Repository;
|
||||
@@ -10,36 +9,27 @@ namespace Features.Users.Tests.Queries;
|
||||
|
||||
public class GetAllUsersHandlerTests
|
||||
{
|
||||
private readonly Mock<IUserListRepository> _repoMock = new();
|
||||
private readonly Mock<IFileStorageProvider> _storageMock = new();
|
||||
private readonly GetAllUsersHandler _handler;
|
||||
|
||||
public GetAllUsersHandlerTests()
|
||||
{
|
||||
_storageMock
|
||||
.Setup(s => s.GetPresignedUrl(It.IsAny<string>(), It.IsAny<TimeSpan>()))
|
||||
.Returns((string key, TimeSpan _) => $"https://storage.test/{key}?signed");
|
||||
|
||||
_handler = new GetAllUsersHandler(_repoMock.Object, _storageMock.Object);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_PassesLimitAndOffset_ToRepository()
|
||||
{
|
||||
_repoMock.Setup(r => r.GetAllAsync(10, 5)).ReturnsAsync(Array.Empty<UserAccount>());
|
||||
Mock<IUserListRepository> repoMock = new();
|
||||
GetAllUsersHandler handler = new(repoMock.Object);
|
||||
repoMock.Setup(r => r.GetAllAsync(10, 5)).ReturnsAsync(Array.Empty<UserAccount>());
|
||||
|
||||
IEnumerable<PublicUserProfileDto> result = await _handler.Handle(
|
||||
IEnumerable<PublicUserProfileDto> result = await handler.Handle(
|
||||
new GetAllUsersQuery(10, 5),
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
result.Should().BeEmpty();
|
||||
_repoMock.Verify(r => r.GetAllAsync(10, 5), Times.Once);
|
||||
repoMock.Verify(r => r.GetAllAsync(10, 5), Times.Once);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_MapsUsersToPublicProfileDtos_AndExcludesPrivateFields()
|
||||
{
|
||||
Mock<IUserListRepository> repoMock = new();
|
||||
GetAllUsersHandler handler = new(repoMock.Object);
|
||||
UserAccount user = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
@@ -48,60 +38,13 @@ public class GetAllUsersHandlerTests
|
||||
LastName = "One",
|
||||
CreatedAt = DateTime.UtcNow,
|
||||
};
|
||||
_repoMock.Setup(r => r.GetAllAsync(null, null)).ReturnsAsync([user]);
|
||||
repoMock.Setup(r => r.GetAllAsync(null, null)).ReturnsAsync([user]);
|
||||
|
||||
IEnumerable<PublicUserProfileDto> result = await _handler.Handle(
|
||||
IEnumerable<PublicUserProfileDto> result = await handler.Handle(
|
||||
new GetAllUsersQuery(null, null),
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
result
|
||||
.Should()
|
||||
.ContainSingle()
|
||||
.Which.Should()
|
||||
.BeEquivalentTo(user.ToPublicProfileDto(_storageMock.Object));
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_MapsEachUsersOwnAvatarUrl()
|
||||
{
|
||||
string avatarKey = $"avatars/{Guid.NewGuid()}/{Guid.NewGuid()}";
|
||||
UserAccount withAvatar = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
Username = "has-avatar",
|
||||
FirstName = "Has",
|
||||
LastName = "Avatar",
|
||||
CreatedAt = DateTime.UtcNow,
|
||||
UserProfile = new UserProfile { Biography = "Drinks lagers." },
|
||||
UserAvatar = new UserAvatar { Photo = new Photo { Hyperlink = avatarKey } },
|
||||
};
|
||||
UserAccount withoutAvatar = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
Username = "no-avatar",
|
||||
FirstName = "No",
|
||||
LastName = "Avatar",
|
||||
CreatedAt = DateTime.UtcNow,
|
||||
};
|
||||
_repoMock.Setup(r => r.GetAllAsync(null, null)).ReturnsAsync([withAvatar, withoutAvatar]);
|
||||
|
||||
IEnumerable<PublicUserProfileDto> result = await _handler.Handle(
|
||||
new GetAllUsersQuery(null, null),
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
result
|
||||
.Select(dto => dto.AvatarUrl)
|
||||
.Should()
|
||||
.Equal($"https://storage.test/{avatarKey}?signed", string.Empty);
|
||||
_storageMock.Verify(
|
||||
s => s.GetPresignedUrl(avatarKey, UserDtoMapper.AvatarUrlLifetime),
|
||||
Times.Once
|
||||
);
|
||||
_storageMock.Verify(
|
||||
s => s.GetPresignedUrl(It.IsAny<string>(), It.IsAny<TimeSpan>()),
|
||||
Times.Once
|
||||
);
|
||||
result.Should().ContainSingle().Which.Should().BeEquivalentTo(user.ToPublicProfileDto());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
using Domain.Entities;
|
||||
using Domain.Exceptions;
|
||||
using Features.ImageUploads.Services;
|
||||
using Features.Users.Dtos;
|
||||
using Features.Users.Queries.GetPublicUserProfileById;
|
||||
using Features.Users.Repository;
|
||||
@@ -13,21 +12,15 @@ public class GetPublicUserProfileByIdHandlerTests
|
||||
{
|
||||
private readonly GetPublicUserProfileByIdHandler _handler;
|
||||
private readonly Mock<IUserListRepository> _repoMock = new();
|
||||
private readonly Mock<IFileStorageProvider> _storageMock = new();
|
||||
|
||||
public GetPublicUserProfileByIdHandlerTests()
|
||||
{
|
||||
_storageMock
|
||||
.Setup(s => s.GetPresignedUrl(It.IsAny<string>(), It.IsAny<TimeSpan>()))
|
||||
.Returns((string key, TimeSpan _) => $"https://storage.test/{key}?signed");
|
||||
|
||||
_handler = new GetPublicUserProfileByIdHandler(_repoMock.Object, _storageMock.Object);
|
||||
_handler = new GetPublicUserProfileByIdHandler(_repoMock.Object);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_ReturnsPublicProfile_WhenFound()
|
||||
{
|
||||
string avatarKey = $"avatars/{Guid.NewGuid()}/{Guid.NewGuid()}";
|
||||
UserAccount user = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
@@ -38,7 +31,6 @@ public class GetPublicUserProfileByIdHandlerTests
|
||||
DateOfBirth = new DateTime(1990, 1, 1),
|
||||
CreatedAt = new DateTime(2024, 1, 1),
|
||||
UserProfile = new UserProfile { Biography = "Drinks lagers." },
|
||||
UserAvatar = new UserAvatar { Photo = new Photo { Hyperlink = avatarKey } },
|
||||
};
|
||||
_repoMock.Setup(r => r.GetByIdAsync(user.UserAccountId)).ReturnsAsync(user);
|
||||
|
||||
@@ -56,48 +48,13 @@ public class GetPublicUserProfileByIdHandlerTests
|
||||
user.FirstName,
|
||||
user.LastName,
|
||||
"Drinks lagers.",
|
||||
$"https://storage.test/{avatarKey}?signed",
|
||||
user.CreatedAt
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// <c>Photo.Hyperlink</c> holds an object key, so the DTO has to carry a signed URL rather than
|
||||
/// the stored value: a bare key resolves against the calling page's own origin.
|
||||
/// </summary>
|
||||
[Fact]
|
||||
public async Task Handle_SignsTheAvatarKey_RatherThanReturningIt()
|
||||
{
|
||||
string avatarKey = $"avatars/{Guid.NewGuid()}/{Guid.NewGuid()}";
|
||||
UserAccount user = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
Username = "test",
|
||||
FirstName = "Jane",
|
||||
LastName = "Doe",
|
||||
CreatedAt = new DateTime(2024, 1, 1),
|
||||
UserAvatar = new UserAvatar { Photo = new Photo { Hyperlink = avatarKey } },
|
||||
};
|
||||
_repoMock.Setup(r => r.GetByIdAsync(user.UserAccountId)).ReturnsAsync(user);
|
||||
|
||||
PublicUserProfileDto result = await _handler.Handle(
|
||||
new GetPublicUserProfileByIdQuery(user.UserAccountId),
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
result.AvatarUrl.Should().NotBe(avatarKey);
|
||||
Uri.TryCreate(result.AvatarUrl, UriKind.Absolute, out Uri? uri).Should().BeTrue();
|
||||
uri!.Scheme.Should().BeOneOf("http", "https");
|
||||
uri.AbsolutePath.Should().EndWith(avatarKey);
|
||||
_storageMock.Verify(
|
||||
s => s.GetPresignedUrl(avatarKey, UserDtoMapper.AvatarUrlLifetime),
|
||||
Times.Once
|
||||
);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_ReturnsEmptyBiographyAndAvatarUrl_WhenProfileMissing()
|
||||
public async Task Handle_ReturnsEmptyBiography_WhenProfileMissing()
|
||||
{
|
||||
UserAccount user = new()
|
||||
{
|
||||
@@ -115,57 +72,6 @@ public class GetPublicUserProfileByIdHandlerTests
|
||||
);
|
||||
|
||||
result.Biography.Should().BeEmpty();
|
||||
result.AvatarUrl.Should().BeEmpty();
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_ReturnsEmptyAvatarUrl_WhenProfileHasNoAvatar()
|
||||
{
|
||||
UserAccount user = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
Username = "test",
|
||||
FirstName = "Jane",
|
||||
LastName = "Doe",
|
||||
CreatedAt = new DateTime(2024, 1, 1),
|
||||
UserProfile = new UserProfile { Biography = "Drinks lagers." },
|
||||
};
|
||||
_repoMock.Setup(r => r.GetByIdAsync(user.UserAccountId)).ReturnsAsync(user);
|
||||
|
||||
PublicUserProfileDto result = await _handler.Handle(
|
||||
new GetPublicUserProfileByIdQuery(user.UserAccountId),
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
result.Biography.Should().Be("Drinks lagers.");
|
||||
result.AvatarUrl.Should().BeEmpty();
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task Handle_ReturnsEmptyAvatarUrl_WhenAvatarHasNoPhoto()
|
||||
{
|
||||
UserAccount user = new()
|
||||
{
|
||||
UserAccountId = Guid.NewGuid(),
|
||||
Username = "test",
|
||||
FirstName = "Jane",
|
||||
LastName = "Doe",
|
||||
CreatedAt = new DateTime(2024, 1, 1),
|
||||
UserProfile = new UserProfile { Biography = "Drinks lagers." },
|
||||
UserAvatar = new UserAvatar(),
|
||||
};
|
||||
_repoMock.Setup(r => r.GetByIdAsync(user.UserAccountId)).ReturnsAsync(user);
|
||||
|
||||
PublicUserProfileDto result = await _handler.Handle(
|
||||
new GetPublicUserProfileByIdQuery(user.UserAccountId),
|
||||
CancellationToken.None
|
||||
);
|
||||
|
||||
result.AvatarUrl.Should().BeEmpty();
|
||||
_storageMock.Verify(
|
||||
s => s.GetPresignedUrl(It.IsAny<string>(), It.IsAny<TimeSpan>()),
|
||||
Times.Never
|
||||
);
|
||||
}
|
||||
|
||||
[Fact]
|
||||
|
||||
@@ -1,39 +1,19 @@
|
||||
using Domain.Entities;
|
||||
using Features.ImageUploads.Services;
|
||||
|
||||
namespace Features.Users.Dtos;
|
||||
|
||||
/// <summary>Converts user domain entities into API response models.</summary>
|
||||
public static class UserDtoMapper
|
||||
{
|
||||
/// <summary>
|
||||
/// How long a presigned avatar URL stays valid. Long enough to outlive the page that embeds it,
|
||||
/// short enough that a leaked URL stops working.
|
||||
/// </summary>
|
||||
public static readonly TimeSpan AvatarUrlLifetime = TimeSpan.FromHours(1);
|
||||
|
||||
/// <summary>Converts a user account into its public-profile representation.</summary>
|
||||
/// <param name="user">The account to convert.</param>
|
||||
/// <param name="fileStorageProvider">
|
||||
/// Signs the download URL for the account's avatar. <c>Photo.Hyperlink</c> holds an object key
|
||||
/// rather than a URL, so it has to be signed before a client can fetch it.
|
||||
/// </param>
|
||||
public static PublicUserProfileDto ToPublicProfileDto(
|
||||
this UserAccount user,
|
||||
IFileStorageProvider fileStorageProvider
|
||||
)
|
||||
public static PublicUserProfileDto ToPublicProfileDto(this UserAccount user)
|
||||
{
|
||||
string? avatarKey = user.UserAvatar?.Photo?.Hyperlink;
|
||||
|
||||
return new PublicUserProfileDto(
|
||||
UserAccountId : user.UserAccountId,
|
||||
Username : user.Username,
|
||||
FirstName : user.FirstName,
|
||||
LastName : user.LastName,
|
||||
Biography : user.UserProfile?.Biography ?? string.Empty,
|
||||
AvatarUrl : string.IsNullOrWhiteSpace(avatarKey)
|
||||
? string.Empty
|
||||
: fileStorageProvider.GetPresignedUrl(avatarKey, AvatarUrlLifetime),
|
||||
CreatedAt : user.CreatedAt
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,5 @@ public record PublicUserProfileDto(
|
||||
string FirstName,
|
||||
string LastName,
|
||||
string Biography,
|
||||
string AvatarUrl,
|
||||
DateTime CreatedAt
|
||||
);
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
using Domain.Entities;
|
||||
using Features.ImageUploads.Services;
|
||||
using Features.Users.Dtos;
|
||||
using Features.Users.Repository;
|
||||
using MediatR;
|
||||
|
||||
namespace Features.Users.Queries.GetAllUsers;
|
||||
|
||||
public class GetAllUsersHandler(
|
||||
IUserListRepository repository,
|
||||
IFileStorageProvider fileStorageProvider
|
||||
) : IRequestHandler<GetAllUsersQuery, IEnumerable<PublicUserProfileDto>>
|
||||
public class GetAllUsersHandler(IUserListRepository repository)
|
||||
: IRequestHandler<GetAllUsersQuery, IEnumerable<PublicUserProfileDto>>
|
||||
{
|
||||
public async Task<IEnumerable<PublicUserProfileDto>> Handle(
|
||||
GetAllUsersQuery request,
|
||||
@@ -17,6 +14,6 @@ public class GetAllUsersHandler(
|
||||
)
|
||||
{
|
||||
IEnumerable<UserAccount> users = await repository.GetAllAsync(request.Limit, request.Offset);
|
||||
return users.Select(user => user.ToPublicProfileDto(fileStorageProvider));
|
||||
return users.Select(user => user.ToPublicProfileDto());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
using Domain.Entities;
|
||||
using Domain.Exceptions;
|
||||
using Features.ImageUploads.Services;
|
||||
using Features.Users.Dtos;
|
||||
using Features.Users.Repository;
|
||||
using MediatR;
|
||||
|
||||
namespace Features.Users.Queries.GetPublicUserProfileById;
|
||||
|
||||
public class GetPublicUserProfileByIdHandler(
|
||||
IUserListRepository repository,
|
||||
IFileStorageProvider fileStorageProvider
|
||||
) : IRequestHandler<GetPublicUserProfileByIdQuery, PublicUserProfileDto>
|
||||
public class GetPublicUserProfileByIdHandler(IUserListRepository repository)
|
||||
: IRequestHandler<GetPublicUserProfileByIdQuery, PublicUserProfileDto>
|
||||
{
|
||||
/// <exception cref="NotFoundException">Thrown when no user account exists with the given ID.</exception>
|
||||
public async Task<PublicUserProfileDto> Handle(
|
||||
@@ -21,6 +18,6 @@ public class GetPublicUserProfileByIdHandler(
|
||||
UserAccount? user = await repository.GetByIdAsync(request.UserAccountId);
|
||||
if (user is null)
|
||||
throw new NotFoundException($"User with ID {request.UserAccountId} not found");
|
||||
return user.ToPublicProfileDto(fileStorageProvider);
|
||||
return user.ToPublicProfileDto();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,10 +15,7 @@ public class UserListRepository(ISqlConnectionFactory connectionFactory)
|
||||
/// <inheritdoc />
|
||||
/// <remarks>
|
||||
/// Left-joins <c>Social.UserProfile</c>, so <see cref="UserAccount.UserProfile" /> is
|
||||
/// <c>null</c> for an account whose profile has yet to be created, and left-joins the
|
||||
/// account's active <c>Social.UserAvatar</c> (<c>ValidTo IS NULL</c>) with its
|
||||
/// <c>Media.Photo</c>, so <see cref="UserAccount.UserAvatar" /> is <c>null</c> for an account
|
||||
/// with no avatar.
|
||||
/// <c>null</c> for an account whose profile has yet to be created.
|
||||
/// </remarks>
|
||||
public async Task<UserAccount?> GetByIdAsync(Guid id)
|
||||
{
|
||||
@@ -26,89 +23,51 @@ public class UserListRepository(ISqlConnectionFactory connectionFactory)
|
||||
IEnumerable<UserAccount> results = await connection.QueryAsync<
|
||||
UserAccount,
|
||||
UserProfile,
|
||||
Photo,
|
||||
UserAvatar,
|
||||
UserAccount
|
||||
>(
|
||||
"""
|
||||
SELECT
|
||||
ua.UserAccountID, ua.Username, ua.FirstName, ua.LastName,
|
||||
ua.Email, ua.CreatedAt, ua.UpdatedAt, ua.DateOfBirth,
|
||||
ua.RowVersion, up.UserProfileID, up.UserAccountID,
|
||||
up.Biography, up.RowVersion, p.PhotoID, p.UploadedByID,
|
||||
p.Hyperlink, p.UploadedAt, p.RowVersion, av.UserAvatarID,
|
||||
av.UserProfileID, av.PhotoID, av.ValidFrom, av.ValidTo,
|
||||
av.RowVersion
|
||||
ua.UserAccountID,
|
||||
ua.Username,
|
||||
ua.FirstName, ua.LastName, ua.Email, ua.CreatedAt, ua.UpdatedAt,
|
||||
ua.DateOfBirth, ua.RowVersion,
|
||||
up.UserProfileID, up.UserAccountID, up.Biography, up.RowVersion
|
||||
FROM Auth.UserAccount ua
|
||||
LEFT JOIN Social.UserProfile up
|
||||
ON ua.UserAccountID = up.UserAccountID
|
||||
LEFT JOIN Social.UserAvatar av
|
||||
ON up.UserProfileID = av.UserProfileID
|
||||
AND av.ValidTo IS NULL
|
||||
LEFT JOIN Media.Photo p ON av.PhotoID = p.PhotoID
|
||||
LEFT JOIN Social.UserProfile up ON ua.UserAccountID = up.UserAccountID
|
||||
WHERE ua.UserAccountID = @UserAccountId
|
||||
""",
|
||||
MapUserRow,
|
||||
new { UserAccountId = id },
|
||||
splitOn: AvatarSplitOn
|
||||
splitOn: "UserProfileID"
|
||||
);
|
||||
|
||||
return results.SingleOrDefault();
|
||||
}
|
||||
|
||||
private static UserAccount MapUserRow(UserAccount user, UserProfile? profile)
|
||||
{
|
||||
user.UserProfile = profile;
|
||||
return user;
|
||||
}
|
||||
|
||||
/// <inheritdoc />
|
||||
/// <remarks>
|
||||
/// Always applies pagination via <c>OFFSET</c>/<c>FETCH</c>, ordered by creation date descending.
|
||||
/// A <c>null</c> <paramref name="limit" />/<paramref name="offset" /> is treated as "no limit"/"no offset".
|
||||
/// Joins the same profile and active-avatar rows as <see cref="GetByIdAsync" />, both of which are
|
||||
/// part of a public profile. Does not select <c>Email</c> or <c>DateOfBirth</c>: this listing is
|
||||
/// consumed only as public profiles, so those fields are left at their default rather than read
|
||||
/// from the database.
|
||||
/// Does not select <c>Email</c> or <c>DateOfBirth</c>: this listing is consumed only as public
|
||||
/// profiles, so those fields are left at their default rather than read from the database.
|
||||
/// </remarks>
|
||||
public async Task<IEnumerable<UserAccount>> GetAllAsync(int? limit, int? offset)
|
||||
{
|
||||
await using DbConnection connection = await CreateConnection();
|
||||
return await connection.QueryAsync<
|
||||
UserAccount,
|
||||
UserProfile,
|
||||
Photo,
|
||||
UserAvatar,
|
||||
UserAccount
|
||||
>(
|
||||
return await connection.QueryAsync<UserAccount>(
|
||||
"""
|
||||
SELECT
|
||||
ua.UserAccountID, ua.Username, ua.FirstName, ua.LastName,
|
||||
ua.CreatedAt, ua.UpdatedAt, ua.RowVersion,
|
||||
up.UserProfileID, up.UserAccountID, up.Biography, up.RowVersion,
|
||||
p.PhotoID, p.UploadedByID, p.Hyperlink, p.UploadedAt, p.RowVersion,
|
||||
av.UserAvatarID, av.UserProfileID, av.PhotoID, av.ValidFrom, av.ValidTo,
|
||||
av.RowVersion
|
||||
FROM Auth.UserAccount ua
|
||||
LEFT JOIN Social.UserProfile up ON ua.UserAccountID = up.UserAccountID
|
||||
LEFT JOIN Social.UserAvatar av
|
||||
ON up.UserProfileID = av.UserProfileID AND av.ValidTo IS NULL
|
||||
LEFT JOIN Media.Photo p ON av.PhotoID = p.PhotoID
|
||||
ORDER BY ua.CreatedAt DESC
|
||||
SELECT UserAccountID, Username, FirstName, LastName, CreatedAt, UpdatedAt, RowVersion
|
||||
FROM Auth.UserAccount
|
||||
ORDER BY CreatedAt DESC
|
||||
OFFSET @Offset ROWS FETCH NEXT @Limit ROWS ONLY
|
||||
""",
|
||||
MapUserRow,
|
||||
new { Offset = offset ?? 0, Limit = limit ?? int.MaxValue },
|
||||
splitOn: AvatarSplitOn
|
||||
new { Offset = offset ?? 0, Limit = limit ?? int.MaxValue }
|
||||
);
|
||||
}
|
||||
|
||||
private const string AvatarSplitOn = "UserProfileID,PhotoID,UserAvatarID";
|
||||
|
||||
private static UserAccount MapUserRow(
|
||||
UserAccount user,
|
||||
UserProfile? profile,
|
||||
Photo? photo,
|
||||
UserAvatar? avatar
|
||||
)
|
||||
{
|
||||
user.UserProfile = profile;
|
||||
avatar?.Photo = photo;
|
||||
user.UserAvatar = avatar;
|
||||
return user;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,6 @@ services:
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
|
||||
@@ -72,7 +72,6 @@ services:
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
@@ -111,7 +110,6 @@ services:
|
||||
CONFIRMATION_TOKEN_SECRET: "${CONFIRMATION_TOKEN_SECRET}"
|
||||
WEBSITE_BASE_URL: "${WEBSITE_BASE_URL}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
|
||||
@@ -84,7 +84,6 @@ services:
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
# docker compose --env-file web/.env.prod -f web/docker-compose.prod.seed.yaml run --rm --build database.seed
|
||||
name: biergarten-prod-seed
|
||||
|
||||
services:
|
||||
database.seed:
|
||||
env_file: ".env.prod"
|
||||
image: database.seed
|
||||
container_name: prod-env-database-seed
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Database/Database.Seed/Dockerfile
|
||||
args:
|
||||
BUILD_CONFIGURATION: Release
|
||||
APP_UID: 1000
|
||||
environment:
|
||||
DOTNET_RUNNING_IN_CONTAINER: "true"
|
||||
DB_SERVER: "${DB_SERVER}"
|
||||
DB_NAME: "${DB_NAME}"
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
restart: "no"
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
networks:
|
||||
prodnet:
|
||||
name: biergarten-prodnet
|
||||
external: true
|
||||
@@ -20,8 +20,58 @@ services:
|
||||
timeout: 5s
|
||||
retries: 12
|
||||
start_period: 30s
|
||||
restart: unless-stopped
|
||||
stop_grace_period: 60s
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
database.migrations:
|
||||
env_file: ".env.prod"
|
||||
image: database.migrations
|
||||
container_name: prod-env-database-migrations
|
||||
depends_on:
|
||||
sqlserver:
|
||||
condition: service_healthy
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Database/Database.Migrations/Dockerfile
|
||||
args:
|
||||
BUILD_CONFIGURATION: Release
|
||||
APP_UID: 1000
|
||||
environment:
|
||||
DOTNET_RUNNING_IN_CONTAINER: "true"
|
||||
DB_SERVER: "${DB_SERVER}"
|
||||
DB_NAME: "${DB_NAME}"
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
restart: "no"
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
database.seed:
|
||||
env_file: ".env.prod"
|
||||
image: database.seed
|
||||
container_name: prod-env-database-seed
|
||||
depends_on:
|
||||
database.migrations:
|
||||
condition: service_completed_successfully
|
||||
seaweedfs:
|
||||
condition: service_started
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Database/Database.Seed/Dockerfile
|
||||
args:
|
||||
BUILD_CONFIGURATION: Release
|
||||
APP_UID: 1000
|
||||
environment:
|
||||
DOTNET_RUNNING_IN_CONTAINER: "true"
|
||||
DB_SERVER: "${DB_SERVER}"
|
||||
DB_NAME: "${DB_NAME}"
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
restart: "no"
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
@@ -30,14 +80,18 @@ services:
|
||||
image: api.core
|
||||
container_name: prod-env-api-core
|
||||
depends_on:
|
||||
database.seed:
|
||||
condition: service_completed_successfully
|
||||
seaweedfs:
|
||||
condition: service_healthy
|
||||
condition: service_started
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: API/API.Core/Dockerfile
|
||||
args:
|
||||
BUILD_CONFIGURATION: Release
|
||||
APP_UID: 1000
|
||||
# No published ports: only the frontend service is reachable from outside
|
||||
# the Docker network in production. api.core stays internal to prodnet.
|
||||
environment:
|
||||
ASPNETCORE_ENVIRONMENT: "Production"
|
||||
ASPNETCORE_URLS: "http://0.0.0.0:8080"
|
||||
@@ -51,42 +105,27 @@ services:
|
||||
CONFIRMATION_TOKEN_SECRET: "${CONFIRMATION_TOKEN_SECRET}"
|
||||
WEBSITE_BASE_URL: "${WEBSITE_BASE_URL}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
healthcheck:
|
||||
test:
|
||||
[
|
||||
"CMD",
|
||||
"bash",
|
||||
"-c",
|
||||
'exec 3<>/dev/tcp/127.0.0.1/8080; printf "GET /health HTTP/1.1\r\nHost: localhost\r\nConnection: close\r\n\r\n" >&3; head -1 <&3 | grep -q " 200 "',
|
||||
]
|
||||
interval: 15s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
start_period: 30s
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- prodnet
|
||||
volumes:
|
||||
- nuget-cache-prod:/root/.nuget/packages
|
||||
|
||||
seaweedfs:
|
||||
env_file: ".env.prod"
|
||||
image: chrislusf/seaweedfs
|
||||
container_name: prod-env-seaweedfs
|
||||
# No published ports: the S3 API, filer, master and admin UIs are reachable
|
||||
# only from other containers on prodnet.
|
||||
environment:
|
||||
AWS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
AWS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
S3_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
volumes:
|
||||
- seaweedfsdata-prod:/data
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-fsS", "-o", "/dev/null", "http://localhost:8333/status"]
|
||||
interval: 15s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
start_period: 20s
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- prodnet
|
||||
@@ -97,7 +136,7 @@ services:
|
||||
container_name: prod-env-frontend
|
||||
depends_on:
|
||||
api.core:
|
||||
condition: service_healthy
|
||||
condition: service_started
|
||||
build:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
@@ -108,23 +147,21 @@ services:
|
||||
PORT: "5656"
|
||||
API_BASE_URL: "http://api.core:8080"
|
||||
SESSION_SECRET: "${SESSION_SECRET}"
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "--quiet", "--spider", "--tries=1", "http://127.0.0.1:5656/healthz"]
|
||||
interval: 15s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
start_period: 15s
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
volumes:
|
||||
# Declared external so `docker compose down -v` leaves the data alone: Compose
|
||||
# removes only the volumes it owns. Create them once with `docker volume
|
||||
# create` before the first `up`.
|
||||
biergartendata-prod:
|
||||
external: true
|
||||
seaweedfsdata-prod:
|
||||
external: true
|
||||
nuget-cache-prod:
|
||||
driver: local
|
||||
|
||||
networks:
|
||||
prodnet:
|
||||
name: biergarten-prodnet
|
||||
driver: bridge
|
||||
|
||||
@@ -70,7 +70,6 @@ services:
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_PUBLIC_URL: "${SEAWEEDFS_PUBLIC_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
|
||||
@@ -34,38 +34,38 @@ h6,
|
||||
--color-base-100: oklch(96% 0.012 82); /* warm parchment */
|
||||
--color-base-200: oklch(92% 0.018 80); /* brushed paper */
|
||||
--color-base-300: oklch(87% 0.025 78); /* tinted linen */
|
||||
--color-base-content: oklch(28% 0.025 58); /* dark brown ink */
|
||||
--color-base-content: oklch(28% 0.025 58); /* dark brown ink — 15.6:1 on base-100 */
|
||||
|
||||
--color-primary: oklch(47.5% 0.085 62); /* mellow amber */
|
||||
--color-primary-content: oklch(97% 0.02 62); /* warm near-white */
|
||||
--color-primary: oklch(65% 0.085 62); /* mellow amber */
|
||||
--color-primary-content: oklch(97% 0.02 62); /* warm near-white — 7.2:1 on primary */
|
||||
|
||||
--color-secondary: oklch(42% 0.05 42); /* softened mahogany */
|
||||
--color-secondary-content: oklch(96% 0.01 76); /* off-white */
|
||||
--color-secondary-content: oklch(96% 0.01 76); /* off-white — 14.2:1 on secondary */
|
||||
|
||||
--color-accent: oklch(93% 0.015 90); /* frothy cream */
|
||||
--color-accent-content: oklch(28% 0.025 58); /* dark brown */
|
||||
--color-accent-content: oklch(28% 0.025 58); /* dark brown — 12.8:1 on accent */
|
||||
|
||||
--color-neutral: oklch(28% 0.02 46); /* warm roast dark */
|
||||
--color-neutral-content: oklch(92% 0.012 80); /* pale parchment */
|
||||
--color-neutral-content: oklch(92% 0.012 80); /* pale parchment — 12.0:1 on neutral */
|
||||
|
||||
--color-info: oklch(46% 0.065 145); /* muted hop green */
|
||||
--color-info-content: oklch(97% 0.008 145); /* near-white */
|
||||
--color-info-content: oklch(97% 0.008 145); /* near-white — 14.2:1 on info */
|
||||
|
||||
--color-success: oklch(46.5% 0.06 122); /* soft barley gold */
|
||||
--color-success-content: oklch(97% 0.02 122); /* warm near-white */
|
||||
--color-success: oklch(70% 0.06 122); /* soft barley gold */
|
||||
--color-success-content: oklch(97% 0.02 122); /* warm near-white — 5.7:1 on success */
|
||||
|
||||
--color-warning: oklch(47.5% 0.09 56); /* toned amber */
|
||||
--color-warning-content: oklch(97% 0.02 56); /* warm near-white */
|
||||
--color-warning: oklch(72% 0.09 56); /* toned amber */
|
||||
--color-warning-content: oklch(97% 0.02 56); /* warm near-white — 4.7:1 on warning */
|
||||
|
||||
--color-error: oklch(48% 0.09 22); /* restrained cherry */
|
||||
--color-error-content: oklch(97% 0.006 15); /* near-white */
|
||||
--color-error: oklch(54% 0.09 22); /* restrained cherry */
|
||||
--color-error-content: oklch(97% 0.006 15); /* near-white — 11.1:1 on error */
|
||||
|
||||
--color-surface: oklch(88% 0.02 82); /* mid parchment, elevated cards */
|
||||
--color-surface-content: oklch(28% 0.025 58); /* dark brown */
|
||||
--color-surface-content: oklch(28% 0.025 58); /* dark brown — 9.2:1 on surface */
|
||||
|
||||
--color-muted: oklch(42% 0.055 62); /* amber-brown */
|
||||
--color-muted: oklch(42% 0.055 62); /* amber-brown — 14.2:1 on base-100, 8.3:1 on surface */
|
||||
--color-highlight: oklch(78% 0.055 65); /* warm amber, hover and active states */
|
||||
--color-highlight-content: oklch(22% 0.025 55); /* dark brown */
|
||||
--color-highlight-content: oklch(22% 0.025 55); /* dark brown — 4.9:1 on highlight */
|
||||
|
||||
--radius-selector: 0.375rem;
|
||||
--radius-field: 0.5rem;
|
||||
@@ -91,38 +91,38 @@ h6,
|
||||
--color-base-100: oklch(14% 0.006 45); /* charred barrel black */
|
||||
--color-base-200: oklch(18% 0.008 43); /* roasted malt dark */
|
||||
--color-base-300: oklch(23% 0.01 42); /* deep brown */
|
||||
--color-base-content: oklch(88% 0.008 75); /* warm off-white */
|
||||
--color-base-content: oklch(88% 0.008 75); /* warm off-white — 9.4:1 on base-100 */
|
||||
|
||||
--color-primary: oklch(68% 0.055 60); /* golden amber */
|
||||
--color-primary-content: oklch(30.5% 0.012 50); /* warm off-white */
|
||||
--color-primary-content: oklch(92% 0.012 50); /* warm off-white — 4.6:1 on primary */
|
||||
|
||||
--color-secondary: oklch(62.5% 0.035 40); /* deep mahogany ale */
|
||||
--color-secondary-content: oklch(23.5% 0.005 75); /* near-white */
|
||||
--color-secondary: oklch(48% 0.035 40); /* deep mahogany ale */
|
||||
--color-secondary-content: oklch(97% 0.005 75); /* near-white — 13.9:1 on secondary */
|
||||
|
||||
--color-accent: oklch(82% 0.01 88); /* frothy cream head */
|
||||
--color-accent-content: oklch(18% 0.012 55); /* near-black */
|
||||
--color-accent-content: oklch(18% 0.012 55); /* near-black — 6.2:1 on accent */
|
||||
|
||||
--color-neutral: oklch(20% 0.008 45); /* near-black with warmth */
|
||||
--color-neutral-content: oklch(88% 0.007 78); /* warm off-white */
|
||||
--color-neutral-content: oklch(88% 0.007 78); /* warm off-white — 9.3:1 on neutral */
|
||||
|
||||
--color-info: oklch(61.5% 0.04 145); /* cool hop green */
|
||||
--color-info-content: oklch(23% 0.006 145); /* pale green-white */
|
||||
--color-info: oklch(60% 0.04 145); /* cool hop green */
|
||||
--color-info-content: oklch(86% 0.006 145); /* pale green-white — 4.6:1 on info */
|
||||
|
||||
--color-success: oklch(66% 0.038 120); /* fresh barley */
|
||||
--color-success-content: oklch(28.5% 0.012 120); /* pale barley-white */
|
||||
--color-success-content: oklch(90% 0.012 120); /* pale barley-white — 4.6:1 on success */
|
||||
|
||||
--color-warning: oklch(70% 0.055 55); /* amber harvest */
|
||||
--color-warning-content: oklch(32.5% 0.012 55); /* warm near-white */
|
||||
--color-warning-content: oklch(94% 0.012 55); /* warm near-white — 4.7:1 on warning */
|
||||
|
||||
--color-error: oklch(62.5% 0.06 20); /* deep cherry kriek */
|
||||
--color-error-content: oklch(23% 0.004 15); /* near-white */
|
||||
--color-error: oklch(50% 0.06 20); /* deep cherry kriek */
|
||||
--color-error-content: oklch(97% 0.004 15); /* near-white — 13.1:1 on error */
|
||||
|
||||
--color-surface: oklch(26% 0.012 45); /* elevated dark panel */
|
||||
--color-surface-content: oklch(88% 0.008 75); /* warm off-white */
|
||||
--color-surface-content: oklch(88% 0.008 75); /* warm off-white — 9.2:1 on surface */
|
||||
|
||||
--color-muted: oklch(78% 0.018 72); /* warm grey */
|
||||
--color-muted: oklch(78% 0.018 72); /* warm grey — 4.7:1 on base-100, 4.6:1 on surface */
|
||||
--color-highlight: oklch(32% 0.025 48); /* warm dark brown, hover and active states */
|
||||
--color-highlight-content: oklch(88% 0.008 75); /* warm off-white */
|
||||
--color-highlight-content: oklch(88% 0.008 75); /* warm off-white — 9.0:1 on highlight */
|
||||
|
||||
--radius-selector: 0.375rem;
|
||||
--radius-field: 0.5rem;
|
||||
@@ -148,38 +148,40 @@ h6,
|
||||
--color-base-100: oklch(13% 0.01 295); /* blackberry-stained near-black */
|
||||
--color-base-200: oklch(17% 0.013 292); /* deep purple-black */
|
||||
--color-base-300: oklch(22% 0.016 290); /* dark grape */
|
||||
--color-base-content: oklch(90% 0.014 300); /* pale lavender-white */
|
||||
--color-base-content: oklch(90% 0.014 300); /* pale lavender-white — 10.7:1 on base-100 */
|
||||
|
||||
--color-primary: oklch(72% 0.075 295); /* cassis berry purple */
|
||||
--color-primary-content: oklch(34% 0.01 295); /* pale lavender */
|
||||
--color-primary-content: oklch(95% 0.01 295); /* pale lavender — 4.5:1 on primary */
|
||||
|
||||
--color-secondary: oklch(68% 0.06 10); /* sour cherry rose */
|
||||
--color-secondary-content: oklch(30% 0.006 10); /* warm near-white */
|
||||
--color-secondary-content: oklch(92% 0.006 10); /* warm near-white — 4.6:1 on secondary */
|
||||
|
||||
--color-accent: oklch(75% 0.045 130); /* tart lime zest */
|
||||
--color-accent-content: oklch(37.5% 0.01 130); /* near-white */
|
||||
--color-accent-content: oklch(98.5% 0.01 130); /* near-white — 4.8:1 on accent */
|
||||
|
||||
--color-neutral: oklch(18% 0.016 290); /* deep blackened grape */
|
||||
--color-neutral-content: oklch(88% 0.01 295); /* pale lavender */
|
||||
--color-neutral-content: oklch(88% 0.01 295); /* pale lavender — 9.3:1 on neutral */
|
||||
|
||||
--color-info: oklch(62% 0.04 250); /* muted indigo */
|
||||
--color-info-content: oklch(23% 0.008 250); /* pale indigo-white */
|
||||
--color-info-content: oklch(88% 0.008 250); /* pale indigo-white — 4.8:1 on info */
|
||||
|
||||
--color-success: oklch(65% 0.04 145); /* elderberry green */
|
||||
--color-success-content: oklch(27.5% 0.008 145); /* pale green-white */
|
||||
--color-success-content: oklch(90% 0.008 145); /* pale green-white — 4.7:1 on success */
|
||||
|
||||
--color-warning: oklch(70% 0.05 65); /* sour apricot */
|
||||
--color-warning-content: oklch(32.5% 0.03 65); /* near-white */
|
||||
--color-warning-content: oklch(97% 0.03 65); /* near-white — 5.6:1 on warning */
|
||||
|
||||
--color-error: oklch(62% 0.055 22); /* kriek red */
|
||||
--color-error-content: oklch(22% 0.006 22); /* near-white */
|
||||
--color-error: oklch(50% 0.055 22); /* kriek red */
|
||||
--color-error-content: oklch(97% 0.006 22); /* near-white — 13.2:1 on error */
|
||||
|
||||
--color-surface: oklch(27% 0.022 292); /* lifted purple-black panel */
|
||||
--color-surface-content: oklch(90% 0.014 300); /* pale lavender-white */
|
||||
--color-surface-content: oklch(90% 0.014 300); /* pale lavender-white — 10.4:1 on surface */
|
||||
|
||||
--color-muted: oklch(77.6% 0.022 300); /* desaturated lavender */
|
||||
--color-muted: oklch(
|
||||
77.6% 0.022 300
|
||||
); /* desaturated lavender — 4.6:1 on base-100, 4.5:1 on surface */
|
||||
--color-highlight: oklch(35% 0.04 295); /* cassis-tinted hover and active state */
|
||||
--color-highlight-content: oklch(90% 0.014 300); /* pale lavender-white */
|
||||
--color-highlight-content: oklch(90% 0.014 300); /* pale lavender-white — 10.1:1 on highlight */
|
||||
|
||||
--radius-selector: 0.5rem;
|
||||
--radius-field: 0.5rem;
|
||||
@@ -205,38 +207,38 @@ h6,
|
||||
--color-base-100: oklch(99% 0.007 112); /* near-white with faint barley-green tint */
|
||||
--color-base-200: oklch(96% 0.012 114); /* pale barley wash */
|
||||
--color-base-300: oklch(92% 0.019 116); /* light straw */
|
||||
--color-base-content: oklch(20% 0.022 122); /* deep green-black */
|
||||
--color-base-content: oklch(20% 0.022 122); /* deep green-black — 19.5:1 on base-100 */
|
||||
|
||||
--color-primary: oklch(50% 0.085 118); /* fresh-cut barley green */
|
||||
--color-primary-content: oklch(97% 0.005 118); /* near-white */
|
||||
--color-primary: oklch(52% 0.085 118); /* fresh-cut barley green */
|
||||
--color-primary-content: oklch(97% 0.005 118); /* near-white — 12.5:1 on primary */
|
||||
|
||||
--color-secondary: oklch(44% 0.055 128); /* muted sage stem */
|
||||
--color-secondary-content: oklch(97% 0.005 128); /* near-white */
|
||||
--color-secondary-content: oklch(97% 0.005 128); /* near-white — 14.8:1 on secondary */
|
||||
|
||||
--color-accent: oklch(93% 0.03 148); /* pale morning dew */
|
||||
--color-accent-content: oklch(22% 0.022 148); /* deep green */
|
||||
--color-accent-content: oklch(22% 0.022 148); /* deep green — 13.4:1 on accent */
|
||||
|
||||
--color-neutral: oklch(76% 0.028 118); /* dried straw, surface differentiation */
|
||||
--color-neutral-content: oklch(38.4% 0.005 118); /* near-white */
|
||||
--color-neutral-content: oklch(98.9% 0.005 118); /* near-white — 4.6:1 on neutral */
|
||||
|
||||
--color-info: oklch(38% 0.065 232); /* clear summer sky */
|
||||
--color-info-content: oklch(98% 0.005 232); /* near-white */
|
||||
--color-info-content: oklch(98% 0.005 232); /* near-white — 16.8:1 on info */
|
||||
|
||||
--color-success: oklch(38% 0.085 145); /* young shoot green */
|
||||
--color-success-content: oklch(98% 0.005 145); /* near-white */
|
||||
--color-success-content: oklch(98% 0.005 145); /* near-white — 16.8:1 on success */
|
||||
|
||||
--color-warning: oklch(51% 0.1 76); /* ripening grain amber */
|
||||
--color-warning-content: oklch(92.5% 0.005 72); /* warm near-white */
|
||||
--color-warning: oklch(68% 0.1 76); /* ripening grain amber */
|
||||
--color-warning-content: oklch(92.5% 0.005 72); /* warm near-white — 4.5:1 on warning */
|
||||
|
||||
--color-error: oklch(51.5% 0.1 18); /* dusty rose red */
|
||||
--color-error-content: oklch(98% 0.005 15); /* near-white */
|
||||
--color-error: oklch(52% 0.1 18); /* dusty rose red */
|
||||
--color-error-content: oklch(98% 0.005 15); /* near-white — 12.5:1 on error */
|
||||
|
||||
--color-surface: oklch(94% 0.012 112); /* soft barley-wash panel */
|
||||
--color-surface-content: oklch(20% 0.022 122); /* deep green-black */
|
||||
--color-surface-content: oklch(20% 0.022 122); /* deep green-black — 14.0:1 on surface */
|
||||
|
||||
--color-muted: oklch(38% 0.055 120); /* sage green */
|
||||
--color-muted: oklch(38% 0.055 120); /* sage green — 18.1:1 on base-100, 13.0:1 on surface */
|
||||
--color-highlight: oklch(85% 0.04 118); /* green-tinted hover and active state */
|
||||
--color-highlight-content: oklch(20% 0.022 122); /* deep green-black */
|
||||
--color-highlight-content: oklch(20% 0.022 122); /* deep green-black — 7.8:1 on highlight */
|
||||
|
||||
--radius-selector: 2rem;
|
||||
--radius-field: 2rem;
|
||||
@@ -247,33 +249,3 @@ h6,
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
/* WCAG 1.4.11: form-field borders at >= 3:1 against every base layer */
|
||||
:is(.input, .select, .textarea):not(
|
||||
.input-neutral,
|
||||
.input-primary,
|
||||
.input-secondary,
|
||||
.input-accent,
|
||||
.input-info,
|
||||
.input-success,
|
||||
.input-warning,
|
||||
.input-error,
|
||||
.select-neutral,
|
||||
.select-primary,
|
||||
.select-secondary,
|
||||
.select-accent,
|
||||
.select-info,
|
||||
.select-success,
|
||||
.select-warning,
|
||||
.select-error,
|
||||
.textarea-neutral,
|
||||
.textarea-primary,
|
||||
.textarea-secondary,
|
||||
.textarea-accent,
|
||||
.textarea-info,
|
||||
.textarea-success,
|
||||
.textarea-warning,
|
||||
.textarea-error
|
||||
) {
|
||||
--input-color: color-mix(in oklab, var(--color-base-content) 56%, #0000);
|
||||
}
|
||||
|
||||
@@ -21,26 +21,19 @@ const FormField = ({
|
||||
}: FormFieldProps) => {
|
||||
return (
|
||||
<Field className={className ?? 'space-y-1'}>
|
||||
<Label
|
||||
htmlFor={inputProps.id}
|
||||
className={labelClassName ?? 'label text-sm font-semibold text-base-content'}
|
||||
>
|
||||
<Label htmlFor={inputProps.id} className={labelClassName ?? 'label font-medium'}>
|
||||
{label}
|
||||
</Label>
|
||||
|
||||
<input
|
||||
{...inputProps}
|
||||
className={
|
||||
inputClassName ?? `input h-11 w-full text-base ${error ? 'input-error' : ''}`
|
||||
}
|
||||
className={inputClassName ?? `input w-full ${error ? 'input-error' : ''}`}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<Description className={hintClassName ?? 'text-xs text-error'}>{error}</Description>
|
||||
<Description className={hintClassName ?? 'label text-error'}>{error}</Description>
|
||||
) : hint ? (
|
||||
<Description className={hintClassName ?? 'text-xs text-[var(--color-muted)]'}>
|
||||
{hint}
|
||||
</Description>
|
||||
<Description className={hintClassName ?? 'label'}>{hint}</Description>
|
||||
) : null}
|
||||
</Field>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
|
||||
import { Link, useLocation } from 'react-router';
|
||||
import { Link } from 'react-router';
|
||||
import NavLinks from './NavLinks';
|
||||
import UserMenu from './UserMenu';
|
||||
|
||||
@@ -12,93 +12,85 @@ interface NavbarProps {
|
||||
} | null;
|
||||
}
|
||||
|
||||
const Navbar = ({ auth }: NavbarProps) => {
|
||||
const { pathname } = useLocation();
|
||||
const onAuthRoute = pathname === '/login' || pathname === '/register';
|
||||
const showAuthActions = !auth && !onAuthRoute;
|
||||
|
||||
return (
|
||||
<Disclosure
|
||||
as="nav"
|
||||
className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
|
||||
<div className="navbar-start gap-2">
|
||||
<DisclosureButton
|
||||
className="btn btn-ghost btn-square lg:hidden"
|
||||
aria-label="Toggle navigation"
|
||||
const Navbar = ({ auth }: NavbarProps) => (
|
||||
<Disclosure
|
||||
as="nav"
|
||||
className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
|
||||
<div className="navbar-start gap-2">
|
||||
<DisclosureButton
|
||||
className="btn btn-ghost btn-square lg:hidden"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5 stroke-current"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5 stroke-current"
|
||||
>
|
||||
{open ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</DisclosureButton>
|
||||
|
||||
<Link to="/" className="lg:text-xl text-lg font-bold">
|
||||
The Biergarten App
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<NavLinks variant="desktop" showRegister={showAuthActions} />
|
||||
|
||||
<div className="navbar-end gap-2">
|
||||
{showAuthActions && (
|
||||
<Link
|
||||
to="/register"
|
||||
className="btn btn-ghost btn-sm hidden sm:inline-flex"
|
||||
>
|
||||
Register User
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{auth ? (
|
||||
<>
|
||||
<Link to="/dashboard" className="btn btn-primary btn-sm">
|
||||
Dashboard
|
||||
</Link>
|
||||
|
||||
<UserMenu
|
||||
username={auth.username}
|
||||
userAccountId={auth.userAccountId}
|
||||
{open ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
!onAuthRoute && (
|
||||
<Link to="/login" className="btn btn-primary btn-sm">
|
||||
Login
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</DisclosureButton>
|
||||
|
||||
<Link to="/" className="text-xl font-bold">
|
||||
🍺 The Biergarten App
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
|
||||
<NavLinks variant="mobile" showRegister={showAuthActions} />
|
||||
</DisclosurePanel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
);
|
||||
};
|
||||
<NavLinks variant="desktop" showRegister={!auth} />
|
||||
|
||||
<div className="navbar-end gap-2">
|
||||
{!auth && (
|
||||
<Link
|
||||
to="/register"
|
||||
className="btn btn-ghost btn-sm hidden sm:inline-flex"
|
||||
>
|
||||
Register User
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{auth ? (
|
||||
<>
|
||||
<Link to="/dashboard" className="btn btn-primary btn-sm">
|
||||
Dashboard
|
||||
</Link>
|
||||
|
||||
<UserMenu
|
||||
username={auth.username}
|
||||
userAccountId={auth.userAccountId}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Link to="/login" className="btn btn-primary btn-sm">
|
||||
Login
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
|
||||
<NavLinks variant="mobile" showRegister={!auth} />
|
||||
</DisclosurePanel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
);
|
||||
|
||||
export default Navbar;
|
||||
|
||||
@@ -11,7 +11,7 @@ const AuthFlowDemoCard = () => (
|
||||
<li className="list-row">
|
||||
<div>
|
||||
<p className="font-semibold">Login</p>
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
POST to <code className="kbd kbd-sm">/api/auth/login</code> with
|
||||
username & password
|
||||
</p>
|
||||
@@ -20,7 +20,7 @@ const AuthFlowDemoCard = () => (
|
||||
<li className="list-row">
|
||||
<div>
|
||||
<p className="font-semibold">Register</p>
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
POST to <code className="kbd kbd-sm">/api/auth/register</code> with full
|
||||
user details
|
||||
</p>
|
||||
@@ -29,7 +29,7 @@ const AuthFlowDemoCard = () => (
|
||||
<li className="list-row">
|
||||
<div>
|
||||
<p className="font-semibold">Session</p>
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
JWT access & refresh tokens stored in an HTTP-only cookie
|
||||
</p>
|
||||
</div>
|
||||
@@ -37,7 +37,7 @@ const AuthFlowDemoCard = () => (
|
||||
<li className="list-row">
|
||||
<div>
|
||||
<p className="font-semibold">Protected Routes</p>
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
This dashboard requires authentication via{' '}
|
||||
<code className="kbd kbd-sm">requireAuth()</code>
|
||||
</p>
|
||||
@@ -46,7 +46,7 @@ const AuthFlowDemoCard = () => (
|
||||
<li className="list-row">
|
||||
<div>
|
||||
<p className="font-semibold">Token Refresh</p>
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
POST to <code className="kbd kbd-sm">/api/auth/refresh</code> with the
|
||||
refresh token in an <code className="kbd kbd-sm">X-Refresh-Token</code>{' '}
|
||||
header
|
||||
@@ -56,7 +56,7 @@ const AuthFlowDemoCard = () => (
|
||||
<li className="list-row">
|
||||
<div>
|
||||
<p className="font-semibold">Account Management</p>
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
PATCH <code className="kbd kbd-sm">/api/auth/username</code>,{' '}
|
||||
<code className="kbd kbd-sm">/email</code>,{' '}
|
||||
<code className="kbd kbd-sm">/password</code>,{' '}
|
||||
|
||||
@@ -14,7 +14,7 @@ const SectionCard = ({ icon, title, description, open, onToggle, children }: Sec
|
||||
<div className="card-body">
|
||||
<div className="flex w-full items-center justify-between gap-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-base-content/70 mt-1">{icon}</span>
|
||||
<span className="text-base-content/60 mt-1">{icon}</span>
|
||||
<div>
|
||||
<h2 className="card-title text-lg">{title}</h2>
|
||||
<p className="text-sm text-base-content/70">{description}</p>
|
||||
|
||||
@@ -15,7 +15,7 @@ const SessionInfoCard = ({ username, userAccountId }: SessionInfoCardProps) => (
|
||||
</p>
|
||||
|
||||
<div className="bg-base-200 rounded-box p-4 mt-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest text-base-content/70 mb-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest text-base-content/50 mb-3">
|
||||
Session Info
|
||||
</p>
|
||||
<div className="stats stats-vertical w-full">
|
||||
|
||||
@@ -208,13 +208,11 @@ const AccountPage = ({ loaderData, actionData }: Route.ComponentProps) => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10 pb-10 space-y-6">
|
||||
<div className="mx-auto max-w-2xl px-6 py-10 space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings className="size-7" aria-hidden="true" />
|
||||
<div>
|
||||
<h1 className="font-serif text-5xl font-bold leading-tight">
|
||||
Account Settings
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold">Account Settings</h1>
|
||||
<p className="text-base-content/70">
|
||||
Manage the account details for{' '}
|
||||
<span className="font-mono">{username}</span>
|
||||
@@ -259,7 +257,7 @@ const AccountPage = ({ loaderData, actionData }: Route.ComponentProps) => {
|
||||
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="link link-hover text-sm text-base-content/70 inline-block"
|
||||
className="link link-hover text-sm text-base-content/60 inline-block"
|
||||
>
|
||||
← Back to dashboard
|
||||
</Link>
|
||||
|
||||
@@ -20,7 +20,7 @@ const Dashboard = ({ loaderData }: Route.ComponentProps) => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10 pb-10 space-y-6">
|
||||
<div className="mx-auto max-w-4xl px-6 py-10 space-y-6">
|
||||
<SessionInfoCard username={username} userAccountId={userAccountId} />
|
||||
<AuthFlowDemoCard />
|
||||
</div>
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
interface AuthCardHeadingProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
const AuthCardHeading = ({ title, subtitle }: AuthCardHeadingProps) => (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h1 className="text-[1.875rem]">{title}</h1>
|
||||
<p className="text-[var(--color-muted)]">{subtitle}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AuthCardHeading;
|
||||
@@ -1,21 +0,0 @@
|
||||
interface AuthErrorAlertProps {
|
||||
message: string;
|
||||
/** Per-field messages to list beneath the summary. */
|
||||
details?: readonly string[];
|
||||
}
|
||||
|
||||
const AuthErrorAlert = ({ message, details }: AuthErrorAlertProps) => (
|
||||
<div role="alert" className="alert alert-error alert-soft flex-col items-start">
|
||||
<span>{message}</span>
|
||||
|
||||
{details?.length ? (
|
||||
<ul className="list-inside list-disc text-sm">
|
||||
{details.map((detail) => (
|
||||
<li key={detail}>{detail}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AuthErrorAlert;
|
||||
@@ -1,151 +0,0 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { expect, fireEvent, userEvent, within } from 'storybook/test';
|
||||
import AuthCardHeading from './AuthCardHeading';
|
||||
import AuthErrorAlert from './AuthErrorAlert';
|
||||
import AuthSplitLayout from './AuthSplitLayout';
|
||||
import AuthSwitchPrompt from './AuthSwitchPrompt';
|
||||
import LoginForm from './LoginForm';
|
||||
import RegisterForm from './RegisterForm';
|
||||
import RegisterStepProgress from './RegisterStepProgress';
|
||||
import { useRegisterWizard } from '../hooks/useRegisterWizard';
|
||||
import { loginSchema, type LoginSchema } from '../schemas';
|
||||
|
||||
const noop = () => undefined;
|
||||
|
||||
const authSplitLayoutDescription = `The shared split-screen shell behind /login and /register: a full-bleed bar photo carrying the hero headline, and a solid card holding the page's own heading, form, and switch prompt. The grid splits 6fr/5fr from 820px up and stacks hero over card below it. Both stories compose the real forms, so they show the production layout at any viewport.`;
|
||||
|
||||
const LoginPanel = ({ error }: { error?: string }) => {
|
||||
const form = useForm<LoginSchema>({ resolver: zodResolver(loginSchema) });
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthCardHeading title="Sign in" subtitle="Sign in to your Biergarten account" />
|
||||
|
||||
{error ? <AuthErrorAlert message={error} /> : null}
|
||||
|
||||
<LoginForm
|
||||
onSubmit={form.handleSubmit(noop)}
|
||||
formState={form.formState}
|
||||
register={form.register}
|
||||
submitting={false}
|
||||
/>
|
||||
|
||||
<AuthSwitchPrompt lead="New to Biergarten?" to="/register" label="Create an account" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RegisterPanel = () => {
|
||||
const wizard = useRegisterWizard(noop);
|
||||
|
||||
return (
|
||||
<>
|
||||
<RegisterStepProgress
|
||||
step={wizard.step}
|
||||
totalSteps={wizard.totalSteps}
|
||||
name={wizard.name}
|
||||
/>
|
||||
|
||||
<AuthCardHeading title={wizard.title} subtitle={wizard.subtitle} />
|
||||
|
||||
<RegisterForm wizard={wizard} submitting={false} />
|
||||
|
||||
<AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Layout/AuthSplitLayout',
|
||||
component: AuthSplitLayout,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: authSplitLayoutDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof AuthSplitLayout>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const loginArgs = {
|
||||
headline: 'Good to see you again.',
|
||||
blurb: 'Sign in to pick up where you left off with our partner breweries.',
|
||||
};
|
||||
|
||||
const registerArgs = {
|
||||
headline: 'Pull up a chair.',
|
||||
blurb: 'Create an account to explore partner breweries and their beers.',
|
||||
};
|
||||
|
||||
export const Login: Story = {
|
||||
args: {
|
||||
...loginArgs,
|
||||
children: <LoginPanel />,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('heading', { name: 'Sign in' })).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('button', { name: /show password/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const LoginWithServerError: Story = {
|
||||
args: {
|
||||
...loginArgs,
|
||||
children: <LoginPanel error="Invalid username or password." />,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('alert')).toHaveTextContent('Invalid username or password.');
|
||||
},
|
||||
};
|
||||
|
||||
export const Register: Story = {
|
||||
args: {
|
||||
...registerArgs,
|
||||
children: <RegisterPanel />,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText(/step 1 of 3 · account/i)).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('button', { name: /continue/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const RegisterFinalStep: Story = {
|
||||
args: Register.args,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.type(canvas.getByLabelText(/^username$/i), 'jane_doe');
|
||||
await userEvent.type(canvas.getByLabelText(/^email$/i), 'jane@example.com');
|
||||
await userEvent.click(canvas.getByRole('button', { name: /continue/i }));
|
||||
|
||||
await userEvent.type(await canvas.findByLabelText(/first name/i), 'Jane');
|
||||
await userEvent.type(canvas.getByLabelText(/last name/i), 'Doe');
|
||||
await fireEvent.change(canvas.getByLabelText(/date of birth/i), {
|
||||
target: { value: '2000-01-15' },
|
||||
});
|
||||
await userEvent.click(canvas.getByRole('button', { name: /continue/i }));
|
||||
|
||||
await expect(
|
||||
await canvas.findByRole('heading', { name: 'Secure your account' }),
|
||||
).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('button', { name: /create account/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const RegisterMobile: Story = {
|
||||
args: Register.args,
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: 'mobile1',
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import barBackground from '../../../assets/bar-background.jpg';
|
||||
|
||||
interface AuthSplitLayoutProps {
|
||||
headline: string;
|
||||
blurb: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const AuthSplitLayout = ({ headline, blurb, children }: AuthSplitLayoutProps) => (
|
||||
<div className="relative flex flex-1 bg-base-200">
|
||||
<div
|
||||
className="absolute inset-0 bg-base-300 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${barBackground})` }}
|
||||
/>
|
||||
|
||||
{/* Darkens the photo from the bottom up so the white hero text stays legible */}
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(0deg,#000000b3_30%,#ffffff44_100%)]" />
|
||||
|
||||
<div className="relative mx-auto grid w-full max-w-7xl grid-cols-1 content-between gap-6 min-[820px]:grid-cols-[minmax(0,6fr)_minmax(0,5fr)]">
|
||||
<section className="flex flex-col justify-end gap-4 px-5 pt-8 pb-2 text-white min-[820px]:px-10 min-[820px]:py-14">
|
||||
<h2 className="text-[2rem] leading-[1.1] text-balance [text-shadow:0_2px_24px_#0006] min-[820px]:text-[3.25rem]">
|
||||
{headline}
|
||||
</h2>
|
||||
|
||||
<p className="max-w-[27.5rem] text-base leading-[1.5] min-[820px]:text-[1.1875rem]">
|
||||
{blurb}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<main className="flex items-center justify-center px-4 pt-4 pb-7 min-[820px]:py-10 min-[820px]:pr-10 min-[820px]:pl-0">
|
||||
<div className="flex w-full max-w-[27.5rem] flex-col gap-4 rounded-box bg-base-100 px-5 py-6 shadow-[0_20px_50px_#0005] min-[820px]:p-8">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AuthSplitLayout;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Link } from 'react-router';
|
||||
|
||||
interface AuthSwitchPromptProps {
|
||||
lead: string;
|
||||
to: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const AuthSwitchPrompt = ({ lead, to, label }: AuthSwitchPromptProps) => (
|
||||
<p className="text-center text-[0.9375rem] text-[var(--color-muted)]">
|
||||
{lead}{' '}
|
||||
<Link to={to} className="font-semibold text-secondary hover:text-primary">
|
||||
{label}
|
||||
</Link>
|
||||
</p>
|
||||
);
|
||||
|
||||
export default AuthSwitchPrompt;
|
||||
@@ -10,7 +10,7 @@ const ConfirmSuccess = ({ confirmedDate }: ConfirmSuccessProps) => (
|
||||
<h1 className="card-title text-2xl">Email Confirmed!</h1>
|
||||
<p className="text-base-content/70">Your email address has been successfully verified.</p>
|
||||
<div className="bg-base-200 rounded-box w-full p-3 text-sm text-left">
|
||||
<span className="text-base-content/70 text-xs uppercase tracking-widest font-semibold">
|
||||
<span className="text-base-content/50 text-xs uppercase tracking-widest font-semibold">
|
||||
Confirmed at
|
||||
</span>
|
||||
<p className="font-mono mt-1">{new Date(confirmedDate).toLocaleString()}</p>
|
||||
|
||||
18
web/frontend/app/features/auth/components/LoginCallout.tsx
Normal file
18
web/frontend/app/features/auth/components/LoginCallout.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Link } from 'react-router';
|
||||
|
||||
const LoginCallout = () => (
|
||||
<>
|
||||
<div className="divider text-xs">Already have an account?</div>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<Link to="/login" className="btn btn-outline btn-sm w-full">
|
||||
Sign in
|
||||
</Link>
|
||||
<Link to="/" className="link link-hover text-sm text-base-content/60">
|
||||
Back to home
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default LoginCallout;
|
||||
@@ -1,9 +1,8 @@
|
||||
import { BaseSyntheticEvent, useState } from 'react';
|
||||
import { BaseSyntheticEvent } from 'react';
|
||||
import { FormState, UseFormRegister } from 'react-hook-form';
|
||||
import FormField from '../../../components/ui/forms/FormField';
|
||||
import SubmitButton from '../../../components/ui/forms/SubmitButton';
|
||||
import type { LoginSchema } from '../schemas';
|
||||
import ShowPasswordToggle from './ShowPasswordToggle';
|
||||
|
||||
interface LoginFormProps {
|
||||
onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
|
||||
@@ -12,42 +11,34 @@ interface LoginFormProps {
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
const LoginForm = (props: LoginFormProps) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const LoginForm = (props: LoginFormProps) => (
|
||||
<form onSubmit={props.onSubmit} className="space-y-3">
|
||||
<FormField
|
||||
id="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
placeholder="your_username"
|
||||
label="Username"
|
||||
error={props.formState.errors.username?.message}
|
||||
{...props.register('username')}
|
||||
/>
|
||||
|
||||
return (
|
||||
<form onSubmit={props.onSubmit} className="flex flex-col gap-4">
|
||||
<FormField
|
||||
id="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
label="Username"
|
||||
error={props.formState.errors.username?.message}
|
||||
{...props.register('username')}
|
||||
/>
|
||||
<FormField
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
placeholder="••••••••"
|
||||
label="Password"
|
||||
error={props.formState.errors.password?.message}
|
||||
{...props.register('password')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="current-password"
|
||||
label="Password"
|
||||
error={props.formState.errors.password?.message}
|
||||
{...props.register('password')}
|
||||
/>
|
||||
|
||||
<ShowPasswordToggle
|
||||
shown={showPassword}
|
||||
onToggle={() => setShowPassword((shown) => !shown)}
|
||||
/>
|
||||
|
||||
<SubmitButton
|
||||
isSubmitting={props.submitting}
|
||||
idleText="Sign in"
|
||||
submittingText="Signing in…"
|
||||
className="btn btn-primary min-h-12 w-full"
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
<SubmitButton
|
||||
isSubmitting={props.submitting}
|
||||
idleText="Sign In"
|
||||
submittingText="Signing in..."
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
|
||||
export default LoginForm;
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { HomeSimpleDoor, UserPlus } from 'iconoir-react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
const RegisterCallout = () => (
|
||||
<>
|
||||
<div className="divider text-xs">New here?</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Link to="/register" className="btn btn-outline btn-sm w-full gap-2">
|
||||
<UserPlus className="size-4" aria-hidden="true" />
|
||||
Create an account
|
||||
</Link>
|
||||
<Link
|
||||
to="/"
|
||||
className="link link-hover text-sm text-base-content/60 inline-flex items-center gap-1"
|
||||
>
|
||||
<HomeSimpleDoor className="size-4" aria-hidden="true" />
|
||||
Back to home
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default RegisterCallout;
|
||||
@@ -1,30 +1,25 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { expect, fireEvent, userEvent, within } from 'storybook/test';
|
||||
import AuthCardHeading from './AuthCardHeading';
|
||||
import RegisterForm from './RegisterForm';
|
||||
import RegisterStepProgress from './RegisterStepProgress';
|
||||
import { useRegisterWizard } from '../hooks/useRegisterWizard';
|
||||
import { type RegisterSchema } from '../schemas';
|
||||
import { registerSchema, type RegisterSchema } from '../schemas';
|
||||
|
||||
const registerFormDescription = `Renders the real \`RegisterForm\` driven by the real \`useRegisterWizard\` hook, so these stories exercise the production three-step flow: each step validates its own fields through \`registerSchema\` (zod) before the next one opens, entered values survive going back, and only the final step submits.`;
|
||||
const registerFormDescription = `Renders the real \`RegisterForm\` component wired to the real \`registerSchema\` (zod) through the same react-hook-form setup used on the register page, including its cross-field rule that the confirmation must match the password, so these stories validate actual client-side validation behavior rather than a re-implemented form.`;
|
||||
|
||||
const RegisterFormHarness = () => {
|
||||
const [submitted, setSubmitted] = useState<RegisterSchema | null>(null);
|
||||
const wizard = useRegisterWizard(setSubmitted);
|
||||
const form = useForm<RegisterSchema>({ resolver: zodResolver(registerSchema) });
|
||||
|
||||
return (
|
||||
<div className="flex w-full max-w-md flex-col gap-4 rounded-box bg-base-100 p-6 shadow-lg">
|
||||
<RegisterStepProgress
|
||||
step={wizard.step}
|
||||
totalSteps={wizard.totalSteps}
|
||||
name={wizard.name}
|
||||
<div className="w-full max-w-lg space-y-3 rounded-box bg-base-100 p-6 shadow-lg">
|
||||
<RegisterForm
|
||||
onSubmit={form.handleSubmit((values) => setSubmitted(values))}
|
||||
formState={form.formState}
|
||||
register={form.register}
|
||||
submitting={false}
|
||||
/>
|
||||
|
||||
<AuthCardHeading title={wizard.title} subtitle={wizard.subtitle} />
|
||||
|
||||
<RegisterForm wizard={wizard} submitting={false} />
|
||||
|
||||
{submitted ? <p data-testid="submit-result">Registered {submitted.username}</p> : null}
|
||||
</div>
|
||||
);
|
||||
@@ -47,120 +42,75 @@ const meta = {
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
type Canvas = ReturnType<typeof within>;
|
||||
|
||||
const adultDateOfBirth = '2000-01-15';
|
||||
|
||||
const underageDateOfBirth = () => {
|
||||
const tenYearsAgo = new Date();
|
||||
tenYearsAgo.setFullYear(tenYearsAgo.getFullYear() - 10);
|
||||
return tenYearsAgo.toISOString().slice(0, 10);
|
||||
};
|
||||
|
||||
const completeAccountStep = async (canvas: Canvas) => {
|
||||
await userEvent.type(canvas.getByLabelText(/^username$/i), 'jane_doe');
|
||||
await userEvent.type(canvas.getByLabelText(/^email$/i), 'jane@example.com');
|
||||
await userEvent.click(canvas.getByRole('button', { name: /continue/i }));
|
||||
await canvas.findByLabelText(/first name/i);
|
||||
};
|
||||
|
||||
const completeDetailsStep = async (canvas: Canvas, dateOfBirth = adultDateOfBirth) => {
|
||||
await userEvent.type(canvas.getByLabelText(/first name/i), 'Jane');
|
||||
await userEvent.type(canvas.getByLabelText(/last name/i), 'Doe');
|
||||
await fireEvent.change(canvas.getByLabelText(/date of birth/i), {
|
||||
target: { value: dateOfBirth },
|
||||
});
|
||||
await userEvent.click(canvas.getByRole('button', { name: /continue/i }));
|
||||
};
|
||||
|
||||
export const Empty: Story = {};
|
||||
|
||||
export const BlocksAdvanceOnInvalidAccount: Story = {
|
||||
const fillValidRegistration = async (canvas: ReturnType<typeof within>) => {
|
||||
await userEvent.type(canvas.getByLabelText(/^username$/i), 'jane_doe');
|
||||
await userEvent.type(canvas.getByLabelText(/first name/i), 'Jane');
|
||||
await userEvent.type(canvas.getByLabelText(/last name/i), 'Doe');
|
||||
await userEvent.type(canvas.getByLabelText(/^email$/i), 'jane@example.com');
|
||||
await fireEvent.change(canvas.getByLabelText(/date of birth/i), {
|
||||
target: { value: '2000-01-15' },
|
||||
});
|
||||
await userEvent.type(canvas.getByLabelText('Password'), 'StrongPass1!');
|
||||
await userEvent.type(canvas.getByLabelText(/confirm password/i), 'StrongPass1!');
|
||||
};
|
||||
|
||||
export const RejectsEmptySubmission: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /continue/i }));
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
await expect(
|
||||
await canvas.findByText(/username must be at least 3 characters/i),
|
||||
canvas.getByText(/username must be at least 3 characters/i),
|
||||
).toBeInTheDocument();
|
||||
await expect(canvas.getByText(/first name is required/i)).toBeInTheDocument();
|
||||
await expect(canvas.queryByTestId('submit-result')).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const RejectsInvalidEmail: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await fillValidRegistration(canvas);
|
||||
await userEvent.clear(canvas.getByLabelText(/^email$/i));
|
||||
await userEvent.type(canvas.getByLabelText(/^email$/i), 'jane@example');
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
await expect(canvas.getByText(/invalid email address/i)).toBeInTheDocument();
|
||||
await expect(canvas.getByText(/step 1 of 3/i)).toBeInTheDocument();
|
||||
await expect(canvas.queryByTestId('submit-result')).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const ClearsFieldErrorOnEdit: Story = {
|
||||
export const RejectsWeakPassword: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /continue/i }));
|
||||
await canvas.findByText(/username must be at least 3 characters/i);
|
||||
|
||||
await userEvent.type(canvas.getByLabelText(/^username$/i), 'jane_doe');
|
||||
await expect(
|
||||
canvas.queryByText(/username must be at least 3 characters/i),
|
||||
).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const AdvancesToPersonalDetails: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await completeAccountStep(canvas);
|
||||
await expect(canvas.getByRole('heading', { name: 'About you' })).toBeInTheDocument();
|
||||
await expect(canvas.getByText(/step 2 of 3 · personal details/i)).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const KeepsValuesWhenGoingBack: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await completeAccountStep(canvas);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /back/i }));
|
||||
await expect(await canvas.findByLabelText(/^username$/i)).toHaveValue('jane_doe');
|
||||
await expect(canvas.getByLabelText(/^email$/i)).toHaveValue('jane@example.com');
|
||||
},
|
||||
};
|
||||
|
||||
export const RejectsUnderageDateOfBirth: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await completeAccountStep(canvas);
|
||||
await completeDetailsStep(canvas, underageDateOfBirth());
|
||||
await expect(await canvas.findByText(/at least 19 years old/i)).toBeInTheDocument();
|
||||
await expect(canvas.getByText(/step 2 of 3/i)).toBeInTheDocument();
|
||||
await fillValidRegistration(canvas);
|
||||
await userEvent.clear(canvas.getByLabelText('Password'));
|
||||
await userEvent.type(canvas.getByLabelText('Password'), 'weakpassword');
|
||||
await userEvent.clear(canvas.getByLabelText(/confirm password/i));
|
||||
await userEvent.type(canvas.getByLabelText(/confirm password/i), 'weakpassword');
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
await expect(canvas.getByText(/uppercase letter/i)).toBeInTheDocument();
|
||||
await expect(canvas.queryByTestId('submit-result')).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const RejectsMismatchedConfirmPassword: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await completeAccountStep(canvas);
|
||||
await completeDetailsStep(canvas);
|
||||
await userEvent.type(await canvas.findByLabelText('Password'), 'StrongPass1!');
|
||||
await fillValidRegistration(canvas);
|
||||
await userEvent.clear(canvas.getByLabelText(/confirm password/i));
|
||||
await userEvent.type(canvas.getByLabelText(/confirm password/i), 'Different1!');
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
await expect(await canvas.findByText(/passwords must match/i)).toBeInTheDocument();
|
||||
await expect(canvas.getByText(/passwords must match/i)).toBeInTheDocument();
|
||||
await expect(canvas.queryByTestId('submit-result')).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const RevealsBothPasswords: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await completeAccountStep(canvas);
|
||||
await completeDetailsStep(canvas);
|
||||
await userEvent.click(await canvas.findByRole('button', { name: /show password/i }));
|
||||
await expect(canvas.getByLabelText('Password')).toHaveAttribute('type', 'text');
|
||||
await expect(canvas.getByLabelText(/confirm password/i)).toHaveAttribute('type', 'text');
|
||||
},
|
||||
};
|
||||
|
||||
export const AcceptsValidRegistration: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await completeAccountStep(canvas);
|
||||
await completeDetailsStep(canvas);
|
||||
await userEvent.type(await canvas.findByLabelText('Password'), 'StrongPass1!');
|
||||
await userEvent.type(canvas.getByLabelText(/confirm password/i), 'StrongPass1!');
|
||||
await fillValidRegistration(canvas);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
|
||||
await expect(await canvas.findByTestId('submit-result')).toHaveTextContent('jane_doe');
|
||||
await expect(canvas.getByTestId('submit-result')).toHaveTextContent('jane_doe');
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,129 +1,97 @@
|
||||
import { Button } from '@headlessui/react';
|
||||
import { useState } from 'react';
|
||||
import { BaseSyntheticEvent } from 'react';
|
||||
import { FormState, UseFormRegister } from 'react-hook-form';
|
||||
import FormField from '../../../components/ui/forms/FormField';
|
||||
import SubmitButton from '../../../components/ui/forms/SubmitButton';
|
||||
import type { RegisterWizard } from '../hooks/useRegisterWizard';
|
||||
import { minimumAgeYears } from '../schemas';
|
||||
import ShowPasswordToggle from './ShowPasswordToggle';
|
||||
import type { RegisterSchema } from '../schemas';
|
||||
|
||||
interface RegisterFormProps {
|
||||
wizard: RegisterWizard;
|
||||
onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
|
||||
formState: FormState<RegisterSchema>;
|
||||
register: UseFormRegister<RegisterSchema>;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
const RegisterForm = ({ wizard, submitting }: RegisterFormProps) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const { step, isLastStep, canGoBack, register, formState } = wizard;
|
||||
const { errors } = formState;
|
||||
const RegisterForm = (props: RegisterFormProps) => (
|
||||
<form onSubmit={props.onSubmit} className="space-y-3">
|
||||
<FormField
|
||||
id="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
placeholder="your_username"
|
||||
label="Username"
|
||||
hint="3-64 characters, alphanumeric and . _ -"
|
||||
error={props.formState.errors.username?.message}
|
||||
{...props.register('username')}
|
||||
/>
|
||||
|
||||
return (
|
||||
<form onSubmit={wizard.onSubmit} className="flex flex-col gap-4" noValidate>
|
||||
{step === 1 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<FormField
|
||||
id="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
label="Username"
|
||||
hint="3-64 characters, alphanumeric and . _ -"
|
||||
error={errors.username?.message}
|
||||
{...register('username')}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<FormField
|
||||
id="firstName"
|
||||
type="text"
|
||||
autoComplete="given-name"
|
||||
placeholder="Jane"
|
||||
label="First Name"
|
||||
error={props.formState.errors.firstName?.message}
|
||||
{...props.register('firstName')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
label="Email"
|
||||
error={errors.email?.message}
|
||||
{...register('email')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<FormField
|
||||
id="lastName"
|
||||
type="text"
|
||||
autoComplete="family-name"
|
||||
placeholder="Doe"
|
||||
label="Last Name"
|
||||
error={props.formState.errors.lastName?.message}
|
||||
{...props.register('lastName')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{step === 2 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid grid-cols-1 gap-3.5 min-[420px]:grid-cols-2">
|
||||
<FormField
|
||||
id="firstName"
|
||||
type="text"
|
||||
autoComplete="given-name"
|
||||
label="First name"
|
||||
error={errors.firstName?.message}
|
||||
{...register('firstName')}
|
||||
/>
|
||||
<FormField
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
placeholder="jane@example.com"
|
||||
label="Email"
|
||||
error={props.formState.errors.email?.message}
|
||||
{...props.register('email')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
id="lastName"
|
||||
type="text"
|
||||
autoComplete="family-name"
|
||||
label="Last name"
|
||||
error={errors.lastName?.message}
|
||||
{...register('lastName')}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
id="dateOfBirth"
|
||||
type="date"
|
||||
label="Date of Birth"
|
||||
hint="Must be 19 years or older"
|
||||
error={props.formState.errors.dateOfBirth?.message}
|
||||
{...props.register('dateOfBirth')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
id="dateOfBirth"
|
||||
type="date"
|
||||
label="Date of birth"
|
||||
hint={`Must be ${minimumAgeYears} years or older.`}
|
||||
error={errors.dateOfBirth?.message}
|
||||
{...register('dateOfBirth')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<FormField
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
placeholder="••••••••"
|
||||
label="Password"
|
||||
hint="8+ chars: uppercase, lowercase, digit, special character"
|
||||
error={props.formState.errors.password?.message}
|
||||
{...props.register('password')}
|
||||
/>
|
||||
|
||||
{step === 3 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<FormField
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
label="Password"
|
||||
hint="8+ chars: uppercase, lowercase, digit, special character"
|
||||
error={errors.password?.message}
|
||||
{...register('password')}
|
||||
/>
|
||||
<FormField
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
placeholder="••••••••"
|
||||
label="Confirm Password"
|
||||
error={props.formState.errors.confirmPassword?.message}
|
||||
{...props.register('confirmPassword')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
id="confirmPassword"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="new-password"
|
||||
label="Confirm password"
|
||||
error={errors.confirmPassword?.message}
|
||||
{...register('confirmPassword')}
|
||||
/>
|
||||
|
||||
<ShowPasswordToggle
|
||||
shown={showPassword}
|
||||
onToggle={() => setShowPassword((shown) => !shown)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
{canGoBack && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={wizard.back}
|
||||
className="btn btn-outline min-h-12"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<SubmitButton
|
||||
isSubmitting={submitting}
|
||||
idleText={isLastStep ? 'Create account' : 'Continue'}
|
||||
submittingText="Creating account…"
|
||||
className="btn btn-primary min-h-12 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
<SubmitButton
|
||||
isSubmitting={props.submitting}
|
||||
idleText="Create Account"
|
||||
submittingText="Creating account..."
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
|
||||
export default RegisterForm;
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
interface RegisterStepProgressProps {
|
||||
step: number;
|
||||
totalSteps: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const RegisterStepProgress = ({ step, totalSteps, name }: RegisterStepProgressProps) => (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-1.5" aria-hidden="true">
|
||||
{Array.from({ length: totalSteps }, (_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-1 flex-1 rounded ${index < step ? 'bg-primary' : 'bg-base-300'}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[0.8125rem] font-semibold text-[var(--color-muted)]">
|
||||
Step {step} of {totalSteps} · {name}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default RegisterStepProgress;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Button } from '@headlessui/react';
|
||||
|
||||
interface ShowPasswordToggleProps {
|
||||
shown: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
const ShowPasswordToggle = ({ shown, onToggle }: ShowPasswordToggleProps) => (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="inline-flex min-h-11 items-center self-start text-[0.9375rem] font-semibold text-secondary hover:underline"
|
||||
>
|
||||
{shown ? 'Hide password' : 'Show password'}
|
||||
</Button>
|
||||
);
|
||||
|
||||
export default ShowPasswordToggle;
|
||||
@@ -1,87 +0,0 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useForm, type FieldErrors, type Resolver } from 'react-hook-form';
|
||||
import { earliestStepForFields, lastRegisterStepIndex, registerSteps } from '../registerSteps';
|
||||
import { registerSchema, type RegisterSchema } from '../schemas';
|
||||
|
||||
const resolveRegisterSchema = zodResolver(registerSchema);
|
||||
|
||||
/**
|
||||
* Drives the multi-step register form: one react-hook-form instance spans every
|
||||
* step so values survive going back and forward, and each step validates its own
|
||||
* fields before the next one opens.
|
||||
*/
|
||||
export const useRegisterWizard = (onValid: (values: RegisterSchema) => void) => {
|
||||
const [stepIndex, setStepIndex] = useState(0);
|
||||
|
||||
const currentStep = registerSteps[stepIndex];
|
||||
const isLastStep = stepIndex === lastRegisterStepIndex;
|
||||
|
||||
// Every step submits through `handleSubmit`, so each one has to report only its
|
||||
// own fields: resolve the whole schema, then keep the errors this step owns. The
|
||||
// last step keeps all of them, which is also what runs the password-match
|
||||
// refinement across steps.
|
||||
const resolver: Resolver<RegisterSchema> = async (values, context, options) => {
|
||||
const result = await resolveRegisterSchema(values, context, options);
|
||||
if (isLastStep) return result;
|
||||
|
||||
const errors = Object.fromEntries(
|
||||
Object.entries(result.errors).filter(([name]) =>
|
||||
currentStep.fields.includes(name as keyof RegisterSchema),
|
||||
),
|
||||
) as FieldErrors<RegisterSchema>;
|
||||
|
||||
return Object.keys(errors).length ? { values: {}, errors } : { values, errors: {} };
|
||||
};
|
||||
|
||||
const { register, handleSubmit, formState, setFocus } = useForm<RegisterSchema>({
|
||||
resolver,
|
||||
mode: 'onTouched',
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit(
|
||||
(values) => {
|
||||
if (isLastStep) {
|
||||
onValid(values);
|
||||
return;
|
||||
}
|
||||
|
||||
setStepIndex((index) => index + 1);
|
||||
},
|
||||
// The last step validates fields from earlier steps too, so open whichever
|
||||
// step owns the problem rather than reporting it out of sight.
|
||||
(errors: FieldErrors<RegisterSchema>) => {
|
||||
const step = earliestStepForFields(Object.keys(errors) as (keyof RegisterSchema)[]);
|
||||
if (step !== null) setStepIndex(step);
|
||||
},
|
||||
);
|
||||
|
||||
// Move focus into each new step, which otherwise swaps out from under the
|
||||
// keyboard while focus sits on the button that opened it.
|
||||
const isInitialStep = useRef(true);
|
||||
useEffect(() => {
|
||||
if (isInitialStep.current) {
|
||||
isInitialStep.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const [firstField] = registerSteps[stepIndex].fields;
|
||||
if (firstField) setFocus(firstField);
|
||||
}, [stepIndex, setFocus]);
|
||||
|
||||
return {
|
||||
step: stepIndex + 1,
|
||||
totalSteps: registerSteps.length,
|
||||
name: currentStep.name,
|
||||
title: currentStep.title,
|
||||
subtitle: currentStep.subtitle,
|
||||
isLastStep,
|
||||
canGoBack: stepIndex > 0,
|
||||
back: () => setStepIndex((index) => Math.max(index - 1, 0)),
|
||||
onSubmit,
|
||||
register,
|
||||
formState,
|
||||
};
|
||||
};
|
||||
|
||||
export type RegisterWizard = ReturnType<typeof useRegisterWizard>;
|
||||
@@ -1,49 +0,0 @@
|
||||
import type { z } from 'zod';
|
||||
import { registerFields, type RegisterSchema } from './schemas';
|
||||
|
||||
interface RegisterStep {
|
||||
name: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
/** The slice of the register schema this step collects. */
|
||||
schema: z.ZodObject;
|
||||
fields: readonly (keyof RegisterSchema)[];
|
||||
}
|
||||
|
||||
const defineStep = (step: Omit<RegisterStep, 'fields'>): RegisterStep => ({
|
||||
...step,
|
||||
fields: Object.keys(step.schema.shape) as (keyof RegisterSchema)[],
|
||||
});
|
||||
|
||||
export const registerSteps: readonly RegisterStep[] = [
|
||||
defineStep({
|
||||
name: 'Account',
|
||||
title: 'Create your account',
|
||||
subtitle: 'Choose how you will sign in.',
|
||||
schema: registerFields.pick({ username: true, email: true }),
|
||||
}),
|
||||
defineStep({
|
||||
name: 'Personal details',
|
||||
title: 'About you',
|
||||
subtitle: 'Tell us a little about yourself.',
|
||||
schema: registerFields.pick({ firstName: true, lastName: true, dateOfBirth: true }),
|
||||
}),
|
||||
defineStep({
|
||||
name: 'Password',
|
||||
title: 'Secure your account',
|
||||
subtitle: 'Pick a strong password.',
|
||||
schema: registerFields.pick({ password: true, confirmPassword: true }),
|
||||
}),
|
||||
];
|
||||
|
||||
export const lastRegisterStepIndex = registerSteps.length - 1;
|
||||
|
||||
/** The step a field belongs to, so an error can open the step that owns it. */
|
||||
export const stepIndexForField = (field: keyof RegisterSchema) =>
|
||||
registerSteps.findIndex((step) => step.fields.includes(field));
|
||||
|
||||
/** The earliest step owning any of `fields`, or `null` when none of them do. */
|
||||
export const earliestStepForFields = (fields: readonly (keyof RegisterSchema)[]) => {
|
||||
const indexes = fields.map(stepIndexForField).filter((index) => index >= 0);
|
||||
return indexes.length ? Math.min(...indexes) : null;
|
||||
};
|
||||
@@ -1,12 +1,10 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { LogIn } from 'iconoir-react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { redirect, useNavigation, useSubmit } from 'react-router';
|
||||
import { createAuthSession, getOptionalAuth, login } from '../auth.server';
|
||||
import AuthCardHeading from '../components/AuthCardHeading';
|
||||
import AuthErrorAlert from '../components/AuthErrorAlert';
|
||||
import AuthSplitLayout from '../components/AuthSplitLayout';
|
||||
import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
|
||||
import LoginForm from '../components/LoginForm';
|
||||
import RegisterCallout from '../components/RegisterCallout';
|
||||
import { useActionErrorToast } from '../hooks/useActionErrorToast';
|
||||
import { loginSchema, type LoginSchema } from '../schemas';
|
||||
import type { Route } from './+types/login';
|
||||
@@ -56,23 +54,34 @@ const Login = ({ actionData }: Route.ComponentProps) => {
|
||||
useActionErrorToast(actionData?.error);
|
||||
|
||||
return (
|
||||
<AuthSplitLayout
|
||||
headline="Good to see you again."
|
||||
blurb="Sign in to pick up where you left off with our partner breweries."
|
||||
>
|
||||
<AuthCardHeading title="Sign in" subtitle="Sign in to your Biergarten account" />
|
||||
<div className="hero min-h-screen bg-base-200">
|
||||
<div className="card w-full max-w-md bg-base-100 shadow-xl">
|
||||
<div className="card-body gap-4">
|
||||
<div className="text-center">
|
||||
<h1 className="card-title text-3xl justify-center gap-2">
|
||||
<LogIn className="size-7" aria-hidden="true" />
|
||||
Login
|
||||
</h1>
|
||||
<p className="text-base-content/70">Sign in to your Biergarten account</p>
|
||||
</div>
|
||||
|
||||
{actionData?.error && <AuthErrorAlert message={actionData.error} />}
|
||||
{actionData?.error && (
|
||||
<div role="alert" className="alert alert-error alert-soft">
|
||||
<span>{actionData.error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LoginForm
|
||||
onSubmit={onSubmit}
|
||||
formState={formState}
|
||||
register={register}
|
||||
submitting={isSubmitting}
|
||||
/>
|
||||
<LoginForm
|
||||
onSubmit={onSubmit}
|
||||
formState={formState}
|
||||
register={register}
|
||||
submitting={isSubmitting}
|
||||
/>
|
||||
|
||||
<AuthSwitchPrompt lead="New to Biergarten?" to="/register" label="Create an account" />
|
||||
</AuthSplitLayout>
|
||||
<RegisterCallout />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { redirect, useNavigation, useSubmit } from 'react-router';
|
||||
import { z } from 'zod';
|
||||
import { createAuthSession, getOptionalAuth, register } from '../auth.server';
|
||||
import AuthCardHeading from '../components/AuthCardHeading';
|
||||
import AuthErrorAlert from '../components/AuthErrorAlert';
|
||||
import AuthSplitLayout from '../components/AuthSplitLayout';
|
||||
import AuthSwitchPrompt from '../components/AuthSwitchPrompt';
|
||||
import LoginCallout from '../components/LoginCallout';
|
||||
import RegisterForm from '../components/RegisterForm';
|
||||
import RegisterStepProgress from '../components/RegisterStepProgress';
|
||||
import { useActionErrorToast } from '../hooks/useActionErrorToast';
|
||||
import { useRegisterWizard } from '../hooks/useRegisterWizard';
|
||||
import { registerSchema } from '../schemas';
|
||||
import { registerSchema, type RegisterSchema } from '../schemas';
|
||||
import type { Route } from './+types/register';
|
||||
|
||||
export const meta = ({}: Route.MetaArgs) => {
|
||||
@@ -24,14 +20,33 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
|
||||
|
||||
export const action = async ({ request }: Route.ActionArgs) => {
|
||||
const formData = await request.formData();
|
||||
const result = registerSchema.safeParse(Object.fromEntries(formData));
|
||||
const result = registerSchema.safeParse({
|
||||
username: formData.get('username'),
|
||||
firstName: formData.get('firstName'),
|
||||
lastName: formData.get('lastName'),
|
||||
email: formData.get('email'),
|
||||
dateOfBirth: formData.get('dateOfBirth'),
|
||||
password: formData.get('password'),
|
||||
confirmPassword: formData.get('confirmPassword'),
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
return { error: null, fieldErrors: z.flattenError(result.error).fieldErrors };
|
||||
const fieldErrors = result.error.flatten().fieldErrors as Record<
|
||||
keyof RegisterSchema,
|
||||
string[] | undefined
|
||||
>;
|
||||
return { error: null, fieldErrors };
|
||||
}
|
||||
|
||||
try {
|
||||
const { confirmPassword: _confirmPassword, ...body } = result.data;
|
||||
const body = {
|
||||
username: result.data.username,
|
||||
firstName: result.data.firstName,
|
||||
lastName: result.data.lastName,
|
||||
email: result.data.email,
|
||||
dateOfBirth: result.data.dateOfBirth,
|
||||
password: result.data.password,
|
||||
};
|
||||
const payload = await register(body);
|
||||
return createAuthSession(payload, '/dashboard');
|
||||
} catch (err) {
|
||||
@@ -47,44 +62,44 @@ const Register = ({ actionData }: Route.ComponentProps) => {
|
||||
const submit = useSubmit();
|
||||
const isSubmitting = navigation.state === 'submitting';
|
||||
|
||||
const wizard = useRegisterWizard((data) => {
|
||||
const {
|
||||
register: field,
|
||||
handleSubmit,
|
||||
formState,
|
||||
} = useForm<RegisterSchema>({ resolver: zodResolver(registerSchema) });
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
submit(data, { method: 'post' });
|
||||
});
|
||||
|
||||
// A request that reached the action without passing client validation, so the
|
||||
// rejected fields may well sit on a step other than the one on screen.
|
||||
const rejectedFields = Object.values(actionData?.fieldErrors ?? {}).flatMap(
|
||||
(messages) => messages ?? [],
|
||||
);
|
||||
|
||||
useActionErrorToast(actionData?.error);
|
||||
|
||||
return (
|
||||
<AuthSplitLayout
|
||||
headline="Pull up a chair."
|
||||
blurb="Create an account to explore partner breweries and their beers."
|
||||
>
|
||||
<RegisterStepProgress
|
||||
step={wizard.step}
|
||||
totalSteps={wizard.totalSteps}
|
||||
name={wizard.name}
|
||||
/>
|
||||
<div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
|
||||
<div className="card w-full max-w-lg bg-base-100 shadow-xl">
|
||||
<div className="card-body gap-4">
|
||||
<div className="text-center">
|
||||
<h1 className="card-title text-3xl justify-center">Register</h1>
|
||||
<p className="text-base-content/70">Create your Biergarten account</p>
|
||||
</div>
|
||||
|
||||
<AuthCardHeading title={wizard.title} subtitle={wizard.subtitle} />
|
||||
{actionData?.error && (
|
||||
<div role="alert" className="alert alert-error alert-soft">
|
||||
<span>{actionData.error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{actionData?.error && <AuthErrorAlert message={actionData.error} />}
|
||||
<RegisterForm
|
||||
onSubmit={onSubmit}
|
||||
formState={formState}
|
||||
register={field}
|
||||
submitting={isSubmitting}
|
||||
/>
|
||||
|
||||
{rejectedFields.length > 0 && (
|
||||
<AuthErrorAlert
|
||||
message="Check these details before creating your account."
|
||||
details={rejectedFields}
|
||||
/>
|
||||
)}
|
||||
|
||||
<RegisterForm wizard={wizard} submitting={isSubmitting} />
|
||||
|
||||
<AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />
|
||||
</AuthSplitLayout>
|
||||
<LoginCallout />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -7,53 +7,27 @@ export const loginSchema = z.object({
|
||||
|
||||
export type LoginSchema = z.infer<typeof loginSchema>;
|
||||
|
||||
export const minimumAgeYears = 19;
|
||||
|
||||
const isOldEnough = (value: string) => {
|
||||
const dateOfBirth = new Date(value);
|
||||
if (Number.isNaN(dateOfBirth.getTime())) return false;
|
||||
|
||||
const comingOfAge = new Date(
|
||||
dateOfBirth.getFullYear() + minimumAgeYears,
|
||||
dateOfBirth.getMonth(),
|
||||
dateOfBirth.getDate(),
|
||||
);
|
||||
|
||||
return comingOfAge <= new Date();
|
||||
};
|
||||
|
||||
export const registerFields = z.object({
|
||||
username: z
|
||||
.string()
|
||||
.min(3, 'Username must be at least 3 characters')
|
||||
.max(64, 'Username must be at most 64 characters')
|
||||
.regex(
|
||||
/^[A-Za-z0-9._-]+$/,
|
||||
'Username can only contain letters, numbers, dots, underscores and hyphens',
|
||||
),
|
||||
firstName: z.string().min(1, 'First name is required'),
|
||||
lastName: z.string().min(1, 'Last name is required'),
|
||||
email: z.email('Invalid email address'),
|
||||
dateOfBirth: z
|
||||
.string()
|
||||
.min(1, 'Date of birth is required')
|
||||
.refine(isOldEnough, `You must be at least ${minimumAgeYears} years old to register`),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain an uppercase letter')
|
||||
.regex(/[a-z]/, 'Password must contain a lowercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain a number')
|
||||
.regex(/[^A-Za-z0-9]/, 'Password must contain a special character'),
|
||||
confirmPassword: z.string().min(1, 'Please confirm your password'),
|
||||
});
|
||||
|
||||
export const registerSchema = registerFields.refine(
|
||||
(data) => data.password === data.confirmPassword,
|
||||
{
|
||||
export const registerSchema = z
|
||||
.object({
|
||||
username: z
|
||||
.string()
|
||||
.min(3, 'Username must be at least 3 characters')
|
||||
.max(20, 'Username must be at most 20 characters'),
|
||||
firstName: z.string().min(1, 'First name is required'),
|
||||
lastName: z.string().min(1, 'Last name is required'),
|
||||
email: z.string().email('Invalid email address'),
|
||||
dateOfBirth: z.string().min(1, 'Date of birth is required'),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain an uppercase letter')
|
||||
.regex(/[a-z]/, 'Password must contain a lowercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain a number'),
|
||||
confirmPassword: z.string().min(1, 'Please confirm your password'),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: 'Passwords must match',
|
||||
path: ['confirmPassword'],
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
export type RegisterSchema = z.infer<typeof registerSchema>;
|
||||
|
||||
@@ -23,12 +23,12 @@ const BeerListCard = ({ beers }: BeerListCardProps) => (
|
||||
>
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<span className="font-bold text-sm">{beer.name}</span>
|
||||
<span className="text-xs text-base-content/70">{beer.description}</span>
|
||||
<span className="text-xs text-base-content/60">{beer.description}</span>
|
||||
</div>
|
||||
<span className="badge badge-ghost bg-base-300 text-xs font-semibold whitespace-nowrap">
|
||||
{beer.style}
|
||||
</span>
|
||||
<span className="text-xs text-base-content/70 tabular-nums whitespace-nowrap">
|
||||
<span className="text-xs text-base-content/60 tabular-nums whitespace-nowrap">
|
||||
{beer.abv.toFixed(1)}% ABV
|
||||
</span>
|
||||
<StarRating value={beer.rating} size="xs" />
|
||||
|
||||
@@ -17,7 +17,7 @@ const BeerStyleBreakdownCard = ({ beers }: BeerStyleBreakdownCardProps) => {
|
||||
<div key={style} className="flex flex-col gap-1">
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<span className="text-sm font-semibold">{style}</span>
|
||||
<span className="text-xs text-base-content/70 tabular-nums">{count}</span>
|
||||
<span className="text-xs text-base-content/60 tabular-nums">{count}</span>
|
||||
</div>
|
||||
<progress
|
||||
className="progress progress-primary h-1.5"
|
||||
|
||||
@@ -8,7 +8,7 @@ interface BreweryDetailsCardProps {
|
||||
|
||||
const DetailRow = ({ label, value }: { label: string; value: string | number }) => (
|
||||
<div className="flex items-center justify-between gap-2 text-sm">
|
||||
<span className="text-base-content/70">{label}</span>
|
||||
<span className="text-base-content/60">{label}</span>
|
||||
<span className="font-semibold">{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -26,18 +26,16 @@ const BreweryHeaderCard = ({
|
||||
<div className="card-body gap-4 p-7">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-base-content/70">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-base-content/50">
|
||||
Brewery
|
||||
</span>
|
||||
<span className="badge bg-[var(--color-highlight)] text-[var(--color-highlight-content)]">
|
||||
Est. {foundedYear}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="font-serif text-5xl font-bold leading-tight m-0">
|
||||
{brewery.breweryName}
|
||||
</h1>
|
||||
<h1 className="text-4xl leading-tight m-0">{brewery.breweryName}</h1>
|
||||
{brewery.location && (
|
||||
<p className="text-sm text-base-content/70 flex items-center gap-1 m-0">
|
||||
<p className="text-sm text-base-content/60 flex items-center gap-1 m-0">
|
||||
<MapPin className="size-4" aria-hidden="true" />
|
||||
{formatBreweryAddress(brewery.location)}
|
||||
</p>
|
||||
@@ -59,7 +57,7 @@ const BreweryHeaderCard = ({
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<StarRating value={avgRating} size="sm" />
|
||||
<span className="font-bold">{avgRating.toFixed(1)}</span>
|
||||
<span className="text-sm text-base-content/70">({ratingsCount} ratings)</span>
|
||||
<span className="text-sm text-base-content/60">({ratingsCount} ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-base-content/70 leading-relaxed text-pretty m-0">
|
||||
|
||||
@@ -8,7 +8,7 @@ interface CommunityStatsCardProps {
|
||||
|
||||
const StatRow = ({ label, value }: { label: string; value: number }) => (
|
||||
<div className="flex items-center justify-between gap-2 text-sm">
|
||||
<span className="text-base-content/70">{label}</span>
|
||||
<span className="text-base-content/60">{label}</span>
|
||||
<span className="font-semibold tabular-nums">{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,7 +10,7 @@ const YourRatingCard = ({ value, onChange }: YourRatingCardProps) => (
|
||||
<div className="card-body flex-row flex-wrap items-center justify-between gap-4 p-6">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3 className="text-xl m-0">Your rating</h3>
|
||||
<p className="text-sm text-base-content/70 m-0">
|
||||
<p className="text-sm text-base-content/60 m-0">
|
||||
{value
|
||||
? `You rated this ${value} of 5. Tap the same star to clear.`
|
||||
: 'Tap a star to rate this brewery.'}
|
||||
|
||||
@@ -31,14 +31,14 @@ const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
|
||||
<span className="font-bold text-sm">{comment.user}</span>
|
||||
)}
|
||||
<StarRating value={comment.rating} size="xs" />
|
||||
<span className="text-xs text-base-content/70">{comment.time}</span>
|
||||
<span className="text-xs text-base-content/60">{comment.time}</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed m-0">{comment.text}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleLike(comment.id)}
|
||||
className={`self-start inline-flex items-center gap-1 text-xs font-semibold ${
|
||||
comment.liked ? 'text-primary' : 'text-base-content/70'
|
||||
comment.liked ? 'text-primary' : 'text-base-content/60'
|
||||
}`}
|
||||
>
|
||||
{comment.liked ? (
|
||||
|
||||
@@ -24,7 +24,7 @@ const BreweryCard = ({ brewery }: BreweryCardProps) => (
|
||||
</p>
|
||||
)}
|
||||
{brewery.location && (
|
||||
<p className="text-sm text-base-content/70 mt-2">
|
||||
<p className="text-sm text-base-content/50 mt-2">
|
||||
{formatBreweryAddress(brewery.location)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -19,14 +19,14 @@ const FeaturedBreweryCard = ({ brewery, onShowOnMap }: FeaturedBreweryCardProps)
|
||||
<div className="card-body gap-3.5 p-8 md:grid md:grid-cols-[1.35fr_1fr] md:gap-10 md:items-start">
|
||||
<div className="flex flex-col gap-3.5">
|
||||
{brewery.location && (
|
||||
<div className="text-sm font-semibold text-base-content/70">
|
||||
<div className="text-sm font-semibold text-base-content/60">
|
||||
{brewery.location.cityName}, {brewery.location.stateProvinceCode}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="font-serif text-4xl leading-tight m-0">{brewery.breweryName}</h3>
|
||||
<p className="text-lg leading-snug text-pretty m-0">{brewery.description}</p>
|
||||
{brewery.location && (
|
||||
<p className="text-sm text-base-content/70 m-0">
|
||||
<p className="text-sm text-base-content/60 m-0">
|
||||
{formatBreweryAddress(brewery.location)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -17,7 +17,7 @@ const RecentBreweries = ({ breweries }: RecentBreweriesProps) => {
|
||||
<div className="card-body gap-1.5">
|
||||
<h3 className="card-title font-serif text-xl">{brewery.breweryName}</h3>
|
||||
{brewery.location && (
|
||||
<div className="text-sm text-base-content/70">
|
||||
<div className="text-sm text-base-content/60">
|
||||
{brewery.location.cityName},{' '}
|
||||
{brewery.location.stateProvinceCode}
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ const NearbyBreweriesHeader = ({
|
||||
return (
|
||||
<div className="flex items-baseline justify-between gap-4 flex-wrap mb-3.5">
|
||||
<h2 className="font-serif text-2xl m-0">Breweries near you</h2>
|
||||
<span className="text-sm text-base-content/70">
|
||||
<span className="text-sm text-base-content/60">
|
||||
{center
|
||||
? `${withDistance.length} within ${formatDistance(radiusKm * 1000, unit)} of ${centerLabel}`
|
||||
: 'Finding breweries near you…'}
|
||||
|
||||
@@ -23,7 +23,7 @@ const NearbyBreweryList = ({
|
||||
return (
|
||||
<>
|
||||
{withDistance.length === 0 && center && (
|
||||
<p className="text-sm text-base-content/70">
|
||||
<p className="text-sm text-base-content/60">
|
||||
No partner breweries within {formatDistance(radiusKm * 1000, unit)}.
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -37,7 +37,7 @@ const NearbyBreweryListItem = ({
|
||||
</span>
|
||||
</div>
|
||||
{brewery.location && (
|
||||
<div className="text-sm text-base-content/70">
|
||||
<div className="text-sm text-base-content/60">
|
||||
{brewery.location.cityName}, {brewery.location.stateProvinceCode}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -8,7 +8,7 @@ interface SidebarCardProps {
|
||||
const SidebarCard = ({ title, children }: SidebarCardProps) => (
|
||||
<div className="card bg-base-100 shadow">
|
||||
<div className="card-body gap-3 p-6">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-base-content/70 m-0">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-base-content/50 m-0">
|
||||
{title}
|
||||
</p>
|
||||
{children}
|
||||
|
||||
@@ -44,8 +44,8 @@ const Breweries = ({ loaderData }: Route.ComponentProps) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200 text-base-content pb-16">
|
||||
<div className="max-w-7xl mx-auto px-5 pt-10">
|
||||
<h1 className="font-serif text-5xl font-bold leading-tight mb-2">Breweries</h1>
|
||||
<p className="text-lg text-base-content/70 max-w-xl m-0">
|
||||
<h1 className="font-serif text-5xl leading-tight mb-2">Breweries</h1>
|
||||
<p className="text-lg text-base-content/60 max-w-xl m-0">
|
||||
Discover our partner breweries — start with this week's feature, then see
|
||||
what's pouring near you.
|
||||
</p>
|
||||
|
||||
@@ -80,15 +80,15 @@ const BreweryDetail = ({ loaderData }: Route.ComponentProps) => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10 pb-16">
|
||||
<div className="max-w-4xl mx-auto px-6 pt-8 pb-16">
|
||||
<Link
|
||||
to="/breweries"
|
||||
className="link link-hover text-sm text-base-content/70 mb-4 inline-block"
|
||||
className="link link-hover text-sm text-base-content/60 mb-4 inline-block"
|
||||
>
|
||||
← Back to breweries
|
||||
</Link>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_23rem] gap-5 items-start">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_19rem] gap-5 items-start">
|
||||
<div className="flex flex-col gap-5">
|
||||
<BreweryHeaderCard
|
||||
brewery={brewery}
|
||||
|
||||
@@ -72,16 +72,14 @@ const Breweries = ({ loaderData }: Route.ComponentProps) => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10">
|
||||
<div className="container mx-auto p-14">
|
||||
<Link
|
||||
to="/breweries"
|
||||
className="link link-hover text-sm text-base-content/70 mb-4 inline-block"
|
||||
className="link link-hover text-sm text-base-content/60 mb-4 inline-block"
|
||||
>
|
||||
← Back to Breweries
|
||||
</Link>
|
||||
<h1 className="font-serif text-5xl font-bold leading-tight mb-4">
|
||||
Full brewery directory
|
||||
</h1>
|
||||
<h1 className="text-4xl font-bold mb-4">Full brewery directory</h1>
|
||||
<p className="text-base-content/70 mb-6">
|
||||
All of our partner breweries, newest first.
|
||||
</p>
|
||||
@@ -95,7 +93,7 @@ const Breweries = ({ loaderData }: Route.ComponentProps) => {
|
||||
</ClientOnly>
|
||||
|
||||
{allBreweries.length === 0 ? (
|
||||
<p className="text-center text-base-content/70 mt-12">
|
||||
<p className="text-center text-base-content/60 mt-12">
|
||||
No breweries found yet.
|
||||
</p>
|
||||
) : (
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
import { Clock, Lock, Tools } from 'iconoir-react';
|
||||
import type { ComponentType } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
type Reason = 'soon' | 'maintenance' | 'auth';
|
||||
|
||||
interface Action {
|
||||
to: string;
|
||||
label: string;
|
||||
className: string;
|
||||
}
|
||||
|
||||
interface Content {
|
||||
Icon: ComponentType<{ className?: string }>;
|
||||
title: string;
|
||||
description: string;
|
||||
actions: Action[];
|
||||
}
|
||||
|
||||
const CONTENT: Record<Reason, Content> = {
|
||||
soon: {
|
||||
Icon: Clock,
|
||||
title: 'This feature is not available yet',
|
||||
description: 'This feature is still in development.',
|
||||
actions: [
|
||||
{ to: '/breweries', label: 'Browse breweries', className: 'btn-primary' },
|
||||
{ to: '/', label: 'Back to home', className: 'btn-ghost' },
|
||||
],
|
||||
},
|
||||
maintenance: {
|
||||
Icon: Tools,
|
||||
title: 'This feature is temporarily unavailable',
|
||||
description: 'This feature is offline for maintenance. Try again in a few minutes.',
|
||||
actions: [],
|
||||
},
|
||||
auth: {
|
||||
Icon: Lock,
|
||||
title: 'Sign in to use this feature',
|
||||
description:
|
||||
'This feature requires a valid session. Log in or create an account to continue.',
|
||||
actions: [
|
||||
{ to: '/login', label: 'Login', className: 'btn-primary' },
|
||||
{ to: '/register', label: 'Register', className: 'btn-outline' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
interface FeatureNotAvailableProps {
|
||||
reason?: Reason;
|
||||
}
|
||||
|
||||
const FeatureNotAvailable = ({ reason = 'soon' }: FeatureNotAvailableProps) => {
|
||||
const { Icon, title, description, actions } = CONTENT[reason];
|
||||
|
||||
return (
|
||||
<section className="flex flex-col items-center gap-3 rounded-box border border-base-300 bg-base-100 px-6 py-12 text-center">
|
||||
<div className="flex size-14 items-center justify-center rounded-full bg-base-200 text-base-content/70">
|
||||
<Icon className="size-6" />
|
||||
</div>
|
||||
<div className="flex max-w-md flex-col gap-2">
|
||||
<h2 className="font-serif text-2xl font-bold leading-tight">{title}</h2>
|
||||
<p className="text-base-content/70 text-pretty">{description}</p>
|
||||
</div>
|
||||
{actions.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-3 pt-2">
|
||||
{actions.map(({ to, label, className }) => (
|
||||
<Link key={to} to={to} className={`btn btn-sm ${className}`}>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureNotAvailable;
|
||||
@@ -1,4 +1,3 @@
|
||||
import FeatureNotAvailable from '../components/FeatureNotAvailable';
|
||||
import type { Route } from './+types/beer-styles';
|
||||
|
||||
export const meta = ({}: Route.MetaArgs) => {
|
||||
@@ -8,12 +7,9 @@ export const meta = ({}: Route.MetaArgs) => {
|
||||
const BeerStyles = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10">
|
||||
<h1 className="font-serif text-5xl font-bold leading-tight mb-4">Beer Styles</h1>
|
||||
<div className="container mx-auto p-4">
|
||||
<h1 className="text-4xl font-bold mb-4">Beer Styles</h1>
|
||||
<p className="text-base-content/70">Learn about different beer styles.</p>
|
||||
<div className="mt-8">
|
||||
<FeatureNotAvailable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import FeatureNotAvailable from '../components/FeatureNotAvailable';
|
||||
import type { Route } from './+types/beers';
|
||||
|
||||
export const meta = ({}: Route.MetaArgs) => {
|
||||
@@ -8,12 +7,9 @@ export const meta = ({}: Route.MetaArgs) => {
|
||||
const Beers = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10">
|
||||
<h1 className="font-serif text-5xl font-bold leading-tight mb-4">Beers</h1>
|
||||
<div className="container mx-auto p-4">
|
||||
<h1 className="text-4xl font-bold mb-4">Beers</h1>
|
||||
<p className="text-base-content/70">Explore our collection of beers.</p>
|
||||
<div className="mt-8">
|
||||
<FeatureNotAvailable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 203 KiB |
@@ -3,7 +3,7 @@ import { Link } from 'react-router';
|
||||
const ClosingCta = () => (
|
||||
<section className="mx-auto flex max-w-3xl flex-col items-center gap-5 px-5 py-20 text-center">
|
||||
<h2 className="m-0 font-serif text-[clamp(2rem,4vw,2.75rem)] leading-tight text-balance">
|
||||
Your next favourite brewery is on the list.
|
||||
🍺 Your next favourite brewery is on the list.
|
||||
</h2>
|
||||
|
||||
<p className="m-0 text-lg leading-[1.55] text-[var(--color-muted)]">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Link } from 'react-router';
|
||||
import barBackground from '../../../assets/bar-background.jpg';
|
||||
import barBackground from '../assets/bar-background.jpg';
|
||||
|
||||
const HeroSection = () => (
|
||||
<section className="mx-auto max-w-7xl px-5 pt-18 pb-16">
|
||||
|
||||
@@ -5,7 +5,7 @@ import { expect, within } from 'storybook/test';
|
||||
import { biergartenThemes, defaultThemeName } from '../../theme/themes';
|
||||
import ThemeTryOut from './ThemeTryOut';
|
||||
|
||||
const themeTryOutDescription = `Landing page theme band. Frames the shared \`ThemeSegmentedControl\` in an elevated card with a "Set the mood" eyebrow and a pour count, and renders it with short labels so the four options fit the marketing page's narrower column. Each option carries its \`shortVibe\` mood line, and picking one switches the whole document theme. The control seeds its selection from the root route's loader data, so this story runs behind a memory data router whose \`root\` route supplies a theme. \`Themes/ThemeSegmentedControl\` covers the control itself.`;
|
||||
const themeTryOutDescription = `Landing page theme band. Hosts the shared \`ThemeSegmentedControl\` with short labels, so a visitor can switch the whole document theme from the marketing page. The control seeds its selection from the root route's loader data, so this story runs behind a memory data router whose \`root\` route supplies a theme.`;
|
||||
|
||||
const ThemeTryOutHarness = () => {
|
||||
const [router] = useState(() =>
|
||||
@@ -48,15 +48,9 @@ export const Default: Story = {
|
||||
canvas.getByRole('heading', { name: 'Pick a pour that suits you' }),
|
||||
).toBeInTheDocument();
|
||||
|
||||
await expect(canvas.getByText('Set the mood')).toBeVisible();
|
||||
await expect(canvas.getByText(`${biergartenThemes.length} pours`)).toBeVisible();
|
||||
|
||||
const group = canvas.getByRole('radiogroup', { name: 'Theme selector' });
|
||||
await expect(within(group).getAllByRole('radio')).toHaveLength(biergartenThemes.length);
|
||||
|
||||
for (const theme of biergartenThemes) {
|
||||
await expect(within(group).getByText(theme.shortLabel)).toBeVisible();
|
||||
await expect(within(group).getByText(theme.shortVibe)).toBeVisible();
|
||||
await expect(within(group).getByText(theme.shortLabel)).toBeInTheDocument();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -13,17 +13,11 @@ const ThemeTryOut = () => (
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-box border border-neutral-content/15 bg-base-100 p-4 text-base-content shadow-xl sm:p-5">
|
||||
<div className="mb-4 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="m-0 text-xs font-bold uppercase tracking-[0.18em] opacity-60">
|
||||
Set the mood
|
||||
</p>
|
||||
<p className="m-0 mt-1 text-sm opacity-75">Your theme follows your pour.</p>
|
||||
</div>
|
||||
<span className="badge badge-outline shrink-0">4 pours</span>
|
||||
</div>
|
||||
<ThemeSegmentedControl labels="short" />
|
||||
<div className="rounded-box bg-base-100 p-3 text-base-content">
|
||||
<ThemeSegmentedControl
|
||||
labels="short"
|
||||
className="join join-vertical w-full sm:join-horizontal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -31,7 +31,7 @@ const TextTokenSample = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className="rounded-box p-3" style={{ backgroundColor: `var(${background})` }}>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-base-content/70">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-base-content/50">
|
||||
{label}
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium" style={{ color: `var(${text})` }}>
|
||||
@@ -54,7 +54,7 @@ const ThemePanel = ({ label, value, vibe }: { label: string; value: string; vibe
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-base-content/70">
|
||||
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-base-content/50">
|
||||
Core
|
||||
</p>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
@@ -69,7 +69,7 @@ const ThemePanel = ({ label, value, vibe }: { label: string; value: string; vibe
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-base-content/70">
|
||||
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-base-content/50">
|
||||
Status
|
||||
</p>
|
||||
<div className="grid gap-2 grid-cols-2 sm:grid-cols-4">
|
||||
@@ -81,7 +81,7 @@ const ThemePanel = ({ label, value, vibe }: { label: string; value: string; vibe
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-base-content/70">
|
||||
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-base-content/50">
|
||||
Content
|
||||
</p>
|
||||
<div className="grid gap-2 sm:grid-cols-3">
|
||||
|
||||
@@ -1,167 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { useMemo } from 'react';
|
||||
import { createMemoryRouter, RouterProvider } from 'react-router';
|
||||
import { expect, fn, userEvent, within } from 'storybook/test';
|
||||
import { biergartenThemes, defaultThemeName, themeCookieName, type ThemeName } from '../themes';
|
||||
import ThemeSegmentedControl from './ThemeSegmentedControl';
|
||||
|
||||
const themeSegmentedControlDescription = `The shared theme picker, used by the theme guide and by the landing page's try-out band. Each option pairs a gradient swatch of the theme's palette with its name and \`shortVibe\` mood line, and selection is carried by both color and elevation. Picking an option sets \`data-theme\` on \`<html>\` and writes the \`${themeCookieName}\` cookie, so the choice survives the next request and the server renders the same theme. The initial selection comes from the root route's loader, so these stories run behind a memory data router whose \`root\` route supplies the theme the cookie would have provided.`;
|
||||
|
||||
interface HarnessProps {
|
||||
labels?: 'full' | 'short';
|
||||
className?: string;
|
||||
onChange?: (theme: ThemeName) => void;
|
||||
/** Theme the root loader hands the control, standing in for the theme cookie. */
|
||||
seedTheme?: ThemeName;
|
||||
}
|
||||
|
||||
const ThemeSegmentedControlHarness = ({
|
||||
labels,
|
||||
className,
|
||||
onChange,
|
||||
seedTheme = defaultThemeName,
|
||||
}: HarnessProps) => {
|
||||
// Rebuilt per arg change so the docs controls remount the control rather
|
||||
// than leaving it seeded from the previous render.
|
||||
const router = useMemo(
|
||||
() =>
|
||||
createMemoryRouter([
|
||||
{
|
||||
id: 'root',
|
||||
path: '/',
|
||||
loader: () => ({ theme: seedTheme }),
|
||||
element: (
|
||||
<div className="max-w-md rounded-box bg-base-100 p-4 text-base-content">
|
||||
<ThemeSegmentedControl
|
||||
labels={labels}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]),
|
||||
[labels, className, onChange, seedTheme],
|
||||
);
|
||||
|
||||
return <RouterProvider router={router} />;
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Themes/ThemeSegmentedControl',
|
||||
component: ThemeSegmentedControlHarness,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
labels: 'full',
|
||||
seedTheme: defaultThemeName,
|
||||
onChange: fn(),
|
||||
},
|
||||
argTypes: {
|
||||
labels: { control: 'inline-radio', options: ['full', 'short'] },
|
||||
seedTheme: {
|
||||
control: 'select',
|
||||
options: biergartenThemes.map((theme) => theme.value),
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
usesDataRouter: true,
|
||||
docs: {
|
||||
description: {
|
||||
component: themeSegmentedControlDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof ThemeSegmentedControlHarness>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const getOptions = (canvasElement: HTMLElement) => {
|
||||
const group = within(canvasElement).getByRole('radiogroup', { name: 'Theme selector' });
|
||||
return { group, radios: within(group).getAllByRole('radio') as HTMLInputElement[] };
|
||||
};
|
||||
|
||||
/** Full labels, as the theme guide renders it. */
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const { group, radios } = getOptions(canvasElement);
|
||||
|
||||
await expect(radios).toHaveLength(biergartenThemes.length);
|
||||
|
||||
for (const theme of biergartenThemes) {
|
||||
await expect(within(group).getByText(theme.label)).toBeVisible();
|
||||
await expect(within(group).getByText(theme.shortVibe)).toBeVisible();
|
||||
}
|
||||
|
||||
const [lager] = radios;
|
||||
await expect(lager.value).toBe(defaultThemeName);
|
||||
await expect(lager.checked).toBe(true);
|
||||
},
|
||||
};
|
||||
|
||||
/** Short labels, as the landing page renders it in the narrower try-out card. */
|
||||
export const ShortLabels: Story = {
|
||||
args: {
|
||||
labels: 'short',
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const { group } = getOptions(canvasElement);
|
||||
|
||||
for (const theme of biergartenThemes) {
|
||||
await expect(within(group).getByText(theme.shortLabel)).toBeVisible();
|
||||
await expect(within(group).getByText(theme.shortVibe)).toBeVisible();
|
||||
}
|
||||
|
||||
await expect(within(group).queryByText(biergartenThemes[0].label)).toBeNull();
|
||||
},
|
||||
};
|
||||
|
||||
/** A returning visitor whose cookie already names a theme other than the default. */
|
||||
export const SeededFromCookie: Story = {
|
||||
args: {
|
||||
seedTheme: 'biergarten-cassis',
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const { radios } = getOptions(canvasElement);
|
||||
|
||||
for (const radio of radios) {
|
||||
await expect(radio.checked).toBe(radio.value === 'biergarten-cassis');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const SelectingATheme: Story = {
|
||||
play: async ({ canvasElement, args }) => {
|
||||
const previousTheme = document.documentElement.getAttribute('data-theme');
|
||||
const { group, radios } = getOptions(canvasElement);
|
||||
|
||||
await userEvent.click(within(group).getByText('Biergarten Stout'));
|
||||
|
||||
for (const radio of radios) {
|
||||
await expect(radio.checked).toBe(radio.value === 'biergarten-stout');
|
||||
}
|
||||
|
||||
await expect(args.onChange).toHaveBeenCalledWith('biergarten-stout');
|
||||
await expect(document.documentElement.getAttribute('data-theme')).toBe('biergarten-stout');
|
||||
await expect(document.cookie).toContain(`${themeCookieName}=biergarten-stout`);
|
||||
|
||||
// The control themes the whole document, so hand <html> back to the
|
||||
// toolbar's theme before the next story mounts.
|
||||
if (previousTheme === null) {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', previousTheme);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/** Single column, for a sidebar or any container too narrow for the paired grid. */
|
||||
export const SingleColumn: Story = {
|
||||
args: {
|
||||
className: 'grid grid-cols-1 gap-2',
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const { radios } = getOptions(canvasElement);
|
||||
await expect(radios).toHaveLength(biergartenThemes.length);
|
||||
},
|
||||
};
|
||||
@@ -19,7 +19,7 @@ interface ThemeSegmentedControlProps {
|
||||
|
||||
const ThemeSegmentedControl = ({
|
||||
labels = 'full',
|
||||
className = 'grid grid-cols-2 gap-2',
|
||||
className = 'join join-vertical sm:join-horizontal',
|
||||
onChange,
|
||||
}: ThemeSegmentedControlProps) => {
|
||||
const rootTheme = useRouteLoaderData<typeof rootLoader>('root')?.theme ?? defaultThemeName;
|
||||
@@ -33,11 +33,7 @@ const ThemeSegmentedControl = ({
|
||||
return (
|
||||
<label
|
||||
key={theme.value}
|
||||
className={`group flex min-h-20 cursor-pointer items-center gap-3 rounded-box border p-3 text-left transition-all duration-200 ${
|
||||
checked
|
||||
? 'border-primary bg-primary text-primary-content shadow-md'
|
||||
: 'border-base-content/15 bg-base-200/45 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-base-200'
|
||||
}`}
|
||||
className={`btn join-item ${checked ? 'btn-primary' : 'btn-outline'}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
@@ -51,34 +47,7 @@ const ThemeSegmentedControl = ({
|
||||
onChange?.(theme.value);
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`size-9 shrink-0 rounded-full border-4 shadow-inner transition-transform duration-200 group-hover:scale-105 ${
|
||||
checked ? 'border-primary-content/70' : 'border-base-100'
|
||||
}`}
|
||||
style={{
|
||||
background:
|
||||
theme.value === 'biergarten-lager'
|
||||
? 'linear-gradient(135deg, #f5c451 0%, #a96728 100%)'
|
||||
: theme.value === 'biergarten-stout'
|
||||
? 'linear-gradient(135deg, #d69b45 0%, #382116 100%)'
|
||||
: theme.value === 'biergarten-cassis'
|
||||
? 'linear-gradient(135deg, #c777b9 0%, #4c214e 100%)'
|
||||
: 'linear-gradient(135deg, #f7e6a5 0%, #82a85d 100%)',
|
||||
}}
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-sm font-bold">
|
||||
{labels === 'short' ? theme.shortLabel : theme.label}
|
||||
</span>
|
||||
<span
|
||||
className={`mt-0.5 block truncate text-xs ${
|
||||
checked ? 'text-primary-content/75' : 'text-base-content/60'
|
||||
}`}
|
||||
>
|
||||
{theme.shortVibe}
|
||||
</span>
|
||||
</span>
|
||||
{labels === 'short' ? theme.shortLabel : theme.label}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -6,8 +6,6 @@ export interface ThemeOption {
|
||||
label: string;
|
||||
/** Used where the segmented control is narrow, such as the landing page. */
|
||||
shortLabel: string;
|
||||
/** A compact mood descriptor for theme pickers. */
|
||||
shortVibe: string;
|
||||
vibe: string;
|
||||
}
|
||||
|
||||
@@ -19,28 +17,24 @@ export const biergartenThemes: ThemeOption[] = [
|
||||
value: 'biergarten-lager',
|
||||
label: 'Biergarten Lager',
|
||||
shortLabel: 'Lager',
|
||||
shortVibe: 'Muted parchment',
|
||||
vibe: 'Muted parchment, mellow amber, daytime beer garden',
|
||||
},
|
||||
{
|
||||
value: 'biergarten-stout',
|
||||
label: 'Biergarten Stout',
|
||||
shortLabel: 'Stout',
|
||||
shortVibe: 'Charred barrel',
|
||||
vibe: 'Charred barrel, deep roast, cozy evening cellar',
|
||||
},
|
||||
{
|
||||
value: 'biergarten-cassis',
|
||||
label: 'Biergarten Cassis',
|
||||
shortLabel: 'Cassis',
|
||||
shortVibe: 'Blackberry barrel',
|
||||
vibe: 'Blackberry barrel, sour berry dark, vivid night market',
|
||||
},
|
||||
{
|
||||
value: 'biergarten-weizen',
|
||||
label: 'Biergarten Weizen',
|
||||
shortLabel: 'Weizen',
|
||||
shortVibe: 'Bright spring',
|
||||
vibe: 'Ultra-light young barley, green undertone, bright spring afternoon',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -6,21 +6,21 @@ Covers `/users/:id` (`routes/user-profile.tsx`). Mirrors the format of
|
||||
## Status legend
|
||||
|
||||
- ✅ **Available**: real data, wired up.
|
||||
- ⚠️ **Partial**: reads real data, but a related gap remains (see the Gap column).
|
||||
- ⚠️ **Partial**: schema/repository exists but no public read endpoint.
|
||||
- ❌ **Missing**: no backend support; page shows filler or local-only state.
|
||||
|
||||
## Header & sidebar
|
||||
|
||||
| Field | Status | Source | Gap |
|
||||
| ---------------------------------------- | ------ | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Username, name, joined date | ✅ | `GET /api/user/{id}/profile` (`PublicUserProfileDto`) | |
|
||||
| `isOwnProfile` | ✅ | Compares the session's `userAccountId` to the route param | |
|
||||
| Bio | ✅ | `GET /api/user/{id}/profile` (`PublicUserProfileDto`) | Reads `Social.UserProfile.Biography` via the left join in `UserListRepository.GetByIdAsync`; an account with no profile row yet returns an empty string. |
|
||||
| Location | ❌ | `FILLER_PROFILE_META.location` | No location field on `UserAccount` or `UserProfile`. |
|
||||
| Avatar photo | ⚠️ | `GET /api/user/{id}/profile` (`PublicUserProfileDto`) | Reads the current `Social.UserAvatar` photo via the left joins in `UserListRepository.GetByIdAsync` and signs it into `avatarUrl`; an account with no avatar returns an empty string and `ProfileAvatar` shows initials. `UploadAvatarCommand` has no HTTP route yet, so only accounts created by `Database.Seed` have one — see (4) below. |
|
||||
| Cover photo | ❌ | Flat `bg-base-300` block | No cover-photo concept anywhere in the schema. |
|
||||
| Following / Followers counts | ❌ | `FILLER_PROFILE_META.following` / `.followers` | `Social.UserFollow` table exists but is unused by any query/controller — needs count queries (`WHERE UserAccountID = ?` / `WHERE FollowingID = ?`). |
|
||||
| Breweries visited / Ratings given counts | ❌ | `FILLER_PROFILE_META.breweriesVisited` / `.ratingsGiven` | Blocked on the same like/rating gaps called out in `BREWERY_HANDOFF.md`. |
|
||||
| Field | Status | Source | Gap |
|
||||
| ---------------------------------------- | ------ | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Username, name, joined date | ✅ | `GET /api/user/{id}/profile` (`PublicUserProfileDto`) | |
|
||||
| `isOwnProfile` | ✅ | Compares the session's `userAccountId` to the route param | |
|
||||
| Bio | ✅ | `GET /api/user/{id}/profile` (`PublicUserProfileDto`) | Reads `Social.UserProfile.Biography` via the left join in `UserListRepository.GetByIdAsync`; an account with no profile row yet returns an empty string. |
|
||||
| Location | ❌ | `FILLER_PROFILE_META.location` | No location field on `UserAccount` or `UserProfile`. |
|
||||
| Avatar photo | ⚠️ | Initials placeholder (`avatar-placeholder`) | `Social.UserAvatar` + `UploadAvatarHandler` exist but there's no GET endpoint to read a user's stored avatar back. |
|
||||
| Cover photo | ❌ | Flat `bg-base-300` block | No cover-photo concept anywhere in the schema. |
|
||||
| Following / Followers counts | ❌ | `FILLER_PROFILE_META.following` / `.followers` | `Social.UserFollow` table exists but is unused by any query/controller — needs count queries (`WHERE UserAccountID = ?` / `WHERE FollowingID = ?`). |
|
||||
| Breweries visited / Ratings given counts | ❌ | `FILLER_PROFILE_META.breweriesVisited` / `.ratingsGiven` | Blocked on the same like/rating gaps called out in `BREWERY_HANDOFF.md`. |
|
||||
|
||||
## Follow action
|
||||
|
||||
@@ -36,7 +36,7 @@ Covers `/users/:id` (`routes/user-profile.tsx`). Mirrors the format of
|
||||
| Commenter name links (brewery detail comments) | ⚠️ | `CommentItem` links only when `comment.userAccountId` is set | `FILLER_COMMENTS` has no backing accounts, so those rows render as plain text; a comment added during the session by a signed-in user does carry a real GUID and links correctly. |
|
||||
| Following-list person links (profile page) | ⚠️ | `FollowingTab` links only when `f.userAccountId` is set | Same gap as above — `FILLER_FOLLOWING`'s two person rows have no backing accounts, so they render as plain text until real follow data exists. |
|
||||
|
||||
Both components already support linking (see `CommentItem.stories.tsx`'s `WithLinkedAccount` story); what's missing is real account IDs on the filler rows, which can't be faked without recreating the 404 this was fixed for. This resolves itself once (3) below closes and comments/follows are loader-backed.
|
||||
Both components already support linking (see `CommentItem.stories.tsx`'s `WithLinkedAccount` story); what's missing is real account IDs on the filler rows, which can't be faked without recreating the 404 this was fixed for. This resolves itself once (4) below closes and comments/follows are loader-backed.
|
||||
|
||||
## Activity / Following / Liked tabs
|
||||
|
||||
@@ -49,8 +49,8 @@ Both components already support linking (see `CommentItem.stories.tsx`'s `WithLi
|
||||
|
||||
## Summary of backend work
|
||||
|
||||
1. A location field on `UserAccount` or `UserProfile`, and a cover-photo storage concept.
|
||||
2. `Social.UserFollow` command/query/controller: follow, unfollow, "is following" check, and follower/following counts.
|
||||
3. An activity/timeline query unioning ratings, likes, and comments for a user, ordered by time — depends on the like/rating/comment tables called out in `BREWERY_HANDOFF.md` existing first.
|
||||
4. An avatar-upload endpoint: `UploadAvatarCommand`/`UploadAvatarHandler` exist and `Database.Seed` sends them, but no controller action does, so a signed-in user has no way to set their own avatar. Needs a `multipart/form-data` route on the authenticated caller's own account (`IFormFile`, same validation the seeder's uploads pass through).
|
||||
5. Once (2) and the like/rating gaps close, swap `FILLER_PROFILE_META` / `FILLER_ACTIVITY` / `FILLER_FOLLOWING` / `FILLER_LIKED` (`utils/filler-user-profile.ts`) and the local `useState` in `routes/user-profile.tsx` for loader data and `authorizedRequest`-based mutations (see `auth.server.ts`). Swapping in real (possibly empty) arrays is also what makes the Activity/Following `EmptyState`s reachable from the actual route — today they're only exercised by the `Empty` Storybook stories, since the filler arrays are never empty.
|
||||
1. A public query + controller route to read a user's stored `Social.UserAvatar`.
|
||||
2. A location field on `UserAccount` or `UserProfile`, and a cover-photo storage concept (mirrors the avatar gap).
|
||||
3. `Social.UserFollow` command/query/controller: follow, unfollow, "is following" check, and follower/following counts.
|
||||
4. An activity/timeline query unioning ratings, likes, and comments for a user, ordered by time — depends on the like/rating/comment tables called out in `BREWERY_HANDOFF.md` existing first.
|
||||
5. Once (3) and the like/rating gaps close, swap `FILLER_PROFILE_META` / `FILLER_ACTIVITY` / `FILLER_FOLLOWING` / `FILLER_LIKED` (`utils/filler-user-profile.ts`) and the local `useState` in `routes/user-profile.tsx` for loader data and `authorizedRequest`-based mutations (see `auth.server.ts`). Swapping in real (possibly empty) arrays is also what makes the Activity/Following `EmptyState`s reachable from the actual route — today they're only exercised by the `Empty` Storybook stories, since the filler arrays are never empty.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const EmptyState = ({ message }: { message: string }) => (
|
||||
<div className="card bg-base-100 shadow">
|
||||
<div className="card-body items-center py-12">
|
||||
<p className="text-sm text-base-content/70 text-center m-0">{message}</p>
|
||||
<p className="text-sm text-base-content/60 text-center m-0">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import ProfileAvatar from './ProfileAvatar';
|
||||
|
||||
const profileAvatarDescription = `Avatar shown at the top of the public profile sidebar. It renders the photo from the public profile payload's \`avatarUrl\`, and shows the first two letters of the display name when that field is empty or the image fails to load.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Users/ProfileAvatar',
|
||||
component: ProfileAvatar,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
displayName: 'Maren Iverson',
|
||||
avatarUrl: 'https://picsum.photos/id/1027/240/240',
|
||||
},
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: profileAvatarDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof ProfileAvatar>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const WithPhoto: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const image = canvas.getByRole('img', { name: "Maren Iverson's avatar" });
|
||||
await expect(image).toHaveAttribute('src', 'https://picsum.photos/id/1027/240/240');
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutPhoto: Story = {
|
||||
args: { avatarUrl: '' },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('MA')).toBeInTheDocument();
|
||||
await expect(canvas.queryByRole('img')).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const BrokenPhotoUrl: Story = {
|
||||
args: { avatarUrl: 'https://example.invalid/missing-avatar.jpg' },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(await canvas.findByText('MA')).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ProfileAvatarProps {
|
||||
avatarUrl: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the user's current avatar photo, falling back to their initials when the public
|
||||
* profile payload carries an empty `avatarUrl` or the hosted image fails to load.
|
||||
*/
|
||||
const ProfileAvatar = ({ avatarUrl, displayName }: ProfileAvatarProps) => {
|
||||
const [didImageFail, setDidImageFail] = useState(false);
|
||||
const showPhoto = avatarUrl.length > 0 && !didImageFail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`avatar w-[120px] h-[120px] rounded-full border-4 border-base-200 shadow-md ${
|
||||
showPhoto ? '' : 'avatar-placeholder'
|
||||
}`}
|
||||
>
|
||||
{showPhoto ? (
|
||||
<div className="w-full h-full rounded-full overflow-hidden">
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={`${displayName}'s avatar`}
|
||||
className="w-full h-full object-cover"
|
||||
onError={() => setDidImageFail(true)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-secondary text-secondary-content w-full h-full rounded-full flex items-center justify-center">
|
||||
<span className="text-2xl font-bold">
|
||||
{displayName.slice(0, 2).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileAvatar;
|
||||
@@ -33,7 +33,7 @@ const ProfileSidebarCard = ({
|
||||
<div className="card-body gap-4 p-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold m-0 leading-tight">{displayName}</h1>
|
||||
<p className="text-sm text-base-content/70 m-0 mt-0.5">@{username}</p>
|
||||
<p className="text-sm text-base-content/60 m-0 mt-0.5">@{username}</p>
|
||||
</div>
|
||||
|
||||
{isOwnProfile ? (
|
||||
@@ -52,7 +52,7 @@ const ProfileSidebarCard = ({
|
||||
|
||||
<p className="text-sm leading-normal m-0">{bio}</p>
|
||||
|
||||
<div className="flex flex-col gap-1.5 text-sm text-base-content/70">
|
||||
<div className="flex flex-col gap-1.5 text-sm text-base-content/60">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<MapPin className="size-4 shrink-0" aria-hidden="true" />
|
||||
{location}
|
||||
@@ -68,7 +68,7 @@ const ProfileSidebarCard = ({
|
||||
<div className="flex flex-col gap-2">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="flex items-center justify-between gap-2">
|
||||
<span className="text-sm text-base-content/70">{stat.label}</span>
|
||||
<span className="text-sm text-base-content/60">{stat.label}</span>
|
||||
<span className="font-serif text-lg font-bold tabular-nums">
|
||||
{stat.value}
|
||||
</span>
|
||||
|
||||
@@ -24,7 +24,7 @@ const ProfileTabs = ({ activeTab, onChange, panels }: ProfileTabsProps) => {
|
||||
{TABS.map((tab) => (
|
||||
<Tab
|
||||
key={tab.id}
|
||||
className="-mb-px border-b-2 border-transparent py-3 text-sm font-semibold text-base-content/70 transition-colors hover:text-base-content focus:outline-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-primary data-[selected]:border-primary data-[selected]:text-primary"
|
||||
className="-mb-px border-b-2 border-transparent py-3 text-sm font-semibold text-base-content/60 transition-colors hover:text-base-content focus:outline-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-primary data-[selected]:border-primary data-[selected]:text-primary"
|
||||
>
|
||||
{tab.label}
|
||||
</Tab>
|
||||
|
||||
@@ -36,11 +36,11 @@ const ActivityTab = ({ activity }: ActivityTabProps) => {
|
||||
</div>
|
||||
)}
|
||||
{item.comment && (
|
||||
<p className="text-sm text-base-content/70 italic mt-1.5 mb-0">
|
||||
<p className="text-sm text-base-content/60 italic mt-1.5 mb-0">
|
||||
“{item.comment}”
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-base-content/70 mt-1.5 mb-0">
|
||||
<p className="text-xs text-base-content/60 mt-1.5 mb-0">
|
||||
{item.time}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@ const FollowingTab = ({ following, onToggleFollow }: FollowingTabProps) => {
|
||||
) : (
|
||||
<p className="font-semibold text-sm m-0 truncate">{f.name}</p>
|
||||
)}
|
||||
<p className="text-xs text-base-content/70 m-0 truncate">{f.meta}</p>
|
||||
<p className="text-xs text-base-content/60 m-0 truncate">{f.meta}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -18,7 +18,7 @@ const LikedTab = ({ liked }: LikedTabProps) => {
|
||||
<div className="h-[120px] bg-base-300" />
|
||||
<div className="card-body p-4 gap-1">
|
||||
<p className="font-serif font-bold m-0">{item.name}</p>
|
||||
<p className="text-sm text-base-content/70 m-0">{item.meta}</p>
|
||||
<p className="text-sm text-base-content/60 m-0">{item.meta}</p>
|
||||
<div className="mt-1">
|
||||
<StarRating value={item.rating} size="xs" />
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { data } from 'react-router';
|
||||
import RouteErrorState from '../../../components/ui/error/RouteErrorState';
|
||||
import { getOptionalAuth } from '../../auth/auth.server';
|
||||
import { getPublicUserProfile, type PublicUserProfile } from '../users.server';
|
||||
import ProfileAvatar from '../components/profile/ProfileAvatar';
|
||||
import ProfileSidebarCard from '../components/profile/ProfileSidebarCard';
|
||||
import ProfileTabs, { type ProfileTab } from '../components/profile/ProfileTabs';
|
||||
import ActivityTab from '../components/profile/tabs/ActivityTab';
|
||||
@@ -76,12 +75,20 @@ const ProfileContent = ({ profile, isOwnProfile }: ProfileContentProps) => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base-200 pb-16">
|
||||
<div className="mx-auto max-w-7xl px-5 pt-10">
|
||||
<div className="max-w-[1080px] mx-auto px-6 pt-8">
|
||||
<div className="rounded-box h-[190px] bg-base-300" />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[300px_1fr] gap-8 items-start -mt-12">
|
||||
<div className="lg:sticky lg:top-8 flex flex-col gap-5 px-2">
|
||||
<ProfileAvatar avatarUrl={profile.avatarUrl} displayName={displayName} />
|
||||
<div className="w-[120px] h-[120px] rounded-full border-4 border-base-200 shadow-md overflow-hidden">
|
||||
<div className="avatar avatar-placeholder w-full h-full">
|
||||
<div className="bg-secondary text-secondary-content w-full h-full flex items-center justify-center">
|
||||
<span className="text-2xl font-bold">
|
||||
{displayName.slice(0, 2).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProfileSidebarCard
|
||||
displayName={displayName}
|
||||
|
||||
@@ -8,7 +8,6 @@ export interface PublicUserProfile {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
biography: string;
|
||||
avatarUrl: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
@@ -50,7 +49,6 @@ export const getPublicUserProfile = async (
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
biography: string;
|
||||
avatarUrl: string;
|
||||
createdAt: string;
|
||||
} = await res.json();
|
||||
|
||||
@@ -60,7 +58,6 @@ export const getPublicUserProfile = async (
|
||||
firstName: account.firstName,
|
||||
lastName: account.lastName,
|
||||
biography: account.biography,
|
||||
avatarUrl: account.avatarUrl,
|
||||
createdAt: account.createdAt,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// see USER_PROFILE_HANDOFF.md — filler data pending backend support for
|
||||
// location, cover photos, follower/following stats, and activity feeds.
|
||||
// bio, location, avatar/cover photos, follower/following stats, and activity feeds.
|
||||
|
||||
export interface FillerProfileMeta {
|
||||
bio: string;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user