From 78223d43d02d20996003e12fe2c51ae1072d55fa Mon Sep 17 00:00:00 2001 From: LLLL Colonq Date: Thu, 14 Nov 2024 21:33:19 -0500 Subject: Registration page --- .gitignore | 1 + Makefile | 63 +++++++++++++++++-------- assets/mrred.png | Bin 0 -> 768 bytes config/deploy.m4 | 2 + config/extension.js | 2 +- config/test.m4 | 2 +- flake.nix | 17 +++++++ main.css | 108 +++++++++++++++++++++++++++++++++++++++++++ src/Auth.js | 15 +++--- src/Main.purs | 87 +++++++++++++++++++++++++++++++--- templates/api/register.html | 39 ++++++++++++++++ templates/button.html | 17 ------- templates/index.html | 40 ---------------- templates/obs.html | 18 -------- templates/pubnix/button.html | 23 +++++++++ templates/pubnix/index.html | 41 ++++++++++++++++ templates/pubnix/obs.html | 18 ++++++++ 17 files changed, 383 insertions(+), 110 deletions(-) create mode 100644 assets/mrred.png create mode 100644 templates/api/register.html delete mode 100644 templates/button.html delete mode 100644 templates/index.html delete mode 100644 templates/obs.html create mode 100644 templates/pubnix/button.html create mode 100644 templates/pubnix/index.html create mode 100644 templates/pubnix/obs.html diff --git a/.gitignore b/.gitignore index 335239a..4b01812 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +result .direnv .psc-ide-port main.js diff --git a/Makefile b/Makefile index b178e8f..c5ca39a 100644 --- a/Makefile +++ b/Makefile @@ -1,45 +1,70 @@ -.PHONY: all dist deploy extension clean +.PHONY: all dist clean api deploy_pubnix pubnix extension -TEMPLATES=$(shell ls templates) +TEMPLATES_API=$(shell ls templates/api) +TEMPLATES_PUBNIX=$(shell ls templates/pubnix) -all: dist $(addprefix dist/test/,$(TEMPLATES)) dist/test/assets dist/test/main.js dist/test/main.css - -deploy: dist $(addprefix dist/deploy/,$(TEMPLATES)) dist/deploy/assets dist/deploy/main.js dist/deploy/main.css - rsync -av dist/deploy/ "pub.colonq.computer:~/public_html/" +all: api pubnix extension dist: - mkdir -p dist/test - mkdir -p dist/deploy + mkdir -p dist/api/test + mkdir -p dist/api/deploy + mkdir -p dist/pubnix/test + mkdir -p dist/pubnix/deploy main.js: $(shell find src) purs-nix bundle -dist/%/assets: $(shell find assets) dist +# api +deploy_api: dist $(addprefix dist/api/deploy/,$(TEMPLATES_API)) dist/api/deploy/assets dist/api/deploy/main.js dist/api/deploy/main.css + +api: dist $(addprefix dist/api/test/,$(TEMPLATES_API)) dist/api/test/assets dist/api/test/main.js dist/api/test/main.css + +dist/api/%/main.js: main.js dist + cp $< $@ + +dist/api/%/main.css: main.css dist + cp $< $@ + +dist/api/%/assets: $(shell find assets) dist rm -rf $@ mkdir -p $@ cp -r assets/* $@ -dist/%/main.js: main.js dist - cp $< $@ +define GEN_RULE_API +dist/api/%/$(template): config/%.m4 templates/api/$(template) + sh -c "m4 $$^ >$$@" +endef +$(foreach template,$(TEMPLATES_API), $(eval $(GEN_RULE_API))) -dist/extension/main.css: extension/main.css dist - cp $< $@ +# pubnix +deploy_pubnix: dist $(addprefix dist/pubnix/deploy/,$(TEMPLATES_PUBNIX)) dist/pubnix/deploy/assets dist/pubnix/deploy/main.js dist/pubnix/deploy/main.css + rsync -av dist/pubnix/deploy/ "pub.colonq.computer:~/public_html/" + +pubnix: dist $(addprefix dist/pubnix/test/,$(TEMPLATES_PUBNIX)) dist/pubnix/test/assets dist/pubnix/test/main.js dist/pubnix/test/main.css -dist/%/main.css: main.css dist +dist/pubnix/%/main.js: main.js dist cp $< $@ -dist/%/index.html: config/%.m4 dist index-template.html - sh -c "m4 $< >$@" +dist/pubnix/%/main.css: main.css dist + cp $< $@ +dist/pubnix/%/assets: $(shell find assets) dist + rm -rf $@ + mkdir -p $@ + cp -r assets/* $@ -define GEN_RULE -dist/%/$(template): config/%.m4 templates/$(template) +define GEN_RULE_PUBNIX +dist/pubnix/%/$(template): config/%.m4 templates/pubnix/$(template) sh -c "m4 $$^ >$$@" endef -$(foreach template,$(TEMPLATES), $(eval $(GEN_RULE))) +$(foreach template,$(TEMPLATES_PUBNIX), $(eval $(GEN_RULE_PUBNIX))) +# extension extension: dist dist/extension/assets dist/extension/manifest.json dist/extension/background.js dist/extension/main.js dist/extension/main.css dist/extension/config.js +dist/extension/main.css: extension/main.css dist + cp $< $@ + dist/extension/manifest.json: extension/manifest.dhall dhall-to-json <$< >$@ diff --git a/assets/mrred.png b/assets/mrred.png new file mode 100644 index 0000000..966cd1b Binary files /dev/null and b/assets/mrred.png differ diff --git a/config/deploy.m4 b/config/deploy.m4 index 97fc61f..dba1e04 100644 --- a/config/deploy.m4 +++ b/config/deploy.m4 @@ -1,4 +1,6 @@ define(`CONFIG_SUBST', ` globalThis.mode = 0; globalThis.apiServer = "https://api.colonq.computer/api"; +globalThis.clientID = "q486jugzn2my4iw6l181o006ugye4j" +globalThis.authRedirectURL = "https://api.colonq.computer/register"; ') diff --git a/config/extension.js b/config/extension.js index 44b69d3..48502a0 100644 --- a/config/extension.js +++ b/config/extension.js @@ -1,2 +1,2 @@ -globalThis.mode = 1; +globalThis.mode = 2; globalThis.apiServer = "https://api.colonq.computer/api"; diff --git a/config/test.m4 b/config/test.m4 index 6d41963..4db341e 100644 --- a/config/test.m4 +++ b/config/test.m4 @@ -2,5 +2,5 @@ define(`CONFIG_SUBST', ` globalThis.mode = 0; globalThis.apiServer = "http://localhost:8000/api"; globalThis.clientID = "q486jugzn2my4iw6l181o006ugye4j" -globalThis.authRedirectURL = "http://localhost:8000"; +globalThis.authRedirectURL = "http://localhost:8000/register"; ') diff --git a/flake.nix b/flake.nix index 44fd451..a6a3701 100644 --- a/flake.nix +++ b/flake.nix @@ -33,6 +33,22 @@ srcs = [ "src" ]; }; bundt = purescript.bundle {}; + + bundleAPI = pkgs.stdenv.mkDerivation { + name = "bundt-bundle-api"; + src = ./.; + buildInputs = [ + (purescript.command {}) + pkgs.m4 + ]; + buildPhase = " + make deploy_api + "; + installPhase = '' + mkdir -p $out + cp -r dist/api/deploy/* $out/ + ''; + }; in { devShells.x86_64-linux.default = pkgs.mkShell { buildInputs = [ @@ -48,6 +64,7 @@ }; packages.x86_64-linux = { default = bundt; + inherit bundleAPI; }; }; } diff --git a/main.css b/main.css index 7714273..12dae61 100644 --- a/main.css +++ b/main.css @@ -16,6 +16,10 @@ html, body { width: 100%; } +.lcolonq-invisible { + visibility: hidden; +} + body.lcolonq-index { font-family: "Iosevka Comfy"; font-weight: bold; @@ -113,3 +117,107 @@ body.lcolonq-obs { .right { float: right; } + +body.lcolonq-button-body { + background-color: #eeeeee; + user-select: none; +} + +.lcolonq-button { + position: absolute; + height: 90vh; + width: 40vw; + object-fit: fill; + image-rendering: pixelated; + border: dotted #888888; + margin-top: 5vh; + margin-bottom: 5vh; + margin-left: 5vw; + margin-right: 5vw; +} + +a.lcolonq-button-link :hover { + background-color: #cccccc; +} + +a.lcolonq-button-link :active { + background-color: #aaaaaa; +} + +#lcolonq-button-green { + left: 0px; +} + +#lcolonq-button-red { + right: 0px; +} + +#lcolonq-register-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-register-box { + grid-row: 2; + grid-column: 2; + text-align: center; +} + +#lcolonq-register-link { + color: white; + background-color: #6441a5; + border-radius: 0.5rem; + padding: 10px; + cursor: pointer; + user-select: none; +} + +#lcolonq-register-link:hover { + background-color: #533094; +} + +#lcolonq-registered-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-registered-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; +} + +.lcolonq-registered-fieldname { + font-weight: bold; +} + +#lcolonq-register-error-container { + position: absolute; + top: 0px; + left: 0px; + display: grid; + width: 100%; + height: 100%; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr 1fr; +} + +#lcolonq-register-error-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; +} diff --git a/src/Auth.js b/src/Auth.js index 7254c40..81ddad9 100644 --- a/src/Auth.js +++ b/src/Auth.js @@ -30,16 +30,17 @@ function getFragmentQuery() { export const _getToken = (Just) => (Nothing) => (pair) => () => { const frag = getFragmentQuery(); const token = frag.get("id_token"); - if (token) { - document.cookie = `id_token=${token}; path=/; SameSite=Strict`; - } - let id_token = null; + document.location.hash = ""; + // if (token) { + // document.cookie = `id_token=${token}; path=/; SameSite=Strict`; + // } + // let id_token = null; let authnonce = null; for (let c of document.cookie.split("; ")) { const [k, v] = c.split("="); - if (k === "id_token") id_token = v; - else if (k === "authnonce") authnonce = v; + // if (k === "id_token") id_token = v; + if (k === "authnonce") authnonce = v; } - if (id_token && authnonce) return Just(pair(id_token)(authnonce)); + if (token && authnonce) return Just(pair(token)(authnonce)); return Nothing; }; diff --git a/src/Main.purs b/src/Main.purs index bb5fa57..a7c9726 100644 --- a/src/Main.purs +++ b/src/Main.purs @@ -5,12 +5,14 @@ import Prelude import Audio as Audio import Auth (AuthInfo, authHeader, getToken, startTwitchAuth) import Config as Config +import Data.String as String import Data.Array (head) import Data.Array as Array import Data.Foldable (fold) import Data.Maybe (Maybe(..)) import Data.Traversable (for, for_) import Data.Tuple (Tuple(..)) +import Data.HTTP.Method (Method(..)) import Effect (Effect) import Effect.Aff (Aff, launchAff_) import Effect.Class (class MonadEffect, liftEffect) @@ -91,6 +93,24 @@ appendText parent s = do setText :: forall m. MonadEffect m => DOM.Element -> String -> m Unit setText e s = liftEffect $ DOM.Node.setTextContent s $ DOM.El.toNode e +addClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit +addClass c e = do + cl <- liftEffect $ DOM.El.classList e + _ <- liftEffect $ DOM.DTL.add cl c + pure unit + +removeClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit +removeClass c e = do + cl <- liftEffect $ DOM.El.classList e + _ <- liftEffect $ DOM.DTL.remove cl c + pure unit + +toggleClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit +toggleClass c e = do + cl <- liftEffect $ DOM.El.classList e + _ <- liftEffect $ DOM.DTL.toggle cl c + pure unit + updateSubtitle :: Aff Unit updateSubtitle = do subtitle <- byId "lcolonq-subtitle" @@ -107,8 +127,12 @@ checkAuth auth = do } resp -mainHomepage :: Effect Unit -mainHomepage = launchAff_ do +mainApi :: Effect Unit +mainApi = launchAff_ do + pure unit + +mainPubnix :: Effect Unit +mainPubnix = launchAff_ do liftEffect $ log "hi" startModel marq <- byId "lcolonq-marquee" @@ -125,7 +149,7 @@ mainHomepage = launchAff_ do updateSubtitle subtitle <- byId "lcolonq-subtitle" listen subtitle "click" \_ev -> do - startTwitchAuth + -- startTwitchAuth launchAff_ updateSubtitle for_ (Array.range 0 6) \i -> do @@ -148,10 +172,59 @@ mainObs :: Effect Unit mainObs = launchAff_ do startModel +buttonPress :: String -> Aff Unit +buttonPress b = do + void $ fetch (Config.apiServer <> "/sentiment/" <> b) + { method: POST + } +mainButton :: Effect Unit +mainButton = launchAff_ do + liftEffect $ log "hello from button" + green <- byId "lcolonq-button-link-green" + listen green "click" \_ev -> do + liftEffect $ log "+2" + launchAff_ $ buttonPress "green" + red <- byId "lcolonq-button-link-red" + listen red "click" \_ev -> do + liftEffect $ log "-2" + launchAff_ $ buttonPress "red" + +mainRegister :: Effect Unit +mainRegister = launchAff_ do + liftEffect $ log "hello from registration page" + link <- byId "lcolonq-register-link" + getToken >>= case _ of + Just a@(Tuple t n) -> do -- if there's an auth token in the fragment, ask the API to register us + { text: resp } <- fetch (Config.apiServer <> "/register") + { headers: + { "Authorization": authHeader a + } + } + r <- resp + case String.split (String.Pattern " ") r of + [user, pass] -> do + container <- byId "lcolonq-registered-container" + removeClass "lcolonq-invisible" container + fieldUsername <- byId "lcolonq-registered-username" + setText fieldUsername user + fieldPassword <- byId "lcolonq-registered-password" + setText fieldPassword pass + _ -> do + container <- byId "lcolonq-register-error-container" + removeClass "lcolonq-invisible" container + _ -> do -- otherwise, show the button to register + container <- byId "lcolonq-register-container" + removeClass "lcolonq-invisible" container + listen link "click" \_ev -> do + liftEffect $ log "register" + startTwitchAuth + main :: Effect Unit main = case Config.mode of - 0 -> mainHomepage - 1 -> mainExtension - 2 -> mainObs - -- 3 -> mainButton + 0 -> mainApi + 1 -> mainPubnix + 2 -> mainExtension + 3 -> mainObs + 4 -> mainButton + 5 -> mainRegister _ -> throw "unknown mode" diff --git a/templates/api/register.html b/templates/api/register.html new file mode 100644 index 0000000..00ccb0c --- /dev/null +++ b/templates/api/register.html @@ -0,0 +1,39 @@ + + + + + + LCOLONQ Elite Registration + + + + + + +
+ +
+
+
+
+ registered! +
username:
+
password:
+
+
+
+
+
+
+

