feat: input fields error message and styling

Author: tikagan

assets/scss/theme/typography.scss

@@ -265,6 +265,13 @@ $fontAssetPath: 'assets/fonts';
   letter-spacing: 0.01em;
 }
 
+@mixin formFieldErrorMessage {
+  font-size: toRem(14);
+  line-height: leading(21, 14);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
 @mixin hamburgerCTA {
   font-size: toRem(24);
   line-height: leading(36, 24);

assets/scss/theme/utilities.scss

@@ -53,6 +53,7 @@ $siam: #565D50; // siam
   --link-hover-color: #{$chardonnay};
   --code-text-color: #{$alto};
   --code-background-color: #{$codeBlack};
+  --error: #{$burntSienna};
 }
 
 // .dark {
@@ -164,15 +165,15 @@ $siam: #565D50; // siam
     content: '';
     position: absolute;
     inset: 0;
-    border-radius: toRem(5); 
+    border-radius: toRem(5);
     padding: toRem(1);
     z-index: 1;
     background: linear-gradient($angle, rgba($sageGreen, 1) 0%, rgba($sageGreen, 0.5) 33%, rgba($gray900, 0.3) 66%, rgba($gray900, 0.8) 100%);
-    -webkit-mask: 
-       linear-gradient(#fff 0 0) content-box, 
+    -webkit-mask:
+       linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
-            mask-composite: exclude; 
+            mask-composite: exclude;
   }
 }
 
@@ -181,7 +182,7 @@ $siam: #565D50; // siam
     content: '';
     position: absolute;
     inset: 0;
-    border-radius: toRem(5); 
+    border-radius: toRem(5);
     background-color: rgba($tundora, 0.2);
     backdrop-filter: blur(5px);
     z-index: 1;

components/signup-card.vue

@@ -22,37 +22,48 @@
       <div class="signup-form">
 
         <div class="name-fields">
+          <div class="field-wrapper">
+            <input
+              :class="['first-name form-field', { error: fieldError.firstName }]"
+              type="text"
+              :placeholder="firstNameField.placeholder"
+              required="true"
+              @input="updateInputValue($event.target.value, 'firstName')" />
+            <span v-if="fieldError.firstName" class="error-message" v-html="errorMessage" />
+          </div>
+
+          <div class="field-wrapper">
+            <input
+              :class="['last-name form-field', { error: fieldError.lastName }]"
+              type="text"
+              :placeholder="lastNameField.placeholder"
+              required="true"
+              @input="updateInputValue($event.target.value, 'lastName')" />
+            <span v-if="fieldError.lastName" class="error-message" v-html="errorMessage" />
+          </div>
+        </div>
+
+        <div class="field-wrapper">
           <input
-            class="first-name form-field"
-            type="text"
-            :placeholder="firstNameField.placeholder"
+            :class="['email form-field', { error: fieldError.email }]"
+            type="email"
+            :placeholder="emailField.placeholder"
             required="true"
-            @input="updateInputValue($event.target.value, 'firstName')" />
+            @input="updateInputValue($event.target.value, 'email')" />
+          <span v-if="fieldError.email" class="error-message" v-html="errorMessage" />
+        </div>
+
+        <div class="field-wrapper">
           <input
-            class="last-name form-field"
+            :class="['org form-field', { error: fieldError.organization }]"
+            :placeholder="orgField.placeholder"
             type="text"
-            :placeholder="lastNameField.placeholder"
             required="true"
-            @input="updateInputValue($event.target.value, 'lastName')" />
+            @input="updateInputValue($event.target.value, 'org')" />
+          <span v-if="fieldError.organization" class="error-message" v-html="errorMessage" />
         </div>
 
-        <input
-          class="email form-field"
-          type="email"
-          :placeholder="emailField.placeholder"
-          required="true"
-          @input="updateInputValue($event.target.value, 'email')" />
-
-
-        <input
-          class="org form-field"
-          :placeholder="orgField.placeholder"
-          type="text"
-          required="true"
-          @input="updateInputValue($event.target.value, 'org')" />
-
-
-        <ZeroDropdown class="country form-field" :display-selected="true">
+        <ZeroDropdown :class="['country form-field', { error: fieldError.country }]" :display-selected="true">
           <template #toggle-button="{ togglePanel, selected }">
             <div class="toggle-button" @click="togglePanel">
               <p v-if="selected" class="toggle-button-label">
