Drawing Login Details after input

,

I have this thing I am working on, and once you type something in, I need it to display it. How would I do that?
Code:

import "CoreLibs/ui"



local ui <const> = playdate.ui
local gfx <const> = playdate.graphics

local ui_background = gfx.image.new(400, 240)



function loginUISetup()
   gfx.pushContext(ui_background)

   onLoginUI = 1
   gfx.setLineWidth(4)

   gfx.drawText("*wasteof.money*", 10, 5)
   gfx.drawText("*Username* ⬅️", 25, 45)
   gfx.drawRoundRect(25, 70, 350, 40, 5)
   gfx.drawText("*Password* ➡️", 25, 125)
   gfx.drawRoundRect(25, 150, 350, 40, 5)
   local wasteoflogo = gfx.image.new("images/wasteof-logo", 20, 20, gfx.kColorBlack)
   wasteoflogo:draw(159, 10)
   gfx.fillRoundRect(25, 205, 170, 30, 5)
   gfx.fillRoundRect(205, 205, 170, 30, 5)
   playdate.graphics.setImageDrawMode(playdate.graphics.kDrawModeFillWhite)
   gfx.drawText("*Sign Up* Ⓐ", 75, 212)
   gfx.drawText('*Login* Ⓑ', 255, 212)
   gfx.popContext()
   gfx.drawText(username, 25, 80)
end


loginUISetup()


function playdate.update()
   gfx.clear()
   ui_background:draw(0, 0)

   if onLoginUI == 1 then
      if playdate.buttonIsPressed("left") then
         loginUIOn = 1
         playdate.keyboard.show()
      elseif playdate.buttonIsPressed("right") then
         loginUIOn = 2
         playdate.keyboard.show()
      elseif playdate.buttonJustPressed("a") then
         -- sign up function
      elseif playdate.buttonIsPressed("b") then
         -- login function
      end
   end

   function playdate.keyboard.keyboardDidHideCallback()
      gfx.clear()
      onLoginUI = 1
      if playdate.keyboard.keyboardDidHideCallback == true then
         if loginUIOn == 1 then
            username = playdate.keyboard.text
            gfx.drawText("username", 25, 80)
            print(username)
            --draw username
         elseif loginUIOn == 2 then
            password = playdate.keyboard.text
            print(password)
            --draw password with * as the text replacement
         end
      end
   end
end

Sorry, I am a noob and not great with the SDK even though I have read the docs top to bottom :stuck_out_tongue:

Maybe keyboardDidHideCallback is only called once, so you need to display the details in your main update loop.

At this point, it might make sense to look at a scene framework like roomy-playdate? This would allow better management of your screens/states.

Don’t know if this helps, but the quotation marks mark username as the text to draw. I think you want to draw what’s in the username variable:

gfx.drawText(username, 25, 80)