docs: finalize Person→Member migration, add Google sign-in button, and align styles
This commit is contained in:
parent
a9f2b6f5a8
commit
d08e0370ac
4 changed files with 45 additions and 24 deletions
|
|
@ -1,9 +1,12 @@
|
|||
## 0. Current State (Nov 1, 2025)
|
||||
|
||||
All core features are migrated to multi-tenancy with path-scoped endpoints and token-based auth. The codebase no longer uses the `X-Household-Slug` header. Tests and type checks are fully green.
|
||||
## 0. Current State (Nov 1, 2025)
|
||||
|
||||
All core features are migrated to multi-tenancy with path-scoped endpoints and token-based auth. The codebase no longer uses the `X-Household-Slug` header. Tests and type checks are fully green.
|
||||
|
||||
Status of tests and typing
|
||||
- All tests pass: 29 files, 49 tests (slug-only routes; memory history fallback in non-browser envs; unauthenticated and refresh-401 guard redirects covered).
|
||||
- All tests pass: 27 files, 46 tests (slug-only routes; memory history fallback in non-browser envs; unauthenticated and refresh-401 guard redirects covered).
|
||||
- `tsc` and `vue-tsc` pass with no errors.
|
||||
|
||||
# Frontend Specification: Household Multi-Tenancy (v2)
|
||||
|
|
@ -123,15 +126,17 @@ What exists now
|
|||
- `src/router/index.ts`: slug-only nesting under `/:householdSlug/...`; public routes include `/create-account`, `/welcome`, and `/invitations/accept`.
|
||||
- Guard fetches households, redirects root `/` to the first household's `mealplan`, and uses memory history in tests (hash in browser).
|
||||
- SDK/API
|
||||
- `src/api/sdk.ts`: recipes, meals, and shopping are migrated to `/api/v1/households/{householdSlug}/...` typed endpoints. Persons and parse use temporary raw fetch endpoints where OpenAPI lacks coverage.
|
||||
- `src/api/sdk.ts`: recipes, meals, and shopping are migrated to `/api/v1/households/{householdSlug}/...` typed endpoints. Person endpoints removed; parse uses a temporary raw fetch endpoint until typed coverage is available.
|
||||
- `src/api/client.ts`: Authorization header provider only; household header injection removed.
|
||||
- Domain & UI
|
||||
- Member arrays (`chefs`, `consumers`, `cleanup`) normalized to MemberRef `{ id, displayName }` with decoders handling legacy shapes gracefully.
|
||||
- Member arrays (`chefs`, `consumers`, `cleanup`) normalized to `MemberRef` `{ id, displayName }` with decoders handling legacy shapes gracefully.
|
||||
- `MemberRef` is exported from `src/domain/types.ts` and used by components (per axioms).
|
||||
- `PersonList.vue` renamed to `MemberList.vue`; it sources from typed household members and emits `add`/`remove`.
|
||||
- Invitation Accept flow implemented; Household Settings supports sending invitations and listing members using typed endpoints.
|
||||
- MyShopping: page remains as in master with editable panel backed by legacy v1 stubs (`getMyShoppingList/saveMyShoppingList`) pending backend ad-hoc item endpoints.
|
||||
|
||||
Status of tests and typing
|
||||
- All tests pass: 29 files, 49 tests.
|
||||
- All tests pass: 27 files, 46 tests.
|
||||
- `tsc` and `vue-tsc` pass with no errors.
|
||||
|
||||
---
|
||||
|
|
@ -166,7 +171,7 @@ Progress Log (Nov 1, 2025)
|
|||
- Backend updated OpenAPI and codegen has been run:
|
||||
- Many endpoints are now path-scoped with `{householdSlug}` (recipes, meals, shopping, invitations (create), whoami).
|
||||
- Auth endpoints (login/register/refresh/logout) are fully typed; `refresh` returns only `{ accessToken, tokenType }`.
|
||||
- Completed migration to typed path parameters; header injection removed; only small raw fetch helpers remain for endpoints not yet in OpenAPI (persons, parse).
|
||||
- Completed migration to typed path parameters; header injection removed; only small raw fetch helpers remain for endpoints not yet in OpenAPI (parse only).
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -212,7 +217,7 @@ SDK
|
|||
- Persons and parse endpoints are still raw until they are added to the OpenAPI.
|
||||
|
||||
UI
|
||||
- Login Page: Refactored to show email/password form when multitenant flag is enabled; legacy person list retained otherwise. Link to Create Account added.
|
||||
- Login Page: Refactored to show email/password form; Google sign-in planned. Link to Create Account added.
|
||||
- Add `HouseholdSwitcher.vue` to app chrome and wire with router.
|
||||
- Update components that navigate using string paths to use named routes with slug.
|
||||
- `src/views/HouseholdSettings.vue`: Invite members form wired to `sendInvitation(email)`. Members list rendered from `listMembers()` using the typed endpoint. (Completed)
|
||||
|
|
@ -235,7 +240,7 @@ Tests
|
|||
1) Remove X-Household-Slug header injection in `api/client.ts` and refactor services to accept `householdSlug` via typed params. (Completed)
|
||||
2) Replace temporary raw fetch calls with generated typed endpoints where available: invitations and members listing are now typed; migrate usages. Persons and parse remain raw for now.
|
||||
3) Integrate the new `POST /shopping/current/ingredients` endpoint into the SDK (`requestIngredient(ingredientId: number)`) and expose via `useShopping`; refactor `MyShoppingPage.vue` accordingly and remove legacy stubs. (SDK + composable done; UI refactor next)
|
||||
4) Legacy identity: continue using `User` as the primary identity. Keep `Person` in meal-related UIs where required by backend, but remove Person as the login/identity concept.
|
||||
4) Identity: `User` remains the primary identity. `Person` has been removed; meal-related UIs use `MemberRef` exclusively.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,13 @@
|
|||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="onGoogleLogin"
|
||||
>
|
||||
Sign in with Google
|
||||
</button>
|
||||
<router-link
|
||||
class="btn btn-link"
|
||||
:to="{ name: 'create-account' }"
|
||||
|
|
@ -47,7 +54,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { loginWithPassword } from '@/api/auth'
|
||||
import { loginWithPassword, handleGoogleLogin } from '@/api/auth'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -82,6 +89,15 @@ async function onSubmitLogin() {
|
|||
}
|
||||
}
|
||||
|
||||
async function onGoogleLogin() {
|
||||
try {
|
||||
await handleGoogleLogin()
|
||||
} catch (e) {
|
||||
// Surface the placeholder message for now; real implementation will redirect
|
||||
alert(e instanceof Error ? e.message : 'Google login not available')
|
||||
}
|
||||
}
|
||||
|
||||
// legacy login removed
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:date="meal.suggestedDate ?? new Date()"
|
||||
@date-selected="selectDate"
|
||||
/>
|
||||
<div class="persons-list">
|
||||
<div class="members-list">
|
||||
Cooked by
|
||||
<member-list
|
||||
:people="meal.chefs"
|
||||
|
|
@ -274,17 +274,17 @@ img.icon {
|
|||
height: 2em;
|
||||
}
|
||||
|
||||
.persons-list {
|
||||
.members-list {
|
||||
text-align: left;
|
||||
padding: 1ex 2em;
|
||||
}
|
||||
|
||||
.persons-list p {
|
||||
.members-list p {
|
||||
margin: 0;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.person-list li {
|
||||
.member-list li {
|
||||
display: inline-block;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<span class="person-list">
|
||||
<span class="member-list">
|
||||
<span
|
||||
v-for="person in people"
|
||||
:key="person.id"
|
||||
>
|
||||
<button
|
||||
class="person-circle remove-person"
|
||||
class="member-circle remove-person"
|
||||
@click="removePerson(person)"
|
||||
>
|
||||
{{ person.displayName || '' }}
|
||||
{{ person.displayName || '' }}
|
||||
</button>
|
||||
</span>
|
||||
<span>
|
||||
<button
|
||||
v-if="!isAddingPerson"
|
||||
class="person-circle add-person"
|
||||
class="member-circle add-person"
|
||||
@click="isAddingPerson = true"
|
||||
>
|
||||
+
|
||||
|
|
@ -30,14 +30,14 @@
|
|||
<ul
|
||||
v-if="isAddingPerson && searchResults.length"
|
||||
ref="persondroplist"
|
||||
class="person-droplist"
|
||||
class="member-droplist"
|
||||
>
|
||||
<li
|
||||
v-for="person in searchResults"
|
||||
:key="person.id"
|
||||
>
|
||||
<button
|
||||
class="person-circle add-person"
|
||||
class="member-circle add-person"
|
||||
@mousedown="addPerson(person)"
|
||||
>
|
||||
{{ person.displayName || '' }}
|
||||
|
|
@ -123,7 +123,7 @@ watch([persondroplist, searchNameInput], ([drop, input]) => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.person-list {
|
||||
.member-list {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-height: 50px;
|
||||
|
|
@ -132,15 +132,15 @@ watch([persondroplist, searchNameInput], ([drop, input]) => {
|
|||
}
|
||||
|
||||
/* Remove all the button styling */
|
||||
.person-circle {
|
||||
.member-circle {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Show the initials of the person in a circle */
|
||||
.person-circle {
|
||||
/* Show the initials of the member in a circle */
|
||||
.member-circle {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
|
@ -182,7 +182,7 @@ watch([persondroplist, searchNameInput], ([drop, input]) => {
|
|||
background-color: green;
|
||||
}
|
||||
|
||||
.person-droplist {
|
||||
.member-droplist {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -195,7 +195,7 @@ watch([persondroplist, searchNameInput], ([drop, input]) => {
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
.person-droplist li {
|
||||
.member-droplist li {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
|
|
|
|||
Loading…
Reference in a new issue