Merge branch 'development'

README.md

@@ -62,6 +62,32 @@ and thus maybe behind the latest developments.
 `npm run build:ghpage`
 `npm run deploy`
 
+## Configure a local proxysetup
+
+In order to configure a proxy server use `vite.config.js`.
+The default configuration is:
+
+```javascript
+...
+server: {
+    proxy: {
+      "/proxy/": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/proxy/, "")
+      }
+    }
+  },
+...
+```
+For more information look [here](https://vitejs.dev/config/server-options.html#server-proxy).
+
+In order to access the configured URL in a development setup you prefix the URL like
+
+`/proxy/http://localhost:8080/.well-known/csaf/provider-metadata.json`
+
+instead of entering `http://localhost:8080/.well-known/csaf/provider-metadata.json`.
+
 ## License
 
 - csaf_webview is licensed as Free Software under MIT License.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "csaf-typescript",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/singleview/Back.svelte → src/lib/Back.svelte

@@ -1,3 +1,13 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
 <script lang="ts">
   import { appStore } from "$lib/store";
   async function updateUI(id: string) {

src/lib/Collapsible.svelte

@@ -1,3 +1,13 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
 <script lang="ts">
   export let header: string;
   export let open = false;

src/lib/singleview/KeyValue.svelte → src/lib/KeyValue.svelte

@@ -1,3 +1,13 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
 <script lang="ts">
   export let keys: Array<String>;
   export let values: any;

src/lib/ValueField.svelte

@@ -0,0 +1,30 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
+<script lang="ts">
+  export let value = "";
+  export let label = "";
+</script>
+
+<div class="">
+  <h6>{label}</h6>
+  <p>{value}</p>
+</div>
+
+<style>
+  h6 {
+    line-height: 0.3em;
+    font-size: large;
+  }
+  p {
+    margin-left: 4rem;
+    width: 80vw;
+  }
+</style>

src/lib/ValueList.svelte

@@ -0,0 +1,32 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
+<script lang="ts">
+  export let values: any = [];
+  export let label = "";
+</script>
+
+<p>{label}</p>
+<ul>
+  {#each values as value}
+    <li>{value}</li>
+  {/each}
+</ul>
+
+<style>
+  p {
+    margin-bottom: 0;
+  }
+  ul {
+    margin-top: 0;
+    padding-left: 3rem;
+    list-style-type: none;
+  }
+</style>

src/lib/feedview/FeedView.svelte

@@ -10,7 +10,26 @@
 <script lang="ts">
   import Loader from "./Loader.svelte";
   import Overview from "./feed/Overview.svelte";
+  import { appStore } from "$lib/store";
+  import Feed from "./feed/Feed.svelte";
+  import Collapsible from "$lib/Collapsible.svelte";
+  import Back from "$lib/Back.svelte";
 </script>
 
 <Loader />
 <Overview />
+{#if $appStore.currentFeed}
+  <Collapsible
+    header={$appStore.currentFeed?.feed.title}
+    open={$appStore.ui.isFeedSectionOpen}
+    onClose={() => {
+      appStore.setFeedSectionClosed();
+    }}
+  >
+    <Feed />
+  </Collapsible>
+{/if}
+
+{#if $appStore.ui.history.length > 0}
+  <Back />
+{/if}

src/lib/feedview/Loader.svelte

@@ -1,36 +1,59 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
 <script lang="ts">
   import { appStore } from "$lib/store";
+  import { loadFeed, loadProviderMetaData } from "$lib/urlloader";
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
   let url = "";
-  let disabled = true;
-  $: if (/^http/.test(url)) {
-    disabled = false;
-  }
-  async function loadProviderMetaData() {
-    const response = await fetch(`${url}`);
-    const providerMetadata = await response.json();
-    appStore.setProviderMetadata(providerMetadata);
-  }
+  onMount(() => {
+    if (/^\?q=/.test($page.url.search)) {
+      url = $page.url.search.replace("?q=", "");
+    }
+  });
   const load = () => {
-    loadProviderMetaData();
+    if (/provider-metadata\.json/.test(url)) {
+      loadProviderMetaData(url);
+    } else {
+      loadFeed(url);
+    }
+    goto(`/feed?q=${url}`);
   };
 
   const keydown = (e: KeyboardEvent) => {
-    if (e.key === "Enter") loadProviderMetaData();
+    if (e.key === "Enter") loadProviderMetaData(url);
   };
 </script>
 
 <div class="row">
   <div class="col">
     <div style="display:flex">
-      <button {disabled} class="loadbutton" on:click={load}
-        ><i class="bx bx-book-open" />View feed</button
-      >
+      <button class="loadbutton" on:click={load}><i class="bx bx-book-open" />View feed</button>
       <input class="url" type="text" bind:value={url} on:keydown={keydown} />
     </div>
   </div>
 </div>
+{#if $appStore.ui.feedErrorMsg}
+  <div class="row">
+    <div class="col"><div class="errors text-error">{$appStore.ui.feedErrorMsg}</div></div>
+  </div>
+{/if}
 
 <style>
+  .errors {
+    margin-left: 200px;
+    font-size: x-large;
+    font-weight: bold;
+  }
   .loadbutton {
     width: 200px;
     height: 50px;

src/lib/feedview/entries/Entries.svelte

@@ -0,0 +1,26 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
+<script lang="ts">
+  import EntriesByYear from "./EntriesByYear.svelte";
+
+  export let entries: any = [];
+  const entriesByYear = entries.reduce((acc: any, entry: any) => {
+    const published = new Date(entry.published);
+    if (!acc[published.getFullYear()]) acc[published.getFullYear()] = [];
+    acc[published.getFullYear()].push(entry);
+    return acc;
+  }, {});
+  const years = Object.keys(entriesByYear).sort();
+</script>
+
+{#each years as year}
+  <EntriesByYear {year} entries={entriesByYear[year]} />
+{/each}

src/lib/feedview/entries/EntriesByYear.svelte

@@ -0,0 +1,71 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
+<script lang="ts">
+  import Collapsible from "$lib/Collapsible.svelte";
+  import Entry from "./Entry.svelte";
+  import { goto } from "$app/navigation";
+  export let entries: any = [];
+  export let year: string;
+  let visibility = "none";
+  let icon = "bx-chevron-down";
+  const open = (e: Event) => {
+    let url: string = (e.target as Element).getAttribute("href")!;
+    goto(`/?q=${url}`);
+    e.preventDefault();
+  };
+  const toggle = () => {
+    if (visibility === "block") {
+      visibility = "none";
+    } else {
+      visibility = "block";
+    }
+  };
+  const entryIDURLLookup = entries.reduce((acc: any, entry: any) => {
+    const selfURL = entry.link.find((link: any) => link.rel === "self");
+    acc[entry.id] = selfURL.href;
+    return acc;
+  }, {});
+  $: if (visibility === "block") {
+    icon = "bx-chevron-down";
+  } else {
+    icon = "bx-chevron-right";
+  }
+</script>
+
+<Collapsible header={year} level="4">
+  {#each entries as entry}
+    <div class:collapsible={true}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div style="cursor:pointer">
+        <h4>
+          <i class="bx {icon}" on:click={toggle} /><a
+            href={entryIDURLLookup[entry.id]}
+            on:click={open}>{entry.id}: {entry.title}</a
+          >
+        </h4>
+      </div>
+      <div style="display:{visibility}" class="body">
+        <Entry {entry} />
+      </div>
+    </div>
+  {/each}
+</Collapsible>
+
+<style>
+  h4 {
+    padding: 0;
+    margin-bottom: 0;
+  }
+  .body {
+    margin-left: 3rem;
+  }
+</style>