From d50ee6969399dcaa758efa2761cc90423c4d5148 Mon Sep 17 00:00:00 2001 From: akuleshov7 Date: Sat, 7 Sep 2024 11:09:56 +0300 Subject: [PATCH] Fixing Telegram Auth wrapper --- .../kotlin/ru/posidata/views/main/MainView.kt | 30 ++++----------- .../ru/posidata/views/main/QuestionCard.kt | 3 ++ .../ru/posidata/views/main/ResultCard.kt | 2 + .../kotlin/ru/posidata/views/main/Welcome.kt | 38 ++++++++++++++++++- .../views/utils/externals/telegram/TUser.kt | 22 ++++++----- .../views/utils/externals/telegram/User.kt | 11 ++++++ .../jsMain/resources/scss/_background.scss | 7 ++++ 7 files changed, 80 insertions(+), 33 deletions(-) create mode 100644 frontend/src/jsMain/kotlin/ru/posidata/views/utils/externals/telegram/User.kt diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/MainView.kt index 73682e9..b127331 100644 --- 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 = useRef(null) val mainView = FC { + Particles::class.react { id = "tsparticles" url = "${kotlinx.browser.window.location.origin}/particles.json" @@ -26,9 +24,9 @@ val mainView = FC { val (answers, setAnswers) = useState(MutableList(12) { NONE }) val (pokemonId, setPokemonId) = useState(0) val (uniqueRandom, setUniqueRandom) = useState>(listOf()) + val (user, setUser) = useState(null) div { - className = ClassName("full-width-container") div { className = ClassName("row justify-content-center align-items-center") @@ -36,20 +34,6 @@ val mainView = FC { minHeight = "100vh".unsafeCast() } - 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() } - div { - ref = telegramWrapperRef - - } headerRow {} div { @@ -76,6 +56,8 @@ val mainView = FC { Selection.NONE -> { welcomeCard { this.setSelection = setSelection + this.setUser = setUser + this.user = user } } @@ -89,6 +71,7 @@ val mainView = FC { this.setSelection = setSelection this.uniqueRandom = uniqueRandom this.setUniqueRandom = setUniqueRandom + this.user = user } ANSWER -> { @@ -109,6 +92,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 index 5f439b7..3d3a4e8 100644 --- 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> var uniqueRandom: List + + 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 index c57ef68..dbfc3c9 100644 --- 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 var setAnswers: StateSetter> var setUniqueRandom: StateSetter> + var user: User? } \ No newline at end of file diff --git a/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt b/frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt index 8b4aa93..a44d1f2 100644 --- 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 { 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 { 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 { props -> external interface WelcomeCardProps : Props { var setSelection: StateSetter + var user: User? + var setUser: StateSetter } 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 index b32bc32..ed84817 100644 --- 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? -) \ No newline at end of file +@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 new file mode 100644 index 0000000..979bbf1 --- /dev/null +++ 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 index d167cf4..8a6a4e3 100644 --- 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; +}