githaven/templates/user/settings/security_u2f.tmpl

<h4 class="ui top attached header">
{{.i18n.Tr "settings.u2f"}}
</h4>
<div class="ui attached segment">
	<p>{{.i18n.Tr "settings.u2f_desc" | Str2html}}</p>
	{{if .TwofaEnrolled}}
		<div class="ui key list">
			{{range .U2FRegistrations}}
			    <div class="item">
			    	<div class="right floated content">
			    		<button class="ui red tiny button delete-button" id="delete-registration" data-url="{{$.Link}}/u2f/delete" data-id="{{.ID}}">
			    		{{$.i18n.Tr "settings.delete_key"}}
			    		</button>
			    	</div>
			    	<div class="content">
			    		<strong>{{.Name}}</strong>
			    	</div>
			    </div>
			{{end}}
		</div>
		<div class="ui form">
			{{.CsrfTokenHtml}}
			<div class="required field">
				<label for="nickname">{{.i18n.Tr "settings.u2f_nickname"}}</label>
				<input id="nickname" name="nickname" type="text" required>
			</div>
			<button id="register-security-key" class="ui green button">{{svg "octicon-key" 16}} {{.i18n.Tr "settings.u2f_register_key"}}</button>
		</div>
	{{else}}
		<b>{{.i18n.Tr "settings.u2f_require_twofa"}}</b>
	{{end}}
</div>

<div class="ui small modal" id="register-device">
	<div class="header">{{.i18n.Tr "settings.u2f_register_key"}}</div>
	<div class="content">
		<i class="notched spinner loading icon"></i> {{.i18n.Tr "settings.u2f_press_button"}}
	</div>
	<div class="actions">
		<div class="ui cancel button">{{.i18n.Tr "cancel"}}</div>
	</div>
</div>

{{template "user/auth/u2f_error" .}}

<div class="ui small basic delete modal" id="delete-registration">
	<div class="ui icon header">
		<i class="trash icon"></i>
	{{.i18n.Tr "settings.u2f_delete_key"}}
	</div>
	<div class="content">
		<p>{{.i18n.Tr "settings.u2f_delete_key_desc"}}</p>
	</div>
	{{template "base/delete_modal_actions" .}}
</div>