Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show Connect button only when not connected and authenticated
Rūdolfs Ošiņš committed 2 years ago
commit 5141f3e34096747cc024c9874679f54df2ecbb63
parent 99a0d8d6f28cc5c60134887f17507f62bb3be72c
4 files changed +78 -118
modified src/App/Header.svelte
@@ -1,11 +1,22 @@
<script lang="ts">
+ 
  import type { HttpdState } from "@app/lib/httpd";
+ 


  import { httpdStore } from "@app/lib/httpd";



  import Authenticate from "./Header/Authenticate.svelte";

  import Breadcrumbs from "./Header/Breadcrumbs.svelte";
- 
  import Connect from "@app/App/Header/Connect.svelte";
+ 
  import Button from "@app/components/Button.svelte";
+ 
  import Command from "@app/components/Command.svelte";
+ 
  import IconSmall from "@app/components/IconSmall.svelte";

  import Link from "@app/components/Link.svelte";

  import NodeInfo from "@app/App/Header/NodeInfo.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";
+
+ 
  const buttonTitle: Record<HttpdState["state"], string> = {
+ 
    stopped: "radicle-httpd is stopped",
+ 
    running: "radicle-httpd is running",
+ 
    authenticated: "radicle-httpd is running - signed in",
+ 
  };

</script>



<style>
@@ -28,7 +39,26 @@
    height: var(--button-regular-height);

    margin-right: 0.5rem;

  }
-
+ 
  .label {
+ 
    display: block;
+ 
    font-size: var(--font-size-small);
+ 
    font-weight: var(--font-weight-regular);
+ 
    margin-bottom: 0.75rem;
+ 
  }
+ 
  .connect-popover {
+ 
    max-width: 20rem;
+ 
  }
+ 
  .divider {
+ 
    height: 1px;
+ 
    width: 100%;
+ 
    background-color: var(--color-fill-separator);
+ 
    margin: 1rem 0;
+ 
  }
