Add auth/login page

Add styling for basic login page that prepares the application for the new auth flow with redirects.
AbandonTech · Oct 27, 2023 · cd358ff · cd358ff
1 parent 126d7fe
commit cd358ff
Show file tree

Hide file tree

Showing 5 changed files with 361 additions and 16 deletions.
diff --git a/abandonauth/main.py b/abandonauth/main.py
@@ -2,13 +2,16 @@
 
 from abandonauth.routers import routers
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 from prisma import Prisma
 
 app = FastAPI(
     title="AbandonAuth",
     version=os.environ.get("VERSION", "local-dev")
 )
 
+app.mount("/static", StaticFiles(directory="./abandonauth/static"), name="static")
+
 for router in routers:
     app.include_router(router)
 

diff --git a/abandonauth/static/styles.css b/abandonauth/static/styles.css
@@ -0,0 +1,109 @@
+:root {
+    --White: #F6F6F6;
+    --Background: #3F3F46;
+    --GitHub: #333;
+    --Discord: #5865F2;
+}
+
+body {
+    background: var(--Background);
+    color: var(--White);
+    font-family: 'Lato', sans-serif;
+    margin: 0;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
+footer {
+    bottom: 0;
+}
+
+#content {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#title {
+    font-size: 6rem;
+    font-family: 'Atkinson Hyperlegible', sans-serif;
+    margin: 0;
+}
+
+#subtitle {
+    font-size: 1.75rem;
+    font-weight: 400;
+    font-family: 'Atkinson Hyperlegible', sans-serif;
+    margin: 0;
+}
+
+#header {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    flex-shrink: 0;
+}
+
+#login-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2vh;
+
+    height: 33vh;
+
+    width: 66vw;
+}
+
+button[id^="login-"] {
+    color: var(--White);
+    border-radius: 10px;
+    border: none;
+
+    display: flex;
+    width: 100%;
+
+    height: 15%;
+    align-items: center;
+    gap: 5%;
+
+    font-size: 2rem;
+}
+
+button[id^="login-"] > svg {
+    height: 66%;
+    margin: 3% 0 3% 3%;
+}
+
+
+#login-discord {
+    background: var(--Discord);
+}
+
+#login-github {
+    background: var(--GitHub);
+}
+
+@media (min-width: 1024px) {
+    #title {
+        font-size: 4rem;
+
+    }
+
+    #subtitle {
+        font-size: 1.25em;
+
+    }
+
+    #login-buttons {
+        width: 33vw;
+    }
+
+    button[id^="login-"] {
+        font-size: 1.25rem;
+    }
+}
diff --git a/abandonauth/templates/index.html b/abandonauth/templates/index.html
@@ -3,23 +3,51 @@
 <head>
     <meta charset="UTF-8">
     <title>AbandonAuth</title>
+    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
 </head>
-    <body>
-    <h3>Abandon Auth Developer UI</h3>
-        <a href="/docs">Docs</a>
-        <div>
-            {% if authenticated %}
-                <button onclick="deleteAuthCookie()">Logout</button>
-            {% else %}
-                <a href={{ discord_redirect }}>Login</a>
-            {% endif %}
+<body>
+    <div id="content">
+        <div id="header">
+            <h1 id="title">AbandonAuth</h1>
+            <h2 id="subtitle">Application wants you to login using AbandonAuth!</h2>
         </div>
 
