Fix CSS issue with login page due to input classes

Author: DaneEveritt

app/Services/Helpers/AssetHashService.php

@@ -91,6 +91,7 @@ public function css(string $resource): string
     {
         return '<link href="' . $this->url($resource) . '"
                     rel="stylesheet preload"
+                    as="style"
                     crossorigin="anonymous"
                     integrity="' . $this->integrity($resource) . '"
                     referrerpolicy="no-referrer">';

package.json

@@ -57,7 +57,7 @@
         "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
-        "serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js",
+        "serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --no-clipboard",
         "v:serve": "PUBLIC_PATH=http://192.168.50.2:8080 NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --host 192.168.50.2 --no-clipboard"
     }
 }

resources/assets/scripts/app.js

@@ -3,22 +3,21 @@ import Vuex from 'vuex';
 import vuexI18n from 'vuex-i18n';
 import VueRouter from 'vue-router';
 
+Vue.config.productionTip = false;
 require('./bootstrap');
 
 // Helpers
 import { Ziggy } from './helpers/ziggy';
 import Locales from './../../../resources/lang/locales';
 import { flash } from './mixins/flash';
 import { routes } from './routes';
-import storeData from './store/index.js';
+import store from './store/index.js';
 
 window.events = new Vue;
 window.Ziggy = Ziggy;
 
-Vue.config.productionTip = false;
 Vue.use(Vuex);
 
-const store = new Vuex.Store(storeData);
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 Vue.mixin({ methods: { route } });

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

@@ -5,7 +5,7 @@
         >
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
-                    <input class="input" id="grid-email" type="email" aria-labelledby="grid-email-label" required
+                    <input class="input open-label" id="grid-email" type="email" aria-labelledby="grid-email-label" required
                            ref="email"
                            v-bind:class="{ 'has-content': email.length > 0 }"
                            v-bind:readonly="showSpinner"

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

@@ -5,7 +5,7 @@
         >
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
-                    <input class="input" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
+                    <input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
                            ref="email"
                            :class="{ 'has-content' : user.email.length > 0 }"
                            :readonly="showSpinner"
@@ -17,7 +17,7 @@
             </div>
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
-                    <input class="input" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
+                    <input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
                            ref="password"
                            :class="{ 'has-content' : user.password && user.password.length > 0 }"
                            :readonly="showSpinner"

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

@@ -5,7 +5,7 @@
         >
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
-                    <input class="input" id="grid-email" type="email" aria-labelledby="grid-email" required
+                    <input class="input open-label" id="grid-email" type="email" aria-labelledby="grid-email" required
                            ref="email"
                            :class="{ 'has-content': email.length > 0 }"
                            :readonly="showSpinner"
@@ -16,7 +16,7 @@
             </div>
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
-                    <input class="input" id="grid-password" type="password" aria-labelledby="grid-password" required
+                    <input class="input open-label" id="grid-password" type="password" aria-labelledby="grid-password" required
                            ref="password"
                            :class="{ 'has-content' : password.length > 0 }"
                            :readonly="showSpinner"
@@ -28,7 +28,7 @@
             </div>
             <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
+                    <input class="input open-label" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
                            :class="{ 'has-content' : passwordConfirmation.length > 0 }"
                            :readonly="showSpinner"
                            v-model="passwordConfirmation"

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

@@ -4,7 +4,7 @@
     >
         <div class="flex flex-wrap -mx-3 mb-6">
             <div class="input-open">
-                <input class="input" id="grid-code" type="number" name="token" aria-labelledby="grid-username" required
+                <input class="input open-label" id="grid-code" type="number" name="token" aria-labelledby="grid-username" required
                        ref="code"
                        :class="{ 'has-content' : code.length > 0 }"
                        v-model="code"

resources/assets/scripts/store/index.js

@@ -1,6 +1,10 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
 import auth from './modules/auth';
 
-export default {
+Vue.use(Vuex);
+
+export default new Vuex.Store({
     strict: process.env.NODE_ENV !== 'production',
     modules: { auth },
-};
+});

resources/assets/styles/components/forms.css

@@ -31,7 +31,7 @@
     transition: transform 200ms ease-out;
 }
 
-.input {
+.input:not(.open-label) {
     @apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
     transition: all 100ms linear;