Use (base64-encrypted) email instead of account id to navigate to org member

This commit is contained in:
Martin Kleinschrodt 2022-06-20 08:08:42 +02:00
parent dc4b022ea2
commit b3661e47de
3 changed files with 16 additions and 12 deletions

View File

@ -15,13 +15,14 @@ import "./list";
import "./toggle";
import { customElement, property, query, state } from "lit/decorators.js";
import { css, html, LitElement } from "lit";
import { base64ToString } from "@padloc/core/src/encoding";
@customElement("pl-member-view")
export class MemberView extends Routing(StateMixin(LitElement)) {
readonly routePattern = /^orgs\/([^\/]+)\/members(?:\/([^\/]+))?/;
@property()
memberId: string;
email: string;
@property()
orgId: string;
@ -31,7 +32,7 @@ export class MemberView extends Routing(StateMixin(LitElement)) {
}
private get _member() {
return this._org && this._org.getMember({ accountId: this.memberId });
return this._org && this._org.getMember({ email: this.email });
}
@query("#saveButton")
@ -78,9 +79,9 @@ export class MemberView extends Routing(StateMixin(LitElement)) {
return (this._org && this._org.vaults.filter((vault) => !this._vaults.some((v) => v.id === vault.id))) || [];
}
async handleRoute([orgId, memberId]: [string, string]) {
async handleRoute([orgId, email]: [string, string]) {
this.orgId = orgId;
this.memberId = memberId;
this.email = email && base64ToString(email);
await this.updateComplete;
this.clearChanges();
}

View File

@ -19,6 +19,7 @@ import { css, html, LitElement } from "lit";
import { ProvisioningStatus } from "@padloc/core/src/provisioning";
import "./rich-content";
import "./button";
import { stringToBase64 } from "@padloc/core/src/encoding";
@customElement("pl-org-dashboard")
export class OrgDashboard extends Routing(StateMixin(LitElement)) {
@ -223,7 +224,8 @@ export class OrgDashboard extends Routing(StateMixin(LitElement)) {
(member) => html`
<div
class="padded list-item hover click"
@click=${() => this.go(`orgs/${this.orgId}/members/${member.id}`)}
@click=${() =>
this.go(`orgs/${this.orgId}/members/${stringToBase64(member.email)}`)}
>
<pl-member-item .member=${member} .org=${this._org!}></pl-member-item>
</div>

View File

@ -16,6 +16,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
import { html, LitElement } from "lit";
import "./scroller";
import "./button";
import { base64ToString, stringToBase64 } from "@padloc/core/src/encoding";
@customElement("pl-org-members")
export class OrgMembersView extends Routing(StateMixin(LitElement)) {
@ -25,7 +26,7 @@ export class OrgMembersView extends Routing(StateMixin(LitElement)) {
orgId: string = "";
@property()
memberId?: string;
selectedEmail?: string;
@query("#filterInput")
private _filterInput: Input;
@ -43,9 +44,9 @@ export class OrgMembersView extends Routing(StateMixin(LitElement)) {
@state()
private _filterActive: boolean = false;
handleRoute([orgId, memberId]: [string, string]) {
handleRoute([orgId, email]: [string, string]) {
this.orgId = orgId;
this.memberId = memberId;
this.selectedEmail = email && base64ToString(email);
}
private async _createInvite() {
@ -64,10 +65,10 @@ export class OrgMembersView extends Routing(StateMixin(LitElement)) {
}
private async _toggleMember(member: OrgMember) {
if (this.memberId === member.id) {
if (this.selectedEmail === member.email) {
this.go(`orgs/${this.orgId}/members/`);
} else {
this.go(`orgs/${this.orgId}/members/${member.id}`);
this.go(`orgs/${this.orgId}/members/${stringToBase64(member.email)}`);
}
}
@ -99,7 +100,7 @@ export class OrgMembersView extends Routing(StateMixin(LitElement)) {
: org.members;
return html`
<div class="fullbleed pane layout background ${this.memberId ? "open" : ""}">
<div class="fullbleed pane layout background ${this.selectedEmail ? "open" : ""}">
<div class="vertical layout">
<header class="padded center-aligning horizontal layout" ?hidden=${this._filterActive}>
<pl-org-nav></pl-org-nav>
@ -135,7 +136,7 @@ export class OrgMembersView extends Routing(StateMixin(LitElement)) {
(member) => html`
<div
class="double-padded list-item hover click"
aria-selected=${member.id === this.memberId}
aria-selected=${member.id === this.selectedEmail}
@click=${() => this._toggleMember(member)}
>
<pl-member-item .member=${member} .org=${this._org}></pl-member-item>