new access token UI

cmd/web.go

@@ -271,7 +271,9 @@ func runWeb(ctx *cli.Context) {
 		m.Get("/ssh", user.SettingsSSHKeys)
 		m.Post("/ssh", bindIgnErr(auth.AddSSHKeyForm{}), user.SettingsSSHKeysPost)
 		m.Get("/social", user.SettingsSocial)
-		m.Combo("/applications").Get(user.SettingsApplications).Post(bindIgnErr(auth.NewAccessTokenForm{}), user.SettingsApplicationsPost)
+		m.Combo("/applications").Get(user.SettingsApplications).
+			Post(bindIgnErr(auth.NewAccessTokenForm{}), user.SettingsApplicationsPost)
+		m.Post("/applications/delete", user.SettingsDeleteApplication)
 		m.Route("/delete", "GET,POST", user.SettingsDelete)
 	}, reqSignIn, func(ctx *middleware.Context) {
 		ctx.Data["PageIsUserSettings"] = true

conf/locale/locale_en-US.ini

@@ -286,13 +286,15 @@ unbind_success = Social account has been unbound.
 
 manage_access_token = Manage Personal Access Tokens
 generate_new_token = Generate New Token
-tokens_desc = Tokens you have generated that can be used to access the Gogs API.
+tokens_desc = Tokens you have generated that can be used to access the Gogs APIs.
 new_token_desc = Each token will have full access to your account.
 token_name = Token Name
 generate_token = Generate Token
 generate_token_succees = Your access token was successfully generated! Make sure to copy it right now, as you won't be able to see it again later!
 delete_token = Delete
-delete_token_success = This personal access token has been successfully removed successfully! Don't forget to update your applications as well.
+access_token_deletion = Personal Access Token Deletion
+access_token_deletion_desc = Delete this personal access token will remove all related accesses of application. Do you want to continue?
+delete_token_success = Personal access token has been removed successfully! Don't forget to update your application as well.
 
 delete_account = Delete Your Account
 delete_prompt = The operation will delete your account permanently, and <strong>CANNOT</strong> be undone!

conf/locale/locale_zh-HK.ini

@@ -14,9 +14,9 @@ version=當前版本
 page=頁面
 template=模版
 language=語言選項
-create_new=Create new...
+create_new=創建新的...
-user_profile_and_more=User profile and more
+user_profile_and_more=用戶信息及更多
-signed_in_as=Signed in as
+signed_in_as=已登錄用戶
 
 username=用戶名
 email=郵箱
@@ -35,8 +35,8 @@ manage_org=管理我的組織
 admin_panel=管理面版
 account_settings=帳戶設置
 settings=帳戶設置
-your_profile=Your Profile
+your_profile=個人信息
-your_settings=Your Settings
+your_settings=用戶設置
 
 news_feed=最新活動
 pull_requests=合併請求
@@ -268,16 +268,16 @@ add_key=增加密鑰
 ssh_desc=以下是與您帳戶所關聯的 SSH 密鑰，如果您發現有陌生的密鑰，請立即刪除它！
 ssh_helper=<strong>需要幫助嗎?</strong> 請查看有關 <a href="%s"> 如何生成 SSH 密鑰</a> 的指南或 <a href="%s"> SSH 的常見問題</a> 的疑難排解。
 add_new_key=增加 SSH 密鑰
-ssh_key_been_used=Public key content has been used.
+ssh_key_been_used=公共密鑰已經被使用
-ssh_key_name_used=Public key with same name has already existed.
+ssh_key_name_used=使用相同名稱的公共密鑰已經存在！
 key_name=密鑰名稱
 key_content=密鑰內容
-add_key_success=New SSH key '%s' has been added successfully!
+add_key_success=新的 SSH 密鑰 '%s' 添加成功！
 delete_key=刪除
 add_on=增加於
 last_used=上次使用在
 no_activity=沒有最近活動
-key_state_desc=This key is used in last 7 days
+key_state_desc=該密鑰在 7 天內被使用過
 
 manage_social=管理關聯社交帳戶
 social_desc=以下是與您帳戶所關聯的社交帳號，如果您發現有陌生的關聯，請立即解除綁定！
@@ -305,7 +305,7 @@ owner=擁有者
 repo_name=倉庫名稱
 repo_name_helper=偉大的倉庫名稱一般都較短、令人深刻並且 <strong>獨一無二</strong> 的。
 visibility=可見度
-visiblity_helper=This repository is <span class="ui red text">Private</span>
+visiblity_helper=該倉庫為 <span class="ui red text">私有的</span>
 fork_repo=派生倉庫
 fork_from=派生自
 fork_visiblity_helper=派生倉庫無法修改可見性。
@@ -324,10 +324,10 @@ form.name_pattern_not_allowed=倉庫名稱不允許 '%s' 的格式。
 
 need_auth=需要授權驗證
 migrate_type=遷移類型
-migrate_type_helper=This repository will be a <span class="text blue">mirror</span>
+migrate_type_helper=該倉庫將是一個 <span class="text blue">鏡像</span>
 migrate_repo=遷移倉庫
 migrate.clone_address=複製地址
-migrate.clone_address_desc=This can be a HTTP/HTTPS/GIT URL or local server path.
+migrate.clone_address_desc=該地址可以是 HTTP/HTTPS/GIT URL 或本地服務器路徑。
 migrate.invalid_local_path=無效的本地路徑，該路徑不存在或不是一個目錄！
 
 forked_from=派生自
@@ -373,64 +373,64 @@ commits.older=更舊的提交
 commits.newer=更新的提交
 
 issues.new=創建問題
-issues.new.labels=Labels
+issues.new.labels=標籤
-issues.new.no_label=No Label
+issues.new.no_label=未選擇標籤
-issues.new.clear_labels=Clear labels
+issues.new.clear_labels=清除已選取標籤
-issues.new.milestone=Milestone
+issues.new.milestone=里程碑
-issues.new.no_milestone=No Milestone
+issues.new.no_milestone=未選擇里程碑
-issues.new.clear_milestone=Clear milestone
+issues.new.clear_milestone=清除已選取里程碑
-issues.new.open_milestone=Open Milestones
+issues.new.open_milestone=開啟中的里程碑
-issues.new.closed_milestone=Closed Milestones
+issues.new.closed_milestone=已關閉的里程碑
-issues.new.assignee=Assignee
+issues.new.assignee=指派成員
-issues.new.clear_assignee=Clear assignee
+issues.new.clear_assignee=取消指派成員
-issues.new.no_assignee=No assignee
+issues.new.no_assignee=未指派成員
-issues.create=Create Issue
+issues.create=創建問題
 issues.new_label=創建標籤
 issues.new_label_placeholder=標籤名稱...
-issues.create_label=Create Label
+issues.create_label=創建標籤
 issues.open_tab=%d 個開啓中
 issues.close_tab=%d 個已關閉
 issues.filter_label=標籤篩選
 issues.filter_label_no_select=無篩選標籤
 issues.filter_milestone=里程碑篩選
-issues.filter_milestone_no_select=No selected milestone
+issues.filter_milestone_no_select=無篩選里程碑
 issues.filter_assignee=指派人篩選
-issues.filter_assginee_no_select=No selected Assignee
+issues.filter_assginee_no_select=無篩選指派人
 issues.filter_type=類型篩選
 issues.filter_type.all_issues=所有問題
 issues.filter_type.assigned_to_you=指派給您的
 issues.filter_type.created_by_you=由您創建的
 issues.filter_type.mentioning_you=提及您的
-issues.filter_sort=Sort
+issues.filter_sort=排序
-issues.filter_sort.latest=Newest
+issues.filter_sort.latest=最新創建
-issues.filter_sort.oldest=Oldest
+issues.filter_sort.oldest=最早創建
-issues.filter_sort.recentupdate=Recently updated
+issues.filter_sort.recentupdate=最近更新
-issues.filter_sort.leastupdate=Least recently updated
+issues.filter_sort.leastupdate=最少更新
-issues.filter_sort.mostcomment=Most commented
+issues.filter_sort.mostcomment=最多評論
-issues.filter_sort.leastcomment=Least commented
+issues.filter_sort.leastcomment=最少評論
 issues.opened_by=由 <a href="/%[2]s">%[2]s</a> 於%[1]s創建
-issues.opened_by_fake=opened %[1]s by %[2]s
+issues.opened_by_fake=由 %[2]s 於 %[1]s創建
 issues.previous=上一頁
 issues.next=下一頁
-issues.open_title=Open
+issues.open_title=開啟中
-issues.closed_title=Closed
+issues.closed_title=已關閉
-issues.num_comments=%d comments
+issues.num_comments=%d 條評論
-issues.commented_at=`commented at <a id="%[1]s" href="#%[1]s">%[2]s</a>`
+issues.commented_at=`於 <a id="%[1]s" href="#%[1]s">%[2]s</a> 評論`
-issues.no_content=There is no content yet.
+issues.no_content=尚未有任何內容
-issues.close_issue=Close
+issues.close_issue=關閉
-issues.close_comment_issue=Close and comment
+issues.close_comment_issue=關閉及評論
-issues.reopen_issue=Reopen
+issues.reopen_issue=重新開啟
-issues.reopen_comment_issue=Reopen and comment
+issues.reopen_comment_issue=重新開啟及評論
-issues.create_comment=Comment
+issues.create_comment=評論
-issues.closed_at=`closed at <a id="%[1]s" href="#%[1]s">%[2]s</a>`
+issues.closed_at=`於 <a id="%[1]s" href="#%[1]s">%[2]s</a> 關閉`
-issues.reopened_at=`reopened at <a id="%[1]s" href="#%[1]s">%[2]s</a>`
+issues.reopened_at=`於 <a id="%[1]s" href="#%[1]s">%[2]s</a> 重新開啟`
-issues.poster=Poster
+issues.poster=發佈者
-issues.admin=Admin
+issues.admin=管理員
-issues.owner=Owner
+issues.owner=所有者
-issues.sign_up_for_free=Sign up for free
+issues.sign_up_for_free=免費註冊
-issues.sign_in_require_desc=to join this conversation. Already have an account? <a href="%s">Sign in to comment</a>
+issues.sign_in_require_desc=及加入到對話當中。如果您已經註冊，可以直接 <a href="%s">登錄及評論</a>
-issues.edit=Edit
+issues.edit=編輯
-issues.save=Save
+issues.save=保存
 issues.label_title=標籤名稱
 issues.label_color=標籤顏色
 issues.label_count=%d 個標籤
@@ -442,33 +442,33 @@ issues.label_deletion=刪除標籤
 issues.label_deletion_desc=刪除該標籤將會移除所有問題中相關的訊息。是否繼續？
 issues.label_deletion_success=標籤刪除成功!
 
-pulls.compare_changes=Compare Changes
+pulls.compare_changes=對比文件變化
-pulls.compare_changes_desc=Compare two branches and make a pull request for changes.
+pulls.compare_changes_desc=對比兩個分支間的文件變化及發起一個合併請求。
-pulls.no_results=No results found.
+pulls.no_results=未找到結果
 
-milestones.new=New Milestone
+milestones.new=新的里程碑
-milestones.open_tab=%d Open
+milestones.open_tab=%d 開啟中
-milestones.close_tab=%d Closed
+milestones.close_tab=%d 已關閉
-milestones.closed=Closed %s
+milestones.closed=於 %s關閉
-milestones.no_due_date=No due date
+milestones.no_due_date=暫無截止日期
-milestones.open=Open
+milestones.open=開啟
-milestones.close=Close
+milestones.close=關閉
-milestones.new_subheader=Create milestones to organize your issues.
+milestones.new_subheader=創建里程碑來更好地組織你的問題
-milestones.create=Create Milestone
+milestones.create=創建里程碑
-milestones.title=Title
+milestones.title=標題
-milestones.desc=Description
+milestones.desc=描述
-milestones.due_date=Due Date (optional)
+milestones.due_date=截止日期（可選）
-milestones.clear=Clear
+milestones.clear=清除
-milestones.invalid_due_date_format=Due date format is invalid, must be 'year-mm-dd'.
+milestones.invalid_due_date_format=截止日期的格式錯誤，必須是 'year-mm-dd' 的形式。
-milestones.create_success=Milestone '%s' has been created successfully!
+milestones.create_success=里程碑 '%s' 創建成功！
-milestones.edit=Edit Milestone
+milestones.edit=編輯里程碑
-milestones.edit_subheader=Use better description for milestones so people won't be confused.
+milestones.edit_subheader=使用更加清晰的描述來幫助人們更好地理解里程碑的作用。
-milestones.cancel=Cancel
+milestones.cancel=取消
-milestones.modify=Modify Milestone
+milestones.modify=修改里程碑
-milestones.edit_success=Changes of milestone '%s' has been saved successfully!
+milestones.edit_success=里程碑 '%s' 的修改內容已經生效！
-milestones.deletion=Milestone Deletion
+milestones.deletion=刪除里程碑
-milestones.deletion_desc=Delete this milestone will remove its information in all related issues. Do you want to continue?
+milestones.deletion_desc=刪除該里程碑將會移除所有問題中相關信息。是否繼續？
-milestones.deletion_success=Milestone has been deleted successfully!
+milestones.deletion_success=里程碑刪除成功！
 
 settings=倉庫設置
 settings.options=基本設置
@@ -523,16 +523,16 @@ settings.slack_token=令牌
 settings.slack_domain=域名
 settings.slack_channel=頻道
 settings.deploy_keys=管理部署密鑰
-settings.add_deploy_key=Add Deploy Key
+settings.add_deploy_key=添加部署密鑰
-settings.no_deploy_keys=You haven't added any deploy key.
+settings.no_deploy_keys=您還沒有添加任何部署密鑰。
-settings.title=Title
+settings.title=標題
-settings.deploy_key_content=Content
+settings.deploy_key_content=密鑰文本
-settings.key_been_used=Deploy key content has been used.
+settings.key_been_used=部署密鑰已經被使用！
-settings.key_name_used=Deploy key with same name has already existed.
+settings.key_name_used=使用相同名稱的部署密鑰已經存在！
-settings.add_key_success=New deploy key '%s' has been added successfully!
+settings.add_key_success=新的部署密鑰 '%s' 添加成功！
-settings.deploy_key_deletion=Delete Deploy Key
+settings.deploy_key_deletion=刪除部署密鑰
-settings.deploy_key_deletion_desc=Delete this deploy key will remove all related accesses for this repository. Do you want to continue?
+settings.deploy_key_deletion_desc=刪除該部署密鑰會移除本倉庫所有相關的操作權限。是否繼續？
-settings.deploy_key_deletion_success=Deploy key has been deleted successfully!
+settings.deploy_key_deletion_success=刪除部署密鑰成功！
 
 diff.browse_source=瀏覽代碼
 diff.parent=父節點
@@ -806,7 +806,7 @@ config.enable_cache_avatar=開啟緩存頭像
 config.active_code_lives=激活用戶連結有效期
 config.reset_password_code_lives=重置密碼連結有效期
 config.webhook_config=Web 鉤子配置
-config.queue_length=Queue Length
+config.queue_length=隊列長度
 config.deliver_timeout=推送超時
 config.skip_tls_verify=忽略 TLS 驗證
 config.mailer_config=郵件配置
@@ -885,7 +885,7 @@ raw_seconds=秒
 raw_minutes=分鐘
 
 [dropzone]
-default_message=Drop files here or click to upload.
+default_message=拖曳文件到此處或單擊上傳
-invalid_input_type=You can't upload files of this type.
+invalid_input_type=您不能上傳該類型的文件
-file_too_big=File size({{filesize}} MB) exceeds maximum size({{maxFilesize}} MB).
+file_too_big=文件大小（{{filesize}} MB）超過了最大允許大小（{{maxFilesize}} MB）
-remove_file=Remove file
+remove_file=移除文件

models/token.go

@@ -62,8 +62,8 @@ func ListAccessTokens(uid int64) ([]*AccessToken, error) {
 	return tokens, nil
 }
 
-// DeleteAccessTokenById deletes access token by given ID.
+// DeleteAccessTokenByID deletes access token by given ID.
-func DeleteAccessTokenById(id int64) error {
+func DeleteAccessTokenByID(id int64) error {
 	_, err := x.Id(id).Delete(new(AccessToken))
 	return err
 }

modules/auth/user_form.go

@@ -135,7 +135,7 @@ func (f *AddSSHKeyForm) Validate(ctx *macaron.Context, errs binding.Errors) bind
 }
 
 type NewAccessTokenForm struct {
-	Name string `form:"name" binding:"Required"`
+	Name string `binding:"Required"`
 }
 
 func (f *NewAccessTokenForm) Validate(ctx *macaron.Context, errs binding.Errors) binding.Errors {

public/js/gogs.js

@@ -226,13 +226,6 @@ function initRepository() {
         });
     }
 
