first upload all files

Modules/User/Resources/assets/admin/js/login.js

@@ -0,0 +1,11 @@
+$('[data-loading]').on('click', (e) => {
+    let button = $(e.currentTarget);
+
+    if (button.is('i')) {
+        button = button.parent();
+    }
+
+    button.data('loading-text', button.html())
+        .addClass('btn-loading')
+        .button('loading');
+});

Modules/User/Resources/assets/admin/js/main.js

@@ -0,0 +1,21 @@
+window.admin.removeSubmitButtonOffsetOn('#permissions');
+
+$('.permission-parent-actions > .allow-all, .permission-parent-actions > .deny-all, .permission-parent-actions > .inherit-all').on('click', (e) => {
+    let action = e.currentTarget.className.split(/\s+/)[2].split(/-/)[0];
+
+    $(`.permission-${action}`).prop('checked', true);
+});
+
+$('.permission-group-actions > .allow-all, .permission-group-actions > .deny-all, .permission-group-actions > .inherit-all').on('click', (e) => {
+    let action = e.currentTarget.className.split(/\s+/)[2].split(/-/)[0];
+
+    $(e.currentTarget).closest('.permission-group')
+        .find(`.permission-${action}`)
+        .each((index, value) => {
+            $(value).prop('checked', true);
+        });
+});
+
+$('.delete-api-key').on('click', (e) => {
+    $('#confirmation-form').attr('action', e.currentTarget.dataset.action);
+});

Modules/User/Resources/assets/admin/sass/login.scss

@@ -0,0 +1,147 @@
+/* resets */
+
+h1, h2, h3, h4, h5, h6, p {
+	margin: 0;
+}
+
+body, html {
+    height: 100% !important;
+    width: 100% !important;
+    margin: 0;
+    display: table;
+}
+
+body {
+	font-family: "Roboto", sans-serif;
+  	font-weight: 400;
+	background: #f1f3f7;
+    display: table-cell;
+    vertical-align: middle;
+}
+
+/* login page */
+
+.login-page {
+    display: table;
+    width: 360px;
+    margin: auto;
+}
+
+.login-wrapper {
+    position: relative;
+    background: #ffffff;
+    border-radius: 3px;
+    padding: 15px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
+    z-index: 0;
+
+    .bg-blue {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        height: 80px;
+        background: #0068e1;
+        overflow: hidden;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        z-index: -1;
+
+        .reflection {
+            position: absolute;
+            left: -105px;
+            top: 0;
+            height: 300px;
+            width: 300px;
+            background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
+            transform: rotate(50deg);
+        }
+    }
+
+    .form-inner {
+        background: #ffffff;
+        border-radius: 3px;
+        border: 1px solid #e9e9e9;
+        margin: 15px 0 0;
+        padding: 0 15px 10px;
+    }
+
+    .reset-password {
+        p {
+            margin-bottom: 20px;
+        }
+
+        .login-form > button {
+            margin-bottom: 10px;
+        }
+
+        .input-icon {
+            top: 5px !important;
+        }
+
+        > a {
+            margin: 5px auto 5px;
+        }
+    }
+
+    h3 {
+        margin: 15px 0;
+    }
+
+    .form-group {
+        position: relative;
+
+        label > span {
+            color: #fc4b4b;
+            margin-left: 4px;
+        }
+
+        .form-control {
+            padding-left: 36px;
+        }
+    }
+
+    button {
+        display: table;
+        margin: 20px auto 5px;
+        padding-left: 60px;
+        padding-right: 60px;
+    }
+
+    a {
+        display: table;
+        margin-top: 10px;
+        color: #0068e1;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.reset-password {
+    button {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+}
+
+@media screen and (max-width: 415px) {
+    .login-page {
+        width: 100%;
+        margin: 0;
+        padding: 0 15px;
+
+        .checkbox {
+            float: none !important;
+            display: table;
+            margin: 10px auto 0;
+        }
+
+        a {
+            float: none !important;
+            display: table;
+            margin: 10px auto;
+        }
+    }
+}

Modules/User/Resources/assets/admin/sass/main.scss

@@ -0,0 +1,91 @@
+.permission-row {
+    padding: 6px 0 4px 0;
+}
+
+.api-keys {
+    margin-bottom: 20px;
+}
+
+.permission-group {
+    margin-bottom: 30px;
+}
+
+.permission-parent-head {
+    margin-bottom: 15px;
+
+    h3 {
+        border-bottom: 1px solid #d2d6de;
+        padding-bottom: 5px;
+    }
+}
+
+%permission-actions {
+    border: 1px solid #d2d6de;
+}
+
+
+%permission-actions-btn {
+    padding: 3px 10px;
+    margin-left: 0px !important;
+    border-right: 1px solid #d2d6de;
+
+    &:last-child {
+        border-right: none;
+    }
+}
+
+.permission-parent-actions {
+    @extend %permission-actions;
+    margin-top: 0;
+
+    > .btn {
+        @extend %permission-actions-btn;
+    }
+}
+
+.permission-group-actions {
+    @extend %permission-actions;
+
+    > .btn {
+        @extend %permission-actions-btn;
+    }
+}
+
+.permission-row {
+    .permission-label {
+        font-family: "Open Sans", sans-serif;
+        font-weight: 600;
+        display: block;
+        padding-top: 6px;
+    }
+
+    .radio-btn {
+        .radio {
+            float: right;
+            margin-left: 15px;
+
+            &:last-child {
+                margin-left: 0;
+            }
+        }
+    }
+}
+
+#new_password {
+    .btn-reset-password {
+        margin: 10px 0 15px;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .permission-row {
+        .radio-btn {
+            float: left;
+            margin-left: 15px;
+        }
+    }
+
+    .permission-group-actions {
+        margin-top: 10px;
+    }
+}