project name validation

frontend/nuxt.config.ts

@@ -29,7 +29,7 @@ export default {
     css: ['~/assets/main.scss'],
 
     // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-    plugins: ['~/plugins/utils.ts', '~/plugins/api.ts', '~/plugins/auth.ts'],
+    plugins: ['~/plugins/api.ts', '~/plugins/utils.ts', '~/plugins/auth.ts'],
 
     // Auto import components: https://go.nuxtjs.dev/config-components
     components: false, // Can change this back if you really want, but it doesn't look like Webstorm or Intellij understand what's going on if they aren't imported. Also, does it really matter? It's just a few imports

frontend/pages/new.vue

@@ -44,7 +44,7 @@
                                         item-text="name"
                                         item-value="userId"
                                         :label="$t('project.new.step2.userselect')"
-                                        :rules="[$util.$vc.require()]"
+                                        :rules="[$util.$vc.require('Project owner')]"
                                         :append-icon="createAsIcon"
                                     />
                                 </v-col>
@@ -55,6 +55,7 @@
                                         autofocus
                                         dense
                                         filled
+                                        :error-messages="nameErrors"
                                         :label="$t('project.new.step2.projectname')"
                                         :rules="[$util.$vc.require('Name')]"
                                         append-icon="mdi-form-textbox"
@@ -234,9 +235,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator';
+import { Component, Vue, Watch } from 'nuxt-property-decorator';
 import { Context } from '@nuxt/types';
 import { ProjectOwner } from 'hangar-internal';
+import { AxiosError } from 'axios';
 import StepperStepContent from '~/components/steppers/StepperStepContent.vue';
 import { RootState } from '~/store';
 import { ProjectCategory } from '~/types/enums';
@@ -283,6 +285,8 @@ export default class NewPage extends Vue {
         keywords: [],
     } as unknown) as NewProjectForm;
 
+    nameErrors: string[] = [];
+
     forms = {
         step2: false,
     };
@@ -333,5 +337,29 @@ export default class NewPage extends Vue {
                 this.projectLoading = false;
             });
     }
+
+    // This is very useful. Prob should have a generalization of this that works elsewhere. I didn't make it a rule because it relies on other input (the ownerId)
+    @Watch('form.name')
+    onProjectNameChange(val: string) {
+        if (!val) {
+            this.nameErrors = [];
+            return;
+        }
+        this.$api
+            .requestInternal('projects/validateName', false, 'get', {
+                userId: this.form.ownerId,
+                value: val,
+            })
+            .then(() => {
+                this.nameErrors = [];
+            })
+            .catch((err: AxiosError) => {
+                this.nameErrors = [];
+                if (!err.response?.data.isHangarApiException) {
+                    return this.$util.handleRequestError(err);
+                }
+                this.nameErrors.push(err.response.data.message);
+            });
+    }
 }
 </script>

frontend/plugins/api.ts

@@ -86,10 +86,6 @@ const createApi = ({ $axios, store, app: { $cookies } }: Context) => {
 
         private _request<T>(url: string, token: string | null, method: AxiosRequestConfig['method'], data: object): Promise<T> {
             const headers: Record<string, string> = token ? { Authorization: `HangarAuth ${token}` } : {};
-            // if (data instanceof FormData) {
-            //     headers['Content-Type'] = 'multipart/form-data';
-            // }
-
             return new Promise<T>((resolve, reject) => {
                 return $axios
                     .request<T>({

frontend/plugins/utils.ts

@@ -14,7 +14,7 @@ import { NotifPayload } from '~/store/snackbar';
 import { AuthState } from '~/store/auth';
 
 type Validation = (v: string) => boolean | string;
-type ValidationArgument = (field?: string | TranslateResult) => Validation;
+type ValidationArgument = (any: any) => Validation;
 
 function handleRequestError(err: AxiosError, error: Context['error']) {
     if (!err.isAxiosError) {

src/main/java/io/papermc/hangar/controller/internal/ProjectController.java

@@ -51,8 +51,8 @@ public class ProjectController extends HangarController {
 
     @GetMapping("/validateName")
     @ResponseStatus(HttpStatus.OK)
-    public void validateProjectName(@RequestParam long userId, @RequestParam String projectName) {
-        projectFactory.checkProjectAvailability(userId, projectName);
+    public void validateProjectName(@RequestParam long userId, @RequestParam String value) {
+        projectFactory.checkProjectAvailability(userId, value);
     }
 
     @GetMapping("/possibleOwners")

src/main/java/io/papermc/hangar/service/internal/projects/ProjectFactory.java

@@ -73,16 +73,16 @@ public class ProjectFactory extends HangarService {
             invalidProjectReason = projectsDAO.checkProjectValidity(userId, name, StringUtils.slugify(name));
         }
         if (invalidProjectReason != null) {
-            throw new HangarApiException(HttpStatus.BAD_REQUEST, invalidProjectReason.key);
+            throw new HangarApiException(HttpStatus.CONFLICT, invalidProjectReason.key);
         }
     }
 
     @EnumByName
     public enum InvalidProjectReason {
 
-        OWNER_NAME("error.project.nameExists"),
-        OWNER_SLUG("error.project.slugExists"),
-        INVALID_NAME("error.project.invalidName");
+        OWNER_NAME("project.new.error.nameExists"),
+        OWNER_SLUG("project.new.error.slugExists"),
+        INVALID_NAME("project.new.error.invalidName");
 
         private final String key;