fix(style): new signup form

front/src/components/auth/SignupForm.vue

@@ -10,6 +10,12 @@ import axios from 'axios'
 
 import LoginForm from '~/components/auth/LoginForm.vue'
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+import Textarea from '~/components/ui/Textarea.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
+
 import useLogger from '~/composables/useLogger'
 
 interface Props {
@@ -86,39 +92,38 @@ fetchInstanceSettings()
 
 <template>
   <div v-if="submitted">
-    <div class="ui success message">
-      <p v-if="signupRequiresApproval">
-        {{ t('components.auth.SignupForm.message.awaitingReview') }}
-      </p>
-      <p v-else>
-        {{ t('components.auth.SignupForm.message.accountCreated') }}
-      </p>
-    </div>
+    <Alert yellow v-if="signupRequiresApproval">
+      {{ t('components.auth.SignupForm.message.awaitingReview') }}
+    </Alert>
+    <Alert green v-else>
+      {{ t('components.auth.SignupForm.message.accountCreated') }}
+    </Alert>
     <h2>
       {{ t('components.auth.SignupForm.header.login') }}
     </h2>
     <login-form
+      style="max-width: 600px"
       button-classes="basic success"
       :show-signup="false"
     />
   </div>
   <form
     v-else
-    :class="['ui', {'loading': isLoadingInstanceSetting}, 'form']"
+    style="max-width: 600px"
     @submit.prevent="submit()"
   >
-    <p
+    <Alert red
       v-if="!store.state.instance.settings.users.registration_enabled.value"
-      class="ui message"
     >
       {{ t('components.auth.SignupForm.message.registrationClosed') }}
-    </p>
-    <p
+    </Alert>
+    <Spacer v-if="!store.state.instance.settings.users.registration_enabled.value"/>
+    <Alert yellow
       v-else-if="signupRequiresApproval"
-      class="ui message"
     >
       {{ t('components.auth.SignupForm.message.requiresReview') }}
-    </p>
+    </Alert>
+    <Spacer v-else-if="signupRequiresApproval" />
     <template v-if="formCustomization?.help_text">
       <rendered-description
         :content="formCustomization.help_text"
@@ -127,10 +132,8 @@ fetchInstanceSettings()
       />
       <div class="ui hidden divider" />
     </template>
-    <div
+    <Alert red
       v-if="errors.length > 0"
-      role="alert"
-      class="ui negative message"
     >
       <h4 class="header">
         {{ t('components.auth.SignupForm.header.signupFailure') }}
@@ -143,10 +146,10 @@ fetchInstanceSettings()
           {{ error }}
         </li>
       </ul>
-    </div>
+    </Alert>
     <div class="required field">
       <label for="username-field">{{ t('components.auth.SignupForm.label.username') }}</label>
-      <input
+      <Input
         id="username-field"
         ref="username"
         v-model="payload.username"
@@ -155,11 +158,11 @@ fetchInstanceSettings()
         type="text"
         autofocus
         :placeholder="labels.usernamePlaceholder"
-      >
+      />
     </div>
     <div class="required field">
       <label for="email-field">{{ t('components.auth.SignupForm.label.email') }}</label>
-      <input
+      <Input
         id="email-field"
         ref="email"
         v-model="payload.email"
@@ -167,7 +170,7 @@ fetchInstanceSettings()
         required
         type="email"
         :placeholder="labels.emailPlaceholder"
-      >
+      />
     </div>
     <div class="required field">
       <label for="password-field">{{ t('components.auth.SignupForm.label.password') }}</label>
@@ -181,14 +184,14 @@ fetchInstanceSettings()
       class="required field"
     >
       <label for="invitation-code">{{ t('components.auth.SignupForm.label.invitation') }}</label>
-      <input
+      <Input
         id="invitation-code"
         v-model="payload.invitation"
         required
         type="text"
         name="invitation"
         :placeholder="labels.placeholder"
-      >
+      />
     </div>
     <template v-if="signupRequiresApproval && (formCustomization?.fields.length ?? 0) > 0">
       <div
@@ -197,27 +200,29 @@ fetchInstanceSettings()
         :class="[{required: field.required}, 'field']"
       >
         <label :for="`custom-field-${idx}`">{{ field.label }}</label>
-        <textarea
+        <Textarea
           v-if="field.input_type === 'long_text'"
           :id="`custom-field-${idx}`"
           v-model="payload.request_fields[field.label]"
           :required="field.required"
           rows="5"
         />
-        <input
+        <Input
           v-else
           :id="`custom-field-${idx}`"
           v-model="payload.request_fields[field.label]"
           type="text"
           :required="field.required"
-        >
+        />
       </div>
     </template>
-    <button
-      :class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']"
+    <Spacer />
+    <Button
+      primary
+      auto
       type="submit"
     >
       {{ t('components.auth.SignupForm.button.create') }}
-    </button>
+    </Button>
   </form>
 </template>

front/src/views/auth/Signup.vue

@@ -28,16 +28,12 @@ const labels = computed(() => ({
     v-title="labels.title"
     class="main"
   >
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2>
-          {{ t('views.auth.Signup.header.createAccount') }}
-        </h2>
-        <signup-form
-          :default-invitation="defaultInvitation"
-          :next="next"
-        />
-      </div>
-    </section>
+    <h2>
+      {{ t('views.auth.Signup.header.createAccount') }}
+    </h2>
+    <signup-form
+      :default-invitation="defaultInvitation"
+      :next="next"
+    />
   </main>
 </template>