+ 
  .heading {
+ 
    font-size: var(--font-size-small);
+ 
    font-weight: var(--font-weight-bold);
+ 
    margin-bottom: 0.5rem;
+ 
  }

  @media (max-width: 720px) {

    header .right {

      gap: 1rem;
@@ -52,10 +82,40 @@
  </div>



  <div class="right layout-desktop-flex">
- 
    {#if $httpdStore.state !== "stopped"}
+ 
    {#if $httpdStore.state === "stopped"}
+ 
      <Popover popoverPositionTop="3rem" popoverPositionRight="0">
+ 
        <Button
+ 
          slot="toggle"
+ 
          let:toggle
+ 
          on:click={toggle}
+ 
          title={buttonTitle[$httpdStore.state]}
+ 
          size="large"
+ 
          variant="secondary-toggle-off">
+ 
          <IconSmall name="device" />
+ 
          Connect
+ 
        </Button>
+ 
        <div slot="popover" class="connect-popover">
+ 
          <div class="heading">Connect & Authenticate</div>
+ 
          <div class="label">
+ 
            Start the local node to browse projecs on your local machine, create
+ 
            issues, and participate in discussions.
+ 
          </div>
+ 
          <Command fullWidth command={`rad web ${window.origin}`} />
+
+ 
          <div class="divider" />
+ 
          <div class="heading">New to Radicle?</div>
+ 
          <div class="label">
+ 
            Run the following command and follow the instructions to install
+ 
            Radicle and get started.
+ 
          </div>
+ 
          <Command
+ 
            fullWidth
+ 
            command="sh <(curl -sSf https://radicle.xyz/install)" />
+ 
        </div>
+ 
      </Popover>
+ 
    {:else}

      <NodeInfo running={$httpdStore.node === "running"} />

      <Authenticate />

    {/if}
- 
    <Connect />

  </div>

</header>
modified src/App/Header/Authenticate.svelte
@@ -17,7 +17,7 @@
    display: flex;

    flex-direction: column;

    gap: 0.5rem;
- 
    min-width: 18rem;
+ 
    width: 18rem;

  }

  .status {

    font-size: var(--font-size-tiny);
@@ -28,21 +28,21 @@
    display: flex;

    font-family: var(--font-family-monospace);

  }
- 
  .indicator {
- 
    width: 0.75rem;
- 
    height: 0.75rem;
- 
    background-color: var(--color-fill-secondary);
- 
    border-radius: var(--border-radius-round);
- 
    position: absolute;
- 
    top: -0.375rem;
- 
    right: -0.375rem;
- 
  }

  .user {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

  }
+ 
  .connect-popover {
+ 
    max-width: 20rem;
+ 
  }
+ 
  .label {
+ 
    display: block;
+ 
    font-size: var(--font-size-small);
+ 
    font-weight: var(--font-weight-regular);
+ 
    margin-bottom: 0.75rem;
+ 
  }

</style>



{#if $httpdStore.state === "authenticated"}
@@ -87,13 +87,12 @@
      variant="secondary-toggle-off">

      <IconSmall name="key" />

      Authenticate
- 
      <div class="indicator" />

    </Button>

    <div slot="popover" class="connect-popover">
- 
      <div style:margin-bottom="1em">
- 
        Authenticate with your local backend to make changes
+ 
      <div class="label">
+ 
        Authenticate with your local node to make changes.

      </div>
- 
      <Command fullWidth command={`rad-web ${window.origin} --connect`} />
+ 
      <Command fullWidth command={`rad web ${window.origin} --connect`} />

    </div>

  </Popover>

{/if}
deleted src/App/Header/Connect.svelte
@@ -1,98 +0,0 @@
- 
<script lang="ts">
- 
  import type { HttpdState } from "@app/lib/httpd";
-
- 
  import * as httpd from "@app/lib/httpd";
- 
  import { closeFocused } from "@app/components/Popover.svelte";
- 
  import { httpdStore } from "@app/lib/httpd";
-
- 
  import Button from "@app/components/Button.svelte";
- 
  import Command from "@app/components/Command.svelte";
- 
  import IconButton from "@app/components/IconButton.svelte";
- 
  import IconSmall from "@app/components/IconSmall.svelte";
- 
  import Link from "@app/components/Link.svelte";
- 
  import Popover from "@app/components/Popover.svelte";
-
- 
  const buttonTitle: Record<HttpdState["state"], string> = {
- 
    stopped: "radicle-httpd is stopped",
- 
    running: "radicle-httpd is running",
- 
    authenticated: "radicle-httpd is running - signed in",
- 
  };
- 
</script>
-
- 
<style>
- 
  .container {
- 
    display: flex;
- 
    flex-direction: column;
- 
    gap: 0.5rem;
- 
    min-width: 18rem;
- 
  }
- 
  .host {
- 
    display: flex;
- 
    justify-content: space-between;
- 
    align-items: center;
- 
    font-size: var(--font-size-small);
- 
  }
- 
  .status {
- 
    font-size: var(--font-size-tiny);
- 
    color: var(--color-fill-gray);
- 
    text-align: left;
- 
  }
- 
  .connect-popover {
- 
    font-size: var(--font-size-small);
- 
  }
- 
</style>
-
- 
{#if $httpdStore.state === "stopped"}
- 
  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
- 
    <Button
- 
      slot="toggle"
- 
      let:toggle
- 
      on:click={toggle}
- 
      title={buttonTitle[$httpdStore.state]}
- 
      size="large"
- 
      variant="secondary-toggle-off">
- 
      <IconSmall name="device" />
- 
      Connect
- 
    </Button>
- 
    <div slot="popover" class="connect-popover">
- 
      <div style:margin-bottom="1em">
- 
        Start the backend to browse projecs on your local machine, create
- 
        issues, and participate in discussions.
- 
      </div>
- 
      <Command fullWidth command={`rad-web ${window.origin}`} />
- 
    </div>
- 
  </Popover>
- 
{:else}
- 
  <Popover popoverPositionTop="3rem" popoverPositionRight="0">
- 
    <Button
- 
      slot="toggle"
- 
      let:toggle
- 
      on:click={toggle}
- 
      title={buttonTitle[$httpdStore.state]}
- 
      size="large"
- 
      variant="secondary-toggle-on">
- 
      <IconSmall name="device" />
- 
      Connected
- 
    </Button>
-
- 
    <div slot="popover" class="container">
- 
      <div class="status">Httpd server running</div>
-
- 
      <div class="host">
- 
        radicle.local
-
- 
        <Link
- 
          on:afterNavigate={closeFocused}
- 
          route={{
- 
            resource: "nodes",
- 
            params: {
- 
              baseUrl: httpd.api.baseUrl,
- 
              projectPageIndex: 0,
- 
            },
- 
          }}>
- 
          <IconButton>Browse</IconButton>
- 
        </Link>
- 
      </div>
- 
    </div>
- 
  </Popover>
- 
{/if}
modified src/views/session/Index.svelte
@@ -8,7 +8,6 @@
  import * as httpd from "@app/lib/httpd";

  import Loading from "@app/components/Loading.svelte";
- 
  import AuthenticatedModal from "@app/modals/AuthenticatedModal.svelte";

  import AuthenticationErrorModal from "@app/modals/AuthenticationErrorModal.svelte";



  export let activeRoute: Extract<Route, { resource: "session" }>;
@@ -21,7 +20,7 @@
    const isAuthenticated = await httpd.authenticate(activeRoute.params);



    if (isAuthenticated) {
- 
      modal.show({ component: AuthenticatedModal, props: {} });
+ 
      // TODO: Show toast.

    } else {

      modal.show({

        component: AuthenticationErrorModal,