New UI merge in progress

18 files changed, 476 insertions, 483 deletions

diff --git a/templates/user/dashboard.tmpl b/templates/user/dashboard.tmpl
deleted file mode 100644
index 2cb19cef16..0000000000
--- a/templates/user/dashboard.tmpl
+++ /dev/null
@@ -1,102 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body-nav">
-    <div class="container">
-        <div class="btn-group pull-left" id="dashboard-switch">
-            <button type="button" class="btn btn-default">
-                <img src="{{.ContextUser.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                {{.ContextUser.Name}}
-            </button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                <span class="caret"></span>
-            </button>
-            <div class="dropdown-menu clone-group-btn no-propagation">
-                <ul id="dashboard-switch-menu" class="list-unstyled">
-                    <li{{if not .PageIsOrgDashboard}} class="checked"{{end}}>
-                        <a href="/">
-                            <i class="fa fa-check"></i>
-                            <img src="{{.SignedUser.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                            {{.SignedUser.Name}}
-                        </a>
-                    </li>
-                    {{range .Orgs}}
-                    <li{{if eq $.ContextUser.Id .Id}} class="checked"{{end}}>
-                        <a href="/org/{{.Name}}/dashboard">
-                            <i class="fa fa-check"></i>
-                            <img src="{{.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                            {{.Name}}
-                        </a>
-                    </li>
-                    {{end}}
-                    <li>
-                        <a href="/org/create">Create organization</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <ul class="nav nav-pills pull-right">
-            <li class="active"><a href="/{{if .PageIsOrgDashboard}}org/{{.ContextUser.Name}}/dashboard{{end}}">News Feed</a></li>
-            <li><a href="/{{if .PageIsOrgDashboard}}org/{{.ContextUser.Name}}/dashboard/{{end}}issues">Issues</a></li>
-            {{if .PageIsOrgDashboard}}<li><a href="/org/{{.ContextUser.Name}}/settings">Settings</a></li>{{end}}
-            <!-- <li><a href="/pulls">Pull Requests</a></li>
-            <li><a href="/stars">Stars</a></li> -->
-        </ul>
-    </div>
-</div>
-
-<div id="body" class="container" data-page="user">
-    {{if .HasInfo}}<div class="alert alert-info">{{.InfoMsg}}</div>{{end}}
-    <div id="feed-left" class="col-md-8">
-        <ul class="list-unstyled activity-list">
-        {{range .Feeds}}
-            <li>
-                <i class="icon fa fa-{{ActionIcon .OpType}}"></i>
-                <div class="info"><span class="meta">{{TimeSince .Created}}</span><br>{{ActionDesc . | str2html}}</div>
-                <span class="clearfix"></span>
-            </li>
-        {{else}}
-            <li>Oh. Looks like there isn't any activity here yet. Get Busy!</li>
-        {{end}}
-        </ul>
-    </div>
-    <div id="feed-right" class="col-md-4">
-        <div class="panel panel-default repo-panel">
-            <div class="panel-heading">{{if not .PageIsOrgDashboard}}Your {{end}}Repositories
-                <div class="btn-group pull-right" id="user-dashboard-repo-new">
-                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus-square"></i>New</button>
-                    <div class="dropdown-menu dropdown-menu-right">
-                       <ul class="list-unstyled">
-                           <li><a href="/repo/create"><i class="fa fa-book"></i>Repository</a></li>
-                           <li><a href="/repo/migrate"><i class="fa fa-clipboard"></i>Migration</a></li>
-                           <!-- <li><a href="#"><i class="fa fa-users"></i>Organization</a></li> -->
-                       </ul>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="panel-body">
-                <ul class="list-group">{{range .MyRepos}}
-                    <li class="list-group-item"><a href="/{{$.ContextUser.Name}}/{{.Name}}">
-                        <!-- <span class="stars pull-right"><i class="fa fa-star"></i>{{.NumStars}}</span> -->
-                        <i class="fa fa-book"></i>{{.Name}}{{if .IsPrivate}} <span class="label label-default">Private</span>{{end}}</a>
-                    </li>{{end}}
-                </ul>
-            </div>
-        </div>
-        
-        {{if not .PageIsOrgDashboard}}
-        <div class="panel panel-default repo-panel">
-            <div class="panel-heading">Collaborative Repositories</div>
-            <div class="panel-body">
-                <ul class="list-group">{{range .CollaborativeRepos}}
-                    <li class="list-group-item"><a href="/{{.Owner.Name}}/{{.Name}}">
-                        <!-- <span class="stars pull-right"><i class="fa fa-star"></i>{{.NumStars}}</span> -->
-                        <i class="fa fa-book"></i>{{.Name}}{{if .IsPrivate}} <span class="label label-default">Private</span>{{end}}</a>
-                    </li>{{end}}
-                </ul>
-            </div>
-        </div>
-        {{end}}
-    </div>
-</div>
-{{template "base/footer" .}}
diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
new file mode 100644
index 0000000000..e9027230a5
--- /dev/null
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -0,0 +1,142 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+{{template "user/dashboard/nav" .}}
+<div id="dashboard-wrapper">
+    <div id="dashboard" class="container">
+        <div id="dashboard-news" class="left grid-2-3">
+            {{range .Feeds}}
+            <div class="news clear">
+                <div class="avatar left">
+                    <img class="avatar-30" src="{{AvatarLink .GetActEmail}}" alt="">
+                </div>
+                <div class="content left {{if eq .GetOpType 5}}push-news{{end}}">
+                    <p class="text-bold">
+                        <a href="/{{.GetActUserName}}">{{.GetActUserName}}</a> 
+                        {{if eq .GetOpType 1}}
+                        {{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoLink | Str2html}}
+                        {{else if eq .GetOpType 5}}
+                        {{$.i18n.Tr "action.commit_repo" .GetRepoLink .GetBranch .GetBranch .GetRepoLink .GetRepoLink | Str2html}}
+                        {{else if eq .GetOpType 6}}
+                        {{ $index := index .GetIssueInfos 0}}
+                        {{$.i18n.Tr "action.create_issue" .GetRepoLink $index .GetRepoLink $index | Str2html}}
+                        {{else if eq .GetOpType 10}}
+                        {{ $index := index .GetIssueInfos 0}}
+                        {{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoLink $index | Str2html}}
+                        {{end}}
+                    </p>
+                    {{if eq .GetOpType 5}}
+                    <div class="news-content content">
+                        <ul class="list-no-style">
+                            {{ $push := ActionContent2Commits .}}
+                            {{ $repoLink := .GetRepoLink}}
+                            {{range $push.Commits}}
+                            <li><img src="{{AvatarLink .AuthorEmail}}?s=16"> <a href="/{{$repoLink}}/commit/{{.Sha1}}">{{ShortSha .Sha1}}</a> {{.Message}}</li>
+                            {{end}}
+                        </ul>
+                    </div>
+                    {{else if eq .GetOpType 6}}
+                    <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+                    {{else if eq .GetOpType 10}}
+                    <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+                    {{end}}
+                    <p class="news-time text-italic">{{TimeSince .GetCreate $.i18n.Lang}}</p>
+                </div>
+                <i class="mega-octicon octicon-{{ActionIcon .GetOpType}} right"></i>
+            </div>
+            {{end}}
+        </div>
+        <div id="dashboard-sidebar" class="right grid-1-3">
+            <ul id="dashboard-sidebar-menu" class="menu menu-line">
+                <li class="js-tab-nav js-tab-nav-show first" data-tab-target="#dashboard-my-repo"><a href="#">{{.i18n.Tr "repository"}}</a></li>
+                <li class="js-tab-nav" data-tab-target="#dashboard-my-org"><a href="#">{{.i18n.Tr "organization"}}</a></li>
+                <li class="js-tab-nav last" data-tab-target="#dashboard-my-mirror"><a href="#">{{.i18n.Tr "mirror"}}</a></li>
+                <li class="drop right">
+                    <button class="btn btn-green text-bold" id="dashboard-new-repo">
+                        <i class="octicon octicon-plus"></i>
+                    </button>
+                    <ul class="menu menu-vertical drop-down" id="dashboard-new-repo-menu">
+                        <li><a href="/repo/create"><i class="octicon octicon-repo-create"></i>{{.i18n.Tr "new_repo"}}</a></li>
+                        <li><a href="/org/create"><i class="octicon octicon-organization"></i>{{.i18n.Tr "new_org"}}</a></li>
+                    </ul>
+                </li>
+            </ul>
+            <div class="panel" id="dashboard-my-repo">
+                <div class="panel-header">
+                    <h4 class="left">{{.i18n.Tr "home.my_repos"}}
+                        <span class="repo-count label label-gray label-radius">{{.ContextUser.NumRepos}}</span>
+                    </h4>
+                    &nbsp;
+                </div>
+                <div class="panel-body">
+                    <ul class="list-no-style">
+                        {{range .Repos}}
+                        <li {{if .IsPrivate}}class="private"{{end}}>
+                            <a href="{{$.ContextUser.Name}}/{{.Name}}">
+                                <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+                                <span class="repo-name">
+                                    <!-- <span class="repo-name-prefix">gogits / </span> -->
+                                    <strong class="repo">{{.Name}}</strong>
+                                </span>
+                            </a>
+                        </li>
+                        {{end}}
+                    </ul>
+                </div>
+                <div class="panel-header repo-contrib-header">
+                    <h4 class="text-bold">{{.i18n.Tr "home.collaborative_repos"}}</h4>
+                </div>
+                <div class="panel-body">
+                    <ul class="list-no-style">
+                        <li>
+                            <a href="#">
+                                <i class="octicon octicon-repo"></i>
+                            <span class="repo-name">
+                                <span class="repo-name-prefix">gogits / </span>
+                                <strong class="repo">gogs</strong>
+                            </span>
+                            <span class="right repo-star">
+                                <i class="octicon octicon-star"></i>2048
+                            </span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="octicon octicon-repo"></i>
+                            <span class="repo-name">
+                                <span class="repo-name-prefix">astaxie / </span>
+                                <strong class="repo">beego</strong>
+                            </span>
+                            <span class="right repo-star">
+                                <i class="octicon octicon-star"></i>2301
+                            </span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="octicon octicon-repo"></i>
+                            <span class="repo-name">
+                                <span class="repo-name-prefix">gogits / </span>
+                                <strong class="repo">scaffold</strong>
+                            </span>
+                            <span class="right repo-star">
+                                <i class="octicon octicon-star"></i>0
+                            </span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="panel" id="dashboard-my-org">
+                <div class="panel-header">
+                    <h4 class="text-bold">{{.i18n.Tr "home.my_orgs"}}</h4>
+                </div>
+            </div>
+            <div class="panel" id="dashboard-my-mirror">
+                <div class="panel-header">
+                    <h4 class="text-bold">{{.i18n.Tr "home.my_mirrors"}}</h4>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/dashboard/nav.tmpl b/templates/user/dashboard/nav.tmpl
new file mode 100644
index 0000000000..6064f35692
--- /dev/null
+++ b/templates/user/dashboard/nav.tmpl
@@ -0,0 +1,46 @@
+<div id="dashboard-header">
+    <ul class="menu menu-line container">
+        <li id="dashboard-selection-menu" class="down drop">
+            <a href="#" class="text-bold radius">
+                <img class="avatar-30" src="{{.ContextUser.AvatarLink}}" alt="user-avatar" />
+                {{.ContextUser.Name}}
+            </a>
+            <div class="drop-down panel panel-radius">
+                <p class="panel-header"><strong>{{.i18n.Tr "home.switch_dashboard_context"}}</strong></p>
+                <ul class="menu menu-vertical switching-list" id="dashboard-switch-menu">
+                    <li class="org {{if eq .ContextUser.Id .SignedUser.Id}}checked{{end}}">
+                        <a href="/">
+                            <i class="octicon octicon-check"></i>
+                            <img class="avatar-24" src="{{.SignedUser.AvatarLink}}" alt="user-avatar" />
+                            {{.SignedUser.Name}}
+                        </a>
+                    </li>
+                    {{range .Orgs}}
+                    <li class="org {{if eq $.ContextUser.Id .Id}}checked{{end}}">
+                        <a href="{{.DashboardLink}}">
+                            <i class="octicon octicon-check"></i>
+                            <img class="avatar-24" src="{{.AvatarLink}}" alt="user-avatar" />
+                            {{.Name}}
+                        </a>
+                    </li>
+                    {{end}}
+                    <li>
+                        <a href="/user/settings/orgs"><i class="octicon octicon-organization"></i>{{.i18n.Tr "manage_org"}}</a>
+                    </li>
+                    <li>
+                        <a href="/org/create"><i class="octicon octicon-plus"></i>{{.i18n.Tr "new_org"}}</a>
+                    </li>
+                </ul>
+            </div>
+        </li>
+        <li class="right">
+            <a {{if $.PageIsIssues}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}issues"><i class="octicon octicon-issue-opened"></i>{{.i18n.Tr "issues"}}</a>
+        </li>
+        <li class="right">
+            <a {{if .PageIsPulls}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}pulls"><i class="octicon octicon-git-pull-request"></i>{{.i18n.Tr "pull_requests"}}</a>
+        </li>
+        <li class="right">
+            <a {{if $.PageIsNews}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}"><i class="octicon octicon-rss"></i>{{.i18n.Tr "news_feed"}}</a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/templates/user/delete.tmpl b/templates/user/delete.tmpl
deleted file mode 100644
index fe29173560..0000000000
--- a/templates/user/delete.tmpl
+++ /dev/null
@@ -1,45 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="repo-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-warning">
-            <div class="panel-heading">
-                Delete Account
-            </div>
-
-            <div class="panel-body">
-                {{if not .Flash.ErrorMsg}}<p class="alert alert-danger">The operation will delete your account permanently. Sorry to see you go, but we know you'll back soon.</p>{{end}}
-                <div class="form-group">
-                    <button type="submit" class="btn btn-danger btn-lg" href="#delete-account-modal" id="delete-account" data-toggle="modal">Delete Account</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="modal fade" id="delete-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <form action="/user/delete" method="post" class="modal-content" id="user-delete">
-                {{.CsrfTokenHtml}}
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title" id="myModalLabel">Delete Account</h4>
-                </div>
-
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label>Make sure your are owner of this account. Please enter your password.<strong class="text-danger">*</strong></label>
-                        <input name="password" class="form-control" type="password" placeholder="Type your account password" required="required">
-                    </div>
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-danger">Delete</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/notification.tmpl b/templates/user/notification.tmpl
deleted file mode 100644
index 7c2e8425d4..0000000000
--- a/templates/user/notification.tmpl
+++ /dev/null
@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <h4>Notification</h4>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/password.tmpl b/templates/user/password.tmpl
deleted file mode 100644
index 955a744e4f..0000000000
--- a/templates/user/password.tmpl
+++ /dev/null
@@ -1,49 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                Password
-            </div>
-
-            <div class="panel-body">
-                <div class="col-md-8">
-                    <form class="form-horizontal" id="password-form" method="post" action="/user/settings/password">
-                        {{.CsrfTokenHtml}}
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">Old Password<strong class="text-danger">*</strong></label>
-                            <div class="col-md-7">
-                                <input type="password" name="oldpasswd" class="form-control" placeholder="Type your current password" required="required">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">New Password<strong class="text-danger">*</strong></label>
-                            <div class="col-md-7">
-                                <input type="password" name="newpasswd" class="form-control" placeholder="Type your new password" required="required">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">Re-Type<strong class="text-danger">*</strong></label>
-                            <div class="col-md-7">
-                                <input type="password" name="retypepasswd" class="form-control" placeholder="Re-type your new password" required="required">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <div class="col-md-offset-3 col-md-7">
-                                <button type="submit" class="btn btn-primary">Change Password</button>&nbsp;&nbsp;
-                                <a href="/user/forget_password/">Forgot your password?</a>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/publickey.tmpl b/templates/user/publickey.tmpl
deleted file mode 100644
index 49b6b9caac..0000000000
--- a/templates/user/publickey.tmpl
+++ /dev/null
@@ -1,65 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="repo-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                SSH Keys
-            </div>
-
-            <div class="panel-body">
-                <div id="ssh-keys">
-                    <ul id="ssh-keys-list" class="list-group">
-                        <li class="list-group-item"><span class="name">SSH Key's name</span></li>
-                        {{range .Keys}}
-                        <li class="list-group-item">
-                            <span class="name">{{.Name}}</span>
-                            <span class="print">({{.Fingerprint}})</span>
-                            <button href="#" class="btn btn-danger delete pull-right" rel="{{.Id}}" data-del="{{.Id}}">Delete</button>
-                        </li>
-                        {{end}}
-                        <li class="list-group-item">
-                            <a class="btn btn-link btn-primary" href="#ssh-add-modal" id="ssh-add" data-toggle="modal">Add SSH Key</a>
-                        </li>
-                    </ul>
-                    <div class="modal fade" id="ssh-add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                        <div class="modal-dialog">
-                            <form class="modal-content form-horizontal" id="ssh-form" method="post" action="/user/settings/ssh/">
-                                {{.CsrfTokenHtml}}
-                                <div class="modal-header">
-                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                                    <h4 class="modal-title" id="myModalLabel">Add SSH Key</h4>
-                                </div>
-
-                                <div class="modal-body">
-                                    <div class="form-group">
-                                        <label class="col-md-3 control-label">Key Name<strong class="text-danger">*</strong></label>
-                                        <div class="col-md-8">
-                                            <input name="keyname" class="form-control" placeholder="Type your preferred name" required="required">
-                                        </div>
-                                    </div>
-
-                                    <div class="form-group">
-                                        <label class="col-md-3 control-label">SSH Key<strong class="text-danger">*</strong></label>
-                                        <div class="col-md-8">
-                                            <textarea name="key_content" class="form-control" placeholder="Type your key content" required="required"></textarea>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="modal-footer">
-                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                                    <button type="submit" class="btn btn-primary">Save SSH Key</button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                    <p><strong>Need help?</strong> Check out the guide to <a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">generating SSH keys</a> or troubleshoot <a href="https://help.github.com/ssh-issues/" target="_blank">common SSH Problems</a></p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
diff --git a/templates/user/security.tmpl b/templates/user/security.tmpl
deleted file mode 100644
index 7de41ebd35..0000000000
--- a/templates/user/security.tmpl
+++ /dev/null
@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <h4>Security</h4>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/setting.tmpl b/templates/user/setting.tmpl
deleted file mode 100644
index b197b0eb5f..0000000000
--- a/templates/user/setting.tmpl
+++ /dev/null
@@ -1,69 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                Account Profile
-            </div>
-
-            <div class="panel-body">
-                <form class="form-horizontal" id="password-form" method="post" action="/user/settings">
-                    {{.CsrfTokenHtml}}
-                    <p>Your Email address is public and will be used for any account related notifications, and any web based operations made via the site.</p>
-                    <div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label" for="user-setting-username">Username<strong class="text-danger">*</strong></label>
-                        <div class="col-md-8">
-                            <input name="username" class="form-control" placeholder="Type your user name" required="required" value="{{.SignedUser.Name}}" title="{{.SignedUser.Name}}" id="user-setting-username">
-                            <p class="help-block hidden"><span class="text-danger">Caution : </span>your username is changing !</p>
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_FullName}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Full Name</label>
-                        <div class="col-md-8">
-                            <input name="fullname" class="form-control" placeholder="Type your full name" value="{{.SignedUser.FullName}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Email<strong class="text-danger">*</strong></label>
-                        <div class="col-md-8">
-                            <input name="email" class="form-control" placeholder="Type your e-mail address" required="required" value="{{.SignedUser.Email}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Website}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Website</label>
-                        <div class="col-md-8">
-                            <input name="website" class="form-control" placeholder="Type your website URL" value="{{.SignedUser.Website}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Location}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Location</label>
-                        <div class="col-md-8">
-                            <input name="location" class="form-control" placeholder="Type your current location" value="{{.SignedUser.Location}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Avatar}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Gravatar Email<strong class="text-danger">*</strong></label>
-                        <div class="col-md-8">
-                            <input name="avatar" class="form-control" placeholder="Type your Gravatar e-mail address" required="required" value="{{.SignedUser.AvatarEmail}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <div class="col-md-offset-2 col-md-8">
-                            <button type="submit" class="btn btn-primary">Update Profile</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
diff --git a/templates/user/setting_nav.tmpl b/templates/user/setting_nav.tmpl
deleted file mode 100644
index 7ee7982bdd..0000000000
--- a/templates/user/setting_nav.tmpl
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="user-setting-nav" class="col-md-2 repo-setting-nav">
-    <ul class="list-group">
-        <li class="list-group-item{{if .IsUserPageSetting}} active{{end}}"><a href="/user/settings">Account Profile</a></li>
-        <li class="list-group-item{{if .IsUserPageSettingSocial}} active{{end}}"><a href="/user/settings/social">Social Account</a></li>
-        <li class="list-group-item{{if .IsUserPageSettingPasswd}} active{{end}}"><a href="/user/settings/password">Password</a></li>
-        <!-- <li class="list-group-item{{if .IsUserPageSettingNotify}} active{{end}}"><a href="/user/setting/notification">Notifications</a></li> -->
-        <li class="list-group-item{{if .IsUserPageSettingSSH}} active{{end}}"><a href="/user/settings/ssh/">SSH Keys</a></li>
-        <!-- <li class="list-group-item{{if .IsUserPageSettingSecurity}} active{{end}}"><a href="/user/setting/security">Security</a></li> -->
-        <li class="list-group-item{{if .IsUserPageSettingDelete}} active{{end}}"><a href="/user/delete">Delete Account</a></li>
-    </ul>
-</div>
\ No newline at end of file
diff --git a/templates/user/settings/delete.tmpl b/templates/user/settings/delete.tmpl
new file mode 100644
index 0000000000..9bfc287d8e
--- /dev/null
+++ b/templates/user/settings/delete.tmpl
@@ -0,0 +1,28 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-warning panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.delete_account"}}</strong></p>
+                        <div class="panel-body panel-content">
+                            <span class="alert alert-red alert-radius block"><i class="octicon octicon-alert"></i>{{.i18n.Tr "settings.delete_prompt" | Str2html}}</span>
+                            <form  action="/user/settings/delete" method="post">
+                                {{.CsrfTokenHtml}}
+                                <p class="field">
+                                    <span class="form-label"></span>
+                                    <button class="btn btn-red btn-large btn-radius" id="delete-account-button">{{.i18n.Tr "settings.confirm_delete_account"}}</button>
+                                </p>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/nav.tmpl b/templates/user/settings/nav.tmpl
new file mode 100644
index 0000000000..d6d20dee96
--- /dev/null
+++ b/templates/user/settings/nav.tmpl
@@ -0,0 +1,12 @@
+<div id="setting-menu" class="grid-1-5 panel panel-radius left">
+    <p class="panel-header"><strong>{{.i18n.Tr "settings"}}</strong></p>
+    <div class="panel-body">
+        <ul class="menu menu-vertical switching-list grid-1-5 left">
+            <li {{if .PageIsSettingsProfile}}class="current"{{end}}><a href="/user/settings">{{.i18n.Tr "settings.profile"}}</a></li>
+            <li {{if .PageIsSettingsPassword}}class="current"{{end}}><a href="/user/settings/password">{{.i18n.Tr "settings.password"}}</a></li>
+            <li {{if .PageIsSettingsSSHKeys}}class="current"{{end}}><a href="/user/settings/ssh">{{.i18n.Tr "settings.ssh_keys"}}</a></li>
+            <li {{if .PageIsSettingsSocial}}class="current"{{end}}><a href="/user/settings/social">{{.i18n.Tr "settings.social"}}</a></li>
+            <li {{if .PageIsSettingsDelete}}class="current"{{end}}><a href="/user/settings/delete">{{.i18n.Tr "settings.delete"}}</a></li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/user/settings/password.tmpl b/templates/user/settings/password.tmpl
new file mode 100644
index 0000000000..44e087af4e
--- /dev/null
+++ b/templates/user/settings/password.tmpl
@@ -0,0 +1,37 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.change_password"}}</strong></p>
+                        <form class="form form-align panel-body" id="user-profile-form" action="/user/settings/password" method="post">
+                            {{.CsrfTokenHtml}}
+                            <p class="field">
+                                <label class="req" for="old-password">{{.i18n.Tr "settings.old_password"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_OldPassword}}ipt-error{{end}}" id="old-password" name="old_password" type="password" required />
+                            </p>
+                            <p class="field">
+                                <label class="req" for="password">{{.i18n.Tr "settings.new_password"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" required />
+                            </p>
+                            <p class="field">
+                                <label class="req" for="retype">{{.i18n.Tr "re_type"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Retype}}ipt-error{{end}}" id="retype" name="retype" type="password" required />
+                            </p>
+                            <p class="field">
+                                <span class="form-label"></span>
+                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.change_password"}}</button>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
new file mode 100644
index 0000000000..2d09975f4d
--- /dev/null
+++ b/templates/user/settings/profile.tmpl
@@ -0,0 +1,50 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.public_profile"}}</strong></p>
+                        <form class="form form-align panel-body" id="user-profile-form" action="/user/settings" method="post">
+                            {{.CsrfTokenHtml}}
+                        	<p class="text-center panel-desc">{{.i18n.Tr "settings.profile_desc"}}</p>
+                            <p class="field">
+                                <label class="req" for="username">{{.i18n.Tr "username"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.SignedUser.Name}}" data-uname="{{.SignedUser.Name}}" required />
+                            </p>
+                            <p class="field">
+                                <label for="full-name">{{.i18n.Tr "settings.full_name"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_FullName}}ipt-error{{end}}" id="full-name" name="fullname" type="text" value="{{.SignedUser.FullName}}" />
+                            </p>
+                            <p class="field">
+                                <label class="req" for="email">{{.i18n.Tr "email"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Email}}ipt-error{{end}}" id="email" name="email" type="email" value="{{.SignedUser.Email}}" required />
+                            </p>
+                            <p class="field">
+                                <label for="website">{{.i18n.Tr "settings.website"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Website}}ipt-error{{end}}" id="website" name="website" type="url" value="{{.SignedUser.Website}}" />
+                            </p>
+                            <p class="field">
+                                <label for="location">{{.i18n.Tr "settings.location"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Location}}ipt-error{{end}}" id="location" name="location" type="text" value="{{.SignedUser.Location}}" />
+                            </p>
+                            <p class="field">
+                                <label for="gravatar-email">Gravatar {{.i18n.Tr "email"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Avatar}}ipt-error{{end}}" id="gravatar-email" name="avatar" type="text" value="{{.SignedUser.AvatarEmail}}" />
+                            </p>
+                            <p class="field">
+                                <span class="form-label"></span>
+                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.update_profile"}}</button>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/social.tmpl b/templates/user/settings/social.tmpl
new file mode 100644
index 0000000000..7ff2ea237f
--- /dev/null
+++ b/templates/user/settings/social.tmpl
@@ -0,0 +1,18 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.manage_social"}}</strong></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl
new file mode 100644
index 0000000000..43dfb66e26
--- /dev/null
+++ b/templates/user/settings/sshkeys.tmpl
@@ -0,0 +1,61 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="user-ssh-setting-content">
+                    <div id="user-ssh-panel" class="panel panel-radius">
+                        <p class="panel-header">
+                            <button class="btn btn-small btn-black btn-radius right" id="ssh-add">{{.i18n.Tr "settings.add_key"}}</button>
+                            <strong>{{.i18n.Tr "settings.manage_ssh_keys"}}</strong>
+                        </p>
+                        <ul class="panel-body menu menu-vertical switching-list">
+                            <li>{{.i18n.Tr "settings.ssh_desc"}}</li>
+                            {{range .Keys}}
+                            <li class="ssh clear">
+                                <span class="active-icon left label {{if .HasRecentActivity}}label-green{{end}} label-radius"></span>
+                                <i class="mega-octicon octicon-key left"></i>
+                                <div class="ssh-content left">
+                                    <p><strong>{{.Name}}</strong></p>
+                                    <p class="print">{{.Fingerprint}}</p>
+                                    <p class="activity"><i>{{$.i18n.Tr "settings.add_on"}} {{DateFormat .Created "M d, Y"}} —  <i class="octicon octicon-info"></i>{{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFormat .Updated "M d, Y"}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i></p>
+                                </div>
+                                <form action="/user/settings/ssh" method="post">
+                                    {{$.CsrfTokenHtml}}
+                                    <input name="_method" type="hidden" value="DELETE">
+                                    <input name="id" type="hidden" value="{{.Id}}">
+                                    <button class="right ssh-delete-btn btn btn-red btn-radius btn-small">{{$.i18n.Tr "settings.delete_key"}}</button>
+                                </form>
+                            </li>
+                            {{end}}
+                        </ul>
+                    </div>
+                    <p>{{.i18n.Tr "settings.ssh_helper" | Str2html}}</p>
+                    <br>
+                    <form class="panel panel-radius form form-align hide" id="user-ssh-add-form" action="/user/settings/ssh" method="post">
+                        {{.CsrfTokenHtml}}
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.add_new_key"}}</strong></p>
+                        <div class="panel-body">
+                            <p class="field">
+                                <label class="req" for="ssh-title">{{.i18n.Tr "settings.key_name"}}</label>
+                                <input class="ipt ipt-radius" id="ssh-title" name="title" type="text" required />
+                            </p>
+                            <p class="field clear">
+                                <label class="left req" for="ssh-key">{{.i18n.Tr "settings.key_content"}}</label>
+                                <textarea class="ipt ipt-radius left" name="content" id="ssh-key" required></textarea>
+                            </p>
+                            <p class="field">
+                                <label></label>
+                                <button class="btn btn-green btn-radius" id="ssh-add-btn">{{.i18n.Tr "settings.add_key"}}</button>
+                            </p>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signin.tmpl b/templates/user/signin.tmpl
index 9a8aa1992d..91f56bd075 100644
--- a/templates/user/signin.tmpl
+++ b/templates/user/signin.tmpl
@@ -1,71 +1,39 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div class="container" id="body" data-page="user-signin">
-    <form action="/user/login" method="post" class="form-horizontal card" id="login-card">
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="sign-wrapper">
+    <form class="form-align form panel sign-panel sign-form container panel-radius" id="sign-up-form" action="/user/login" method="post">
         {{.CsrfTokenHtml}}
-        {{if .IsSocialLogin}}
-        <h3>Social login: 2nd step <small>associate account</small></h3>
-        {{else}}
-        <h3>Log in</h3>
-        {{end}}
-        {{template "base/alert" .}}
-        <div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
-            <label class="col-md-4 control-label">Username or e-mail: </label>
-            <div class="col-md-6">
-                <input name="username" class="form-control" placeholder="Type your username" value="{{.username}}" required="required">
-            </div>
-        </div>
-
-        <div class="form-group {{if .Err_Password}}has-error has-feedback{{end}}">
-            <label class="col-md-4 control-label">Password: </label>
-            <div class="col-md-6">
-                <input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required">
-            </div>
+        <div class="panel-header">
+            <h2>{{.i18n.Tr "sign_in"}}</h2>
         </div>
-        
-        {{if not .IsSocialLogin}}<div class="form-group">
-            <div class="col-md-6 col-md-offset-4">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" name="remember" {{if .remember}}checked{{end}}>
-                        <strong>Remember me</strong>
-                    </label>
-                </div>
-            </div>
-        </div>{{end}}
-
-        <div class="form-group">
-            <div class="col-md-offset-4 col-md-6">
-                <button type="submit" class="btn btn-lg btn-primary">Log In</button>
-                {{if not .IsSocialLogin}}<a href="/user/forget_password/">Forgot your password?</a>{{end}}
+        <div class="panel-content">
+            {{template "base/alert" .}}
+            <p class="field">
+                <label class="req" for="username">{{.i18n.Tr "home.uname_holder"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.uname}}" required/>
+            </p>
+            <p class="field">
+                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" required/>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <input class="ipt-chk" id="remember" name="remember" type="checkbox"/>&nbsp;&nbsp;&nbsp;&nbsp;<strong>{{.i18n.Tr "auth.remember_me"}}</strong>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "sign_in"}}</button>&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="/user/forget_password">{{.i18n.Tr "auth.forget_password"}}</a>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <a href="/user/sign_up">{{.i18n.Tr "auth.sign_up_now" | Str2html}}</a>
+            </p>
+            <hr/>
+            <div id="sign-social" class="text-center social-buttons">
+                {{template "ng/base/social" .}}
             </div>
         </div>
-
-        {{if not .IsSocialLogin}}<div class="form-group">
-            <div class="col-md-offset-4 col-md-6">
-                <a href="/user/sign_up">Need an account? Sign up now.</a>
-            </div>
-        </div>
-
-        {{if .OauthEnabled}}
-        <div class="form-group text-center" id="social-login">
-            <h4><span>or</span></h4>
-            <!--
-            <a href="/user/login/github?next=/user/sign_up" class="btn btn-default facebbok">
-                <i class="fa fa-facebook-square fa-2x"></i>
-                <span>Facebook</span>
-            </a>
-            <a href="/user/login/github?next=/user/sign_up" class="btn btn-default weibo">
-                <i class="fa fa-weibo fa-2x"></i>
-                <span>Weibo</span>
-            </a>-->
-            {{if .OauthService.GitHub}}<a href="/user/login/github?next=/user/sign_up" class="btn btn-default"><i class="fa fa-github-square fa-2x"></i><span>GitHub</span></a>{{end}}
-            {{if .OauthService.Google}}<a href="/user/login/google?next=/user/sign_up" class="btn btn-default"><i class="fa fa-google-plus-square fa-2x"></i><span>Google</span></a>{{end}}
-            {{if .OauthService.Twitter}}<a href="/user/login/twitter?next=/user/sign_up" class="btn btn-default"><i class="fa fa-twitter-square fa-2x"></i><span>Twitter</span></a>{{end}}
-            {{if not .OauthService.Tencent}}<a href="/user/login/qq?next=/user/sign_up" class="btn btn-default"><i class="fa fa-qq fa-2x"></i><span>Tencent QQ</span></a>{{end}}
-            {{if .OauthService.Weibo}}<a href="/user/login/weibo?next=/user/sign_up" class="btn btn-default"><i class="fa fa-weibo fa-2x"></i><span>Weibo</span></a>{{end}}
-        </div>
-        {{end}}{{end}}
     </form>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signup.tmpl b/templates/user/signup.tmpl
index 209058c904..60490ceb89 100644
--- a/templates/user/signup.tmpl
+++ b/templates/user/signup.tmpl
@@ -1,60 +1,50 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div class="container" id="body">
-	<form action="/user/sign_up" method="post" class="form-horizontal card" id="login-card">
-		{{.CsrfTokenHtml}}
-		{{if .DisableRegistration}}
-		Sorry, registration has been disabled. Please contact the site administrator.
-		{{else}}
-		{{if .IsSocialLogin}}
-		<h3>Social login: 2nd step <small>complete information</small></h3>
-		{{else}}
-		<h3>Sign Up</h3>
-		{{end}}
-	    {{template "base/alert" .}}
-		<div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Username: </label>
-			<div class="col-md-6">
-				<input name="username" class="form-control" placeholder="Type your username" value="{{.username}}" required="required">
-			</div>
-		</div>
-		<div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Email: </label>
-			<div class="col-md-6">
-				<input name="email" class="form-control" placeholder="Type your e-mail address" value="{{.email}}" required="required">
-			</div>
-		</div>
-
-		<div class="form-group {{if .Err_Password}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Password: </label>
-			<div class="col-md-6">
-				<input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required">
-			</div>
-		</div>
-
-		<div class="form-group {{if .Err_RetypePasswd}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Re-type: </label>
-			<div class="col-md-6">
-				<input name="retypepasswd" type="password" class="form-control" placeholder="Re-type your password" required="required">
-			</div>
-		</div>
-
-		<div class="form-group">
-		    <div class="col-md-offset-4 col-md-6">
-		    	<button type="submit" class="btn btn-lg btn-primary">Create an account</button>
-		    </div>
-		</div>
-		
-	    <div class="form-group">
-            <div class="col-md-offset-4 col-md-6">
-			{{if .IsSocialLogin}}
-                <a href="/user/login">Already have an account? Bind now!</a>
-			{{else}}
-                <a href="/user/login">Already have an account? Sign in now!</a>
-			{{end}}
-            </div>
-	    </div>
-	    {{end}}
-	</form>
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="sign-wrapper">
+    <form class="form-align form panel panel-radius sign-panel sign-form container" id="sign-up-form" action="/user/sign_up" method="post">
+        {{.CsrfTokenHtml}}
+        <div class="panel-header">
+            <h2>{{.i18n.Tr "sign_up"}}</h2>
+        </div>
+        <div class="panel-content">
+            {{template "base/alert" .}}
+	        {{if .DisableRegistration}}
+	        <p>{{.i18n.Tr "auth.disable_register_prompt"}}</p>
+	        {{else}}
+            <p class="field">
+                <label class="req" for="username">{{.i18n.Tr "username"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.uname}}" required/>
+            </p>
+            <p class="field">
+                <label class="req" for="email">{{.i18n.Tr "email"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Email}}ipt-error{{end}}" id="email" name="email" type="email"  value="{{.email}}"required/>
+            </p>
+            <p class="field">
+                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" value="{{.password}}" required/>
+            </p>
+            <p class="field">
+                <label class="req" for="re-type">{{.i18n.Tr "re_type"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="re-type" name="retype" type="password" required/>
+            </p>
+            <p class="field">
+                <label></label>
+                {{CreateCaptcha}}
+            </p>
+            <p class="field">
+                <label class="req" for="captcha">{{.i18n.Tr "captcha"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Captcha}}ipt-error{{end}}" id="captcha" name="captcha" type="text" required/>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "auth.create_new_account"}}</button>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <a href="/user/login">{{.i18n.Tr "auth.register_hepler_msg"}}</a>
+            </p>
+        	{{end}}
+        </div>
+    </form>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}
\ No newline at end of file