{"id":1769,"date":"2015-03-15T12:14:20","date_gmt":"2015-03-15T12:14:20","guid":{"rendered":"http:\/\/www.doanduyhai.com\/blog\/?p=1769"},"modified":"2017-08-10T16:46:17","modified_gmt":"2017-08-10T16:46:17","slug":"killrchat-front-end-layout","status":"publish","type":"post","link":"https:\/\/www.doanduyhai.com\/blog\/?p=1769","title":{"rendered":"KillrChat front end layout"},"content":{"rendered":"

In this blog post, I’ll introduce the general front end design for KillrChat<\/strong> and its REST API.<\/p>\n

If you have missed the previous posts on KillrChat<\/strong>, please go there<\/a><\/p>\n

The application is completely open-sourced, you can get it here<\/a><\/p>\n

<\/p>\n

I Front end design<\/h1>\n

The KillrChat<\/strong> front-end is built using AngularJS<\/strong> and Twitter Bootstrap<\/strong> theme and is designed as a single page application<\/em>.<\/p>\n

A Login page<\/h3>\n

The login screen is composed of a simple login form. You can tick the “Remember me” option to skip the login page every time you refresh you browser, as long as the remember-me cookie is still valid.<\/p>\n

\"Login<\/a>

Login Screen<\/p><\/div>\n

B Signup form<\/h3>\n

If you don’t have an account, you can create one quickly by filling a simple registration form. It is just a modal panel that appears as an overlay on the login screen.<\/p>\n

\"Registration<\/a>

Registration Form<\/p><\/div>\n

Some constraints are applied on the registration form:<\/p>\n

    \n
  1. the login should be an alpha-numeric character (_, – and . are allowed but not at the first position). The login should be of 2 characters minimum and 30 characters maximum<\/li>\n
  2. there is no particular requirement on the password (in term of complexity or length). It could be a future improvement to enforce strong password<\/li>\n
  3. login, password, firstname and lastname are mandatory fields. Email address and user bio are optional<\/li>\n<\/ol>\n

    After you successfully create your account, the registration form is removed and the login form is automatically filled with the login and password you entered during the account creation. This small optimisation makes the registration process as fast as possible.<\/p>\n

    \"Login<\/a>

    Login Form Auto Fill<\/p><\/div>\n

    C Main layout<\/h3>\n

    After logging into KillrChat<\/strong> you’ll land at the home page. The main layout consists of
    \n3 zones: <\/p>\n