some kind of error occured, unable to register

+

bug clonk about it idk

+
+
+
+ + diff --git a/templates/button.html b/templates/button.html deleted file mode 100644 index e2f9fb0..0000000 --- a/templates/button.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - LCOLONQ Browser Source - - - - - - - - diff --git a/templates/index.html b/templates/index.html deleted file mode 100644 index 8827694..0000000 --- a/templates/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - LCOLONQ - - - - - - - - -
- LCOLONQ -
-
-
-
- - - - -
- - - - - - - - - - diff --git a/templates/obs.html b/templates/obs.html deleted file mode 100644 index 999035a..0000000 --- a/templates/obs.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - LCOLONQ Browser Source - - - - - - - - - diff --git a/templates/pubnix/button.html b/templates/pubnix/button.html new file mode 100644 index 0000000..17211eb --- /dev/null +++ b/templates/pubnix/button.html @@ -0,0 +1,23 @@ + + + + + + The Button + + + + + + + + + + + + + + diff --git a/templates/pubnix/index.html b/templates/pubnix/index.html new file mode 100644 index 0000000..bddb19f --- /dev/null +++ b/templates/pubnix/index.html @@ -0,0 +1,41 @@ + + + + + + LCOLONQ + + + + + + + + +
+ LCOLONQ +
+
+
+
+ + + + +
+ + + + + + + + + + diff --git a/templates/pubnix/obs.html b/templates/pubnix/obs.html new file mode 100644 index 0000000..b5c3c05 --- /dev/null +++ b/templates/pubnix/obs.html @@ -0,0 +1,18 @@ + + + + + + LCOLONQ Browser Source + + + + + + + + + -- cgit v1.2.3