refactor: migrate all input fields to StyledInput (#5306)

* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup

apps/frontend/src/pages/auth/reset-password.vue

@@ -7,20 +7,18 @@
 					{{ formatMessage(methodChoiceMessages.description) }}
 				</p>
 
-				<div class="iconified-input">
-					<label for="email" hidden>
-						{{ formatMessage(commonMessages.emailUsernameLabel) }}
-					</label>
-					<MailIcon />
-					<input
-						id="email"
-						v-model="email"
-						type="text"
-						autocomplete="username"
-						class="auth-form__input"
-						:placeholder="formatMessage(commonMessages.emailLabel)"
-					/>
-				</div>
+				<label for="email" hidden>
+					{{ formatMessage(commonMessages.emailUsernameLabel) }}
+				</label>
+				<StyledInput
+					id="email"
+					v-model="email"
+					:icon="MailIcon"
+					type="text"
+					autocomplete="username"
+					:placeholder="formatMessage(commonMessages.emailLabel)"
+					wrapper-class="w-full"
+				/>
 
 				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
 
@@ -35,33 +33,29 @@
 			<template v-else-if="step === 'passed_challenge'">
 				<p>{{ formatMessage(postChallengeMessages.description) }}</p>
 
-				<div class="iconified-input">
-					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<KeyIcon />
-					<input
-						id="password"
-						v-model="newPassword"
-						type="password"
-						autocomplete="new-password"
-						class="auth-form__input"
-						:placeholder="formatMessage(commonMessages.passwordLabel)"
-					/>
-				</div>
+				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+				<StyledInput
+					id="password"
+					v-model="newPassword"
+					:icon="KeyIcon"
+					type="password"
+					autocomplete="new-password"
+					:placeholder="formatMessage(commonMessages.passwordLabel)"
+					wrapper-class="w-full"
+				/>
 
-				<div class="iconified-input">
-					<label for="confirm-password" hidden>
-						{{ formatMessage(commonMessages.passwordLabel) }}
-					</label>
-					<KeyIcon />
-					<input
-						id="confirm-password"
-						v-model="confirmNewPassword"
-						type="password"
-						autocomplete="new-password"
-						class="auth-form__input"
-						:placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
-					/>
-				</div>
+				<label for="confirm-password" hidden>
+					{{ formatMessage(commonMessages.passwordLabel) }}
+				</label>
+				<StyledInput
+					id="confirm-password"
+					v-model="confirmNewPassword"
+					:icon="KeyIcon"
+					type="password"
+					autocomplete="new-password"
+					:placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
+					wrapper-class="w-full"
+				/>
 
 				<button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
 					{{ formatMessage(postChallengeMessages.action) }}
@@ -72,7 +66,13 @@
 </template>
 <script setup>
 import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
-import { commonMessages, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import {
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 
 import HCaptcha from '@/components/ui/HCaptcha.vue'
 

apps/frontend/src/pages/auth/sign-in.vue

@@ -13,15 +13,13 @@
 					{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
 				</span>
 			</label>
-			<input
+			<StyledInput
 				id="two-factor-code"
 				v-model="twoFactorCode"
-				maxlength="11"
-				type="text"
+				:maxlength="11"
 				inputmode="numeric"
 				:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
 				autocomplete="one-time-code"
-				autofocus
 				@keyup.enter="begin2FASignIn"
 			/>
 
@@ -62,32 +60,28 @@
 			<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
 
 			<section class="auth-form">
-				<div class="iconified-input">
-					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-					<MailIcon />
-					<input
-						id="email"
-						v-model="email"
-						type="text"
-						inputmode="email"
-						autocomplete="username"
-						class="auth-form__input"
-						:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
-					/>
-				</div>
+				<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
+				<StyledInput
+					id="email"
+					v-model="email"
+					:icon="MailIcon"
+					type="text"
+					inputmode="email"
+					autocomplete="username"
+					:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
+					wrapper-class="w-full"
+				/>
 
-				<div class="iconified-input">
-					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<KeyIcon />
-					<input
-						id="password"
-						v-model="password"
-						type="password"
-						autocomplete="current-password"
-						class="auth-form__input"
-						:placeholder="formatMessage(commonMessages.passwordLabel)"
-					/>
-				</div>
+				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+				<StyledInput
+					id="password"
+					v-model="password"
+					:icon="KeyIcon"
+					type="password"
+					autocomplete="current-password"
+					:placeholder="formatMessage(commonMessages.passwordLabel)"
+					wrapper-class="w-full"
+				/>
 
 				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
 
@@ -147,6 +141,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'

apps/frontend/src/pages/auth/sign-up.vue

@@ -32,59 +32,49 @@
 		<h1>{{ formatMessage(messages.createAccountTitle) }}</h1>
 
 		<section class="auth-form">
-			<div class="iconified-input">
-				<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
-				<MailIcon />
-				<input
-					id="email"
-					v-model="email"
-					type="email"
-					autocomplete="username"
-					class="auth-form__input"
-					:placeholder="formatMessage(commonMessages.emailLabel)"
-				/>
-			</div>
+			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
+			<StyledInput
+				id="email"
+				v-model="email"
+				:icon="MailIcon"
+				type="email"
+				autocomplete="username"
+				:placeholder="formatMessage(commonMessages.emailLabel)"
+				wrapper-class="w-full"
+			/>
 
-			<div class="iconified-input">
-				<label for="username" hidden>{{ formatMessage(commonMessages.usernameLabel) }}</label>
-				<UserIcon />
-				<input
-					id="username"
-					v-model="username"
-					type="text"
-					autocomplete="username"
-					class="auth-form__input"
-					:placeholder="formatMessage(commonMessages.usernameLabel)"
-				/>
-			</div>
+			<label for="username" hidden>{{ formatMessage(commonMessages.usernameLabel) }}</label>
+			<StyledInput
+				id="username"
+				v-model="username"
+				:icon="UserIcon"
+				type="text"
+				autocomplete="username"
+				:placeholder="formatMessage(commonMessages.usernameLabel)"
+				wrapper-class="w-full"
+			/>
 
-			<div class="iconified-input">
-				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-				<KeyIcon />
-				<input
-					id="password"
-					v-model="password"
-					class="auth-form__input"
-					type="password"
-					autocomplete="new-password"
-					:placeholder="formatMessage(commonMessages.passwordLabel)"
-				/>
-			</div>
+			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+			<StyledInput
+				id="password"
+				v-model="password"
+				:icon="KeyIcon"
+				type="password"
+				autocomplete="new-password"
+				:placeholder="formatMessage(commonMessages.passwordLabel)"
+				wrapper-class="w-full"
+			/>
 
-			<div class="iconified-input">
-				<label for="confirm-password" hidden>{{
-					formatMessage(commonMessages.passwordLabel)
-				}}</label>
-				<KeyIcon />
-				<input
-					id="confirm-password"
-					v-model="confirmPassword"
-					type="password"
-					autocomplete="new-password"
-					class="auth-form__input"
-					:placeholder="formatMessage(commonMessages.confirmPasswordLabel)"
-				/>
-			</div>
+			<label for="confirm-password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+			<StyledInput
+				id="confirm-password"
+				v-model="confirmPassword"
+				:icon="KeyIcon"
+				type="password"
+				autocomplete="new-password"
+				:placeholder="formatMessage(commonMessages.confirmPasswordLabel)"
+				wrapper-class="w-full"
+			/>
 
 			<Checkbox
 				v-model="subscribe"
@@ -153,6 +143,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'