finish new add auth UI

conf/locale/locale_en-US.ini

@@ -817,6 +817,7 @@ auths.host = Host
 auths.port = Port
 auths.bind_dn = Bind DN
 auths.bind_password = Bind Password
+auths.bind_password_helper = Warning: This password is stored in plain text. Do not use a high privileged account.
 auths.user_base = User Search Base
 auths.user_dn = User DN
 auths.attribute_name = First name attribute
@@ -834,7 +835,7 @@ auths.pam_service_name = PAM Service Name
 auths.enable_auto_register = Enable Auto Registration
 auths.tips = Tips
 auths.edit = Edit Authentication Setting
-auths.activated = This authentication has activated
+auths.activated = This authentication is activate
 auths.update_success = Authentication setting has been updated successfully.
 auths.update = Update Authentication Setting
 auths.delete = Delete This Authentication

models/login.go

@@ -39,7 +39,7 @@ var (
 	ErrAuthenticationUserUsed     = errors.New("Authentication has been used by some users")
 )
 
-var LoginTypes = map[LoginType]string{
+var LoginNames = map[LoginType]string{
 	LDAP:  "LDAP (via BindDN)",
 	DLDAP: "LDAP (simple auth)",
 	SMTP:  "SMTP",
@@ -118,8 +118,8 @@ func (source *LoginSource) BeforeSet(colName string, val xorm.Cell) {
 	}
 }
 
-func (source *LoginSource) TypeString() string {
+func (source *LoginSource) TypeName() string {
-	return LoginTypes[source.Type]
+	return LoginNames[source.Type]
 }
 
 func (source *LoginSource) LDAP() *LDAPConfig {
@@ -315,9 +315,7 @@ const (
 	SMTP_LOGIN = "LOGIN"
 )
 
-var (
+var SMTPAuths = []string{SMTP_PLAIN, SMTP_LOGIN}
-	SMTPAuths = []string{SMTP_PLAIN, SMTP_LOGIN}
-)
 
 func SMTPAuth(a smtp.Auth, cfg *SMTPConfig) error {
 	c, err := smtp.Dial(fmt.Sprintf("%s:%d", cfg.Host, cfg.Port))

modules/auth/auth_form.go

@@ -10,13 +10,13 @@ import (
 )
 
 type AuthenticationForm struct {
-	ID                int64 `form:"id"`
+	ID                int64
-	Type              int
+	Type              int    `binding:"Range(2,5)"`
-	Name              string `binding:"Required;MaxSize(50)"`
+	Name              string `binding:"Required;MaxSize(30)"`
 	Host              string
 	Port              int
-	UseSSL            bool   `form:"use_ssl"`
+	UseSSL            bool
-	BindDN            string `form:"bind_dn"`
+	BindDN            string
 	BindPassword      string
 	UserBase          string
 	UserDN            string `form:"user_dn"`
@@ -25,14 +25,14 @@ type AuthenticationForm struct {
 	AttributeMail     string
 	Filter            string
 	AdminFilter       string
-	IsActived         bool
+	IsActive          bool
-	SMTPAuth          string `form:"smtp_auth"`
+	SMTPAuth          string
-	SMTPHost          string `form:"smtp_host"`
+	SMTPHost          string
-	SMTPPort          int    `form:"smtp_port"`
+	SMTPPort          int
-	TLS               bool   `form:"tls"`
+	TLS               bool
 	SkipVerify        bool
-	AllowAutoRegister bool `form:"allowautoregister"`
+	AllowAutoRegister bool
-	PAMServiceName    string
+	PAMServiceName    string `form:"pam_service_name"`
 }
 
 func (f *AuthenticationForm) Validate(ctx *macaron.Context, errs binding.Errors) binding.Errors {

public/js/gogs.js

@@ -147,7 +147,7 @@ function initInstall() {
 
     // Database type change detection.
     $("#db_type").change(function () {
-        var db_type = $('#db_type').val();
+        var db_type = $(this).val();
         if (db_type === "SQLite3" || db_type === "TiDB") {
             $('#sql_settings').hide();
             $('#pgsql_settings').hide();
@@ -442,6 +442,44 @@ function initWebhook() {
     });
 }
 
+
+function initAdmin() {
+    if ($('.admin').length == 0) {
+        return;
+    }
+
+    // New authentication
+    if ($('.admin.new.authentication').length > 0) {
+        $('#auth_type').change(function () {
+            var auth_type = $(this).val();
+            switch (auth_type) {
+                case '2':     // LDAP
+                    $('.dldap').hide();
+                    $('.smtp').hide();
+                    $('.pam').hide();
+                    $('.ldap').show();
+                    break;
+                case '3':     // SMTP
+                    $('.ldap').hide();
+                    $('.pam').hide();
+                    $('.smtp').show();
+                    break;
+                case '4':     // PAM
+                    $('.ldap').hide();
+                    $('.smtp').hide();
+                    $('.pam').show();
+                    break;
+                case '5':     // LDAP
+                    $('.ldap').hide();
+                    $('.smtp').hide();
+                    $('.pam').hide();
+                    $('.dldap').show();
+                    break;
+            }
+        });
+    }
+}
+
 $(document).ready(function () {
     csrf = $('meta[name=_csrf]').attr("content");
     suburl = $('meta[name=_suburl]').attr("content");
@@ -563,4 +601,5 @@ $(document).ready(function () {
     initOrganization();
     initUser();
     initWebhook();
+    initAdmin();
 });

routers/admin/auths.go

@@ -39,11 +39,28 @@ func Authentications(ctx *middleware.Context) {
 	ctx.HTML(200, AUTHS)
 }
 
+type AuthSource struct {
+	Name string
+	Type models.LoginType
+}
+
+var authSources = []AuthSource{
+	{models.LoginNames[models.LDAP], models.LDAP},
+	{models.LoginNames[models.DLDAP], models.DLDAP},
+	{models.LoginNames[models.SMTP], models.SMTP},
+	{models.LoginNames[models.PAM], models.PAM},
+}
+
 func NewAuthSource(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("admin.auths.new")
 	ctx.Data["PageIsAdmin"] = true
 	ctx.Data["PageIsAdminAuthentications"] = true
-	ctx.Data["LoginTypes"] = models.LoginTypes
+
+	ctx.Data["type"] = models.LDAP
+	ctx.Data["CurTypeName"] = models.LoginNames[models.LDAP]
+	ctx.Data["smtp_auth"] = "PLAIN"
+	ctx.Data["is_active"] = true
+	ctx.Data["AuthSources"] = authSources
 	ctx.Data["SMTPAuths"] = models.SMTPAuths
 	ctx.HTML(200, AUTH_NEW)
 }
@@ -52,7 +69,9 @@ func NewAuthSourcePost(ctx *middleware.Context, form auth.AuthenticationForm) {
 	ctx.Data["Title"] = ctx.Tr("admin.auths.new")
 	ctx.Data["PageIsAdmin"] = true
 	ctx.Data["PageIsAdminAuthentications"] = true
-	ctx.Data["LoginTypes"] = models.LoginTypes
+
+	ctx.Data["CurTypeName"] = models.LoginNames[models.LoginType(form.Type)]
+	ctx.Data["AuthSources"] = authSources
 	ctx.Data["SMTPAuths"] = models.SMTPAuths
 
 	if ctx.HasError() {
@@ -62,9 +81,7 @@ func NewAuthSourcePost(ctx *middleware.Context, form auth.AuthenticationForm) {
 
 	var u core.Conversion
 	switch models.LoginType(form.Type) {
-	case models.LDAP:
+	case models.LDAP, models.DLDAP:
-		fallthrough
-	case models.DLDAP:
 		u = &models.LDAPConfig{
 			Ldapsource: ldap.Ldapsource{
 				Name:             form.Name,
@@ -103,7 +120,7 @@ func NewAuthSourcePost(ctx *middleware.Context, form auth.AuthenticationForm) {
 	var source = &models.LoginSource{
 		Type:              models.LoginType(form.Type),
 		Name:              form.Name,
-		IsActived:         true,
+		IsActived:         form.IsActive,
 		AllowAutoRegister: form.AllowAutoRegister,
 		Cfg:               u,
 	}
@@ -121,7 +138,7 @@ func EditAuthSource(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("admin.auths.edit")
 	ctx.Data["PageIsAdmin"] = true
 	ctx.Data["PageIsAdminAuthentications"] = true
-	ctx.Data["LoginTypes"] = models.LoginTypes
+	// ctx.Data["LoginTypes"] = models.LoginTypes
 	ctx.Data["SMTPAuths"] = models.SMTPAuths
 
 	id := com.StrTo(ctx.Params(":authid")).MustInt64()
@@ -143,7 +160,7 @@ func EditAuthSourcePost(ctx *middleware.Context, form auth.AuthenticationForm) {
 	ctx.Data["PageIsAdmin"] = true
 	ctx.Data["PageIsAdminAuthentications"] = true
 	ctx.Data["PageIsAuths"] = true
-	ctx.Data["LoginTypes"] = models.LoginTypes
+	// ctx.Data["LoginTypes"] = models.LoginTypes
 	ctx.Data["SMTPAuths"] = models.SMTPAuths
 
 	if ctx.HasError() {
@@ -194,7 +211,7 @@ func EditAuthSourcePost(ctx *middleware.Context, form auth.AuthenticationForm) {
 	u := models.LoginSource{
 		ID:                form.ID,
 		Name:              form.Name,
-		IsActived:         form.IsActived,
+		IsActived:         form.IsActive,
 		Type:              models.LoginType(form.Type),
 		AllowAutoRegister: form.AllowAutoRegister,
 		Cfg:               config,

templates/admin/auth/list.tmpl

@@ -29,7 +29,7 @@
               <tr>
                 <td>{{.ID}}</td>
                 <td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{.Name}}</a></td>
-                <td>{{.TypeString}}</td>
+                <td>{{.TypeName}}</td>
                 <td><i class="fa fa{{if .IsActived}}-check{{end}}-square-o"></i></td>
                 <td><span class="poping up" data-content="{{DateFmtLong .Updated}}" data-variation="tiny">{{DateFmtShort .Updated}}</span></td>
                 <td><span class="poping up" data-content="{{DateFmtLong .Created}}" data-variation="tiny">{{DateFmtShort .Created}}</span></td>

templates/admin/auth/new.tmpl

@@ -1,132 +1,151 @@
-{{template "ng/base/head" .}}
+{{template "base/head" .}}
-{{template "ng/base/header" .}}
+<div class="admin new authentication">
-<div id="admin-wrapper">
+  <div class="ui container">
-    <div id="setting-wrapper" class="main-wrapper">
+    <div class="ui grid">
-        <div id="admin-setting" class="container clear">
+      {{template "admin/navbar" .}}
-            {{template "admin/nav" .}}
+      <div class="twelve wide column content">
-            <div class="grid-4-5 left">
+        {{template "base/alert" .}}
-                <div class="setting-content">
+        <h4 class="ui top attached header">
-                    {{template "ng/base/alert" .}}
+          {{.i18n.Tr "admin.auths.new"}}
-                    <div id="setting-content">
+        </h4>
-                        <div class="panel panel-radius">
+        <div class="ui attached segment">
-                            <div class="panel-header">
+          <form class="ui form" action="{{.Link}}" method="post">
-                                <strong>{{.i18n.Tr "admin.auths.new"}}</strong>
-                            </div>
-                            <form class="form form-align panel-body" id="repo-setting-form" action="{{AppSubUrl}}/admin/auths/new" method="post">
             {{.CsrfTokenHtml}}
-                                <div class="field">
+            <!-- Types and name -->
-                                    <label class="req">{{.i18n.Tr "admin.auths.auth_type"}}</label>
+            <div class="inline required field {{if .Err_Type}}error{{end}}">
-                                    <select id="auth-type" name="type">
+              <label>{{.i18n.Tr "admin.auths.auth_type"}}</label>
-                                        {{range $key, $val := .LoginTypes}}
+              <div class="ui selection type dropdown">
-                                        <option value="{{$key}}">{{$val}}</option>
+                <input type="hidden" id="auth_type" name="type" value="{{.type}}">
+                <div class="text">{{.CurTypeName}}</div>
+                <i class="dropdown icon"></i>
+                <div class="menu">
+                  {{range .AuthSources}}
+                  <div class="item" data-value="{{.Type}}">{{.Name}}</div>
                   {{end}}
-                                    </select>
+                </div>
+              </div>
+            </div>
+            <div class="required inline field {{if .Err_Name}}error{{end}}">
+              <label for="name">{{.i18n.Tr "admin.auths.auth_name"}}</label>
+              <input id="name" name="name" value="{{.name}}" autofocus required>
+            </div>
+
+            <!-- LDAP and DLDAP -->
+            <div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}hide{{end}}">
+                <div class="required field">
+                    <label for="host">{{.i18n.Tr "admin.auths.host"}}</label>
+                    <input id="host" name="host" value="{{.host}}" placeholder="e.g. mydomain.com">
+                </div>
+                <div class="required field">
+                    <label for="port">{{.i18n.Tr "admin.auths.port"}}</label>
+                    <input id="port" name="port" value="{{.port}}"  placeholder="e.g. 636">
+                </div>
+                <div class="ldap required field {{if not (eq .type 2)}}hide{{end}}">
+                    <label for="bind_dn">{{.i18n.Tr "admin.auths.bind_dn"}}</label>
+                    <input id="bind_dn" name="bind_dn" value="{{.bind_dn}}" placeholder="e.g. cn=Search,dc=mydomain,dc=com">
+                </div>
+                <input class="fake" type="password">
+                <div class="ldap required field {{if not (eq .type 2)}}hide{{end}}">
+                    <label for="bind_password">{{.i18n.Tr "admin.auths.bind_password"}}</label>
+                    <input id="bind_password" name="bind_password" type="password" value="{{.bind_password}}">
+                    <p class="help text red">{{.i18n.Tr "admin.auths.bind_password_helper"}}</p>
+                </div>
+                <div class="ldap required field {{if not (eq .type 2)}}hide{{end}}">
+                    <label for="user_base">{{.i18n.Tr "admin.auths.user_base"}}</label>
+                    <input id="user_base" name="user_base" value="{{.user_base}}" placeholder="e.g. ou=Users,dc=mydomain,dc=com">
+                </div>
+                <div class="dldap required field {{if not (eq .type 5)}}hide{{end}}">
+                    <label for="user_dn">{{.i18n.Tr "admin.auths.user_dn"}}</label>
+                    <input id="user_dn" name="user_dn" value="{{.user_dn}}" placeholder="e.g. ou=Users,dc=mydomain,dc=com">
+                </div>
+                <div class="required field">
+                    <label for="filter">{{.i18n.Tr "admin.auths.filter"}}</label>
+                    <input id="filter" name="filter" value="{{.filter}}" placeholder="e.g. (&(objectClass=posixAccount)(uid=%s))">
                 </div>
                 <div class="field">
-                                    <label class="req" for="name">{{.i18n.Tr "admin.auths.auth_name"}}</label>
+                    <label for="admin_filter">{{.i18n.Tr "admin.auths.admin_filter"}}</label>
-                                    <input class="ipt ipt-large ipt-radius {{if .Err_AuthName}}ipt-error{{end}}" id="name" name="name" value="{{.name}}" required />
+                    <input id="admin_filter" name="admin_filter" value="{{.admin_filter}}">
                 </div>
-                                <div class="dldap ldap">
+                <div class="field">
-                                    <div class="dldap ldap field">
-                                        <label class="req" for="host">{{.i18n.Tr "admin.auths.host"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_Host}}ipt-error{{end}}" id="host" name="host" value="{{.host}}" />
-                                    </div>
-                                    <div class="dldap ldap field">
-                                        <label class="req" for="port">{{.i18n.Tr "admin.auths.port"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_Port}}ipt-error{{end}}" id="port" name="port" value="{{.port}}" />
-                                    </div>
-                                    <div class="dldap ldap field">
-                                        <label for="use_ssl">{{.i18n.Tr "admin.auths.enable_tls"}}</label>
-                                        <input name="use_ssl" type="checkbox" {{if .use_ssl}}checked{{end}}>
-                                    </div>
-                                    <div class="ldap field">
-                                        <label class="req" for="bind_dn">{{.i18n.Tr "admin.auths.bind_dn"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_BindDN}}ipt-error{{end}}" id="bind_dn" name="bind_dn" value="{{.bind_dn}}" />
-                                    </div>
-                                    <div class="ldap field">
-                                        <label class="req" for="bind_password">{{.i18n.Tr "admin.auths.bind_password"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_BindPassword}}ipt-error{{end}}" id="bind_password" name="bind_password" type="password" value="{{.bind_password}}" />
-                                    </div>
-                                    <div class="ldap field">
-                                        <label class="req" for="user_base">{{.i18n.Tr "admin.auths.user_base"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_UserBase}}ipt-error{{end}}" id="user_base" name="user_base" value="{{.user_base}}" />
-                                    </div>
-                                    <div class="dldap field hidden">
-                                        <label class="req" for="user_dn">{{.i18n.Tr "admin.auths.user_dn"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_UserDN}}ipt-error{{end}}" id="user_dn" name="user_dn" value="{{.user_dn}}" />
-                                    </div>
-                                    <div class="dldap ldap field">
-                                        <label class="req" for="filter">{{.i18n.Tr "admin.auths.filter"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_Filter}}ipt-error{{end}}" id="filter" name="filter" value="{{.filter}}" />
-                                    </div>
-                                    <div class="dldap ldap field">
-                                        <label for="filter">{{.i18n.Tr "admin.auths.admin_filter"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_AdminFilter}}ipt-error{{end}}" id="admin_filter" name="admin_filter" value="{{.admin_filter}}" />
-                                    </div>
-                                    <div class="dldap ldap field">
                     <label for="attribute_name">{{.i18n.Tr "admin.auths.attribute_name"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_AttributeName}}ipt-error{{end}}" id="attribute_name" name="attribute_name" value="{{.attribute_name}}" />
+                    <input id="attribute_name" name="attribute_name" value="{{.attribute_name}}">
                 </div>
-                                    <div class="dldap ldap field">
+                <div class="field">
                     <label for="attribute_surname">{{.i18n.Tr "admin.auths.attribute_surname"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_AttributeSurname}}ipt-error{{end}}" id="attribute_surname" name="attribute_surname" value="{{.attribute_surname}}" />
+                    <input id="attribute_surname" name="attribute_surname" value="{{.attribute_surname}}">
                 </div>
-                                    <div class="dldap ldap field">
+                <div class="required field">
-                                        <label class="req" for="attribute_mail">{{.i18n.Tr "admin.auths.attribute_mail"}}</label>
+                    <label for="attribute_mail">{{.i18n.Tr "admin.auths.attribute_mail"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_AttributeMail}}ipt-error{{end}}" id="attribute_mail" name="attribute_mail" value="{{.attribute_mail}}" />
+                    <input id="attribute_mail" name="attribute_mail" value="{{.attribute_mail}}" placeholder="e.g. mail">
                 </div>
             </div>
-                                <div class="smtp hidden">
+
-                                    <div class="field">
+            <!-- SMTP -->
-                                        <label class="req">{{.i18n.Tr "admin.auths.smtp_auth"}}</label>
+            <div class="smtp field {{if not (eq .type 3)}}hide{{end}}">
-                                        <select name="smtp_auth">
+              <div class="inline required field">
+                <label>{{.i18n.Tr "admin.auths.smtp_auth"}}</label>
+                <div class="ui selection type dropdown">
+                  <input type="hidden" id="smtp_auth" name="smtp_auth" value="{{.smtp_auth}}">
+                  <div class="text">{{.smtp_auth}}</div>
+                  <i class="dropdown icon"></i>
+                  <div class="menu">
                     {{range .SMTPAuths}}
-                                            <option value="{{.}}">{{.}}</option>
+                    <div class="item" data-value="{{.}}">{{.}}</div>
                     {{end}}
-                                        </select>
-                                    </div>
-                                    <div class="field">
-                                        <label class="req" for="smtp_host">{{.i18n.Tr "admin.auths.smtphost"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_SmtpHost}}ipt-error{{end}}" id="smtp_host" name="smtp_host" value="{{.smtp_host}}" />
-                                    </div>
-                                    <div class="field">
-                                        <label class="req" for="smtp_port">{{.i18n.Tr "admin.auths.smtpport"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_SmtpPort}}ipt-error{{end}}" id="smtp_port" name="smtp_port" value="{{.smtp_port}}" />
                   </div>
                 </div>
-                                <div class="pam hidden">
+              </div>
-                                    <div class="field">
+              <div class="required field">
-                                        <label class="req" for="pam_service_name">{{.i18n.Tr "admin.auths.pam_service_name"}}</label>
+                  <label for="smtp_host">{{.i18n.Tr "admin.auths.smtphost"}}</label>
-                                        <input class="ipt ipt-large ipt-radius {{if .Err_PAMServiceName}}ipt-error{{end}}" id="pam_service_name" name="pam_service_name" value="{{.pam_service_name}}" />
+                  <input id="smtp_host" name="smtp_host" value="{{.smtp_host}}" />
+              </div>
+              <div class="required field">
+                  <label for="smtp_port">{{.i18n.Tr "admin.auths.smtpport"}}</label>
+                  <input id="smtp_port" name="smtp_port" value="{{.smtp_port}}" />
               </div>
             </div>
-                                <div class="field">
+
-                                    <div class="smtp hidden">
+            <!-- PAM -->
-                                        <label></label>
+            <div class="pam required field {{if not (eq .type 4)}}hide{{end}}">
+              <label for="pam_service_name">{{.i18n.Tr "admin.auths.pam_service_name"}}</label>
+              <input id="pam_service_name" name="pam_service_name" value="{{.pam_service_name}}" />
+            </div>
+
+            <div class="ldap dldap smtp inline field {{if not (or (or (eq .type 2) (eq .type 5)) (eq .type 3))}}hide{{end}}">
+              <div class="ui checkbox">
+                <label><strong>{{.i18n.Tr "admin.auths.enable_tls"}}</strong></label>
                 <input name="tls" type="checkbox" {{if .tls}}checked{{end}}>
-                                        <strong>{{.i18n.Tr "admin.auths.enable_tls"}}</strong>
+              </div>
-                                        <br>
+            </div>
-                                        <label></label>
+            <div class="smtp inline field {{if not (eq .type 3)}}hide{{end}}">
+              <div class="ui checkbox">
+                <label><strong>{{.i18n.Tr "admin.auths.skip_tls_verify"}}</strong></label>
                 <input name="skip_verify" type="checkbox" {{if .skip_verify}}checked{{end}}>
-                                        <strong>{{.i18n.Tr "admin.auths.skip_tls_verify"}}</strong>
-                                        <br>
               </div>
-                                    <label></label>
-                                    <input name="allowautoregister" type="checkbox" {{if .allowautoregister}}checked{{end}}>
-                                    <strong>{{.i18n.Tr "admin.auths.enable_auto_register"}}</strong>
             </div>
+            <div class="inline field">
+              <div class="ui checkbox">
+                <label><strong>{{.i18n.Tr "admin.auths.enable_auto_register"}}</strong></label>
+                <input name="allow_auto_register" type="checkbox" {{if .allow_auto_register}}checked{{end}}>
+              </div>
+            </div>
+            <div class="inline field">
+              <div class="ui checkbox">
+                <label><strong>{{.i18n.Tr "admin.auths.activated"}}</strong></label>
+                <input name="is_active" type="checkbox" {{if .is_active}}checked{{end}}>
+              </div>
+            </div>
+
             <div class="field">
-                                    <label></label>
+               <button class="ui green button">{{.i18n.Tr "admin.auths.new"}}</button>
-                                    <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "admin.auths.new"}}</button>
             </div>
           </form>
         </div>
-                        <br>
+
-                        <div class="panel panel-radius">
+        <h4 class="ui top attached header">
-                            <div class="panel-header">
           {{.i18n.Tr "admin.auths.tips"}}
-                            </div>
+        </h4>
-                            <div class="panel-body admin-panel">
+        <div class="ui attached segment">
           <h5>GMail Setting:</h5>
           <p>Host: smtp.gmail.com, Post: 587, Enable TLS Encryption: true</p>
           </div>
@@ -134,7 +153,4 @@
     </div>
 	</div>
 </div>
-        </div>
+{{template "base/footer" .}}
-	</div>
-</div>
-{{template "ng/base/footer" .}}