Fixing Telegram Auth wrapper

orchestr7 · Sep 7, 2024 · 1cfe6a1 · 1cfe6a1
1 parent f846126
commit 1cfe6a1
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 33 deletions.
diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt
@@ -9,13 +9,11 @@ import ru.posidata.views.utils.internals.Selection.QUESTION
 import ru.posidata.views.utils.internals.Selection.ANSWER
 import ru.posidata.views.utils.internals.Selection.RESULTS
 import ru.posidata.views.utils.externals.particles.Particles
-import ru.posidata.views.utils.externals.telegram.TLoginButton
+import ru.posidata.views.utils.externals.telegram.User
 import web.cssom.*
-import web.html.HTMLDivElement
-
-val telegramWrapperRef: MutableRefObject<HTMLDivElement> = useRef(null)
 
 val mainView = FC {
+
     Particles::class.react {
         id = "tsparticles"
         url = "${kotlinx.browser.window.location.origin}/particles.json"
@@ -26,30 +24,16 @@ val mainView = FC {
     val (answers, setAnswers) = useState(MutableList(12) { NONE })
     val (pokemonId, setPokemonId) = useState(0)
     val (uniqueRandom, setUniqueRandom) = useState<List<Int>>(listOf())
+    val (user, setUser) = useState<User?>(null)
 
     div {
-
         className = ClassName("full-width-container")
         div {
             className = ClassName("row justify-content-center align-items-center")
             style = jso {
                 minHeight = "100vh".unsafeCast<MinHeight>()
             }
 
-            TLoginButton {
-                botName = "PosiDataBot"
-                buttonSize = "large"
-                onAuthCallback = { user ->
-                    console.log(user.hash)
-                }
-                redirectUrl = null
-                cornerRadius = 15.0
-                requestAccess = "write"
-                usePic = null
-                lang = null
-                additionalClassNames = ""
-            }
-
             div {
                 id = "back"
                 className = ClassName("card col-xl-4 col-lg-5 col-md-7 col-sm-8 col-12")
@@ -59,10 +43,6 @@ val mainView = FC {
                     boxShadow = "10px 10px 20px rgba(0, 0, 0, 0.5)".unsafeCast<BoxShadow>()
                 }
 
-                div {
-                    ref = telegramWrapperRef
-
-                }
                 headerRow {}
 
                 div {
@@ -89,6 +69,7 @@ val mainView = FC {
                             this.setSelection = setSelection
                             this.uniqueRandom = uniqueRandom
                             this.setUniqueRandom = setUniqueRandom
+                            this.user = user
                         }
 
                         ANSWER -> {
@@ -109,6 +90,7 @@ val mainView = FC {
                                 this.setAnswers = setAnswers
                                 this.setUniqueRandom = setUniqueRandom
                                 this.setSelection = setSelection
+                                this.user = user
                             }
                         }
                     }

diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/QuestionCard.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/QuestionCard.kt
@@ -12,6 +12,7 @@ import ru.posidata.views.components.ResourceType.BIG_DATA
 import ru.posidata.views.components.ResourceType.POKEMON
 import ru.posidata.views.components.Resources
 import ru.posidata.views.components.neonLightingText
+import ru.posidata.views.utils.externals.telegram.User
 import ru.posidata.views.utils.internals.Answer
 import ru.posidata.views.utils.internals.Selection
 import web.cssom.*
@@ -164,4 +165,6 @@ external interface QuestionCard : Props {
 
     var setUniqueRandom: StateSetter<List<Int>>
     var uniqueRandom: List<Int>
+
+    var user: User?
 }
diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/ResultCard.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/ResultCard.kt
@@ -15,6 +15,7 @@ import react.dom.html.ReactHTML.img
 import react.useState
 import ru.posidata.views.utils.externals.fontawesome.faGithub
 import ru.posidata.views.utils.externals.fontawesome.fontAwesomeIcon
+import ru.posidata.views.utils.externals.telegram.User
 import ru.posidata.views.utils.internals.Answer
 import ru.posidata.views.utils.internals.Answer.NONE
 import ru.posidata.views.utils.internals.Selection
@@ -117,4 +118,5 @@ external interface ResultProps : Props {
     var setCounter: StateSetter<Int>
     var setAnswers: StateSetter<MutableList<Answer>>
     var setUniqueRandom: StateSetter<List<Int>>
+    var user: User?
 }
diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt
@@ -7,6 +7,8 @@ import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.h1
 import react.dom.html.ReactHTML.h6
 import react.dom.html.ReactHTML.img
+import ru.posidata.views.utils.externals.telegram.TLoginButton
+import ru.posidata.views.utils.externals.telegram.User
 import ru.posidata.views.utils.internals.Selection
 import web.cssom.*
 
@@ -49,7 +51,8 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
                         "Изначальная идея родилась из "
                         )
                 a {
-                    href = "https://docs.google.com/forms/d/e/1FAIpQLScRsfRHXPTuEXdNvUcI8DzJIU5iazqlpksWucPF0d8l2ztkkA/viewform"
+                    href =
+                        "https://docs.google.com/forms/d/e/1FAIpQLScRsfRHXPTuEXdNvUcI8DzJIU5iazqlpksWucPF0d8l2ztkkA/viewform"
                     className = ClassName("text-info")
                     +"этой"
                 }
@@ -74,6 +77,37 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
 
             }
 
+            if (props.user == null) {
+                TLoginButton {
+                    botName = "PosiDataBot"
+                    buttonSize = "large"
+                    onAuthCallback = { user ->
+                        val feUser = User(
+                            authDate = user.auth_date,
+                            firstName = user.first_name,
+                            lastName = user.last_name,
+                            hash = user.hash,
+                            id = user.id,
+                            photoUrl = user.photo_url,
+                            username = user.username,
+                        )
+                        props.setUser(
+                            feUser
+                        )
+                    }
+                    redirectUrl = null
+                    cornerRadius = 15.0
+                    requestAccess = "write"
+                    usePic = null
+                    lang = null
+                    additionalClassNames = "d-flex justify-content-center zIndex1000"
+                }
+            } else {
+                h6 {
+                    "Привет, ${props.user?.username}"
+                }
+            }
+
             img {
                 className = ClassName("animate__animated animate__shakeX mt-1 border border-info border-5 img-glow3 ")
                 src = "img/pokemonVSBigData.jpeg"
@@ -93,4 +127,6 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
 
 external interface WelcomeCardProps : Props {
     var setSelection: StateSetter<Selection>
+    var user: User?
+    var setUser: StateSetter<User?>
 }
diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/utils/externals/telegram/TUser.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/utils/externals/telegram/TUser.kt
@@ -1,11 +1,15 @@
+@file:JsModule("react-telegram-auth")
+@file:JsNonModule
+
 package ru.posidata.views.utils.externals.telegram
 
-data class TUser(
-    val auth_date: Int,
-    val first_name: String,
-    val last_name: String?,
-    val hash: String,
-    val id: Int,
-    val photo_url: String?,
-    val username: String?
-)
+@JsName("TUser")
+external interface TUser {
+    var auth_date: Int
+    var first_name: String
+    var last_name: String?
+    var hash: String
+    var id: Int
+    var photo_url: String?
+    var username: String?
+}
diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/utils/externals/telegram/User.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/utils/externals/telegram/User.kt
@@ -0,0 +1,11 @@
+package ru.posidata.views.utils.externals.telegram
+
+data class User (
+    val authDate: Int,
+    val firstName: String,
+    val lastName: String?,
+    val hash: String,
+    val id: Int,
+    val photoUrl: String?,
+    val username: String?,
+)
diff --git a/frontend/src/jsMain/resources/scss/_background.scss b/frontend/src/jsMain/resources/scss/_background.scss
@@ -5,9 +5,12 @@
     background: linear-gradient(0deg, rgb(0, 85, 102), rgb(0, 55, 71)); /* Standard syntax */
 }
 
+
+
 html {
     height: 100%;
 }
+
 body {
     height: 100%;
     margin: 0;
@@ -34,3 +37,7 @@ body {
 .full-width-container .row {
     margin: 0;
 }
+
+.zIndex1000 {
+    z-index: 1000;
+}