Merge branch 'dev'

src/App.vue

@@ -31,9 +31,12 @@
 
           <div class="mt-2 flex flex-wrap gap-4 items-baseline justify-end">
             <template v-if="payload">
-              <router-link to="/user" class="text-inherit pt-0.5">
+              <router-link v-if="canUserWrite" to="/user" class="text-inherit">
                 {{ payload.name }}
               </router-link>
+              <a v-else :href="getLogoutUrl()" class="text-inherit">
+                {{ $t("logout") }}
+              </a>
             </template>
 
             <LocaleSwitcher />
@@ -62,6 +65,7 @@
 <script setup>
 import { useTitle } from "@vueuse/core";
 import { api } from "@/api/api";
+import { getLogoutUrl } from "@/auth/auth";
 import { useAuth } from "@/auth/auth.composable";
 import useLocale from "@/i18n/locale.composable";
 import LocaleSwitcher from "@/i18n/LocaleSwitcher.vue";
@@ -73,7 +77,7 @@ import logoSbxLight from "@/assets/sbx1r-light.svg";
 import usePageTitle from "./title.composable";
 import Breadcrumb from "./Breadcrumb.vue";
 
-const { refreshJwt, payload } = useAuth();
+const { refreshJwt, payload, canUserWrite } = useAuth();
 useLocale();
 const { title } = usePageTitle();
 useTitle(title, { titleTemplate: "%s | Mink" });

src/api/backendInfo.composable.js

