Finish new install page, almost ready for 0.5 release

1 files changed, 129 insertions, 177 deletions

diff --git a/templates/install.tmpl b/templates/install.tmpl
index bf443de5a0..7840f7ad2c 100644
--- a/templates/install.tmpl
+++ b/templates/install.tmpl
@@ -1,197 +1,149 @@
-{{template "base/head" .}}
-<div id="body" class="container">
-    <form action="/install" method="post" class="form-horizontal card" id="install-card">
-        {{.CsrfTokenHtml}}
-        <h3>Install Steps For First-time Run</h3>
-        {{template "base/alert" .}}
-        <p class="help-block text-center">Gogs requires MySQL, SQLite3. or PostgreSQL. SQLite3 is only available in the official binary version.</p>
-        <div class="form-group">
-            <label class="col-md-3 control-label">Database Type: </label>
-            <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>
+{{template "ng/base/head" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div class="container clear">
+        <div class="setting-content">
+            {{template "ng/base/alert" .}}
+            <div id="setting-content">
+                <div class="panel panel-radius">
+                    <div class="panel-header">
+                        <strong>{{.i18n.Tr "install.title"}}</strong>
+                    </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="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="server-sql {{if eq .CurDbOption "SQLite3"}}hide{{end}}">
+                            <div class="field">
+                                <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="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="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="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>
+                        <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/>
+                        <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="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>
 
-        <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>
+                        <hr>
 
-        <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>
+                        <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/>
+                        <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>
 
-        <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>
+                        <hr>
 
-        <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 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="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 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="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 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/>
-
-                        <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>
+                        <hr>
 
-                                <div class="checkbox">
-                                    <label>
-                                        <input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
-                                        <strong>Enable Mail Notification</strong>
-                                    </label>
-                                </div>
-                            </div>
+                        <div class="field">
+                            <label></label>
+                            <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "install.install_gogs"}}</button>
                         </div>
-                    </div>
-
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-success" data-dismiss="modal">Confirm</button>
-                    </div>
+                    </form>
                 </div>
             </div>
         </div>
-    </form>
+    </div>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}