add type to alert

frontend-new/src/components/design/Alert.vue

@@ -1,5 +1,28 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    type: "success" | "info" | "warning" | "danger";
+  }>(),
+  {
+    type: "info",
+  }
+);
+
+const color = computed(() => {
+  // map type to bg-color
+  return {
+    success: "bg-green-500",
+    info: "bg-blue-500",
+    warning: "bg-yellow-500",
+    danger: "bg-red-500",
+  }[props.type];
+});
+</script>
+
 <template>
-  <div class="rounded bg-red-500 p-4">
+  <div :class="'rounded p-4 ' + color">
     <slot></slot>
   </div>
 </template>

frontend-new/src/components/projects/AdminProjectList.vue

@@ -34,7 +34,7 @@ const props = defineProps<{
       </li>
     </template>
   </ul>
-  <Alert v-else>
+  <Alert type="danger" v-else>
     {{ i18n.t("projectApproval.noProjects") }}
   </Alert>
 </template>

frontend-new/src/pages/[user]/[project]/flags.vue

@@ -45,7 +45,7 @@ useHead(useSeo("Flags | " + props.project.name, props.project.description, route
 
     <SortableTable :headers="headers" :items="flags">
       <template #empty>
-        <Alert>
+        <Alert type="warning">
           {{ i18n.t("flags.noFlags") }}
         </Alert>
       </template>

frontend-new/src/pages/[user]/[project]/notes.vue

@@ -73,7 +73,7 @@ async function addNote() {
     </h2>
     <SortableTable :items="notes" :headers="headers">
       <template #empty>
-        <Alert>{{ i18n.t("notes.noNotes") }}</Alert>
+        <Alert type="warning">{{ i18n.t("notes.noNotes") }}</Alert>
       </template>
       <template #item_createdAt="{ item }">
         {{ i18n.d(item.createdAt, "time") }}

frontend-new/src/pages/[user]/[project]/stars.vue

@@ -45,7 +45,7 @@ useHead(
         <Link :to="'/' + stargazer.name">{{ stargazer.name }}</Link>
       </div>
     </div>
-    <Alert v-else>
+    <Alert type="warning" v-else>
       {{ i18n.t("project.noStargazers") }}
     </Alert>
   </Card>

frontend-new/src/pages/[user]/[project]/versions/[version]/[platform]/index.vue

@@ -178,7 +178,7 @@ async function restoreVersion() {
 
   <div class="flex flex-wrap md:flex-nowrap gap-4">
     <section class="basis-full md:basis-8/12 flex-grow">
-      <Alert v-if="requiresConfirmation" class="mb-8">{{ i18n.t("version.page.unsafeWarning") }}</Alert>
+      <Alert v-if="requiresConfirmation" class="mb-8" type="danger">{{ i18n.t("version.page.unsafeWarning") }}</Alert>
       <Card>
         <MarkdownEditor
           v-if="hasPerms(NamedPermission.EDIT_VERSION)"

frontend-new/src/pages/[user]/[project]/versions/index.vue

@@ -163,7 +163,7 @@ function getNonChannelTags(version: Version): ApiTag[] {
             </router-link>
           </Card>
         </li>
-        <Alert v-if="!versions.result || versions.result.length === 0"> {{ i18n.t("version.page.noVersions") }} </Alert>
+        <Alert type="warning" v-if="!versions.result || versions.result.length === 0"> {{ i18n.t("version.page.noVersions") }} </Alert>
       </ul>
     </section>
 

frontend-new/src/pages/[user]/[project]/versions/new.vue

@@ -14,6 +14,7 @@ import InputSelect from "~/components/ui/InputSelect.vue";
 import Button from "~/components/design/Button.vue";
 import InputCheckbox from "~/components/ui/InputCheckbox.vue";
 import MarkdownEditor from "~/components/MarkdownEditor.vue";
+import { required } from "~/composables/useValidationHelpers";
 
 const route = useRoute();
 const i18n = useI18n();
@@ -45,7 +46,7 @@ useHead(
   <Steps v-model="selectedStep" :steps="steps" button-lang-key="dum">
     <template #artifact>
       <p>Please specify the artifact. You can either upload a jar or a zip file, or you can link to an external site.</p>
-      <Alert>An external link needs to be a direct download link!</Alert>
+      <Alert class="my-4" type="info">An external link needs to be a direct download link!</Alert>
       <div class="flex flex-wrap">
         <InputFile />
         <span class="basis-full">or</span>
@@ -55,7 +56,7 @@ useHead(
     <template #basic>
       <p>We detected the following settings based on the artifact you provided. Please fill out the remaining fields.</p>
       <div class="flex flex-wrap">
-        <div class="basis-full md:basis-4/12 mt-2"><InputText label="Version" /></div>
+        <div class="basis-full md:basis-4/12 mt-2"><InputText label="Version" :rules="[required()]" /></div>
         <div class="basis-full md:basis-4/12 mt-2"><InputText label="File name" /></div>
         <div class="basis-full md:basis-4/12 mt-2"><InputText label="File size" /></div>
 

frontend-new/src/pages/[user]/[project]/watchers.vue

@@ -45,7 +45,7 @@ useHead(
         <Link :to="'/' + watcher.name">{{ watcher.name }}</Link>
       </div>
     </div>
-    <Alert v-else>
+    <Alert type="warning" v-else>
       {{ i18n.t("project.noWatchers") }}
     </Alert>
   </Card>

frontend-new/src/pages/[user]/settings/api-keys.vue

@@ -128,7 +128,7 @@ async function deleteKey(key: ApiKey) {
           </tr>
           <tr v-if="apiKeys.length === 0">
             <td colspan="5">
-              <Alert class="mt-4">
+              <Alert class="mt-4" type="warning">
                 {{ i18n.t("apiKeys.noKeys") }}
               </Alert>
             </td>

frontend-new/src/pages/admin/activities/[user].vue

@@ -59,7 +59,7 @@ function getRouteParams(activity: ReviewActivity) {
           </tr>
         </tbody>
       </Table>
-      <Alert v-else>
+      <Alert type="success" v-else>
         {{ i18n.t("health.empty") }}
       </Alert>
     </Card>
@@ -79,7 +79,7 @@ function getRouteParams(activity: ReviewActivity) {
           </tr>
         </tbody>
       </Table>
-      <Alert v-else>
+      <Alert type="success" v-else>
         {{ i18n.t("health.empty") }}
       </Alert>
     </Card>

frontend-new/src/pages/index.vue

@@ -104,7 +104,7 @@ useHead(meta);
 
 <template>
   <div class="flex flex-col items-center pt-10">
-    <Alert v-if="loggedOut" class="mb-4 -mt-4">You have been logged out!</Alert>
+    <Alert v-if="loggedOut" class="mb-4 -mt-4" type="success">You have been logged out!</Alert>
     <h2 class="text-3xl font-bold uppercase text-center">{{ i18n.t("hangar.projectSearch.title") }}</h2>
     <!-- Search Bar & Sorting button -->
     <div class="flex flex-row mt-6 rounded-md big-box-shadow">

frontend-new/src/pages/organizations/new.vue

@@ -75,7 +75,7 @@ async function create() {
       </Button>
     </template>
 
-    <Alert v-else>
+    <Alert type="danger" v-else>
       {{ i18n.t("organization.new.error.tooManyOrgs", [backendData.validations.maxOrgCount]) }}
     </Alert>
   </Card>