design.kv

<LoginScreen>: #create a screen
    GridLayout: #widget for creating a grid
        cols:1
        GridLayout:#one column
            cols:1
            padding: 15, 15 #padding around
            spacing: 20, 20 #space between widgetes
            Label: #Create a label for the page
                text: "User Login" #text for the label
                font_size: '20sp' #font of 20 pixel (but need to pass a string = sp)
            TextInput: #Create a input box for the user
                id: username
                hint_text:"Username" #text in the box
                size_hint: 0.3, 0.5
            TextInput:
                id: password
                hint_text:"Password"
                password:True
                size_hint: 0.3, 0.5
            RelativeLayout: #to create a button with a size not depedent to the GridLayout
                Button: #create a button
                    text:"Login" #text on the button
                    on_press: root.login(root.ids.username.text, root.ids.password.text)
                    size_hint: 0.3, 0.5
                    pos_hint:{'center_x':0.5, 'center_y':0.6}
            Label:
                id: login_wrong
                text:""
        GridLayout: #second half of the app as a 2 columns layot
            cols:2
            size_hint: 0.2, 0.2 #20% of the main GridLayout
            padding: 10, 10
            spacing: 10, 0
            Button:
                text:"Forgot Password?"
                on_press: root.forget_password()
                background_color: 1, 1, 1, 0
                opacity:1 if self.state =='normal' else 0.3
                color: 0.1, 0.7, 1, 1
            Button:
                text:"Sign Up"
                on_press: root.sign_up() #root: refer to the class of the rule widgetes where it is placed. Any time the sign up button is pressed it calls the sign_up method in the .py file
                background_color: 1, 1, 1, 0
                opacity:1 if self.state =='normal' else 0.6
                color: 0.1, 0.7, 1, 1

<SignUpScreen>: #create the sign up page
    GridLayout:
        cols: 1
        padding: 20, 20
        spacing: 20, 30
        Label:
            text:"Sign up!!"
            font_size: '20sp'
        TextInput:
            id: username
            hint_text: "Username"
            size_hint: 0.3, 0.3
        TextInput:
            id: password
            hint_text: "Password"
            size_hint: 0.3, 0.3
        Button:
            text:"Sign Up"
            on_press: root.add_user(root.ids.username.text, root.ids.password.text) #get back the text that the user entered in the text boxes
            size_hint: 0.3, 0.4

<SignUpScreenSuccess>:
    GridLayout:
        cols:1
        padding: 20, 0
        spacing: 20, 0
        Label:
            text:"Sign up successfull!"
            font_size: '20sp'
        RelativeLayout:
            Button:
                text: "Login page"
                on_press: root.login_back()
                size_hint: 0.4, 0.2
                pos_hint:{'center_x':0.5, 'center_y':0.6}

<ForgottenPassword>:
    GridLayout:
        cols:1
        padding: 20, 0
        spacing: 20, 0
        Label:
            text: "Insert Username:"
            font_size: '20sp'
        TextInput:
            id:username_password
            hint_text: "Username"
            size_hint: 0.3, 0.5
        RelativeLayout:
            Button:
                text:"Password:"
                on_press: root.check_password(root.ids.username_password.text)
                size_hint: 0.3, 0.5
                pos_hint:{'center_x':0.5, 'center_y':0.6}
        Label:
            id:show_password
            text:""
        RelativeLayout:
            Button:
                text: "Login page"
                on_press: root.forgot_password_back()
                size_hint: 0.3, 0.5
                pos_hint:{'center_x':0.5, 'center_y':0.6}

<LoginScreenSuccess>:
    GridLayout:
        cols:1
        padding: 30, 40
        spacing: 30, 40
        RelativeLayout:
            ImageButton:
                source:'logout_hover.png' if self.hovered else 'logout_nothover.png'
                on_press: root.log_out()
                size_hint: 0.35, 0.35
                pos_hint: {'center_x': 0.9, 'center_y': 0.7}
        Label:
            text:"How do you feel?"
            font_size: '20pt'
        TextInput:
            id: feeling
            hint_text:"Things to try: happy, sad, unloved...."
        RelativeLayout:
            Button:
                text:"Go head!"
                on_press: root.get_quote(root.ids.feeling.text)
                size_hint: 0.3, 0.5
                pos_hint:{'center_x':0.5, 'center_y':0.6}
        ScrollView:
            Label:
                id: quote
                text:""
                text_size: self.width, None #resize the text with the width of the widget, the height is higher than the widget
                size_hint_y: None #height is not as the Label
                height: self.texture_size[1] #the label height is dinamic with the text. self.texture_size[0] will addapt the width with the text size


<RootWidget>: #Rule: invisible widget that take records of all the screen of the app
    LoginScreen: #name for the screen
        name: "login_screen"
    SignUpScreen:
        name: "sign_up_screen"
    SignUpScreenSuccess:
        name:"sign_up_screen_success"
    ForgottenPassword:
        name:"forget_password_screen"
    LoginScreenSuccess:
        name: "loging_screen_success"