@@ -76,12 +87,13 @@
               </div>
             </div>
           </template>
+          <span v-if="fieldError.country" class="error-message" v-html="errorMessage" />
         </ZeroDropdown>
 
         <ZeroDropdown class="familiarity" :display-selected="true">
           <template #toggle-button="{ togglePanel, selected }">
             <h3 class="dropdown-label" v-html="familiarityField.label" />
-            <div class="toggle-button form-field" @click="togglePanel">
+            <div :class="['toggle-button form-field', { error: fieldError.filecoinFamiliarity }]" @click="togglePanel">
               <p v-if="selected" class="toggle-button-label">
                 {{ selected }}
               </p>
@@ -103,6 +115,7 @@
               </div>
             </div>
           </template>
+          <span v-if="fieldError.filecoinFamiliarity" class="error-message" v-html="errorMessage" />
         </ZeroDropdown>
 
         <ZeroButton
@@ -129,6 +142,15 @@ const props = defineProps({
 })
 
 // ======================================================================== Data
+const errorMessage = '[ Field is required ]'
+const fieldError = ref({
+  firstName: false,
+  lastName: false,
+  email: false,
+  organization: false,
+  country: false,
+  filecoinFamiliarity: false
+})
 const firstName = ref(false)
 const lastName = ref(false)
 const email = ref(false)
@@ -202,6 +224,7 @@ const selectOption = (setSelected, closePanel, option, field) => {
  * @method submitForm
  */
 const submitForm = async () => {
+  console.log('submitForm')
   if (firstName.value && lastName.value && email.value && organization.value && country.value && filecoinFamiliarity.value) {
     const body = {
         records: [
@@ -226,6 +249,14 @@ const submitForm = async () => {
       body,
       headers
     })
+  } else {
+      if(!firstName.value) { fieldError.value.firstName = true }
+      if(!lastName.value) { fieldError.value.lastName = true }
+      if(!email.value) { fieldError.value.email = true }
+      if(!organization.value) { fieldError.value.organization = true }
+      if(!organization.value) { fieldError.value.organization = true }
+      if(!country.value) { fieldError.value.country = true }
+      if(!filecoinFamiliarity.value) { fieldError.value.filecoinFamiliarity = true }
   }
 }
 </script>
@@ -257,17 +288,75 @@ const submitForm = async () => {
   }
 }
 
+// ///////////////////////////////////////////////////////////////// Signup Card
+.title-wrapper {
+  display: flex;
+  flex-flow: row no-wrap;
+}
 // //////////////////////////////////////////////////////////////////////// Form
 .form-field {
   border: var(--brand-color) 1px solid;
   border-radius: toRem(5);
-  &:is(:not(.first-name, .last-name, :last-child)) {
-    margin-bottom: toRem(24);
+  &:hover,
+  &:focus {
+    border-color: var(--secondary-text-color);
+  }
+  &.error {
+    border-color: var(--error);
+  }
+}
+
+.error-message {
+  @include formFieldErrorMessage;
+  color: var(--error);
+}
+
+.field-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex: 1;
+  margin-bottom: toRem(24);
+}
+
+.name-fields {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  // margin-bottom: toRem(24);
+  .field-wrapper:is(:first-child) {
+    margin-right: toRem(20);
   }
 }
 
+
+.first-name,
+.last-name {
+  width: 100%;
+}
+
+.first-name,
+.last-name,
+.email,
+.org {
+  @include formFieldText;
+  padding: toRem(8) toRem(20);
+  &::placeholder {
+    @include formFieldPlaceholder;
+  }
+}
+.email,
+.org {
+  width: 100%;
+}
+
+
 .option-label {
   cursor: pointer;
 }
 
+.submit-button {
+
+}
+
 </style>