Finish new install page, almost ready for 0.5 release

conf/locale/locale_en-US.ini

@@ -38,6 +38,50 @@ issues = Issues
 
 cancel = Cancel
 
+[install]
+install = Installation
+title = Install Steps For First-time Run
+requite_db_desc = Gogs requires MySQL, PostgreSQL or SQLite3, but SQLite3 is usually available in the official binary version.
+db_type = Database Type
+host = Host
+user = User
+password = Password
+db_name = Database Name
+db_helper = Please use INNODB engine with utf8_general_ci charset for MySQL.
+ssl_mode = SSL Mode
+path = Path
+sqlite_helper = The file path of SQLite3 database.
+general_title = General Settings of Gogs
+repo_path = Repository Root Path
+repo_path_helper = All Git remote repositories will be saved to this directory.
+run_user = Run User
+run_user_helper = The user must have access to Repository Root Path and run Gogs.
+domain = Domain
+domain_helper = This affects SSH clone URLs.
+app_url = Application URL
+app_url_helper = This affects HTTP/HTTPS clone URL and somewhere in e-mail.
+email_title = Email Service Settings(Optional)
+smtp_host = SMTP Host
+mailer_user = Sender E-mail
+mailer_password = Sender Password 
+notify_title = Notification Settings(Optional)
+register_confirm = Enable Register Confirmation
+mail_notify = Enable Mail Notification
+admin_title = Admin Account Settings
+admin_name = Username
+admin_password = Password
+confirm_password = Confirm Password
+admin_email = E-mail
+install_gogs = Install Gogs
+test_git_failed = Fail to test 'git' command: %v
+sqlite3_not_available = Your release version does not support SQLite3, please download the official binary version from http://gogs.io/docs/installation/install_from_binary.html, NOT the gobuild version.
+invalid_db_setting = Database setting is not correct: %v
+invalid_repo_path = Repository root path is invalid: %v
+run_user_not_match = Run user isn't the current user: %s -> %s
+save_config_failed = Fail to save configuration: %v
+invalid_admin_setting = Admin account setting is invalid: %v
+install_success = Welcome! We're glad that you choose Gogs, have fun and take care.
+
 [home]
 uname_holder = Username or E-mail
 password_holder = Password
@@ -84,6 +128,7 @@ HttpsUrl = HTTPS URL
 PayloadUrl = Payload URL
 TeamName = Team name
 AuthName = Authorization name
+AdminEmail = Admin E-mail
 
 require_error = ` cannot be empty.`
 alpha_dash_error = ` must be valid alpha or numeric or dash(-_) characters.`
@@ -94,7 +139,7 @@ email_error = ` is not a valid e-mail address.`
 url_error = ` is not a valid URL.`
 unknown_error = Unknown error:
 captcha_incorrect = Captcha didn't match.
-password_not_match = Password and re-type password are not same.
+password_not_match = Password and confirm password are not same.
 
 username_been_taken = Username has been already taken.
 repo_name_been_taken = Repository name has been already taken.

conf/locale/locale_zh-CN.ini

@@ -38,6 +38,50 @@ issues = 工单管理
 
 cancel = 取消
 
+[install]
+install = 安装页面
+title = 首次运行安装程序
+requite_db_desc = Gogs 允许后端数据库为 MySQL、PostgreSQL 或 SQLite3，但是 SQLite3 一般只有官方二进制发行版才支持。
+db_type = 数据库类型
+host = 数据库主机
+user = 数据库用户
+password = 数据库用户密码
+db_name = 数据库名称
+db_helper = 如果您使用 MySQL，请使用 INNODB 引擎以及 utf8_general_ci 字符集。
+ssl_mode = SSL 模式
+path = 数据库文件路径
+sqlite_helper = SQLite3 数据库的文件路径。
+general_title = 应用基本设置
+repo_path = 仓库根目录
+repo_path_helper = 所有 Git 远程仓库都将被存放于该目录。
+run_user = 运行系统用户
+run_user_helper = 该用户必须具有对仓库根目录和运行 Gogs 的操作权限。
+domain = 域名
+domain_helper = 该设置影响 SSH 克隆地址。
+app_url = 应用 URL
+app_url_helper = 该设置影响 HTTP/HTTPS 克隆地址和一些邮箱中的链接。
+email_title = 邮件服务设置（可选）
+smtp_host = SMTP 主机
+mailer_user = 发送邮箱
+mailer_password = 发送邮箱密码
+notify_title = 通知提醒设置（可选）
+register_confirm = 启用注册邮箱确认
+mail_notify = 启用邮件通知提醒
+admin_title = 管理员帐号设置
+admin_name = 管理员用户名
+admin_password = 管理员密码
+confirm_password = 确认密码
+admin_email = 管理员邮箱
+install_gogs = 立即安装
+test_git_failed = 无法识别 'git' 命令：%v
+sqlite3_not_available = 您所使用的发行版不支持 SQLite3，请从 http://gogs.io/docs/installation/install_from_binary.html 下载官方二进制发行版，而不是 gobuild 版本。
+invalid_db_setting = 数据库设置不正确：%v
+invalid_repo_path = 仓库根目录设置不正确：%v
+run_user_not_match = 运行系统用户非当前用户：%s -> %s
+save_config_failed = 应用配置保存失败：%v
+invalid_admin_setting = 管理员帐户设置不正确：%v
+install_success = 您好！我们很高兴您选择使用 Gogs，祝您使用愉快，代码从此无 BUG！
+
 [home]
 uname_holder = 用户名或邮箱
 password_holder = 密码
