diff options
| -rw-r--r-- | main.css | 24 | ||||
| -rw-r--r-- | src/Main.purs | 27 | ||||
| -rw-r--r-- | templates/auth/index.html | 15 |
3 files changed, 64 insertions, 2 deletions
@@ -313,3 +313,27 @@ a.lcolonq-button-link :active { .lcolonq-menu-box-long { grid-row-end: span 2; } + +/* auth */ +#lcolonq-auth { + 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-auth-box { + grid-row: 2; + grid-column: 2; + display: flex; + justify-content: center; + gap: 1rem; +} + +#lcolonq-auth-box h1 { + margin-top: 0rem; +} diff --git a/src/Main.purs b/src/Main.purs index 2e2553e..dd0ad07 100644 --- a/src/Main.purs +++ b/src/Main.purs @@ -35,6 +35,7 @@ import Web.Event.Event as Ev import Web.Event.EventTarget as Ev.Tar import Web.HTML as HTML import Web.HTML.HTMLDocument as HTML.Doc +import Web.HTML.HTMLInputElement as HTML.Input import Web.HTML.Window as HTML.Win maybeToArray :: forall a. Maybe a -> Array a @@ -93,6 +94,11 @@ 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 +getValue :: forall m. MonadEffect m => DOM.Element -> m String +getValue e = case HTML.Input.fromElement e of + Just inp -> liftEffect $ HTML.Input.value inp + Nothing -> liftEffect $ throw "element is not an input" + addClass :: forall m. MonadEffect m => String -> DOM.Element -> m Unit addClass c e = do cl <- liftEffect $ DOM.El.classList e @@ -226,6 +232,25 @@ mainMenu = launchAff_ do mainAuth :: Effect Unit mainAuth = launchAff_ do liftEffect $ log "hello from auth" + form <- byId "lcolonq-auth-form" + listen form "submit" \ev -> launchAff_ do + liftEffect $ Ev.preventDefault ev + usernameInp <- byId "lcolonq-auth-username" + passwordInp <- byId "lcolonq-auth-password" + user <- getValue usernameInp + pass <- getValue passwordInp + { text: resp } <- fetch ("/api/firstfactor") + { method: POST + , headers: { "Content-Type": "application/json" } + , body: fold + [ "{\"username\":\"", user + , "\",\"password\":\"", pass + , "\"}" + ] + } + res <- resp + liftEffect $ log res + pure unit main :: Effect Unit main = case Config.mode of @@ -236,5 +261,5 @@ main = case Config.mode of "button" -> mainButton "register" -> mainRegister "menu" -> mainMenu - "auth" -> mainMenu + "auth" -> mainAuth _ -> throw $ "unknown mode: " <> Config.mode diff --git a/templates/auth/index.html b/templates/auth/index.html index d150889..dfb7101 100644 --- a/templates/auth/index.html +++ b/templates/auth/index.html @@ -13,6 +13,19 @@ CONFIG_SUBST <script type="module" src="./main.js"></script> </head> <body id="lcolonq-auth"> - this is the auth page + <div id="lcolonq-auth-box"> + <h1>log in</h1> + <form id="lcolonq-auth-form"> + <div> + <label>username:</label> + <input id="lcolonq-auth-username" type="text"> + </div> + <div> + <label>password:</label> + <input id="lcolonq-auth-password" type="password"> + </div> + <input type="submit" value="log in now!!"> + </form> + </div> </body> </html> |