Add label as a selectable permission

src/lib/components/permissions/actions.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { DropList, DropListItem } from '..';
+ import Label from './label.svelte';
  import Custom from './custom.svelte';
  import Team from './team.svelte';
  import User from './user.svelte';
@@ -10,6 +11,7 @@
  export let showDropdown: boolean;
  export let showUser: boolean;
  export let showTeam: boolean;
+ export let showLabel: boolean;
  export let showCustom: boolean;
  export let groups: Writable<Map<string, Permission>>;
 
@@ -38,6 +40,7 @@
  </DropListItem>
  <DropListItem on:click={() => (showUser = true)}>Select users</DropListItem>
  <DropListItem on:click={() => (showTeam = true)}>Select teams</DropListItem>
+ <DropListItem on:click={() => (showLabel = true)}>Label</DropListItem>
  <DropListItem on:click={() => (showCustom = true)}>Custom permission</DropListItem>
  </svelte:fragment>
 </DropList>
@@ -51,4 +54,5 @@
  showCustom = true;
  }}
  {groups} />
+<Label bind:show={showLabel} on:create {groups} />
 <Custom bind:show={showCustom} on:create {groups} />

src/lib/components/permissions/label.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+ import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
+ import { createEventDispatcher } from 'svelte';
+ import { Modal } from '..';
+ import type { Writable } from 'svelte/store';
+ import type { Permission } from './permissions.svelte';
+
+ export let show: boolean;
+ export let groups: Writable<Map<string, Permission>>;
+
+ const dispatch = createEventDispatcher();
+
+ const pattern = String.raw`^[a-zA-Z0-9]+$`;
+ let value = '';
+ let isError = false;
+
+ function reset() {
+ value = '';
+ show = false;
+ }
+
+ function create() {
+ if (!value || !value.match(pattern)) {
+ isError = true;
+ return;
+ }
+
+ dispatch('create', [`label:${value}`]);
+ reset();
+ }
+
+ $: disabled = !value || $groups.has(value);
+</script>
+
+<Modal title="Label" bind:show on:close={reset} onSubmit={create}>
+ <p class="text">Labels allow you to grant access to users with the specfied label.</p>
+ <FormList>
+ <InputText showLabel={false} id="label" label="Label" placeholder="admin" bind:value />
+ <Helper type={isError ? 'warning' : 'neutral'}
+ >Only alphanumeric characters are allowed.</Helper>
+ </FormList>
+
+ <svelte:fragment slot="footer">
+ <Button submit {disabled}>Add</Button>
+ </svelte:fragment>
+</Modal>

src/lib/components/permissions/permissions.svelte

@@ -30,6 +30,7 @@
 
  let showUser = false;
  let showTeam = false;
+ let showLabel = false;
  let showCustom = false;
  let showDropdown = false;
 
@@ -207,6 +208,7 @@
  </div>
 
  <Actions
+ bind:showLabel
  bind:showCustom
  bind:showDropdown
  bind:showTeam
@@ -223,6 +225,7 @@
  <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
  <div class="common-section">
  <Actions
+ bind:showLabel
  bind:showCustom
  bind:showDropdown
  bind:showTeam

src/lib/components/permissions/roles.svelte

@@ -20,6 +20,7 @@
 
  let showUser = false;
  let showTeam = false;
+ let showLabel = false;
  let showCustom = false;
  let showDropdown = false;
 
@@ -112,6 +113,7 @@
  </TableBody>
  </Table>
  <Actions
+ bind:showLabel
  bind:showCustom
  bind:showDropdown
  bind:showTeam
@@ -128,6 +130,7 @@
  <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
  <div class="common-section">
  <Actions
+ bind:showLabel
  bind:showCustom
  bind:showDropdown
  bind:showTeam