@@ -84,6 +128,7 @@ HttpsUrl = HTTPS URL 地址
 PayloadUrl = 推送地址
 TeamName = 团队名称
 AuthName = 认证名称
+AdminEmail = 管理员邮箱
 
 require_error = 不能为空。
 alpha_dash_error = 必须为英文字母、阿拉伯数字或横线（-_）。

gogs.go

@@ -17,7 +17,7 @@ import (
 	"github.com/gogits/gogs/modules/setting"
 )
 
-const APP_VER = "0.4.9.0905 Beta"
+const APP_VER = "0.5.0.0907 Beta"
 
 func init() {
 	runtime.GOMAXPROCS(runtime.NumCPU())

modules/auth/user_form.go

@@ -13,24 +13,25 @@ import (
 
 type InstallForm struct {
 	Database        string `form:"database" binding:"Required"`
-	Host            string `form:"host"`
+	DbHost          string `form:"host"`
-	User            string `form:"user"`
+	DbUser          string `form:"user"`
-	Passwd          string `form:"passwd"`
+	DbPasswd        string `form:"passwd"`
 	DatabaseName    string `form:"database_name"`
 	SslMode         string `form:"ssl_mode"`
 	DatabasePath    string `form:"database_path"`
-	RepoRootPath    string `form:"repo_path"`
+	RepoRootPath    string `form:"repo_path" binding:"Required"`
-	RunUser         string `form:"run_user"`
+	RunUser         string `form:"run_user" binding:"Required"`
-	Domain          string `form:"domain"`
+	Domain          string `form:"domain" binding:"Required"`
-	AppUrl          string `form:"app_url"`
+	AppUrl          string `form:"app_url" binding:"Required"`
-	AdminName       string `form:"admin_name" binding:"Required;AlphaDashDot;MaxSize(30)"`
-	AdminPasswd     string `form:"admin_pwd" binding:"Required;MinSize(6);MaxSize(255)"`
-	AdminEmail      string `form:"admin_email" binding:"Required;Email;MaxSize(50)"`
 	SmtpHost        string `form:"smtp_host"`
 	SmtpEmail       string `form:"mailer_user"`
 	SmtpPasswd      string `form:"mailer_pwd"`
 	RegisterConfirm string `form:"register_confirm"`
 	MailNotify      string `form:"mail_notify"`
+	AdminName       string `form:"admin_name" binding:"Required;AlphaDashDot;MaxSize(30)"`
+	AdminPasswd     string `form:"admin_pwd" binding:"Required;MinSize(6);MaxSize(255)"`
+	ConfirmPasswd   string `form:"confirm_passwd" binding:"Required;MinSize(6);MaxSize(255)"`
+	AdminEmail      string `form:"admin_email" binding:"Required;Email;MaxSize(50)"`
 }
 
 func (f *InstallForm) Validate(ctx *macaron.Context, errs *binding.Errors, l i18n.Locale) {

public/ng/css/gogs.css

@@ -669,6 +669,19 @@ ol.linenums {
 #feature-wrapper .grid-1-2 {
   margin-bottom: 30px;
 }
+#install-form {
+  padding: 15px;
+}
+#install-form label {
+  width: 35%;
+}
+#install-form input {
+  width: 30%;
+}
+#install-form input[type="checkbox"],
+#install-form input[type="radio"] {
+  width: auto;
+}
 /*
 The dashboard page style
 */

public/ng/js/gogs.js

