Login and Logout in HTML Template

Let’s create an application where the user will login in two ways: either with or without OTP, and log out on HTML form.

First of all, create a new file in the views folder named “login.html”.

../_images/loginfileviews.png

Inside login.html, create a login form containing the username, password, OTP Password input fields, and a submit button with the method of “POST”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login Form</title>
</head>
<body>
    <form method="POST">
        <!-- The assigned name attribute is equivalent to r.FormValue in
        Golang while the assigned value attribute is the value of the
        r.FormValue. (e.g. r.FormValue("request") = "login") -->
        <input type="text" name="username" placeholder="Username"><br>
        <input type="password" name="password" placeholder="Password"><br>
        <input type="text" name="otp_pass" placeholder="OTP Password"><br><br>
        <button type="submit" name="request" value="login">Login</button><br>
    </form>
</body>
</html>

Now create a new file in the handlers folder named “login.go”.

../_images/loginfilehandler.png

Inside login.go, let’s build a UserContext struct containing the User field that has a data type of a pointer of uadmin.User that is a built-in system model, an OTP field that has a data type of boolean, and a Message field that has a data type of string. We will use that in the later chapter of this tutorial.

package handlers

import (
    "net/http"
    "strings"

    "github.com/uadmin/uadmin"
)

// UserContext !
type UserContext struct {
    User    *uadmin.User
    OTP     bool
    Message string
}

Below the UserContext struct, create a LoginHandler function that creates a new URL path of “login” and passes the userContext data object to the login.html file.

// LoginHandler !
func LoginHandler(w http.ResponseWriter, r *http.Request) {
    // r.URL.Path creates a new path called /login
    r.URL.Path = strings.TrimPrefix(r.URL.Path, "/login")

    // Initialize the UserContext struct that we have created
    userContext := UserContext{}

    // Pass the userContext data object to the HTML file
    uadmin.HTMLContext(w, userContext, "views/login.html")
    return
}

Establish a connection in the main.go to the handlers by using http.HandleFunc. It should be placed before the StartServer.

import (
    "net/http"

    // Specify the username that you used inside github.com folder
    "github.com/username/project_name/handlers"

    "github.com/uadmin/uadmin"
)

func main() {
    // Some codes

    // Login Handler
    http.HandleFunc("/login/", handlers.LoginHandler)
}

Now run your application. Go to the login path (e.g. http://0.0.0.0:8080/login/) and see what happens.

../_images/loginform2.png