OpenAuth_views/src/pages/User/Pages/Apps.svelte

<script lang="typescript">
  import { onMount } from "svelte";
  import Box from "./Box.svelte";
  import BoxItem from "./BoxItem.svelte";
  export let loading = false;

  let modalState = false;

  onMount(() => {
    loading = false;
  });

  function modal(call: string, apiCall?: string) {
    if (call == "close") {
      closeModal();
    }
    if (call == "open") {
      openModal();
    }

    if (apiCall) {
      console.log(apiCall);
    }
  }

  function closeModal() {
    modalState = false;
  }
  function openModal() {
    modalState = true;
  }
</script>

<style>
  .btn {
    background-color: var(--primary);
    margin: auto 0;
    margin-left: 1rem;
    font-size: 1rem;
    padding: 0 0.5rem;
  }

  .btn-delete {
    margin-top: 0.5rem;
  }

  .btn-delete > .btn {
    margin: 0;
  }
</style>

<Box>
  <h1>Authorized Apps</h1>

  <BoxItem name={'Hedgedoc'} value={'https://md.elijas.de'} highlight={false}>
    <table class="table">
      <tbody>
        <tr>
          <th>Permission</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
        </tr>
        <tr>
          <td>Sanna</td>
          <td>Castillo</td>
        </tr>
        <tr>
          <td>Petra</td>
          <td>Serrano</td>
        </tr>
      </tbody>
    </table>
    <div class="btn-delete">
      <button
        on:click={() => {
          modal('open');
        }}
        class="btn btn-secondary">
        delete permissions
      </button>
    </div>
  </BoxItem>
</Box>

{#if modalState}
  <div id="modal1" class="modal">
    <div class="modal-title">Delte Hedgedocs permissions</div>
    <div id="modal1_content" class="modal-content">
      By pressing the "delete" button you will remove all set permissions for
      "Hedgedocs". This could mean an irreversible loss of all data of this
      service.
    </div>

    <div class="modal-action">
      <button
        on:click={() => {
          modal('close');
        }}
        class="btn btn-success">Close</button>
      <button
        on:click={() => {
          modal('close', 'delete');
        }}
        class="btn btn-error">Delete</button>
    </div>
  </div>
{/if}