Help with making an login screen.

General
1

Hello, I am a beginner and trying since a month to get an login screen programmed.
I want to ask you to help me and give me some example.

I want 2 input boxes, when you touch it, the input box must change the color in a darker color.
Further I want to save the input in two different variables cause the different input, in password and username.
I have more things but this is for the first step enough.

Thank you for helping me!

2

This may help

http://codea.io/talk/discussion/5670/help-with-text-boxes-and-login-page-for-trivia-app

3

@SvCoder Here’s something I had, but it isn’t exactly what you’re asking for. You could make minor changes to suit your needs. Tap a box then enter a value. You can press RETURN to accept the input or just tap another box. The values you input are in the variable self.str for each input box. You can add as many input boxes as you want.


function setup()
    dtab={}
    table.insert(dtab,input(200,HEIGHT-100,150,30,"username"))    
    table.insert(dtab,input(200,HEIGHT-200,150,30,"password"))
    showKeyboard()   
end

function draw()
    background(40, 40, 50)
    for d=1,#dtab do
        dtab[d]:draw()
    end
end

function keyboard(k)
    for d=1,#dtab do
        dtab[d]:keyboard(k)
    end
end

function touched(t)
    for d=1,#dtab do
        dtab[d]:touched(t)
    end    
end

input = class()

function input:init(x,y,w,h,n)
    self.x=x; self.y=y; self.width=w; self.height=h
    self.left=x-self.width/2; self.right=x+self.width/2;
    self.bottom=y-self.height/2; self.top=y+self.height/2
    self.color=color(143, 166, 172, 255)
    self.str=n
    self.selected=false
end

function input:draw()
    rectMode(CENTER)
    strokeWidth(0)
    if self.selected then
        stroke(255,0,0)
        strokeWidth(4)
    end
    fill(self.color)   
    rect(self.x,self.y,self.width,self.height)
    if self.str~="" then
        fill(10, 9, 9, 255)
        text(self.str,self.x,self.y)
    end
end

function input:touched(t)
    if t.state==BEGAN then
        if t.x>self.left and t.x<self.right then
            if t.y>self.bottom and t.y<self.top then
                for c=1,#dtab do
                    if dtab[c].selected then
                        buffer=dtab[c].str
                    end
                    dtab[c].selected=false
                end                
                self.selected=true
                self.str=""                
            end
        end
    end
end

function input:keyboard(k)
    if self.selected then
        if k==RETURN then
            self.selected=false
            buffer=self.str
        elseif k==BACKSPACE then
            self.str=string.sub(self.str,1,#self.str-1)
        else
          self.str=self.str..k
        end
    end
end
4

@dave1707 Thank you, but when I run this code, there only a dark blue background without fields, so what should I do to get the rect() on the screen?
I tried much but no result,

5

@SvCoder Sorry. I always use my iPad in the Portrait position, but since it was just a quick example, I didn’t think about Landscape. I change the above code to use either Portrait or Landscape mode. Try the above code again.