-    // Settings
-    if ($('.repository.settings').length > 0) {
-        $('#add-deploy-key').click(function () {
-            $('#add-deploy-key-panel').show();
-        });
-    }
-
     // Issues
     if ($('.repository.view.issue').length > 0) {
         var $status_btn = $('#status-button');
@@ -351,6 +344,9 @@ $(document).ready(function () {
         }).modal('show');
         return false;
     });
+    $('.show-panel.button').click(function () {
+        $($(this).data('panel')).show();
+    });
 
     initCommentForm();
     initInstall();

public/less/_user.less

@@ -1,4 +1,12 @@
 .user {
 	padding-top: 15px;
 	padding-bottom: @footer-margin * 3;
+
+	&.settings {
+		.key.list {
+			.desc.item {
+				padding-bottom: 30px;
+			}
+		}
+	}
 }

public/ng/css/gogs.css

@@ -88,7 +88,7 @@ img.avatar-100 {
   z-index: 100;
   font-size: 12px;
   width: 120%;
-  min-width: 100px;
+  min-width: 140px;
 }
 #footer-lang .drop-down li > a {
   padding: 3px 9px;

public/ng/less/gogs/base.less

@@ -102,7 +102,7 @@ clear: both;
         z-index: 100;
         font-size: 12px;
         width: 120%;
