Making a pretty social sign-in page

So far, we haven't paid much attention to making our application look nice; after all, this book is about Go and not user interface development. However, there is no excuse for building ugly apps, and so we will build a social sign-in page that is as pretty as it is functional.

Bootstrap is a frontend framework for developing responsive projects on the Web. It provides CSS and JavaScript code that solve many user interface problems in a consistent and good-looking way. While sites built using Bootstrap tend to look the same (although there are a plenty of ways in which the UI can be customized), it is a great choice for early versions of apps or for developers who don't have access to designers.

Tip

If you build your application using the semantic standards set forth by Bootstrap, it will become easy for you to make a Bootstrap theme for your site or application, and you know it will slot right into your code.

We will use the version of Bootstrap hosted on a CDN so we don't have to worry about downloading and serving our own version through our chat application. This means that in order to render our pages properly, we will need an active Internet connection even during development.

If you prefer to download and host your own copy of Bootstrap, you can do so. Keep the files in an assets folder and add the following call to your main function (it uses http.Handle to serve the assets via your application):

http.Handle("/assets/", http.StripPrefix("/assets",    http.FileServer(http.Dir("/path/to/assets/"))))

Note

Notice how the http.StripPrefix and http.FileServer functions return objects that satisfy the http.Handler interface as per the decorator pattern that we implement with our MustAuth helper function.

In main.go, let's add an endpoint for the login page:

http.Handle("/chat", MustAuth(&templateHandler{filename:  "chat.html"})) 
http.Handle("/login", &templateHandler{filename: "login.html"}) 
http.Handle("/room", r)

Obviously, we do not want to use the MustAuth method for our login page because it will cause an infinite redirection loop.

Create a new file called login.html inside our templates folder and insert the following HTML code:

<html> 
  <head> 
    <title>Login</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
     /bootstrap/3.3.6/css/bootstrap.min.css"> 
  </head> 
  <body> 
    <div class="container"> 
      <div class="page-header"> 
        <h1>Sign in</h1> 
      </div> 
      <div class="panel panel-danger"> 
        <div class="panel-heading"> 
          <h3 class="panel-title">In order to chat, you must be signed
          in</h3> 
        </div> 
        <div class="panel-body"> 
          <p>Select the service you would like to sign in with:</p> 
          <ul> 
            <li> 
              <a href="/auth/login/facebook">Facebook</a> 
            </li> 
            <li> 
              <a href="/auth/login/github">GitHub</a> 
            </li> 
            <li> 
              <a href="/auth/login/google">Google</a> 
            </li> 
          </ul> 
        </div> 
      </div> 
    </div> 
  </body> 
</html>

Restart the web server and navigate to http://localhost:8080/login. You will notice that it now displays our Sign in page:

Making a pretty social sign-in page

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.21.152