Started working on a better see password button

skolehjem/public/css/admin.css

@@ -31,6 +31,8 @@ form {
   font-size: 25px;
   color: grey;
   margin: 7.5px 0 0 -45px;
+  align-self: center;
+  z-index: 98;
 }
 
 .btn {
@@ -104,6 +106,23 @@ input.appinput {
   color: white;
 }
 
+.form-control {
+  flex: 1 1 auto;
+  width: 1%;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group-append {
+  display: flex;
+}
+
 .d-flex {
   display: flex;
 }

skolehjem/public/css/webapp.css

@@ -31,6 +31,8 @@ form {
   font-size: 25px;
   color: grey;
   margin: 7.5px 0 0 -45px;
+  align-self: center;
+  z-index: 98;
 }
 
 .btn {
@@ -104,6 +106,23 @@ input.appinput {
   color: white;
 }
 
+.form-control {
+  flex: 1 1 auto;
+  width: 1%;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group-append {
+  display: flex;
+}
+
 .d-flex {
   display: flex;
 }

skolehjem/resources/sass/app/forms/_forms.scss

@@ -11,6 +11,8 @@ form {
     font-size: 25px;
     color: grey;
     margin: 7.5px 0 0 -45px;
+    align-self: center;
+    z-index: 98;
 }
 
 .btn {
@@ -67,3 +69,23 @@ input.appinput {
     opacity: 1;
     color: white;
 }
+
+.form-control {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.input-group {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: 100%;
+}
+
+.input-group-append {
+    display: flex;
+}

skolehjem/resources/views/app/users/editpass.blade.php

@@ -7,18 +7,30 @@
 @section("content")
     <main>
         <h1 class="text-center sde-blue mt-0">Konto</h1>
-        <form method="post" action="{{ route("users.update", ['user' => Auth::user()]) }}" style="display: inline-table;">
+        <form method="post" action="{{ route("users.update", ['user' => Auth::user()]) }}">
             @csrf
             @method("put")
             <span>Nuværende Password:</span>
-            <input type="password" name="oldpassword" id="old" placeholder="******">
+            <div class="input-group text-left">
+                <input type="password" class="form-control" name="oldpassword" id="old" placeholder="******">
+                <div class="input-group-append">
                     <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-old" onclick="show('old', 'fa-old')"></span>
+                </div>
+            </div>
             <span>Nyt Password:</span>
-            <input class="w-100" type="password" name="password" id="new" placeholder="******" required style="width: calc(100% - 8px)">
+            <div class="input-group text-left">
+                <input type="password" class="form-control" name="password" id="new" placeholder="******" required>
+                <div class="input-group-append">
                     <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-new" onclick="show('new', 'fa-new')"></span>
+                </div>
+            </div>
             <span>Bekræft Nyt Password:</span>
-            <input class="w-100" type="password" name="confirmpassword" id="confirm" placeholder="******" required style="width: calc(100% - 8px)">
+            <div class="input-group text-left">
+                <input type="password" class="form-control" name="confirmpassword" id="confirm" placeholder="******" required>
+                <div class="input-group-append">
                     <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-confirm" onclick="show('confirm', 'fa-confirm')"></span>
+                </div>
+            </div>
             {!! session()->get('error#notsamepass') !!}
             {!! session()->get('error#oldpass') !!}
             <button type="submit" class="btn text-center btn-sde-blue mt-1">Rediger</button>