@@ -521,7 +521,7 @@ function initAdmin() {
             e.preventDefault();
             return true;
         }
-        var $form = $('user-profile-form');
+        var $form = $('#user-profile-form');
         $form.attr('action', $form.data('delete-url'));
     });
     // Create authorization.
@@ -547,6 +547,43 @@ function initAdmin() {
     });
 }
 
+function initInstall() {
+    // Change database type.
+    (function () {
+        var mysql_default = '127.0.0.1:3306';
+        var postgres_default = '127.0.0.1:5432';
+
+        $('#install-database').on("change", function () {
+            var val = $(this).val();
+            if (val != "SQLite3") {
+                $('.server-sql').show();
+                $('.sqlite-setting').addClass("hide");
+                if (val == "PostgreSQL") {
+                    $('.pgsql-setting').removeClass("hide");
+
+                    // Change the host value to the Postgres default, but only
+                    // if the user hasn't already changed it from the MySQL
+                    // default.
+                    if ($('#database-host').val() == mysql_default) {
+                        $('#database-host').val(postgres_default);
+                    }
+                } else if (val == 'MySQL') {
+                    $('.pgsql-setting').addClass("hide");
+                    if ($('#database-host').val() == postgres_default) {
+                        $('#database-host').val(mysql_default);
+                    }
+                } else {
+                    $('.pgsql-setting').addClass("hide");
+                }
+            } else {
+                $('.server-sql').hide();
+                $('.pgsql-setting').hide();
+                $('.sqlite-setting').removeClass("hide");
+            }
+        });
+    }());
+}
+
 $(document).ready(function () {
     initCore();
     if ($('#user-profile-setting').length) {
@@ -579,6 +616,9 @@ $(document).ready(function () {
     if ($('#admin-setting').length) {
         initAdmin();
     }
+    if ($('#install-form').length) {
+        initInstall();
+    }
 
     Tabs('#dashboard-sidebar-menu');
 

public/ng/less/gogs/external.less

@@ -1,97 +1,105 @@
 @import "base";
 @import "../ui/var";
 #promo-wrapper {
-  padding-top: 50px;
+    padding-top: 50px;
-  background-color: @headerBgColor;
+    background-color: @headerBgColor;
 }
-
 #promo-logo {
-  img {
+    margin-right: 50px;
-    max-width: 250px;
+    padding-bottom: 50px;
-  }
+    img {
-  margin-right: 50px;
+        max-width: 250px;
-  padding-bottom: 50px;
+    }
 }
-
 #promo-content {
-  color: #FFF;
+    color: #FFF;
-  margin-left: 300px;
+    margin-left: 300px;
-  h1,
+    h1,
-  h2 {
+    h2 {
-    font-family: 'PT Sans Narrow', sans-serif;
+        font-family: 'PT Sans Narrow', sans-serif;
-    line-height: 60px;
+        line-height: 60px;
-    margin-bottom: 0;
+        margin-bottom: 0;
-    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
+        text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
-  }
+    }
-  h1 {
+    h1 {
-    font-size: 96px;
+        font-size: 96px;
-    line-height: 96px;
+        line-height: 96px;
-    margin-bottom: 30px;
+        margin-bottom: 30px;
-  }
+    }
-  h2 {
+    h2 {
-    font-size: 52px;
+        font-size: 52px;
-    line-height: 70px;
+        line-height: 70px;
-    font-weight: normal;
+        font-weight: normal;
-  }
+    }
 }
-
 #promo-form {
-  padding: 40px 0;
+    padding: 40px 0;
-  .ipt-large {
+    .ipt-large {
-    border: none;
+        border: none;
-    border-radius: 4px;
+        border-radius: 4px;
-    font-size: 18px;
+        font-size: 18px;
-    &:focus {
+        margin-right: 12px;
-      box-shadow: 0 0 3px #FFF;
+        &:focus {
+          box-shadow: 0 0 3px #FFF;
+        }
+    }
+    .btn-large {
+        border-radius: 4px;
+        font-size: 18px;
+        margin-right: 12px;
     }
-    margin-right: 12px;
-  }
-  .btn-large {
-    border-radius: 4px;
-    font-size: 18px;
-    margin-right: 12px;
-  }
 }
-
 #promo-social {
-  padding-bottom: 60px;
+    padding-bottom: 60px;
-  .qq{
+    .qq{
-    box-shadow: 0 0 1px #1c6399;
+        box-shadow: 0 0 1px #1c6399;
-  }
+    }
-}
+}
-
+#feature-wrapper {
-#feature-wrapper {
+    font-family: Lato, sans-serif;
-  font-family: Lato, sans-serif;
+    font-size: 18px;
-  font-size: 18px;
+    padding: 50px 0 100px 0;
-  padding: 50px 0 100px 0;
+    .octicon {
-  .octicon {
+        color: @btnRedColor;
-    color: @btnRedColor;
+        font-size: 60px;
-    font-size: 60px;
+        height: 60px;
-    height: 60px;
+        width: 60px;
-    width: 60px;
+        line-height: 60px;
-    line-height: 60px;
+        margin-right: 12px;
-    margin-right: 12px;
+        vertical-align: middle;
-    vertical-align: middle;
+        display: inline-block;
-    display: inline-block;
+    }
-  }
+    b {
-  b {
+        color: #000;
-    color: #000;
+        font-size: 24px;
-    font-size: 24px;
+        display: inline-block;
-    display: inline-block;
+        line-height: 60px;
-    line-height: 60px;
+    }
-  }
+    p {
-  p {
+        margin: 1em 0;
-    margin: 1em 0;
+        line-height: 40px;
-    line-height: 40px;
+        padding-right: 30px;
-    padding-right: 30px;
+    }
-  }
+    a {
-  a {
+        color: @btnRedColor;
-    color: @btnRedColor;
+        &:hover {
-    &:hover {
+            color: @btnHoverRedColor;
-      color: @btnHoverRedColor;
+        }
+    }
+    .grid-1-2 {
+        margin-bottom: 30px;
+    }
+}
+#install-form {
+    padding: 15px;
+    label {
+        width: 35%;
+    }
+    input {
+        width: 30%;
+    }
+    input[type="checkbox"], 
+    input[type="radio"] {
+        width: auto;
     }
-  }
-  .grid-1-2 {
-    margin-bottom: 30px;
-  }
 }

