feat: serve static content, use template for index

src/main/resources/public/out.css

@@ -546,6 +546,18 @@ video {
   width: 100vw;
 }
 
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -574,6 +586,10 @@ video {
   border-width: 4px;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-b-8 {
   border-bottom-width: 8px;
 }
@@ -583,6 +599,11 @@ video {
   border-color: rgb(96 165 250 / var(--tw-border-opacity));
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -597,6 +618,10 @@ video {
   padding: 8rem;
 }
 
+.text-end {
+  text-align: end;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;

src/main/resources/templates/auth.html

@@ -6,7 +6,7 @@
     <title>Auth page</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="../out.css" type="text/css" />
+    <link rel="stylesheet" href="../public/out.css" type="text/css" />
 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
@@ -26,19 +26,19 @@
             class="text-2xl text-blue-400 font-bold"
         >Authorizatoin options</h2>
         <div class="flex flex-row justify-center gap-2">
-            <img src="../icons/github-svgrepo-com(1).svg" alt="log in via github"
+            <img src="../public/icons/github-svgrepo-com(1).svg" alt="log in via github"
                  class="w-10 h-10"
             />
-            <img src="../icons/apple-svgrepo-com.svg" alt="log in via github"
+            <img src="../public/icons/apple-svgrepo-com.svg" alt="log in via github"
                  class="w-10 h-10"
             />
-            <img src="../icons/google-svgrepo-com.svg" alt="log in via github"
+            <img src="../public/icons/google-svgrepo-com.svg" alt="log in via github"
                  class="w-10 h-10"
             />
-            <img src="../icons/facebook-f-svgrepo-com.svg" alt="log in via github"
+            <img src="../public/icons/facebook-f-svgrepo-com.svg" alt="log in via github"
                  class="w-10 h-10"
             />
-            <img src="../icons/gitlab-svgrepo-com(1).svg" alt="log in via github"
+            <img src="../public/icons/gitlab-svgrepo-com(1).svg" alt="log in via github"
                  class="w-10 h-10"
             />
         </div>

src/main/resources/templates/index.html

@@ -7,7 +7,12 @@
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="stylesheet" href="../out.css" type="text/css" />
+    <link
+      rel="stylesheet"
+      th:href="'public/out.css'"
+      href="../public/out.css"
+      type="text/css"
+    />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
@@ -20,12 +25,32 @@
       </p>
     <![endif]-->
     <main class="bg-blue-100 h-screen w-screen grid place-content-center">
-        <section>
+      <section>
-            <h1
+        <h1 class="text-2xl text-blue-600 font-bold tracking-wide uppercase">
-                class="text-2xl text-blue-600 font-bold tracking-wide uppercase"
+          Auth successful, yay
-            >Auth successful, yay</h1>
+        </h1>
-            <p>Here be some info</p>
+        <p>Here be some info</p>
-        </section>
+        <ul>
+          <li class="flex flex-row">
+            username:
+            <span class="flex-1 text-end" th:text="${userRecord.username}"
+              >some_username</span
+            >
+          </li>
+          <li class="flex flex-row">
+            email:
+            <span class="flex-1 text-end" th:text="${userRecord.email}"
+              >some_email</span
+            >
+          </li>
+          <li class="flex flex-row">
+            created:
+            <span class="flex-1 text-end" th:text="${userRecord.created}"
+              >some_date</span
+            >
+          </li>
+        </ul>
+      </section>
     </main>
   </body>
 </html>

src/main/scala/example/AuthService.scala

@@ -35,13 +35,12 @@ case class AuthService()(implicit cc: castor.Context, log: cask.Logger)
         val refreshedSession = pocketbaseApi.refreshSession(jwt)
         refreshedSession match {
           case Right(freshAuth) =>
-            val indexHtml = s"""
+            val context = new PageContext()
-<h1>Ok, good</h1>
+            context.setVariable("userRecord", freshAuth.record)
-<p>user should be already created, current jwt : ${freshAuth.token}</p>
+
-<p>the account is on ${freshAuth.record.email} and ${freshAuth.record.username}</p>
+            val indexPage = templateEngine.process("index", context)
-"""
             cask.Response(
-              indexHtml,
+              indexPage,
               headers = Seq("Content-Type" -> "text/html;charset=UTF-8"),
               cookies =
                 Seq(cask.Cookie(name = authCookieName, value = freshAuth.token))
@@ -167,10 +166,12 @@ case class AuthService()(implicit cc: castor.Context, log: cask.Logger)
           )
         )
     }
-
     okMessageFirst
   }
 
+  @cask.staticResources("/public")
+  def servePublicResources() = "public"
+
   initialize()
 }