Final cleanup

Author: DaneEveritt

resources/assets/scripts/components/auth/ResetPassword.vue

@@ -7,8 +7,8 @@
                 <div class="input-open">
                     <input class="input" id="grid-email" type="email" aria-labelledby="grid-email" required
                            ref="email"
-                           v-bind:class="{ 'has-content': email.length > 0 }"
-                           v-bind:readonly="showSpinner"
+                           :class="{ 'has-content': email.length > 0 }"
+                           :readonly="showSpinner"
                            v-on:input="updateEmailField"
                     />
                     <label for="grid-email">{{ $t('strings.email') }}</label>
@@ -18,7 +18,8 @@
                 <div class="input-open">
                     <input class="input" id="grid-password" type="password" aria-labelledby="grid-password" required
                            ref="password"
-                           v-bind:readonly="showSpinner"
+                           :class="{ 'has-content' : password.length > 0 }"
+                           :readonly="showSpinner"
                            v-model="password"
                     />
                     <label for="grid-password">{{ $t('strings.password') }}</label>
@@ -28,7 +29,8 @@
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
                     <input class="input" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
-                           v-bind:readonly="showSpinner"
+                           :class="{ 'has-content' : passwordConfirmation.length > 0 }"
+                           :readonly="showSpinner"
                            v-model="passwordConfirmation"
                     />
                     <label for="grid-password-confirmation">{{ $t('strings.confirm_password') }}</label>

resources/assets/styles/components/authentication.css

@@ -1,32 +1,3 @@
-.input-open {
-  @apply .w-full .px-3 .relative;
-}
-
-.input-open > .input {
-  @apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
-
-  &:focus {
-    @apply .border-blue;
-    outline: 0;
-    transition: border 500ms ease-out;
-  }
-
-  &:focus + label, &:valid + label, &.has-content + label {
-    @apply .text-grey-darker .px-0 .cursor-pointer;
-    transform:translateY(-26px)
-  }
-
-  &:required {
-    box-shadow: none;
-  }
-}
-
-.input-open > label {
-  @apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
-  top: 14px;
-  transition: transform 200ms ease-out;
-}
-
 .login-box {
   @apply .bg-white .shadow-lg .rounded-lg .pt-10 .px-8 .pb-6 .mb-4;
 }

resources/assets/styles/components/forms.css

@@ -0,0 +1,32 @@
+/**
+ * Styles for the login form open input boxes. Label floats up above it when content
+ * is input and then sinks back down into the field if left empty.
+ */
+.input-open {
+    @apply .w-full .px-3 .relative;
+}
+
+.input-open > .input {
+    @apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
+
+    &:focus {
+        @apply .border-blue;
+        outline: 0;
+        transition: border 500ms ease-out;
+    }
+
+    &:focus + label, &:valid + label, &.has-content + label {
+        @apply .text-grey-darker .px-0 .cursor-pointer;
+        transform:translateY(-26px)
+    }
+
+    &:required {
+        box-shadow: none;
+    }
+}
+
+.input-open > label {
+    @apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
+    top: 14px;
+    transition: transform 200ms ease-out;
+}

resources/assets/styles/main.css

@@ -10,6 +10,7 @@
 @import "components/animations.css";
 @import "components/authentication.css";
 @import "components/buttons.css";
+@import "components/forms.css";
 @import "components/notifications.css";
 @import "components/spinners.css";