Org disabled frontend (#4424)

apps/frontend/src/components/ui/OrganizationCreateModal.vue

@@ -1,7 +1,14 @@
 <template>
 	<NewModal ref="modal" header="Creating an organization">
 		<div class="flex flex-col gap-3">
-			<div class="flex flex-col gap-2">
+			<Admonition
+				v-if="disabled"
+				class="max-w-[30rem]"
+				:type="'info'"
+				header="Organization creation temporarily disabled"
+				body="Due to abuse, we've temporarily disabled the creation of new organizations. We're working hard to restore this feature, thank you for your patience."
+			/>
+			<div class="flex flex-col gap-2" :class="{ 'opacity-50': disabled }">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
 						Name
@@ -15,10 +22,11 @@
 					maxlength="64"
 					:placeholder="`Enter organization name...`"
 					autocomplete="off"
+					:disabled="disabled"
 					@input="updateSlug"
 				/>
 			</div>
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2" :class="{ 'opacity-50': disabled }">
 				<label for="slug">
 					<span class="text-lg font-semibold text-contrast">
 						URL
@@ -33,11 +41,12 @@
 						type="text"
 						maxlength="64"
 						autocomplete="off"
+						:disabled="disabled"
 						@input="setManualSlug"
 					/>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-2" :class="{ 'opacity-50': disabled }">
 				<label for="additional-information" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast">
 						Summary
@@ -46,16 +55,21 @@
 					<span>A sentence or two that describes your organization.</span>
 				</label>
 				<div class="textarea-wrapper">
-					<textarea id="additional-information" v-model="description" maxlength="256" />
+					<textarea
+						id="additional-information"
+						v-model="description"
+						:disabled="disabled"
+						maxlength="256"
+					/>
 				</div>
 			</div>
-			<p class="m-0 max-w-[30rem]">
+			<p class="m-0 max-w-[30rem]" :class="{ 'opacity-50': disabled }">
 				You will be the owner of this organization, but you can invite other members and transfer
 				ownership at any time.
 			</p>
 			<div class="flex gap-2">
 				<ButtonStyled color="brand">
-					<button @click="createOrganization">
+					<button :disabled="disabled" @click="createOrganization">
 						<PlusIcon aria-hidden="true" />
 						Create organization
 					</button>
@@ -73,7 +87,7 @@
 
 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { Admonition, ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { ref } from 'vue'
 
 const router = useNativeRouter()
@@ -85,6 +99,8 @@ const description = ref<string>('')
 const manualSlug = ref<boolean>(false)
 const modal = ref<InstanceType<typeof NewModal>>()
 
+const disabled = ref(true)
+
 async function createOrganization(): Promise<void> {
 	startLoading()
 	try {