singlebase-authui/index.html at dev · singlebase/singlebase-authui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue 3.2 + Web Component</title>

  <script type="module">
    import CreateClient from 'https://cdn.jsdelivr.net/npm/@singlebase/singlebase-js@0.3.1/+esm'
    const api_url = "http://127.0.0.1:5000/api/szitzmuq"
    const api_key = "glkboywp4manuuzn.UnQ5h3Aumu8vPQ3qp1JpILrjYwZJ5ppkFpOKsmhvDffXuJ9ef5yAVnVWXqyX3iVjCL6Ol3vpJ9LbK-SX"

    const client = CreateClient({ api_url, api_key })

    // Initialize the AuthUI
    client.initAuthUI({
      showSignupButton: true,
      showForgotPasswordButton: true,
      showSocialLogin: false,
      showPasswordHint: true,
      hideLoginSuccessView: true,
      onAuthStateChange:({event, data}) => {
        console.log("AUTH STATE", event, data)
        switch(event) {
          case "SESSION_CHANGED":
            break

          case "ACCOUNT_CREATED":
            break

          case "SIGNED_IN":
            break

          case "SIGNED_OUT":
            break

          case "USER_UPDATED":
            break

          default:
            break
        }
      },
    })
    // const el = ""
    // el.onAuthStateChange(({event, data}) => {

    // })

  </script>


</head>

<body class="bg-gre--en-200">
  <h1>Login Web Component</h1>

  <div class="p-4 mx-auto max-w-lg">

    <singlebase-authui id="authui" view="account"></singlebase-authui>

  </div>

    <script type="module" src="/src/main.ts"></script>

    <script>
      setTimeout(() => {
        const el = document.querySelector("#authui")
        console.log("E", el)
        el.on("SIGNED_IN", user => {
          el.hideUI()
          console.log("USER HAS SIGNED IN", user)
        })

        el.on("SIGNED_OUT", () => {
          console.log("The user has signed out")
        })
      }, 300)

    </script>

    <!-- <script type="module" src="./dist/singlebase-authui.js"></script> -->
</body>

</html>