feat(client): new and refreshed UI for all auth pages (#12)

authcompanion · Sep 15, 2023 · ce3d3c3 · ce3d3c3
1 parent 6d58b99
commit ce3d3c3
Show file tree

Hide file tree

Showing 25 changed files with 3,099 additions and 1,419 deletions.
diff --git a/.github/public/login.png b/.github/public/login.png
diff --git a/.github/public/register.png b/.github/public/register.png
diff --git a/README.md b/README.md
@@ -119,11 +119,8 @@ When ready, read the [Launch Guide](https://docs.authcompanion.com/guide/launch.
 
 ### Web Forms for Authentication
 
-Authcompanion provides built-in web forms for user authentiation.
+Authcompanion provides built-in web forms for user authentiation including both login and registration pages below:
 
-The web forms use CSS-in-JS - making them easily customizable for
-your specific branding and authentication needs. No build step required to make
-changes to the Web Form's look and feel.
 
 |             Login Screen             |            Registration Screen             |
 | :----------------------------------: | :----------------------------------------: |

diff --git a/ui/admin/dashboardPage.html → client/admin/dashboardPage.html b/ui/admin/dashboardPage.html → client/admin/dashboardPage.html
diff --git a/ui/admin/loginAdminPage.html → client/admin/loginAdminPage.html b/ui/admin/loginAdminPage.html → client/admin/loginAdminPage.html
diff --git a/client/auth/homePage.html b/client/auth/homePage.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/v1/web/styles/main.css" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <style>
+      html {
+        font-family: "Inter var", sans-serif;
+      }
+      [v-cloak] {
+        display: none;
+      }
+    </style>
+
+    <title>Home</title>
+  </head>
+  <body id="app">
+    <!-- Form -->
+    <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+      <div class="max-w-lg mx-auto">
+        <form
+          @submit.prevent
+          action=""
+          class="p-4 mt-6 mb-0 rounded-lg shadow-lg sm:p-6 lg:p-8"
+        >
+          <p class="text-2xl text-green-500">Success 🎉 !</p>
+          <p class="py-3 text-black">
+            Nice job getting started with AuthCompanion.
+          </p>
+
+          <p class="pt-8 text-black">
+            When you're ready, tell AuthC to redirect users after successful
+            login to your application's home page (instead of this temporary
+            one).
+          </p>
+
+          <p class="py-3 text-black">
+            For a full guide on how to integrate and launch AuthCompanion, check
+            those sections in the docs:
+            <a
+              class="text-blue-600 underline hover:text-blue-800"
+              href="https://docs.authcompanion.com/"
+              >https://docs.authcompanion.com/</a
+            >
+          </p>
+
+          <p class="text-black">
+            After a successful login or account registration, AuthC provides
+            developers a user's access token which is used for managing your
+            user's session. The access token contains helpful information about
+            the user.
+            <a
+              class="text-blue-600 underline hover:text-blue-800"
+              :href="jwtDebugUrl"
+              >Decode the token's payload here to find out.</a
+            >
+          </p>
+          <br />
+        </form>
+      </div>
+    </div>
+    <div class="fixed inset-x-0 bottom-0">
+      <div class="m-4 text-xs text-gray-400">
+        Powered by
+        <span class="underline">
+          <a href="https://github.com/authcompanion/authcompanion2"
+            >AuthCompanion</a
+          >
+        </span>
+      </div>
+    </div>
+    <!-- Scripts -->
+    <script type="module">
+      import {
+        createApp,
+        ref,
+        computed,
+      } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.prod.js";
+
+      createApp({
+        setup() {
+          const email = ref("");
+          const password = ref("");
+
+          const showError = ref(false);
+          let errorTitle = ref(null);
+          let errorDetail = ref(null);
+
+          let jwt = ref("");
+          let jwtDebugUrl = ref("");
+
+          jwt.value = window.localStorage.getItem("ACCESS_TOKEN");
+
+          if (jwt) {
+            let jwtURL = "https://jwt.io/#debugger-io?token=" + jwt.value;
+            jwtDebugUrl.value = jwtURL;
+          } else {
+            showError.value = true;
+
+            errorTitle.value = "Error";
+            errorDetail.value = "Please try logging in again at /login";
+          }
+
+          // expose to the html template
+          return {
+            showError,
+            errorTitle,
+            errorDetail,
+            jwt,
+            jwtDebugUrl,
+          };
+        },
+      }).mount("#app");
+    </script>
+  </body>
+</html>