selfhosted
/
padloc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make SCIM section in settings look pretty

This commit is contained in:
Martin Kleinschrodt 2022-05-07 10:47:45 +02:00
parent 7ff597a19e
commit 4308e675ec
2 changed files with 62 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/app/src/elements/member-item.ts
View File

@ -1,4 +1,4 @@
import { Org, OrgMember, OrgRole } from "@padloc/core/src/org";
import { Org, OrgMember, OrgMemberStatus, OrgRole } from "@padloc/core/src/org";
import { translate as $l } from "@padloc/locale/src/translate";
import { shared } from "../styles";
import "./randomart";
@ -32,6 +32,7 @@ export class MemberItem extends LitElement {
render() {
const isAdmin = this.member.role === OrgRole.Admin;
const isOwner = this.member.role === OrgRole.Owner;
const isProvisioned = this.member.status === OrgMemberStatus.Provisioned;
const isSuspended = this.org?.isSuspended(this.member);
const groups = this.org?.getGroupsForMember(this.member) || [];
@ -74,6 +75,9 @@ export class MemberItem extends LitElement {
<pl-icon class="inline" icon="admin"></pl-icon> ${$l("Admin")}
</div>
`
: ""}
${isProvisioned
? html` <div class="tiny tag subtle">${$l("Provisioned")}</div> `
: isSuspended
? html` <div class="tiny tag warning">${$l("Suspended")}</div> `
: ""}

97
packages/app/src/elements/org-settings.ts
View File

@ -11,7 +11,11 @@ import "./list";
import "./icon";
import "./org-nav";
import { customElement, property, query } from "lit/decorators.js";
import { html, LitElement, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import "./drawer";
import { ToggleButton } from "./toggle-button";
import { setClipboard } from "../lib/clipboard";
import { live } from "lit/directives/live.js";
@customElement("pl-org-settings")
export class OrgSettingsView extends Routing(StateMixin(LitElement)) {
@ -147,6 +151,7 @@ export class OrgSettingsView extends Routing(StateMixin(LitElement)) {
);
if (!confirmed) {
this.requestUpdate();
return;
}
@ -155,6 +160,11 @@ export class OrgSettingsView extends Routing(StateMixin(LitElement)) {
});
}
private async _toggleDirectorySync(e: Event) {
const toggle = e.target as ToggleButton;
toggle.active ? await this._enableDirectorySync() : await this._disableDirectorySync();
}
static styles = [shared];
render() {
@ -173,9 +183,9 @@ export class OrgSettingsView extends Routing(StateMixin(LitElement)) {
<pl-scroller class="stretch">
<div class="vertical center-aligning padded layout">
${this._renderDirectorySettings()}
<div class="vertical spacing layout fill-horizontally max-width-30em">
${this._renderDirectorySettings()}
<section class="margined box">
<h2 class="padded uppercase bg-dark border-bottom semibold">${$l("Security")}</h2>
@ -214,51 +224,58 @@ export class OrgSettingsView extends Routing(StateMixin(LitElement)) {
private _renderDirectorySettings() {
const org = this._org!;
let sectionHtml: TemplateResult<1>;
let scimGroupsUrl = "";
let scimUsersUrl = "";
if (org.directory.syncProvider !== "none") {
const scimSecret = bytesToBase64(org.directory.scim!.secret, true);
const scimUrl = org.directory.scim!.url;
const syncEnabled = org.directory.syncProvider !== "none";
// TODO: Make this section more helpful and pretty
sectionHtml = html`
<div class="half-padded list-item layout vertical center-aligning">
<div class="margined">
<h3>SCIM URL (Groups)</h3>
<div class="margined padded box">
<code>${scimUrl}/Groups?org=${org.id}&token=${scimSecret}</code>
</div>
<h3>SCIM URL (Users)</h3>
<div class="margined padded box">
<code>${scimUrl}/Users?org=${org.id}&token=${scimSecret}</code>
</div>
</div>
<pl-button class="negative max-width-20em" @click=${this._disableDirectorySync}>
${$l("Disable Directory Sync")}
</pl-button>
</div>
`;
} else {
sectionHtml = html`
<div class="half-padded list-item">
<pl-button @click=${this._enableDirectorySync}> ${$l("Enable Directory Sync")} </pl-button>
</div>
`;
if (syncEnabled && org.directory.scim) {
const scimSecret = bytesToBase64(org.directory.scim.secret, true);
scimGroupsUrl = `${org.directory.scim.url}/Groups?org=${org.id}&token=${scimSecret}`;
scimUsersUrl = `${org.directory.scim.url}/Users?org=${org.id}&token=${scimSecret}`;
}
return html`
<div
class="vertical spacing layout fill-horizontally ${org.directory.syncProvider === "none"
? "max-width-30em"
: "max-width-40em"}"
>
<div class="vertical spacing layout fill-horizontally">
<section class="margined box">
<h2 class="padded uppercase bg-dark border-bottom semibold">${$l("Directory Sync")}</h2>
<div>${sectionHtml}</div>
<div>
<pl-toggle-button
class="transparent"
.active=${live(syncEnabled)}
.label=${$l("Enable Directory Sync")}
reverse
@change=${this._toggleDirectorySync}
>
</pl-toggle-button>
</div>
<pl-drawer .collapsed=${!syncEnabled}>
<div
class="padded border-top click hover"
@click=${() => setClipboard(scimGroupsUrl, $l("SCIM Groups Url"))}
>
<div class="half-padded">
<div class="tiny blue highlighted">${$l("Groups URL")}</div>
<div class="small">
<code>${scimGroupsUrl}</code>
</div>
</div>
</div>
<div
class="padded border-top click hover"
@click=${() => setClipboard(scimUsersUrl, $l("SCIM Users Url"))}
>
<div class="half-padded">
<div class="tiny blue highlighted">${$l("Users URL")}</div>
<div class="small">
<code>${scimUsersUrl}</code>
</div>
</div>
</div>
</pl-drawer>
</section>
</div>
`;