From 48bd11a8fa4707971502d87a3ac12aba4eb17961 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 3 Sep 2026 00:42:50 +0000 Subject: [PATCH] P2: Acting-as chip + principal prefs for linked accounts Show "Acting as [school email]" in portal RightBar/Admin/Settings (and BaseNav tooltip) when school_uid claim or personal+linked_to. Write calendar prefs to active school doc; refresh ID token claims after acceptLink; add acting-as unit tests to CI. Co-authored-by: Sander Vonk --- .github/workflows/ci.yml | 3 + package.json | 1 + scripts/test-acting-as.mjs | 164 ++++++++++++++++++++++++ src/common/actingAs.ts | 74 +++++++++++ src/components/Home/BaseNav.vue | 8 ++ src/components/Portal/CalendarBlock.vue | 4 +- src/components/Portal/RightBar.vue | 55 +++++++- src/store/index.ts | 109 ++++++++++++++-- src/views/Admin/Admin.vue | 49 ++++++- src/views/Portal/SettingsModal.vue | 78 +++++++---- 10 files changed, 508 insertions(+), 37 deletions(-) create mode 100644 scripts/test-acting-as.mjs create mode 100644 src/common/actingAs.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 73045e00..3689f9b4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -40,5 +40,8 @@ jobs: - name: Board hydrate tests run: npm run test:me-board + - name: Acting-as chip tests + run: npm run test:acting-as + - name: Build run: npm run build diff --git a/package.json b/package.json index 23ba0f2d..ef713496 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "test:paths": "node --experimental-strip-types scripts/test-paths.mjs", "test:class-listeners": "node --experimental-strip-types scripts/test-class-listeners.mjs", "test:me-board": "node --experimental-strip-types scripts/test-me-board.mjs", + "test:acting-as": "node --experimental-strip-types scripts/test-acting-as.mjs", "deploy": "node deploy.js", "postbuild": "cross-env OS_TYPE=$(uname -s) npm-run-all --parallel copy-files echo-message", "copy-files": "npm run copy-win || npm run copy-nix", diff --git a/scripts/test-acting-as.mjs b/scripts/test-acting-as.mjs new file mode 100644 index 00000000..a5552d4b --- /dev/null +++ b/scripts/test-acting-as.mjs @@ -0,0 +1,164 @@ +/** + * Unit tests for linked-account Acting-as chip visibility + school email resolution. + * Run: node --experimental-strip-types scripts/test-acting-as.mjs + */ +import { + actingAsLabel, + isActingAsLinked, + resolveActingAsEmail, + schoolUidFromClaims, + shouldShowActingAsChip, +} from "../src/common/actingAs.ts"; + +let failed = 0; + +function assert(cond, msg) { + if (!cond) { + failed++; + console.error("FAIL:", msg); + } else { + console.log("ok:", msg); + } +} + +function assertEq(actual, expected, label) { + const ok = actual === expected; + if (!ok) { + failed++; + console.error(`FAIL: ${label}\n expected: ${JSON.stringify(expected)}\n actual: ${JSON.stringify(actual)}`); + } else { + console.log(`ok: ${label}`); + } +} + +console.log("--- school_uid claim parse ---\n"); + +assertEq(schoolUidFromClaims(null), null, "null claims"); +assertEq(schoolUidFromClaims(undefined), null, "undefined claims"); +assertEq(schoolUidFromClaims({}), null, "empty claims"); +assertEq(schoolUidFromClaims({ school_uid: "" }), null, "empty school_uid"); +assertEq(schoolUidFromClaims({ school_uid: " " }), null, "whitespace school_uid"); +assertEq(schoolUidFromClaims({ school_uid: 123 }), null, "non-string school_uid"); +assertEq(schoolUidFromClaims({ school_uid: "schoolUidABC" }), "schoolUidABC", "valid school_uid"); + +console.log("\n--- isActingAsLinked ---\n"); + +assert( + !isActingAsLinked({ personalAccount: false, linkedTo: null, schoolUidClaim: null }), + "org login, no claim → not acting as" +); +assert( + !isActingAsLinked({ personalAccount: true, linkedTo: null, schoolUidClaim: null }), + "personal without linked_to → not acting as" +); +assert( + isActingAsLinked({ + personalAccount: true, + linkedTo: "schoolUidABC", + schoolUidClaim: null, + }), + "personal + linked_to fallback → acting as" +); +assert( + isActingAsLinked({ + personalAccount: false, + linkedTo: null, + schoolUidClaim: "schoolUidABC", + }), + "school_uid claim alone → acting as (prefer claim)" +); +assert( + isActingAsLinked({ + personalAccount: true, + linkedTo: "schoolUidABC", + schoolUidClaim: "schoolUidABC", + }), + "claim + personal linked → acting as" +); + +console.log("\n--- resolveActingAsEmail / chip visibility ---\n"); + +assertEq( + resolveActingAsEmail({ + personalAccount: false, + linkedTo: null, + schoolUidClaim: null, + activeDocEmail: "student@andrew.cmu.edu", + userEmail: "student@andrew.cmu.edu", + }), + null, + "org login → no acting-as email" +); + +assertEq( + resolveActingAsEmail({ + personalAccount: true, + linkedTo: "schoolUidABC", + schoolUidClaim: "schoolUidABC", + activeDocEmail: "student@andrew.cmu.edu", + userEmail: "me@gmail.com", + }), + "student@andrew.cmu.edu", + "linked session → school email, not personal Gmail" +); + +assertEq( + resolveActingAsEmail({ + personalAccount: true, + linkedTo: "schoolUidABC", + schoolUidClaim: null, + activeDocEmail: null, + userEmail: "me@gmail.com", + }), + null, + "acting as but school email missing → null (never personal Gmail)" +); + +assertEq( + resolveActingAsEmail({ + personalAccount: true, + linkedTo: "schoolUidABC", + schoolUidClaim: "schoolUidABC", + activeDocEmail: "me@gmail.com", + userEmail: "me@gmail.com", + }), + null, + "guard: active email === personal Gmail → unresolved" +); + +assert( + shouldShowActingAsChip({ + personalAccount: true, + linkedTo: "schoolUidABC", + schoolUidClaim: "schoolUidABC", + activeDocEmail: "student@andrew.cmu.edu", + userEmail: "me@gmail.com", + }), + "chip visible for linked personal with school email" +); + +assert( + !shouldShowActingAsChip({ + personalAccount: false, + linkedTo: null, + schoolUidClaim: null, + activeDocEmail: "student@andrew.cmu.edu", + userEmail: "student@andrew.cmu.edu", + }), + "chip hidden for non-linked org login" +); + +assertEq( + actingAsLabel("student@andrew.cmu.edu"), + "Acting as student@andrew.cmu.edu", + "label format" +); +assertEq(actingAsLabel(null), null, "label null when no email"); +assertEq(actingAsLabel(" "), null, "label null when blank"); + +console.log("\n--- done ---\n"); +if (failed) { + console.error(`${failed} assertion(s) failed`); + process.exit(1); +} +console.log("All assertions passed."); diff --git a/src/common/actingAs.ts b/src/common/actingAs.ts new file mode 100644 index 00000000..b264a075 --- /dev/null +++ b/src/common/actingAs.ts @@ -0,0 +1,74 @@ +/** + * Linked-account "Acting as …" chip helpers. + * Pure leaf module (no Firebase / Vue) so node tests can load it directly. + * + * Prefer ID-token `school_uid` claim; fall back to personal_account + linked_to. + * School email always comes from the principal (active/school) doc — never personal Gmail. + * + * @module common/actingAs + */ + +/** Loose claims bag from Firebase getIdTokenResult().claims */ +export type IdTokenClaims = Record | null | undefined; + +export interface ActingAsInput { + /** Custom claim school_uid when present */ + schoolUidClaim?: string | null; + /** users/{auth.uid}.personal_account */ + personalAccount?: boolean; + /** users/{auth.uid}.linked_to (school uid) */ + linkedTo?: string | null; + /** School principal email from active_doc / linked school doc */ + activeDocEmail?: string | null; + /** Signed-in Firebase user email (may be personal Gmail) — never used as chip email when personal */ + userEmail?: string | null; +} + +/** Read school_uid from ID token claims (string only). */ +export function schoolUidFromClaims(claims: IdTokenClaims): string | null { + if (!claims || typeof claims !== "object") return null; + const raw = claims.school_uid; + if (typeof raw !== "string") return null; + const trimmed = raw.trim(); + return trimmed || null; +} + +/** + * True when this session should show Acting-as chrome: + * prefer school_uid claim; else personal_account && linked_to. + */ +export function isActingAsLinked(input: ActingAsInput): boolean { + const claim = (input.schoolUidClaim || "").trim(); + if (claim) return true; + const linkedTo = (input.linkedTo || "").trim(); + return !!(input.personalAccount && linkedTo); +} + +/** + * School principal email for the chip label. + * Uses active_doc.email only — never the personal Gmail when acting as linked. + * Returns null when not acting as, or when school email is unavailable. + */ +export function resolveActingAsEmail(input: ActingAsInput): string | null { + if (!isActingAsLinked(input)) return null; + const schoolEmail = (input.activeDocEmail || "").trim(); + if (!schoolEmail) return null; + // Guard: if somehow active email equals personal Gmail while personal, treat as unresolved + if (input.personalAccount && input.userEmail) { + const personal = input.userEmail.trim().toLowerCase(); + if (personal && schoolEmail.toLowerCase() === personal) return null; + } + return schoolEmail; +} + +/** Full accessible label, e.g. "Acting as student@andrew.cmu.edu". */ +export function actingAsLabel(email: string | null | undefined): string | null { + const trimmed = (email || "").trim(); + if (!trimmed) return null; + return `Acting as ${trimmed}`; +} + +/** Chip should render when acting-as session has a resolvable school email. */ +export function shouldShowActingAsChip(input: ActingAsInput): boolean { + return !!resolveActingAsEmail(input); +} diff --git a/src/components/Home/BaseNav.vue b/src/components/Home/BaseNav.vue index 66a31f29..4958f138 100644 --- a/src/components/Home/BaseNav.vue +++ b/src/components/Home/BaseNav.vue @@ -45,6 +45,8 @@ id="nav-auth-btn" class="small-action-btn auth-action can-logout can-login click-action" :class="{ linked: $store.personal_account && $store.user, oauth: !logged_in }" + :title="auth_btn_title" + :aria-label="auth_btn_title || undefined" > Log {{ logged_in ? "Out" : "In" }} @@ -80,6 +82,12 @@ export default { logged_in() { return !!this.$store.user; }, + auth_btn_title() { + if (!this.logged_in) return "Log in"; + if (this.$store.acting_as_label) return this.$store.acting_as_label; + if (this.$store.user?.email) return `Logged in as ${this.$store.user.email}`; + return "Log out"; + }, }, }; // using the mounted() hook to add an event listener diff --git a/src/components/Portal/CalendarBlock.vue b/src/components/Portal/CalendarBlock.vue index af7bf099..7dacc6b0 100644 --- a/src/components/Portal/CalendarBlock.vue +++ b/src/components/Portal/CalendarBlock.vue @@ -362,7 +362,7 @@ export default { get_day_tasks(day) { return this.tasks .filter((task) => { - if (this.$store?.account_doc?.prefs?.hide_finished && this.is_completed(task)) return false; + if (this.$store?.active_doc?.prefs?.hide_finished && this.is_completed(task)) return false; const task_date = compatDateObj(task.date); return this.day_matches(task_date, day) && (!this.filtered_classes.length || this.filtered_classes.includes(task.class_id)); }) @@ -372,7 +372,7 @@ export default { if (!this.is_completed(a) && this.is_completed(b)) return -1; // prioritize/deprioritize notes based on user settings if (a.type != b.type) { - let prioritize_notes = !this.$store?.account_doc?.prefs?.derank_notes; + let prioritize_notes = !this.$store?.active_doc?.prefs?.derank_notes; if (prioritize_notes && a.type == "note") return -1; if (prioritize_notes && b.type == "note") return 1; if (a.type == "note" && b.type != "note") return 1; diff --git a/src/components/Portal/RightBar.vue b/src/components/Portal/RightBar.vue index b84de6af..52250615 100644 --- a/src/components/Portal/RightBar.vue +++ b/src/components/Portal/RightBar.vue @@ -2,7 +2,23 @@
-
+
+ + {{ $store.acting_as_label }} +
+
| null, /** * @memberOf .main.state * @property {Boolean} paused If the app is paused (true) or not (false) @@ -436,6 +450,55 @@ export const useMainStore: StoreDefinition = defineStore({ const role = this.active_doc?.role; return role === "teacher" || role === "admin"; }, + /** + * @memberOf .main.getters + * @function school_uid_claim + * @description school_uid from the latest ID token claims (null when absent) + * @returns {String|null} + * @see {@link refresh_id_token_claims} + * @see {@link is_acting_as_linked} + */ + school_uid_claim(): string | null { + return schoolUidFromClaims(this.id_token_claims); + }, + /** + * @memberOf .main.getters + * @function is_acting_as_linked + * @description True when this session acts as a school principal (prefer school_uid claim; else personal_account && linked_to) + * @returns {Boolean} + * @see {@link acting_as_email} + */ + is_acting_as_linked(): boolean { + return isActingAsLinked({ + schoolUidClaim: this.school_uid_claim, + personalAccount: this.personal_account, + linkedTo: this.account_doc?.linked_to || null, + }); + }, + /** + * @memberOf .main.getters + * @function acting_as_email + * @description School principal email for the Acting-as chip (from active_doc — never personal Gmail) + * @returns {String|null} + */ + acting_as_email(): string | null { + return resolveActingAsEmail({ + schoolUidClaim: this.school_uid_claim, + personalAccount: this.personal_account, + linkedTo: this.account_doc?.linked_to || null, + activeDocEmail: this.active_doc?.email || null, + userEmail: this.user?.email || null, + }); + }, + /** + * @memberOf .main.getters + * @function acting_as_label + * @description Accessible chip label "Acting as email@school.edu", or null when chip should hide + * @returns {String|null} + */ + acting_as_label(): string | null { + return actingAsLabel(this.acting_as_email); + }, /** * @memberOf .main.getters * @function done_daily_survey @@ -696,16 +759,43 @@ export const useMainStore: StoreDefinition = defineStore({ */ async set_account_pref(pref: string, value: string | boolean): Promise { try { - if (!this.account_ref) throw "No account doc"; + // Calendar / principal prefs live on the school doc (active_ref), never the personal wrapper + if (!this.active_ref || !this.active_doc) throw "No active doc"; if (!pref) throw "No pref provided"; - await this.update_wrapper_with_merge({ - prefs: { ...this.active_doc?.prefs, [pref]: value }, - }); + const prefs = { ...(this.active_doc.prefs || {}), [pref]: value }; + if (this.personal_account && this.linked_account_doc) { + this.linked_account_doc.prefs = prefs; + } else if (this.account_doc) { + this.account_doc.prefs = prefs; + } + await setDoc(this.active_ref, { prefs }, { merge: true }); return Promise.resolve(); } catch (err) { return Promise.reject(err); } }, + /** + * @memberOf .main.actions + * @function refresh_id_token_claims + * @description Refresh (optionally force) the ID token and store claims for school_uid / Acting-as + * @param {Boolean} force Force-refresh so custom claims land before apiFetch + * @returns {Promise} Resolves when claims are stored (or cleared if signed out) + * @see {@link school_uid_claim} + * @see {@link link_account_uid} + */ + async refresh_id_token_claims(force: boolean = false): Promise { + if (!this.user) { + this.id_token_claims = null; + return; + } + try { + const result = await this.user.getIdTokenResult(force); + this.id_token_claims = (result?.claims as Record) || {}; + } catch (err) { + _status.warn("🔑 Couldn't refresh ID token claims", err); + this.id_token_claims = null; + } + }, /** * @memberOf .main.actions * @function fetch_stats @@ -1271,6 +1361,7 @@ export const useMainStore: StoreDefinition = defineStore({ this.loaded_email = null; this.loaded_classes = null; this.personal_account = false; + this.id_token_claims = null; this.stats_cache = null; this.teacher_stats_cache = null; this.teacher = { @@ -1359,10 +1450,8 @@ export const useMainStore: StoreDefinition = defineStore({ throw data?.error || data?.message || "acceptLink failed"; } - // Refresh custom claims / token so rules + callables see the link - if (this.user) { - await this.user.getIdToken(true); - } + // Force-refresh so school_uid claims land before any apiFetch (board/stats/survey) + await this.refresh_id_token_claims(true); // Mirror linked_to locally; server owns the write this.account_doc.linked_to = uid; @@ -1723,6 +1812,10 @@ export const useMainStore: StoreDefinition = defineStore({ return; } this.user = user; + // Load claims (school_uid) for Acting-as chip; non-forced so cache is fine on warm start + this.refresh_id_token_claims(false).catch((err) => { + _status.warn("🔑 Initial ID token claims refresh failed", err); + }); // if this is a personal account, get the associated linked account doc if (this.personal_account) { this.get_remote() diff --git a/src/views/Admin/Admin.vue b/src/views/Admin/Admin.vue index b566c646..6dc1bc30 100644 --- a/src/views/Admin/Admin.vue +++ b/src/views/Admin/Admin.vue @@ -63,7 +63,17 @@
-
+
+ + {{ $store.acting_as_label }} +
+
Linked Account
@@ -387,6 +397,7 @@ main.admin, border-radius: calc(var(--radius-sidebar) - 10px); } .linked_acc_icon, +.linked_acc_chip, .active_acc_icon { flex: 0 0 30px; height: 30px; @@ -395,9 +406,43 @@ main.admin, align-items: center; justify-content: center; } -.linked_acc_icon { +.linked_acc_icon, +.linked_acc_chip { filter: var(--filter-icon); } +.linked_acc_chip { + flex: 1 1 auto; + width: auto; + min-width: 0; + max-width: none; + height: auto; + min-height: 30px; + gap: 6px; + justify-content: flex-start; + padding: 4px 8px 4px 4px; + margin-right: 4px; + border-radius: calc(var(--radius-sidebar) - var(--padding-sidebar) / 2); + background: var(--color-on-bg-alt); + filter: none; +} +.linked_acc_chip__img { + flex: 0 0 24px; + filter: var(--filter-icon); +} +.linked_acc_chip__text { + flex: 1 1 auto; + min-width: 0; + font-size: 12px; + font-weight: 600; + line-height: 1.25; + color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sidebar_last_block:has(.linked_acc_chip) .auth_logout { + flex: 0 0 auto; +} .active_acc_icon { border-radius: calc(var(--radius-sidebar) - var(--padding-sidebar) / 2); overflow: hidden; diff --git a/src/views/Portal/SettingsModal.vue b/src/views/Portal/SettingsModal.vue index 4b81eaa9..c8134d9d 100644 --- a/src/views/Portal/SettingsModal.vue +++ b/src/views/Portal/SettingsModal.vue @@ -14,6 +14,22 @@ You're currently signed in using a personal account. You can unlink it, or link more emails, through your main account.
+
+ + {{ $store.acting_as_label }} +
@@ -342,10 +358,10 @@ export default { return !this.$store?.account_doc?.prefs?.hide_timeout; }, prioritize_notes() { - return !this.$store?.account_doc?.prefs?.derank_notes; + return !this.$store?.active_doc?.prefs?.derank_notes; }, include_finished() { - return !this.$store?.account_doc?.prefs?.hide_finished; + return !this.$store?.active_doc?.prefs?.hide_finished; }, ready_to_link() { return ( @@ -364,27 +380,21 @@ export default { }, methods: { update_account_pref(key, value, [on_true, on_false]) { - if (this.$store.account_doc) { - let before = this.$store.account_doc?.prefs?.[key]; - if (before != value) { - // update the value - this.$store - .update_wrapper_with_merge({ - prefs: { - ...this.$store.account_doc.prefs, - [key]: value, - }, - }) - .then(() => { - this.changed = true; - new SuccessToast(value ? on_false : on_true, 2000); - }) - .catch((err) => { - this.changed = false; - new ErrorToast(`Couldn't update key ${key} of preferences`, err, 2000); - this.$status.error('⚙️ Couldn\'t update preferences key "${key}" to "${value}"'); - }); - } + // Calendar prefs (derank_notes / hide_finished) write to the school principal via set_account_pref + if (!this.$store?.active_doc) return; + const before = this.$store.active_doc?.prefs?.[key]; + if (before != value) { + this.$store + .set_account_pref(key, value) + .then(() => { + this.changed = true; + new SuccessToast(value ? on_false : on_true, 2000); + }) + .catch((err) => { + this.changed = false; + new ErrorToast(`Couldn't update key ${key} of preferences`, err, 2000); + this.$status.error('⚙️ Couldn\'t update preferences key "${key}" to "${value}"'); + }); } }, update_email_pref(key, description) { @@ -509,6 +519,28 @@ export default { .linked_accounts_row { margin-bottom: 0; } +.acting_as_chip.settings_acting_as { + display: inline-flex; + align-items: center; + gap: 8px; + margin: 0.75em 0 0.25em; + padding: 6px 10px 6px 6px; + border-radius: calc(var(--radius-sidebar) - var(--padding-sidebar) / 2); + background: var(--color-overlay-input); + max-width: 100%; +} +.acting_as_chip__img { + flex: 0 0 20px; + filter: var(--filter-icon); +} +.acting_as_chip__text { + font-size: 0.95em; + font-weight: 600; + color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} /* make space for new button text */ .links_personal .styled_links_add__text { flex-basis: 0;