-        <script>
-            function deleteAuthCookie(){
-                document.cookie = "Authorization" +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-                location.reload();
-            }
-        </script>
-    </body>
+        <div id="login-buttons">
+
+            <button id="login-discord">
+                <svg viewBox="0 0 36 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M30.1003 2.39245C30.0906 2.37355 30.0745 2.35875 30.0549 2.35068C27.7913 1.30704 25.4026 0.562844 22.9485 0.136713C22.9263 0.132548 22.9032 0.135553 22.8827 0.145301C22.8622 0.155048 22.8453 0.171043 22.8344 0.191009C22.5091 0.784262 22.2138 1.39363 21.9497 2.01679C19.3043 1.61326 16.6135 1.61326 13.9681 2.01679C13.7022 1.39205 13.4022 0.782528 13.0695 0.191009C13.0581 0.171477 13.0411 0.155851 13.0207 0.146166C13.0003 0.136482 12.9775 0.133188 12.9553 0.136713C10.5009 0.561949 8.11206 1.3062 5.84879 2.35074C5.82941 2.359 5.81307 2.37309 5.802 2.39108C1.2759 9.18334 0.0360355 15.8086 0.644273 22.3518C0.645984 22.3679 0.650887 22.3834 0.65869 22.3975C0.666493 22.4116 0.677037 22.4239 0.689695 22.4339C3.3252 24.3948 6.27304 25.8916 9.40743 26.8604C9.4295 26.8671 9.45307 26.8668 9.47497 26.8596C9.49687 26.8524 9.51605 26.8386 9.52992 26.8201C10.2031 25.8996 10.7996 24.9249 11.3134 23.9059C11.3204 23.8919 11.3245 23.8766 11.3252 23.8609C11.3259 23.8452 11.3234 23.8296 11.3176 23.815C11.3119 23.8004 11.3032 23.7872 11.292 23.7763C11.2809 23.7653 11.2675 23.7569 11.2529 23.7515C10.3122 23.3898 9.40157 22.9538 8.52945 22.4476C8.51361 22.4382 8.5003 22.4251 8.49071 22.4093C8.48112 22.3936 8.47553 22.3757 8.47444 22.3573C8.47336 22.3388 8.47681 22.3204 8.48449 22.3036C8.49216 22.2869 8.50383 22.2722 8.51847 22.2611C8.70146 22.1233 8.88457 21.98 9.05931 21.8352C9.07484 21.8224 9.09362 21.8141 9.11355 21.8114C9.13349 21.8087 9.15377 21.8117 9.17213 21.82C14.8857 24.4403 21.0715 24.4403 26.7174 21.82C26.7358 21.8112 26.7563 21.8078 26.7766 21.8103C26.7968 21.8127 26.8159 21.8209 26.8317 21.8339C27.0065 21.9786 27.1895 22.1233 27.3739 22.2611C27.3886 22.2721 27.4004 22.2866 27.4082 22.3034C27.416 22.3201 27.4196 22.3385 27.4186 22.3569C27.4177 22.3753 27.4122 22.3933 27.4027 22.4091C27.3932 22.4249 27.38 22.4381 27.3643 22.4476C26.4941 22.9581 25.5827 23.3938 24.6396 23.7501C24.6249 23.7557 24.6116 23.7643 24.6005 23.7755C24.5894 23.7866 24.5808 23.7999 24.5752 23.8146C24.5696 23.8293 24.5671 23.8451 24.568 23.8608C24.5688 23.8765 24.573 23.8919 24.5802 23.9059C25.1025 24.9192 25.6981 25.8927 26.3623 26.8185C26.3757 26.8375 26.3948 26.8517 26.4168 26.8592C26.4388 26.8667 26.4626 26.8671 26.4847 26.8602C29.6248 25.8947 32.5777 24.3978 35.2166 22.4339C35.2294 22.4244 35.2401 22.4124 35.2479 22.3985C35.2558 22.3845 35.2606 22.3691 35.262 22.3532C35.9902 14.7885 34.0429 8.21758 30.1003 2.39245ZM12.1666 18.3677C10.4464 18.3677 9.02903 16.7813 9.02903 14.8331C9.02903 12.8849 10.4189 11.2984 12.1666 11.2984C13.928 11.2984 15.3317 12.8987 15.3042 14.833C15.3042 16.7813 13.9142 18.3677 12.1666 18.3677ZM23.7673 18.3677C22.0472 18.3677 20.6298 16.7813 20.6298 14.8331C20.6298 12.8849 22.0197 11.2984 23.7673 11.2984C25.5288 11.2984 26.9324 12.8987 26.9049 14.833C26.9049 16.7813 25.5288 18.3677 23.7673 18.3677Z" fill="#F7F7F7"/>
+                </svg>
+
+                Login with Discord
+            </button>
+
+            <button id="login-github">
+                <svg viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.2101 30.9016C13.2101 31.0561 13.0339 31.1797 12.8117 31.1797C12.5589 31.2028 12.3827 31.0792 12.3827 30.9016C12.3827 30.7471 12.5589 30.6235 12.781 30.6235C13.0109 30.6003 13.2101 30.7239 13.2101 30.9016ZM10.8274 30.554C10.7738 30.7085 10.927 30.8861 11.1569 30.9325C11.356 31.0097 11.5859 30.9325 11.6319 30.778C11.6778 30.6235 11.5323 30.4458 11.3024 30.3763C11.1032 30.3222 10.881 30.3995 10.8274 30.554ZM14.2137 30.4226C13.9915 30.4767 13.8383 30.6235 13.8613 30.8012C13.8843 30.9557 14.0835 31.0561 14.3133 31.002C14.5355 30.9479 14.6887 30.8012 14.6657 30.6467C14.6427 30.4999 14.4359 30.3995 14.2137 30.4226ZM19.2548 0.821167C8.62863 0.821167 0.5 8.95539 0.5 19.6697C0.5 28.2365 5.84758 35.5674 13.4859 38.1474C14.4665 38.3251 14.8113 37.7149 14.8113 37.2127C14.8113 36.7338 14.7883 34.0919 14.7883 32.4697C14.7883 32.4697 9.4254 33.6284 8.29919 30.1677C8.29919 30.1677 7.42581 27.9198 6.16935 27.3404C6.16935 27.3404 4.41492 26.1276 6.29194 26.1508C6.29194 26.1508 8.1996 26.3053 9.24919 28.1438C10.927 31.1256 13.7387 30.2681 14.8343 29.7583C15.0105 28.5223 15.5085 27.6649 16.0601 27.155C11.7774 26.6761 7.45645 26.0504 7.45645 18.6191C7.45645 16.4948 8.03871 15.4288 9.26452 14.0692C9.06532 13.5671 8.41411 11.4969 9.46371 8.82407C11.0649 8.32196 14.75 10.9098 14.75 10.9098C16.2823 10.4772 17.9294 10.2532 19.5613 10.2532C21.1931 10.2532 22.8403 10.4772 24.3726 10.9098C24.3726 10.9098 28.0577 8.31423 29.6589 8.82407C30.7085 11.5046 30.0573 13.5671 29.8581 14.0692C31.0839 15.4365 31.8347 16.5025 31.8347 18.6191C31.8347 26.0736 27.3222 26.6684 23.0395 27.155C23.7444 27.7653 24.3419 28.924 24.3419 30.7394C24.3419 33.3426 24.319 36.5639 24.319 37.1973C24.319 37.6994 24.6714 38.3097 25.6444 38.132C33.3056 35.5674 38.5 28.2365 38.5 19.6697C38.5 8.95539 29.881 0.821167 19.2548 0.821167ZM7.94677 27.464C7.84718 27.5413 7.87016 27.719 8.0004 27.8657C8.12298 27.9893 8.29919 28.0434 8.39879 27.943C8.49839 27.8657 8.4754 27.6881 8.34516 27.5413C8.22258 27.4177 8.04637 27.3636 7.94677 27.464ZM7.11936 26.8383C7.06573 26.9387 7.14234 27.0623 7.29556 27.1396C7.41815 27.2168 7.57137 27.1937 7.625 27.0855C7.67863 26.9851 7.60202 26.8615 7.44879 26.7843C7.29556 26.7379 7.17298 26.7611 7.11936 26.8383ZM9.60161 29.5884C9.47903 29.6888 9.525 29.9205 9.70121 30.0673C9.87742 30.245 10.0996 30.2681 10.1992 30.1445C10.2988 30.0441 10.2528 29.8124 10.0996 29.6656C9.93105 29.4879 9.70121 29.4648 9.60161 29.5884ZM8.72823 28.4528C8.60565 28.5301 8.60565 28.7309 8.72823 28.9086C8.85081 29.0862 9.05766 29.1635 9.15726 29.0862C9.27984 28.9858 9.27984 28.785 9.15726 28.6073C9.05 28.4296 8.85081 28.3524 8.72823 28.4528Z" fill="#F7F7F7"/>
+                </svg>
+
+                Login with GitHub
+            </button>
+        </div>
+
+        <!-- used for developing, will be removed in future -->
+        <div style="display: flex; gap: 5vw">
+            <a href="/docs">Docs</a>
+            <div>
+                {% if authenticated %}
+                    <button onclick="deleteAuthCookie()">Logout</button>
+                {% else %}
+                    <a href={{ discord_redirect }}>Login</a>
+                {% endif %}
+            </div>
+            <script>
+                function deleteAuthCookie(){
+                    document.cookie = "Authorization" +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+                    location.reload();
+                }
+            </script>
+        </div>
+    </div>
+</body>
 </html>
diff --git a/flake.lock b/flake.lock