From acf0dda67a6eb3ea7d4f7169f2662c28e7a58c15 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Thu, 16 Aug 2018 00:22:32 +0200
Subject: [PATCH] Move auth pages into the main site, slight reduces the
 immersion break.

---
 assets/less/auth/classes/container.less | 15 +++++++++--
 assets/less/auth/main.less              | 35 -------------------------
 templates/auth/auth.twig                |  2 +-
 templates/auth/lockdown.twig            |  2 +-
 templates/auth/logout.twig              |  2 +-
 templates/auth/master.twig              | 16 ++---------
 templates/auth/password.twig            |  2 +-
 templates/master.twig                   |  3 +++
 8 files changed, 22 insertions(+), 55 deletions(-)

diff --git a/assets/less/auth/classes/container.less b/assets/less/auth/classes/container.less
index ee9148aa..7a49b091 100644
--- a/assets/less/auth/classes/container.less
+++ b/assets/less/auth/classes/container.less
@@ -1,5 +1,16 @@
-.container {
+.auth-container {
     box-shadow: 0 2px 5px fade(#111, 80%);
+    color: #fff;
     background: #222;
-    margin: 2px;
+    margin: 2px auto;
+    width: 400px;
+    min-height: @auth-form-height;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @media (max-width: @auth-mobile) {
+        min-width: 0;
+        width: 100%;
+    }
 }
diff --git a/assets/less/auth/main.less b/assets/less/auth/main.less
index 59301fea..829b706e 100644
--- a/assets/less/auth/main.less
+++ b/assets/less/auth/main.less
@@ -2,41 +2,6 @@
 @auth-title-height: 40px;
 @auth-form-height: 200px;
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    position: relative;
-}
-
-html,
-body {
-    height: 100%;
-    width: 100%;
-}
-
-body {
-    background: #5e3e71 url('https://static.flash.moe/images/grid.png');
-    font: 12px/20px sans-serif;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-}
-
-.auth {
-    min-width: 400px;
-    min-height: @auth-form-height;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    @media (max-width: @auth-mobile) {
-        min-width: 0;
-        width: 100%;
-    }
-}
-
 @import "classes/button";
 @import "classes/container";
 @import "classes/form";
diff --git a/templates/auth/auth.twig b/templates/auth/auth.twig
index 876b049c..c569ac21 100644
--- a/templates/auth/auth.twig
+++ b/templates/auth/auth.twig
@@ -1,7 +1,7 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="container">
+    <div class="auth-container">
         <div class="form__wrapper">
             <input class="form__toggle" id="_authmode_login" type="radio" name="_authmode"{% if auth_mode == 'login' %} checked{% endif %}>
             <div class="form form--login">
diff --git a/templates/auth/lockdown.twig b/templates/auth/lockdown.twig
index 2ab3951a..e7c28fb6 100644
--- a/templates/auth/lockdown.twig
+++ b/templates/auth/lockdown.twig
@@ -1,7 +1,7 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="container logout">
+    <div class="auth-container logout">
         <div class="logout__message">
             <p class="logout__paragraph">The site is currently unavailable, try again later.</p>
         </div>
diff --git a/templates/auth/logout.twig b/templates/auth/logout.twig
index a05edeb3..48e7834b 100644
--- a/templates/auth/logout.twig
+++ b/templates/auth/logout.twig
@@ -1,7 +1,7 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="container logout">
+    <div class="auth-container logout">
         <div class="logout__message">
             <p class="logout__paragraph">We couldn't verify that you were actually the person attempting to log out.</p>
             <p class="logout__paragraph">Press the button below to verify the logout request, otherwise click back in your browser or close this tab.</p>
diff --git a/templates/auth/master.twig b/templates/auth/master.twig
index f24ac6e7..d8d11713 100644
--- a/templates/auth/master.twig
+++ b/templates/auth/master.twig
@@ -1,14 +1,2 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Authentication</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link href="{{ '/css/auth.css'|asset_url }}" rel="stylesheet" type="text/css">
-    </head>
-    <body>
-        <div class="auth">
-            {{ block('content') is defined ? block('content') : '' }}
-        </div>
-    </body>
-</html>
+{% extends 'master.twig' %}
+{% set is_auth = true %}
diff --git a/templates/auth/password.twig b/templates/auth/password.twig
index 194663be..9e3887f1 100644
--- a/templates/auth/password.twig
+++ b/templates/auth/password.twig
@@ -1,7 +1,7 @@
 {% extends 'auth/master.twig' %}
 
 {% block content %}
-    <div class="container">
+    <div class="auth-container">
         <div class="form__wrapper">
             <input class="form__toggle" id="_authmode_reset" type="radio" name="_authmode" checked>
             <div class="form form--reset">
diff --git a/templates/master.twig b/templates/master.twig
index 0b1c8f5d..061dd9c1 100644
--- a/templates/master.twig
+++ b/templates/master.twig
@@ -6,6 +6,9 @@
         {% include '_layout/meta.twig' %}
         <link href="{{ '/css/mio.css'|asset_url }}" rel="stylesheet">
         <link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
+        {% if is_auth|default(false) %}
+            <link href="{{ '/css/auth.css'|asset_url }}" rel="stylesheet" type="text/css">
+        {% endif %}
         {% if manage_menu is defined %}
             <link href="{{ '/css/manage.css'|asset_url }}" rel="stylesheet">
             <style>