-        min-width: 100px;
+        min-width: 140px;
         li > a {
             padding: 3px 9px;
         }

routers/repo/issue.go

@@ -1013,7 +1013,7 @@ func ChangeMilestonStatus(ctx *middleware.Context) {
 
 func DeleteMilestone(ctx *middleware.Context) {
 	if err := models.DeleteMilestoneByID(ctx.QueryInt64("id")); err != nil {
-		ctx.Flash.Error("DeleteMilestone: " + err.Error())
+		ctx.Flash.Error("DeleteMilestoneByID: " + err.Error())
 	} else {
 		ctx.Flash.Success(ctx.Tr("repo.milestones.deletion_success"))
 	}

routers/user/setting.go

@@ -374,18 +374,6 @@ func SettingsApplications(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("settings")
 	ctx.Data["PageIsSettingsApplications"] = true
 
-	// Delete access token.
-	remove, _ := com.StrTo(ctx.Query("remove")).Int64()
-	if remove > 0 {
-		if err := models.DeleteAccessTokenById(remove); err != nil {
-			ctx.Handle(500, "DeleteAccessTokenById", err)
-			return
-		}
-		ctx.Flash.Success(ctx.Tr("settings.delete_token_success"))
-		ctx.Redirect(setting.AppSubUrl + "/user/settings/applications")
-		return
-	}
-
 	tokens, err := models.ListAccessTokens(ctx.User.Id)
 	if err != nil {
 		ctx.Handle(500, "ListAccessTokens", err)
@@ -396,34 +384,42 @@ func SettingsApplications(ctx *middleware.Context) {
 	ctx.HTML(200, SETTINGS_APPLICATIONS)
 }
 
-// FIXME: split to two different functions and pages to handle access token and oauth2
 func SettingsApplicationsPost(ctx *middleware.Context, form auth.NewAccessTokenForm) {
 	ctx.Data["Title"] = ctx.Tr("settings")
 	ctx.Data["PageIsSettingsApplications"] = true
 
-	switch ctx.Query("type") {
+	if ctx.HasError() {
-	case "token":
+		ctx.HTML(200, SETTINGS_APPLICATIONS)
-		if ctx.HasError() {
+		return
-			ctx.HTML(200, SETTINGS_APPLICATIONS)
-			return
-		}
-
-		t := &models.AccessToken{
-			UID:  ctx.User.Id,
-			Name: form.Name,
-		}
-		if err := models.NewAccessToken(t); err != nil {
-			ctx.Handle(500, "NewAccessToken", err)
-			return
-		}
-
-		ctx.Flash.Success(ctx.Tr("settings.generate_token_succees"))
-		ctx.Flash.Info(t.Sha1)
 	}
 
+	t := &models.AccessToken{
+		UID:  ctx.User.Id,
+		Name: form.Name,
+	}
+	if err := models.NewAccessToken(t); err != nil {
+		ctx.Handle(500, "NewAccessToken", err)
+		return
+	}
+
+	ctx.Flash.Success(ctx.Tr("settings.generate_token_succees"))
+	ctx.Flash.Info(t.Sha1)
+
 	ctx.Redirect(setting.AppSubUrl + "/user/settings/applications")
 }
 
+func SettingsDeleteApplication(ctx *middleware.Context) {
+	if err := models.DeleteAccessTokenByID(ctx.QueryInt64("id")); err != nil {
+		ctx.Flash.Error("DeleteAccessTokenByID: " + err.Error())
+	} else {
+		ctx.Flash.Success(ctx.Tr("settings.delete_token_success"))
+	}
+
+	ctx.JSON(200, map[string]interface{}{
+		"redirect": setting.AppSubUrl + "/user/settings/applications",
+	})
+}
+
 func SettingsDelete(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("settings")
 	ctx.Data["PageIsSettingsDelete"] = true

templates/repo/settings/deploy_keys.tmpl

@@ -9,7 +9,7 @@
 				<h4 class="ui top attached header">
 				  {{.i18n.Tr "repo.settings.deploy_keys"}}
 				  <div class="ui right">
-				  	<div id="add-deploy-key" class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
+				  	<div class="ui blue tiny show-panel button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.settings.add_deploy_key"}}</div>
 				  </div>
 				</h4>
 				<div class="ui attached segment">

templates/user/settings/applications.tmpl

@@ -1,56 +1,85 @@
-{{template "ng/base/head" .}}
+{{template "base/head" .}}
-{{template "ng/base/header" .}}
+<div class="user settings">
-<div id="setting-wrapper" class="main-wrapper">
+  <div class="ui container">
-    <div id="user-profile-setting" class="container clear">
+    <div class="ui grid">
-        {{template "user/settings/nav" .}}
+      {{template "user/settings/navbar" .}}
-        <div class="grid-4-5 left">
+      <div class="twelve wide column content">
-            <div class="setting-content">
+        {{template "base/alert" .}}
-                {{template "ng/base/alert" .}}
+        <h4 class="ui top attached header">
-                <div id="setting-content">
+          {{.i18n.Tr "settings.manage_access_token"}}
-                    <div id="user-applications-panel" class="panel panel-radius">
+          <div class="ui right">
-                        <div class="panel-header">
+            <div class="ui blue tiny show-panel button" data-panel="#add-access-token-panel">{{.i18n.Tr "settings.generate_new_token"}}</div>
-                        	<a class="show-form-btn" data-target-form="#access-add-form">
+          </div>
-                        		<button class="btn btn-medium btn-black btn-radius right">{{.i18n.Tr "settings.generate_new_token"}}</button>
+        </h4>
-                        	</a>
+        <div class="ui attached segment">
-                        	<strong>{{.i18n.Tr "settings.manage_access_token"}}</strong>
+          <div class="ui key list">
-                        </div>
+            <div class="desc item">
-                        <ul class="panel-body setting-list">
+              {{.i18n.Tr "settings.tokens_desc"}}
-                            <li>{{.i18n.Tr "settings.tokens_desc"}}</li>
-                            {{range .Tokens}}
-                            <li class="ssh clear">
-                                <span class="active-icon left label label-{{if .HasRecentActivity}}green{{else}}gray{{end}} label-radius"></span>
-                                <i class="fa fa-send fa-2x left"></i>
-                                <div class="ssh-content left">
-                                    <p><strong>{{.Name}}</strong></p>
-                                    <p class="activity"><i>{{$.i18n.Tr "settings.add_on"}} <span title="{{DateFmtLong .Created}}">{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i>{{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i></p>
-                                </div>
-                                <a href="{{AppSubUrl}}/user/settings/applications?remove={{.Id}}">
-                                	<button class="btn btn-small btn-red btn-radius ssh-btn right">{{$.i18n.Tr "settings.delete_token"}}</button>
-                                </a>
-                            </li>
-                            {{end}}
-                        </ul>
-                    </div>
-                    <br>
-                    <form class="panel panel-radius form form-align form-settings-add hide" id="access-add-form" action="{{AppSubUrl}}/user/settings/applications" method="post">
-                        {{.CsrfTokenHtml}}
-                        <p class="panel-header"><strong>{{.i18n.Tr "settings.generate_new_token"}}</strong></p>
-                        <div class="panel-body">
-                        	<div class="text-center panel-desc">{{.i18n.Tr "settings.new_token_desc"}}</div>
-                        	<input type="hidden" name="type" value="token">
-                            <p class="field">
-                                <label class="req" for="token-name">{{.i18n.Tr "settings.token_name"}}</label>
-                                <input class="ipt ipt-radius" id="token-name" name="name" required />
-                            </p>
-                            <p class="field">
-                                <label></label>
-                                <button class="btn btn-green btn-medium btn-radius" id="ssh-add-btn">{{.i18n.Tr "settings.generate_token"}}</button>
-                            </p>
-                        </div>
-                    </form>
-                </div>
             </div>
+            {{range .Tokens}}
+            <div class="item ui grid">
+              <div class="one wide column">
+                <i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i>
+              </div>
+              <div class="one wide column">
+                <i class="fa fa-send fa-2x left"></i>
+              </div>
+              <div class="eleven wide column">
+                <strong>{{.Name}}</strong>
+                <div class="activity meta">
+                  <i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+                </div>
+              </div>
+              <div class="two wide column">
+                <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+                  {{$.i18n.Tr "settings.delete_token"}}
+                </button>
+              </div>
+            </div>
+            {{end}}
+          </div>  
         </div>
+        <br>
+        <div {{if not .HasError}}class="hide"{{end}} id="add-access-token-panel">
+          <h4 class="ui top attached header">
+            {{.i18n.Tr "settings.generate_new_token"}}
+          </h4>
+          <div class="ui attached segment">
+            <form class="ui form" action="{{.Link}}" method="post">
+              {{.CsrfTokenHtml}}
+              <p>{{.i18n.Tr "settings.new_token_desc"}}</p>
+              <div class="field {{if .Err_Name}}error{{end}}">
+                <label for="name">{{.i18n.Tr "settings.token_name"}}</label>
+                <input id="name" name="name" value="{{.name}}" autofocus required>
+              </div>
+              <button class="ui green button">
+                {{.i18n.Tr "settings.generate_token"}}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </div>
-{{template "ng/base/footer" .}}
+
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+    <i class="trash icon"></i>
+    {{.i18n.Tr "settings.access_token_deletion"}}
+  </div>
+  <div class="content">
+    <p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
+  </div>
+  <div class="actions">
+    <div class="ui red basic inverted cancel button">
+      <i class="remove icon"></i>
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui green basic inverted ok button">
+      <i class="checkmark icon"></i>
+      {{.i18n.Tr "modal.yes"}}
+    </div>
+  </div>
+</div>
+{{template "base/footer" .}}