Supabase Example (#174)

* Google Java Format

* removed unnecessary code from htmx-demo

* Login and Logout functionality added

---------

Co-authored-by: github-actions <>

Examples/htmx-ui-demo/DashboardApp.java

@@ -1,26 +1,24 @@
 package com.edgechain;
 
-// SOURCES ./ChatMessage.java
-// SOURCES ./MessageItem.java
-// SOURCES ./Chat.java
+//SOURCES ChatMessage.java
+//SOURCES MessageItem.java
+//SOURCES Chat.java
+//SOURCES User.java
 
-// FILES resources/templates/index.html=./index.html
-// FILES resources/templates/fragments.html=./fragments.html
+//FILES resources/templates/index.html=./index.html
+//FILES resources/templates/fragments.html=./fragments.html
 import com.edgechain.lib.openai.response.ChatCompletionResponse;
+import com.edgechain.lib.supabase.response.AuthenticatedResponse;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.http.MediaType;
-import com.edgechain.lib.configuration.RedisEnv;
-import org.springframework.context.annotation.Bean;
 import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.reactive.function.client.WebClient;
 
 import jakarta.servlet.http.HttpServletResponse;
-import org.springframework.http.MediaType;
+import jakarta.servlet.http.HttpServletRequest;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
-import org.springframework.web.reactive.function.client.WebClient;
 import reactor.core.publisher.Flux;
 
 import java.util.ArrayList;
@@ -40,23 +38,17 @@ public static void main(String[] args) {
     SpringApplication.run(DashboardApp.class, args);
   }
 
-  @Bean
-  public RedisEnv redisEnv() {
-    RedisEnv redisEnv = new RedisEnv();
-    redisEnv.setUrl("");
-    redisEnv.setPort(12285);
-    redisEnv.setUsername("");
-    redisEnv.setPassword("");
-    redisEnv.setTtl(3600); // Configuring ttl for HistoryContext;
-    return redisEnv;
-  }
-
   private StringBuilder currentContent;
   public List<MessageItem> messages = new ArrayList<>();
+  public List<Chat> chats = new ArrayList<>();
   private String Url = "http://localhost:8080/v1/examples/wiki-summary?query=";
 
   @GetMapping
-  public String index(Model model) {
+  public String index(Model model,HttpServletRequest request){
+    if((String)request.getSession().getAttribute("access_token") == null){
+      return "redirect:/login";
+    }
+
     addAttributeForIndex(model);
     return "index";
   }
@@ -121,5 +113,64 @@ public void addChat() {
     chats.add(new Chat("Chat 4", new ArrayList<MessageItem>()));
   }
 
-  public List<Chat> chats = new ArrayList<>();
+  @GetMapping("login")
+  public String logIn(){
+    return "signIn";
+  }
+
+  @GetMapping("signup")
+  public String singUp(){
+    return "signUp";
+  }
+
+  @GetMapping("signinlink")
+  public String signInLink(){
+    return "signInLink";
+  }
+
+  public User user = new User();
+
+  @PostMapping("signup")
+  public String signUpRequest(HttpServletRequest request){
+
+    user.email=request.getParameter("email");
+    user.password= request.getParameter("password");
+
+    User info = webClient()
+      .post()
+      .uri("http://localhost:8080/v1/signup")
+      .contentType(MediaType.APPLICATION_JSON)
+      .body(Mono.just(user),User.class)
+      .retrieve()
+      .bodyToMono(User.class)
+      .block();
+
+    return "redirect:/signInLink";
+  }
+
+  @PostMapping("signin")
+  public String signInRequest(HttpServletRequest request){
+    user.email=request.getParameter("email");
+    user.password=request.getParameter("password");
+
+    AuthenticatedResponse authResponse = webClient()
+      .post()
+      .uri("http://localhost:8080/v1/login")
+      .contentType(MediaType.APPLICATION_JSON)
+      .body(Mono.just(user),User.class)
+      .retrieve()
+      .bodyToMono(AuthenticatedResponse.class)
+      .block();
+
+    HttpSession session = request.getSession();
+    session.setAttribute("access_token",authResponse.getAccess_token());
+
+    return "redirect:/";
+  }
+
+  @GetMapping("logout")
+  public String logOut(HttpServletRequest request){
+    request.getSession().setAttribute("access_token",null);
+    return "redirect:/login";
+  }
 }

Examples/htmx-ui-demo/User.java

@@ -0,0 +1,12 @@
+class User{
+  public String email;
+  public String password;
+
+  public User(String email,String password){
+    this.email=email;
+    this.password=password;
+  }
+
+  public User(){}
+
+}

Examples/htmx-ui-demo/templates/signIn.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org"
+      lang="en">
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta19
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Sign in - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="msapplication-TileColor" content=""/>
+    <meta name="theme-color" content=""/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!"/>
+    <meta name="canonical" content="https://preview.tabler.io/sign-in.html">
+    <meta name="twitter:image:src" content="https://preview.tabler.io/static/og.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview.tabler.io/static/og.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview.tabler.io/static/og.png">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- CSS files -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-flags.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-payments.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/demo.min.css">
+    <style>
+        @import url('https://rsms.me/inter/inter.css');
+        :root {
+            --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+        }
+        body {
+            font-feature-settings: "cv03", "cv04", "cv11";
+        }
+    </style>
+</head>
+<body  class=" d-flex flex-column">
+<script src="./dist/js/demo-theme.min.js?1685973381"></script>
+<div class="page page-center">
+    <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+            <a href="." class="navbar-brand navbar-brand-autodark">
+                <img src="./static/logo.svg" width="110" height="32" alt="Arakoo" class="navbar-brand-image">
+            </a>
+        </div>
+        <div class="card card-md">
+            <div class="card-body">
+                <h2 class="h2 text-center mb-4">Login to your account</h2>
+                <form th:action="@{/signin}" method="post" autocomplete="off" novalidate>
+                    <div class="mb-3">
+                        <label class="form-label">Email address</label>
+                        <input type="email" name="email" class="form-control" placeholder="[email protected]" autocomplete="off">
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label">
+                            Password
+                            <span class="form-label-description">
+                    <a href="./forgot-password.html">I forgot password</a>
+                  </span>
+                        </label>
+                        <div class="input-group input-group-flat">
+                            <input type="password" name="password" class="form-control"  placeholder="Your password"  autocomplete="off">
+                            <span class="input-group-text">
+                    <a href="#" class="link-secondary" title="Show password" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>
+                    </a>
+                  </span>
+                        </div>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-check">
+                            <input type="checkbox" class="form-check-input"/>
+                            <span class="form-check-label">Remember me on this device</span>
+                        </label>
+                    </div>
+                    <div class="form-footer">
+                        <button type="submit" class="btn btn-primary w-100">Sign in</button>
+                    </div>
+                </form>
+            </div>
+            <div class="hr-text">or</div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col"><a href="#" class="btn w-100">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                        Login with Github
+                    </a></div>
+                    <div class="col"><a href="#" class="btn w-100">
+                        <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
+                        Login with Twitter
+                    </a></div>
+                </div>
+            </div>
+        </div>
+        <div class="text-center text-secondary mt-3">
+            Don't have account yet? <a href="/signup" tabindex="-1">Sign up</a>
+        </div>
+    </div>
+</div>
+<!-- Libs JS -->
+<!-- Tabler Core -->
+<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/demo.min.js"></script>
+</body>
+</html>
+
+

Examples/htmx-ui-demo/templates/signInLink.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta19
+* @link https://tabler.io
+* Copyright 2018-2023 The Tabler Authors
+* Copyright 2018-2023 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Sign in link - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="msapplication-TileColor" content=""/>
+    <meta name="theme-color" content=""/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!"/>
+    <meta name="canonical" content="https://preview.tabler.io/sign-in-link.html">
+    <meta name="twitter:image:src" content="https://preview.tabler.io/static/og.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview.tabler.io/static/og.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview.tabler.io/static/og.png">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- CSS files -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-flags.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-payments.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/demo.min.css">
+    <style>
+        @import url('https://rsms.me/inter/inter.css');
+        :root {
+            --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+        }
+        body {
+            font-feature-settings: "cv03", "cv04", "cv11";
+        }
+    </style>
+</head>
+<body  class=" d-flex flex-column">
+<script src="./dist/js/demo-theme.min.js?1685973381"></script>
+<div class="page page-center">
+    <div class="container container-tight py-4">
+        <div class="text-center mb-4">
+            <a href="." class="navbar-brand navbar-brand-autodark">
+                <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+            </a>
+        </div>
+        <div class="text-center">
+            <div class="my-5">
+                <h2 class="h1">Check your inbox</h2>
+                <p class="fs-h3 text-secondary">
+                    We've sent you a magic link to <strong>[email protected]</strong>.<br />
+                    Please click the link to confirm your address.
+                </p>
+            </div>
+            <div class="text-center text-secondary mt-3">
+                Can't see the email? Please check the spam folder.<br />
+                Wrong email? Please <a href="/signup">re-enter your address</a>.
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Libs JS -->
+<!-- Tabler Core -->
+<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/demo.min.js"></script>
+</body>
+</html>