routers/install.go

@@ -81,22 +81,22 @@ func renderDbOption(ctx *middleware.Context) {
 // @router /install [get]
 func Install(ctx *middleware.Context, form auth.InstallForm) {
 	if setting.InstallLock {
-		ctx.Handle(404, "install.Install", errors.New("Installation is prohibited"))
+		ctx.Handle(404, "Install", errors.New("Installation is prohibited"))
 		return
 	}
 
-	ctx.Data["Title"] = "Install"
+	ctx.Data["Title"] = ctx.Tr("install.install")
 	ctx.Data["PageIsInstall"] = true
 
 	// Get and assign values to install form.
-	if len(form.Host) == 0 {
+	if len(form.DbHost) == 0 {
-		form.Host = models.DbCfg.Host
+		form.DbHost = models.DbCfg.Host
 	}
-	if len(form.User) == 0 {
+	if len(form.DbUser) == 0 {
-		form.User = models.DbCfg.User
+		form.DbUser = models.DbCfg.User
 	}
-	if len(form.Passwd) == 0 {
+	if len(form.DbPasswd) == 0 {
-		form.Passwd = models.DbCfg.Pwd
+		form.DbPasswd = models.DbCfg.Pwd
 	}
 	if len(form.DatabaseName) == 0 {
 		form.DatabaseName = models.DbCfg.Name
@@ -131,11 +131,11 @@ func Install(ctx *middleware.Context, form auth.InstallForm) {
 
 func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 	if setting.InstallLock {
-		ctx.Handle(404, "install.InstallPost", errors.New("Installation is prohibited"))
+		ctx.Handle(404, "InstallPost", errors.New("Installation is prohibited"))
 		return
 	}
 
-	ctx.Data["Title"] = "Install"
+	ctx.Data["Title"] = ctx.Tr("install.install")
 	ctx.Data["PageIsInstall"] = true
 
 	renderDbOption(ctx)
@@ -147,7 +147,7 @@ func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 	}
 
 	if _, err := exec.LookPath("git"); err != nil {
-		ctx.RenderWithErr("Fail to test 'git' command: "+err.Error(), INSTALL, &form)
+		ctx.RenderWithErr(ctx.Tr("install.test_git_failed", err), INSTALL, &form)
 		return
 	}
 
@@ -155,9 +155,9 @@ func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 	// Test database setting.
 	dbTypes := map[string]string{"MySQL": "mysql", "PostgreSQL": "postgres", "SQLite3": "sqlite3"}
 	models.DbCfg.Type = dbTypes[form.Database]
-	models.DbCfg.Host = form.Host
+	models.DbCfg.Host = form.DbHost
-	models.DbCfg.User = form.User
+	models.DbCfg.User = form.DbUser
-	models.DbCfg.Pwd = form.Passwd
+	models.DbCfg.Pwd = form.DbPasswd
 	models.DbCfg.Name = form.DatabaseName
 	models.DbCfg.SslMode = form.SslMode
 	models.DbCfg.Path = form.DatabasePath
@@ -167,17 +167,16 @@ func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 	if err := models.NewTestEngine(x); err != nil {
 		// NOTE: should use core.QueryDriver (github.com/go-xorm/core)
 		if strings.Contains(err.Error(), `Unknown database type: sqlite3`) {
-			ctx.RenderWithErr("Your release version does not support SQLite3, please download the official binary version "+
+			ctx.RenderWithErr(ctx.Tr("install.sqlite3_not_available"), INSTALL, &form)
-				"from http://gogs.io/docs/installation/install_from_binary.md, NOT the gobuild version.", INSTALL, &form)
 		} else {
-			ctx.RenderWithErr("Database setting is not correct: "+err.Error(), INSTALL, &form)
+			ctx.RenderWithErr(ctx.Tr("install.invalid_db_setting", err), INSTALL, &form)
 		}
 		return
 	}
 
 	// Test repository root path.
 	if err := os.MkdirAll(form.RepoRootPath, os.ModePerm); err != nil {
-		ctx.RenderWithErr("Repository root path is invalid: "+err.Error(), INSTALL, &form)
+		ctx.RenderWithErr(ctx.Tr("install.invalid_repo_path", err), INSTALL, &form)
 		return
 	}
 
@@ -188,7 +187,13 @@ func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 	}
 	// Does not check run user when the install lock is off.
 	if form.RunUser != curUser {
-		ctx.RenderWithErr("Run user isn't the current user: "+form.RunUser+" -> "+curUser, INSTALL, &form)
+		ctx.RenderWithErr(ctx.Tr("install.run_user_not_match", form.RunUser, curUser), INSTALL, &form)
+		return
+	}
+
+	// Check admin password.
+	if form.AdminPasswd != form.ConfirmPasswd {
+		ctx.RenderWithErr(ctx.Tr("form.password_not_match"), INSTALL, form)
 		return
 	}
 
@@ -224,7 +229,7 @@ func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 
 	os.MkdirAll("custom/conf", os.ModePerm)
 	if err := goconfig.SaveConfigFile(setting.Cfg, path.Join(setting.CustomPath, "conf/app.ini")); err != nil {
-		ctx.RenderWithErr("Fail to save configuration: "+err.Error(), INSTALL, &form)
+		ctx.RenderWithErr(ctx.Tr("install.save_config_failed", err), INSTALL, &form)
 		return
 	}
 
@@ -235,13 +240,13 @@ func InstallPost(ctx *middleware.Context, form auth.InstallForm) {
 		IsAdmin: true, IsActive: true}); err != nil {
 		if err != models.ErrUserAlreadyExist {
 			setting.InstallLock = false
-			ctx.RenderWithErr("Admin account setting is invalid: "+err.Error(), INSTALL, &form)
+			ctx.RenderWithErr(ctx.Tr("install.invalid_admin_setting", err), INSTALL, &form)
 			return
 		}
 		log.Info("Admin account already exist")
 	}
 
 	log.Info("First-time run install finished!")
-	ctx.Flash.Success("Welcome! We're glad that you choose Gogs, have fun and take care.")
+	ctx.Flash.Success(ctx.Tr("install.install_success"))
 	ctx.Redirect("/user/login")
 }

templates/.VERSION

@@ -1 +1 @@
-0.4.9.0905 Beta
+0.5.0.0907 Beta

templates/install.tmpl

@@ -1,197 +1,149 @@
-{{template "base/head" .}}
+{{template "ng/base/head" .}}
-<div id="body" class="container">
+<div id="setting-wrapper" class="main-wrapper">
-    <form action="/install" method="post" class="form-horizontal card" id="install-card">
+    <div class="container clear">
-        {{.CsrfTokenHtml}}
+        <div class="setting-content">
-        <h3>Install Steps For First-time Run</h3>
+            {{template "ng/base/alert" .}}
-        {{template "base/alert" .}}
+            <div id="setting-content">
-        <p class="help-block text-center">Gogs requires MySQL, SQLite3. or PostgreSQL. SQLite3 is only available in the official binary version.</p>
+                <div class="panel panel-radius">
-        <div class="form-group">
+                    <div class="panel-header">
-            <label class="col-md-3 control-label">Database Type: </label>
+                        <strong>{{.i18n.Tr "install.title"}}</strong>
-            <div class="col-md-8">
-                <select name="database" id="install-database" class="form-control">
-                    {{if .CurDbOption}}<option value="{{.CurDbOption}}">{{.CurDbOption}}</option>{{end}}
-                    {{range .DbOptions}}
-                    {{if not (eq $.CurDbOption .)}}<option value="{{.}}" >{{.}}</option>{{end}}
-                    {{end}}
-                </select>
-            </div>
-        </div>
-
-        <div class="server-sql {{if eq .CurDbOption "SQLite3"}}hide{{end}}">
-            <div class="form-group">
-                <label class="col-md-3 control-label">Host: </label>
-                <div class="col-md-8">
-                    <input name="host" id="database-host" class="form-control" placeholder="Type database server host" value="{{.host}}">
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label class="col-md-3 control-label">User: </label>
-                <div class="col-md-8">
-                    <input name="user" class="form-control" placeholder="Type database username" value="{{.user}}">
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label class="col-md-3 control-label">Password: </label>
-                <div class="col-md-8">
-                    <input name="passwd" type="password" class="form-control" placeholder="Type database password" value="{{.passwd}}">
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label class="col-md-3 control-label">Database Name: </label>
-                <div class="col-md-8">
-                    <input name="database_name" type="text" class="form-control" placeholder="Type mysql database name" value="{{.database_name}}">
-                    <p class="help-block">Recommend use INNODB engine with utf8_general_ci charset.</p>
-                </div>
-            </div>
-
-            <div class="form-group pgsql-setting {{if not (eq .CurDbOption "PostgreSQL")}}hide{{end}}">
-                <label class="col-md-3 control-label">SSL Mode: </label>
-                <div class="col-md-8">
-                    <select name="ssl_mode" class="form-control">
-                        <option value="disable">Disable</option>
-                        <option value="require">Require</option>
-                        <option value="verify-full">Verify Full</option>
-                    </select>
-                </div>
-            </div>
-        </div>
-
-        <div class="sqlite-setting {{if not (eq .CurDbOption "SQLite3")}}hide{{end}}">
-            <div class="form-group">
-                <label class="col-md-3 control-label">Path: </label>
-                <div class="col-md-8">
-                    <input name="database_path" class="form-control" placeholder="Type sqlite3 file path" value="{{.database_path}}">
-                    <p class="help-block">The file path of SQLite3 database.</p>
-                </div>
-            </div>
-        </div>
-
-        <hr/>
-
-        <p class="help-block text-center">General Settings of Gogs</p>
-        <div class="form-group">
-            <label class="col-md-3 control-label">Repository Path: </label>
-            <div class="col-md-8">
-                <input name="repo_path" type="text" class="form-control" placeholder="Type your repository directory" value="{{.repo_path}}" required="required">
-                <p class="help-block">The git copy of each repository is saved in this directory.</p>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-3 control-label">Run User: </label>
-            <div class="col-md-8">
-                <input name="run_user" type="text" class="form-control" placeholder="Type system user name" value="{{.run_user}}" required="required">
-                <p class="help-block">The user has access to visit and run Gogs.</p>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-3 control-label">Domain: </label>
-            <div class="col-md-8">
-                <input name="domain" type="text" class="form-control" placeholder="Type your domain name" value="{{.domain}}" required="required">
-                <p class="help-block">This affects SSH clone URL.</p>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-3 control-label">App URL: </label>
-            <div class="col-md-8">
-                <input name="app_url" type="text" class="form-control" placeholder="Type app root URL" value="{{.app_url}}" required="required">
-                <p class="help-block">This affects HTTP/HTTPS clone URL and somewhere in e-mail.</p>
-            </div>
-        </div>
-
-        <hr/>
-
-        <p class="help-block text-center">Admin Account Settings</p>
-        <div class="form-group {{if .Err_AdminName}}has-error has-feedback{{end}}">
-            <label class="col-md-3 control-label">Username: </label>
-            <div class="col-md-8">
-                <input name="admin_name" type="text" class="form-control" placeholder="Type admin user name" value="{{.admin_name}}" required="required">
-            </div>
-        </div>
-
-        <div class="form-group {{if .Err_AdminPasswd}}has-error has-feedback{{end}}">
-            <label class="col-md-3 control-label">Password: </label>
-            <div class="col-md-8">
-                <input name="admin_pwd" type="password" class="form-control" placeholder="Type admin user password" value="{{.admin_pwd}}" required="required">
-            </div>
-        </div>
-
-        <div class="form-group {{if .Err_AdminEmail}}has-error has-feedback{{end}}">
-            <label class="col-md-3 control-label">E-mail: </label>
-            <div class="col-md-8">
-                <input name="admin_email" type="text" class="form-control" placeholder="Type admin user e-mail" value="{{.admin_email}}" required="required">
-            </div>
-        </div>
-
-        <hr/>
-
-        <div class="form-group text-center">
-            <button class="btn btn-danger btn-lg">Install Gogs</button>
-            <button class="btn btn-default btn-sm" type="button" data-toggle="modal" data-target="#advance-options-modal">
-                Advanced Options
-            </button>
-        </div>
-
-        <div class="modal fade" id="advance-options-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header"><h4 class="modal-title">Advanced Options</h4></div>
-                    <div class="modal-body">
-                        <p class="help-block text-center">Email Service Settings</p>
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">SMTP Host: </label>
-                            <div class="col-md-8">
-                                <input name="smtp_host" type="text" class="form-control" placeholder="Type SMTP host address and port" value="{{.smtp_host}}">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">Username: </label>
-                            <div class="col-md-8">
-                                <input name="mailer_user" type="text" class="form-control" placeholder="Type SMTP user e-mail address" value="{{.mailer_user}}">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">Password: </label>
-                            <div class="col-md-8">
-                                <input name="mailer_pwd" type="password" class="form-control" placeholder="Type SMTP user password" value="{{.mailer_pwd}}">
-                            </div>
-                        </div>
-
-                        <hr/>
-
-                        <p class="text-center help-block">Notification Settings</p>
-                        <div class="form-group">
-                            <div class="col-md-offset-3 col-md-7">
-                                <div class="checkbox">
-                                    <label>
-                                        <input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
-                                        <strong>Enable Register Confirmation</strong>
-                                    </label>
-                                </div>
-
-                                <div class="checkbox">
-                                    <label>
-                                        <input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
-                                        <strong>Enable Mail Notification</strong>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
                     </div>
+                    <form class="form form-align panel-body" id="install-form" action="/install" method="post">
+                        {{.CsrfTokenHtml}}
+                        <div class="text-center panel-desc">{{.i18n.Tr "install.requite_db_desc"}}</div>
+                        <div class="field">
+                            <label class="req">{{.i18n.Tr "install.db_type"}}</label>
+                            <select name="database" id="install-database" class="form-control">
+                                {{range .DbOptions}}
+                                <option value="{{.}}"{{if eq $.CurDbOption .}}selected{{end}}>{{.}}</option>
+                                {{end}}
+                            </select>
+                        </div>
 
-                    <div class="modal-footer">
+                        <div class="server-sql {{if eq .CurDbOption "SQLite3"}}hide{{end}}">
-                        <button type="button" class="btn btn-success" data-dismiss="modal">Confirm</button>
+                            <div class="field">
-                    </div>
+                                <label class="req" for="host">{{.i18n.Tr "install.host"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_DbHost}}ipt-error{{end}}" id="host" name="host" value="{{.host}}" />
+                            </div>
+                            <div class="field">
+                                <label class="req" for="user">{{.i18n.Tr "install.user"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_DbUser}}ipt-error{{end}}" id="user" name="user" value="{{.user}}" />
+                            </div>
+                            <div class="field">
+                                <label class="req" for="passwd">{{.i18n.Tr "install.password"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_DbPasswd}}ipt-error{{end}}" id="passwd" name="passwd" type="password" value="{{.passwd}}" />
+                            </div>
+                            <div class="field">
+                                <label class="req" for="database_name">{{.i18n.Tr "install.db_name"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_DatabaseName}}ipt-error{{end}}" id="database_name" name="database_name" value="{{.database_name}}" />
+                                <label></label>
+                                <span class="help">{{.i18n.Tr "install.db_helper"}}</span>
+                            </div>
+                        </div>
+
+                        <div class="field pgsql-setting {{if not (eq .CurDbOption "PostgreSQL")}}hide{{end}}">
+                            <label class="req">{{.i18n.Tr "install.ssl_mode"}}</label>
+                            <select name="ssl_mode" class="form-control">
+                                <option value="disable">Disable</option>
+                                <option value="require">Require</option>
+                                <option value="verify-full">Verify Full</option>
+                            </select>
+                        </div>
+
+                        <div class="field sqlite-setting {{if not (eq .CurDbOption "SQLite3")}}hide{{end}}">
+                            <label class="req" for="database_path">{{.i18n.Tr "install.path"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_DatabasePath}}ipt-error{{end}}" id="database_path" name="database_path" value="{{.database_path}}" />
+                            <label></label>
+                            <span class="help">{{.i18n.Tr "install.sqlite_helper"}}</span>
+                        </div>
+
+                        <hr>
+
+                        <div class="text-center panel-desc">{{.i18n.Tr "install.general_title"}}</div>
+                        <div class="field">
+                            <label class="req" for="repo_path">{{.i18n.Tr "install.repo_path"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_RepoRootPath}}ipt-error{{end}}" id="repo_path" name="repo_path" value="{{.repo_path}}" required />
+                            <label></label>
+                            <span class="help">{{.i18n.Tr "install.repo_path_helper"}}</span>
+                        </div>
+                        <div class="field">
+                            <label class="req" for="run_user">{{.i18n.Tr "install.run_user"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_RunUser}}ipt-error{{end}}" id="run_user" name="run_user" value="{{.run_user}}" required />
+                            <label></label>
+                            <span class="help">{{.i18n.Tr "install.run_user_helper"}}</span>
+                        </div>
+                        <div class="field">
+                            <label class="req" for="domain">{{.i18n.Tr "install.domain"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_Domain}}ipt-error{{end}}" id="domain" name="domain" value="{{.domain}}" required />
+                            <label></label>
+                            <span class="help">{{.i18n.Tr "install.domain_helper"}}</span>
+                        </div>
+                        <div class="field">
+                            <label class="req" for="app_url">{{.i18n.Tr "install.app_url"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_AppUrl}}ipt-error{{end}}" id="app_url" name="app_url" value="{{.app_url}}" required />
+                            <label></label>
+                            <span class="help">{{.i18n.Tr "install.app_url_helper"}}</span>
+                        </div>
+
+                        <hr>
+
+                        <div class="text-center panel-desc">{{.i18n.Tr "install.email_title"}}</div>
+                        <div class="field">
+                            <label for="smtp_host">{{.i18n.Tr "install.smtp_host"}}</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 for="mailer_user">{{.i18n.Tr "install.mailer_user"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_SmtpEmail}}ipt-error{{end}}" id="mailer_user" name="mailer_user" value="{{.mailer_user}}" />
+                        </div>
+                        <div class="field">
+                            <label for="mailer_pwd">{{.i18n.Tr "install.mailer_password"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_SmtpPasswd}}ipt-error{{end}}" id="mailer_pwd" name="mailer_pwd" type="password" value="{{.mailer_pwd}}" />
+                        </div>
+
+                        <hr>
+
+                        <div class="text-center panel-desc">{{.i18n.Tr "install.notify_title"}}</div>
+                        <div class="field">
+                            <label></label>
+                            <input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
+                            <strong>{{.i18n.Tr "install.register_confirm"}}</strong>
+                            <br>
+                            <label></label>
+                            <input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
+                            <strong>{{.i18n.Tr "install.mail_notify"}}</strong>
+                        </div>
+
+                        <hr>
+
+                        <div class="text-center panel-desc">{{.i18n.Tr "install.admin_title"}}</div>
+                        <div class="field">
+                            <label class="req" for="admin_name">{{.i18n.Tr "install.admin_name"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_AdminName}}ipt-error{{end}}" id="admin_name" name="admin_name" value="{{.admin_name}}" required />
+                        </div>
+                        <div class="field">
+                            <label class="req" for="admin_pwd">{{.i18n.Tr "install.admin_password"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_AdminPasswd}}ipt-error{{end}}" id="admin_pwd" name="admin_pwd" type="password" value="{{.admin_pwd}}" required />
+                        </div>
+                        <div class="field">
+                            <label class="req" for="confirm_passwd">{{.i18n.Tr "install.confirm_password"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_AdminPasswd}}ipt-error{{end}}" id="confirm_passwd" name="confirm_passwd" type="password" required />
+                        </div>
+                        <div class="field">
+                            <label class="req" for="admin_email">{{.i18n.Tr "install.admin_email"}}</label>
+                            <input class="ipt ipt-large ipt-radius {{if .Err_AdminEmail}}ipt-error{{end}}" id="admin_email" name="admin_email" value="{{.admin_email}}" required />
+                        </div>
+
+                        <hr>
+
+                        <div class="field">
+                            <label></label>
+                            <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "install.install_gogs"}}</button>
+                        </div>
+                    </form>
                 </div>
             </div>
         </div>
-    </form>
+    </div>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}