@@ -8,11 +8,8 @@ api.getInfo().then((values) => Object.assign(info, values));
 export default function useMinkBackendInfo() {
   const hasInfo = computed(() => Object.keys(info).length);
 
-  const findInfo = (field, name) => {
-    console.log(info);
-    return info[field]?.data.find((item) => item.name == name).value;
-  };
-
+  const findInfo = (field, name) =>
+    info[field]?.data.find((item) => item.name == name).value;
   return {
     info,
     hasInfo,

src/components/HelpBox.vue

@@ -11,7 +11,7 @@ defineProps({
     class="my-2 rounded p-2 px-4 max-w-screen-sm"
     :class="
       important
-        ? ' bg-blue-100 border-2 border-blue-300 dark:bg-sky-200 dark:border-0 dark:text-sky-800'
+        ? 'bg-blue-100 border-2 border-blue-300 dark:bg-sky-200 dark:border-0 dark:text-sky-800'
         : 'bg-stone-100 dark:bg-zinc-700 dark:border-0'
     "
   >

src/corpora/CorpusButton.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script setup>
+import useSpin from "@/spin/spin.composable";
 import useConfig from "@/corpus/config/config.composable";
 import PadButton from "@/components/PadButton.vue";
 import CorpusStateMessage from "@/corpus/CorpusStateMessage.vue";
@@ -28,8 +29,9 @@ const props = defineProps({
 const corpusStore = useCorpusStore();
 const { loadCorpus } = useCorpus(props.id);
 const { corpusName } = useConfig(props.id);
+const { spin } = useSpin();
 
 const corpus = corpusStore.corpora[props.id];
 
-loadCorpus();
+spin(loadCorpus(), null, "corpora");
 </script>

src/corpora/CreateCorpus.vue

@@ -62,6 +62,7 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import PageTitle from "@/components/PageTitle.vue";
 import Section from "@/components/Section.vue";
+import useSpin from "@/spin/spin.composable";
 import PendingContent from "@/spin/PendingContent.vue";
 import { FORMATS_EXT } from "@/api/corpusConfig";
 import { useAuth } from "@/auth/auth.composable";
@@ -71,6 +72,7 @@ import HelpBox from "@/components/HelpBox.vue";
 const { requireAuthentication } = useAuth();
 const { createFromConfig } = useCorpora();
 const { t } = useI18n();
+const { spin } = useSpin();
 
 const formatOptions = computed(() =>
   FORMATS_EXT.reduce(
@@ -85,11 +87,12 @@ const formatOptions = computed(() =>
 requireAuthentication();
 
 async function submit(fields) {
-  await createFromConfig(
+  const createPromise = createFromConfig(
     fields.name,
     fields.description,
     fields.format,
     fields.textAnnotation
   );
+  await spin(createPromise, null, "create");
 }
 </script>

src/corpora/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <Section :title="$t('corpuses')">
+  <Section v-if="isAuthenticated" :title="$t('corpuses')">
     <HelpBox>
       <p>
         {{
@@ -10,11 +10,7 @@
       </p>
     </HelpBox>
 
-    <PendingContent
-      v-if="isAuthenticated"
-      on="corpora"
-      class="flex flex-wrap -mx-2"
-    >
+    <PendingContent on="corpora" class="flex flex-wrap -mx-2">
       <router-link
         v-for="(corpus, corpusId) of corpusStore.corpora"
         :key="corpusId"
@@ -32,11 +28,13 @@
       </router-link>
     </PendingContent>
   </Section>
-  <Section :title="$t('new_corpus')">
-    <SourceUpload
-      :file-handler="createCorpusFromFiles"
-      :variant="corpusStore.hasCorpora ? null : 'primary'"
-    />
+  <Section v-if="isAuthenticated" :title="$t('new_corpus')">
+    <PendingContent on="create">
+      <SourceUpload
+        :file-handler="createCorpusFromFiles"
+        :variant="corpusStore.hasCorpora ? null : 'primary'"
+      />
+    </PendingContent>
   </Section>
 </template>
 
@@ -50,14 +48,16 @@ import SourceUpload from "@/corpus/sources/SourceUpload.vue";
 import HelpBox from "@/components/HelpBox.vue";
 import useCorpora from "@/corpora/corpora.composable";
 import { useCorpusStore } from "@/store/corpus.store";
+import useSpin from "@/spin/spin.composable";
 
 const corpusStore = useCorpusStore();
 const { requireAuthentication, isAuthenticated } = useAuth();
 const { loadCorpora, createFromUpload } = useCorpora();
+const { spin } = useSpin();
 
 requireAuthentication(loadCorpora);
 
 async function createCorpusFromFiles(files) {
-  await createFromUpload(files);
+  await spin(createFromUpload(files), null, "create");
 }
 </script>

src/corpus/config/CorpusMetadata.vue

@@ -14,33 +14,35 @@
           <p>{{ $t("config.metadata.help") }}</p>
         </HelpBox>
 
-        <div class="grid md:grid-cols-2 gap-x-4">
-          <FormKit type="group" name="name">
-            <TaggedInput v-for="lang in ['swe', 'eng']" :key="lang" :tag="lang">
+        <div class="grid md:grid-cols-2 gap-4">
+          <Panel
+            v-for="(lang2, lang3) of { swe: 'sv', eng: 'en' }"
+            :key="lang3"
+            :title="$t(lang2)"
+          >
+            <FormKit type="group" name="name">
               <FormKit
-                :name="lang"
+                :name="lang3"
                 :label="$t('name')"
-                :value="config.name?.[lang]"
+                :value="config.name?.[lang3]"
                 :help="$t('metadata.name.help')"
                 type="text"
                 input-class="w-72"
                 validation="required:trim"
               />
-            </TaggedInput>
-          </FormKit>
+            </FormKit>
 
-          <FormKit type="group" name="description">
-            <TaggedInput v-for="lang in ['swe', 'eng']" :key="lang" :tag="lang">
+            <FormKit type="group" name="description">
               <FormKit
-                :name="lang"
+                :name="lang3"
                 :label="$t('description')"
-                :value="config.description?.[lang]"
+                :value="config.description?.[lang3]"
                 :help="$t('metadata.description.help')"
                 type="textarea"
                 input-class="w-full h-20"
               />
-            </TaggedInput>
-          </FormKit>
+            </FormKit>
+          </Panel>
         </div>
 
         <FormKit
@@ -62,9 +64,9 @@ import { useRouter } from "vue-router";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
 import Section from "@/components/Section.vue";
 import useConfig from "./config.composable";
-import TaggedInput from "./TaggedInput.vue";
 import useMessenger from "@/message/messenger.composable";
 import HelpBox from "@/components/HelpBox.vue";
+import Panel from "@/components/Panel.vue";
 
 const router = useRouter();
 const corpusId = useCorpusIdParam();

src/corpus/sources/SourceUpload.vue

@@ -35,6 +35,7 @@
               type="file"
               class="hidden"
               multiple
+              :accept="extensionsAccept"
               @change="handleFileInput"
             />
 
@@ -47,6 +48,7 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import useMessenger from "@/message/messenger.composable";
 import useSources from "./sources.composable";
 import Filedrop from "./Filedrop.vue";
@@ -65,8 +67,11 @@ const props = defineProps({
 });
 
 const corpusId = useCorpusIdParam();
-const { uploadSources } = useSources(corpusId);
+const { uploadSources, extensions } = useSources(corpusId);
 const { clear, alertError } = useMessenger();
+const extensionsAccept = computed(() =>
+  extensions.value?.map((ext) => `.${ext}`).join()
+);
 
 async function defaultFileHandler(files) {
   return uploadSources(files).catch(alertError);

src/corpus/sources/sources.composable.js

@@ -34,7 +34,7 @@ export default function useSources(corpusId) {
     loadSources();
   }
 
-  /** Find file extensions present in source files. */
+  /** Find file extensions present in source files. Undefined if no files. */
   const extensions = computed(() =>
     uniq(
       corpusStore.corpora[corpusId]?.sources?.map((source) =>