From 5c3d3f6ce94159986dc01892d23139cac40d965e Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 16 Jun 2018 18:04:48 -0700
Subject: [PATCH] Better support for mobile devices on login and account pages

---
 .../scripts/components/auth/ForgotPassword.vue       |  2 +-
 .../assets/scripts/components/auth/LoginForm.vue     |  2 +-
 .../assets/scripts/components/auth/TwoFactorForm.vue |  2 +-
 .../assets/scripts/components/dashboard/Account.vue  | 12 ++++++------
 .../assets/styles/components/authentication.css      |  6 ++++++
 .../themes/pterodactyl/templates/auth/core.blade.php |  4 ++--
 .../themes/pterodactyl/templates/base/core.blade.php |  2 +-
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/resources/assets/scripts/components/auth/ForgotPassword.vue b/resources/assets/scripts/components/auth/ForgotPassword.vue
index ce43609da..6f40f2df8 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.vue
+++ b/resources/assets/scripts/components/auth/ForgotPassword.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
+        <form class="login-box" method="post"
               v-on:submit.prevent="submitForm"
         >
             <div class="flex flex-wrap -mx-3 mb-6">
diff --git a/resources/assets/scripts/components/auth/LoginForm.vue b/resources/assets/scripts/components/auth/LoginForm.vue
index 59c80cef3..127343546 100644
--- a/resources/assets/scripts/components/auth/LoginForm.vue
+++ b/resources/assets/scripts/components/auth/LoginForm.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
+        <form class="login-box" method="post"
               v-on:submit.prevent="submitForm"
         >
             <div class="flex flex-wrap -mx-3 mb-6">
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.vue b/resources/assets/scripts/components/auth/TwoFactorForm.vue
index 94d6de6cb..8c800af2d 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.vue
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
+    <form class="login-box" method="post"
           v-on:submit.prevent="submitToken"
     >
         <div class="flex flex-wrap -mx-3 mb-6">
diff --git a/resources/assets/scripts/components/dashboard/Account.vue b/resources/assets/scripts/components/dashboard/Account.vue
index b764dc1c6..8d8aa1dbb 100644
--- a/resources/assets/scripts/components/dashboard/Account.vue
+++ b/resources/assets/scripts/components/dashboard/Account.vue
@@ -1,22 +1,22 @@
 <template>
     <div>
         <navigation/>
-        <div class="container animate fadein mt-6">
+        <div class="container animate fadein mt-2 sm:mt-6">
             <modal :show="modalVisible" v-on:close="modalVisible = false">
                 <TwoFactorAuthentication/>
             </modal>
-            <flash container="mt-6 mb-2 mx-4"/>
+            <flash container="mt-2 sm:mt-6 mb-2 sm:mx-4"/>
             <div class="flex flex-wrap">
                 <div class="w-full md:w-1/2">
-                    <div class="m-4 md:ml-0">
-                        <update-email class="mb-8"/>
-                        <div class="content-box text-center">
+                    <div class="sm:m-4 md:ml-0">
+                        <update-email class="mb-4 sm:mb-8"/>
+                        <div class="content-box text-center mb-4 sm:mb-0">
                             <button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
                         </div>
                     </div>
                 </div>
                 <div class="w-full md:w-1/2">
-                    <change-password class="m-4 md:mr-0"/>
+                    <change-password class="sm:m-4 md:mr-0"/>
                 </div>
             </div>
         </div>
diff --git a/resources/assets/styles/components/authentication.css b/resources/assets/styles/components/authentication.css
index 63111a0d3..1f99a29f7 100644
--- a/resources/assets/styles/components/authentication.css
+++ b/resources/assets/styles/components/authentication.css
@@ -1,3 +1,9 @@
 .login-box {
   @apply .bg-white .shadow-lg .rounded-lg .pt-10 .px-8 .pb-6 .mb-4;
+
+  @screen xsx {
+    @apply .rounded-none;
+    margin-top: 25%;
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .2), 0 -15px 30px 0 rgba(0, 0, 0, .2);
+  }
 }
diff --git a/resources/themes/pterodactyl/templates/auth/core.blade.php b/resources/themes/pterodactyl/templates/auth/core.blade.php
index 58afc4876..2d592b4ee 100644
--- a/resources/themes/pterodactyl/templates/auth/core.blade.php
+++ b/resources/themes/pterodactyl/templates/auth/core.blade.php
@@ -3,8 +3,8 @@
 ])
 
 @section('container')
-    <div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
-        <div class="text-center">
+    <div class="w-full sm:max-w-sm m-auto mt-8">
+        <div class="text-center hidden sm:block">
             <img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
         </div>
         <router-view></router-view>
diff --git a/resources/themes/pterodactyl/templates/base/core.blade.php b/resources/themes/pterodactyl/templates/base/core.blade.php
index 14caa41fc..d184663dc 100644
--- a/resources/themes/pterodactyl/templates/base/core.blade.php
+++ b/resources/themes/pterodactyl/templates/base/core.blade.php
@@ -3,7 +3,7 @@
 @section('container')
     <router-view></router-view>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-right text-grey-dark text-xs">
+        <p class="text-center sm:text-right text-grey-dark text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>