UI: install - database settings

This commit is contained in:
Unknwon 2015-07-08 01:09:03 +08:00
parent ffd17924fd
commit 5dd3dd71a0
12 changed files with 317 additions and 159 deletions

View file

@ -50,6 +50,7 @@ code = Code
install = Installation
title = Install Steps For First-time Run
requite_db_desc = Gogs requires MySQL, PostgreSQL or SQLite3.
db_title = Database Settings
db_type = Database Type
host = Host
user = User
@ -59,7 +60,8 @@ 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
general_title = Application General Settings
repo_path = Repository Root Path
repo_path_helper = All Git remote repositories will be saved to this directory.
run_user = Run User

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,43 @@
function initInstall() {
if ($('.install').length == 0) {
return;
}
// Database type change detection.
$("#db_type").change(function () {
var db_type = $('#db_type').val();
if (db_type === "SQLite3") {
$('#sql_settings').hide();
$('#pgsql_settings').hide();
$('#sqlite_settings').show();
return;
}
var mysql_default = '127.0.0.1:3306';
var postgres_default = '127.0.0.1:5432';
$('#sqlite_settings').hide();
$('#sql_settings').show();
if (db_type === "PostgreSQL") {
$('#pgsql_settings').show();
if ($('#db_host').val() == mysql_default) {
$('#db_host').val(postgres_default);
}
} else {
$('#pgsql_settings').hide();
if ($('#db_host').val() == postgres_default) {
$('#db_host').val(mysql_default);
}
}
});
};
$(document).ready(function () {
// Semantic UI modules.
$('.dropdown').dropdown({
$('.dropdown').dropdown();
$('.slide.up.dropdown').dropdown({
transition: 'slide up'
});
initInstall();
});

View file

@ -62,6 +62,11 @@ footer {
}
}
}
.hide {
display: none;
}
.generate-img(16);
.generate-img(@n, @i: 1) when (@i =< @n) {
.img-@{i} {

8
public/less/_form.less Normal file
View file

@ -0,0 +1,8 @@
.form {
.help {
color: #999999;
padding-top: .6em;
padding-bottom: .6em;
display: inline-block;
}
}

22
public/less/_install.less Normal file
View file

@ -0,0 +1,22 @@
.install {
padding-top: 45px;
padding-bottom: @footer-margin * 3;
.attached.header {
background: #f0f0f0;
}
form {
label {
text-align: right;
width: 40% !important;
}
input {
width: 35% !important;
}
.field {
text-align: left;
.help {
margin-left: 41%;
}
}
}
}

View file

@ -1,3 +1,5 @@
@import "_octicons";
@import "_base";
@import "_home";
@import "_install";
@import "_form";

View file

@ -11,7 +11,7 @@
<a target="_blank" href="https://plus.google.com/communities/115599856376145964459"><i class="fa fa-google-plus"></i><span class="sr-only">Google Plus</span></a>
<a target="_blank" href="http://weibo.com/gogschina"><i class="fa fa-weibo"></i><span class="sr-only">Sina Weibo</span></a>
{{end}}
<div class="ui language bottom pointing dropdown link item">
<div class="ui language bottom pointing slide up dropdown link item">
<i class="world icon"></i>
<div class="text">{{.LangName}}</div>
<div class="menu">

View file

@ -34,6 +34,7 @@
<body>
<div class="full height">
<noscript>Please enable JavaScript in your browser!</noscript>
{{if not .PageIsInstall}}
<div class="following bar light">
<div class="ui page grid">
<div class="column">
@ -58,3 +59,4 @@
</div>
</div>
</div>
{{end}}

View file

@ -1,155 +1,80 @@
{{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="{{AppSubUrl}}/install" method="post">
{{template "base/head" .}}
<div class="install">
<div class="ui middle very relaxed page grid">
<div class="sixteen wide center aligned centered column">
<h3 class="ui top attached header">
{{.i18n.Tr "install.title"}}
</h3>
<div class="ui attached segment">
<form class="ui form" action="{{AppSubUrl}}/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="db_type" id="install-database" class="form-control">
<!-- Dtabase Settings -->
<h4 class="ui dividing header">{{.i18n.Tr "install.db_title"}}</h4>
<p>{{.i18n.Tr "install.requite_db_desc"}}</p>
<div class="inline required field">
<label>{{.i18n.Tr "install.db_type"}}</label>
<div class="ui selection database type dropdown">
<input type="hidden" id="db_type" name="db_type" value="{{.CurDbOption}}">
<div class="default text">{{.CurDbOption}}</div>
<i class="dropdown icon"></i>
<div class="menu">
{{range .DbOptions}}
<option value="{{.}}"{{if eq $.CurDbOption .}}selected{{end}}>{{.}}</option>
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</select>
</div>
</div>
</div>
<div class="server-sql {{if eq .CurDbOption "SQLite3"}}hide{{end}}">
<div class="field">
<label class="req" for="db_host">{{.i18n.Tr "install.host"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbHost}}ipt-error{{end}}" id="db_host" name="db_host" value="{{.db_host}}" />
<div id="sql_settings" class="{{if eq .CurDbOption "SQLite3"}}hide{{end}}">
<div class="inline required field">
<label for="db_host">{{.i18n.Tr "install.host"}}</label>
<input id="db_host" name="db_host" value="{{.db_host}}">
</div>
<div class="field">
<label class="req" for="db_user">{{.i18n.Tr "install.user"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbUser}}ipt-error{{end}}" id="db_user" name="db_user" value="{{.db_user}}" />
<div class="inline required field">
<label for="db_user">{{.i18n.Tr "install.user"}}</label>
<input id="db_user" name="db_user" value="{{.db_user}}">
</div>
<div class="field">
<label class="req" for="db_passwd">{{.i18n.Tr "install.password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbPasswd}}ipt-error{{end}}" id="db_passwd" name="db_passwd" type="password" value="{{.db_passwd}}" />
<div class="inline required field">
<label for="db_passwd">{{.i18n.Tr "install.password"}}</label>
<input id="db_passwd" name="db_passwd" type="password" value="{{.db_passwd}}">
</div>
<div class="field">
<label class="req" for="db_name">{{.i18n.Tr "install.db_name"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbName}}ipt-error{{end}}" id="db_name" name="db_name" value="{{.db_name}}" />
<label></label>
<div class="inline required field">
<label for="db_name">{{.i18n.Tr "install.db_name"}}</label>
<input id="db_name" name="db_name" value="{{.db_name}}">
<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 id="pgsql_settings" class="{{if not (eq .CurDbOption "PostgreSQL")}}hide{{end}}">
<div class="inline required field">
<label>{{.i18n.Tr "install.ssl_mode"}}</label>
<div class="ui selection database type dropdown">
<input type="hidden" name="ssl_mode" value="disable">
<div class="default text">disable</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="disable">Disable</div>
<div class="item" data-value="require">Require</div>
<div class="item" data-value="verify-full">Verify Full</div>
</div>
</div>
</div>
</div>
<div class="field sqlite-setting {{if not (eq .CurDbOption "SQLite3")}}hide{{end}}">
<label class="req" for="db_path">{{.i18n.Tr "install.path"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbPath}}ipt-error{{end}}" id="db_path" name="db_path" value="{{.db_path}}" />
<label></label>
<div id="sqlite_settings" class="{{if not (eq .CurDbOption "SQLite3")}}hide{{end}}">
<div class="inline required field">
<label for="db_path">{{.i18n.Tr "install.path"}}</label>
<input id="db_path" name="db_path" value="{{.db_path}}">
<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_root_path">{{.i18n.Tr "install.repo_path"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_RepoRootPath}}ipt-error{{end}}" id="repo_root_path" name="repo_root_path" value="{{.repo_root_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="http_port">{{.i18n.Tr "install.http_port"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_HttpPort}}ipt-error{{end}}" id="http_port" name="http_port" value="{{.http_port}}" required />
<label></label>
<span class="help">{{.i18n.Tr "install.http_port_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="smtp_user">{{.i18n.Tr "install.mailer_user"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_SMTPEmail}}ipt-error{{end}}" id="smtp_user" name="smtp_user" value="{{.smtp_user}}" />
</div>
<div class="field">
<label for="smtp_pwd">{{.i18n.Tr "install.mailer_password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_SMTPPasswd}}ipt-error{{end}}" id="smtp_pwd" name="smtp_pwd" type="password" value="{{.smtp_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_passwd">{{.i18n.Tr "install.admin_password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_AdminPasswd}}ipt-error{{end}}" id="admin_passwd" name="admin_passwd" type="password" value="{{.admin_passwd}}" required />
</div>
<div class="field">
<label class="req" for="admin_confirm_passwd">{{.i18n.Tr "install.confirm_password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_AdminPasswd}}ipt-error{{end}}" id="admin_confirm_passwd" name="admin_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>
<!-- General Settings -->
<h4 class="ui dividing header">{{.i18n.Tr "install.general_title"}}</h4>
</form>
</div>
</div>
</div>
</div>
</div>
{{template "ng/base/footer" .}}
{{template "base/footer" .}}

155
templates/install_old.tmpl Normal file
View file

@ -0,0 +1,155 @@
{{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="{{AppSubUrl}}/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="db_type" id="install-database" class="form-control">
{{range .DbOptions}}
<option value="{{.}}"{{if eq $.CurDbOption .}}selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
<div class="server-sql {{if eq .CurDbOption "SQLite3"}}hide{{end}}">
<div class="field">
<label class="req" for="db_host">{{.i18n.Tr "install.host"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbHost}}ipt-error{{end}}" id="db_host" name="db_host" value="{{.db_host}}" />
</div>
<div class="field">
<label class="req" for="db_user">{{.i18n.Tr "install.user"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbUser}}ipt-error{{end}}" id="db_user" name="db_user" value="{{.db_user}}" />
</div>
<div class="field">
<label class="req" for="db_passwd">{{.i18n.Tr "install.password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbPasswd}}ipt-error{{end}}" id="db_passwd" name="db_passwd" type="password" value="{{.db_passwd}}" />
</div>
<div class="field">
<label class="req" for="db_name">{{.i18n.Tr "install.db_name"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbName}}ipt-error{{end}}" id="db_name" name="db_name" value="{{.db_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="db_path">{{.i18n.Tr "install.path"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_DbPath}}ipt-error{{end}}" id="db_path" name="db_path" value="{{.db_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_root_path">{{.i18n.Tr "install.repo_path"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_RepoRootPath}}ipt-error{{end}}" id="repo_root_path" name="repo_root_path" value="{{.repo_root_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="http_port">{{.i18n.Tr "install.http_port"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_HttpPort}}ipt-error{{end}}" id="http_port" name="http_port" value="{{.http_port}}" required />
<label></label>
<span class="help">{{.i18n.Tr "install.http_port_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="smtp_user">{{.i18n.Tr "install.mailer_user"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_SMTPEmail}}ipt-error{{end}}" id="smtp_user" name="smtp_user" value="{{.smtp_user}}" />
</div>
<div class="field">
<label for="smtp_pwd">{{.i18n.Tr "install.mailer_password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_SMTPPasswd}}ipt-error{{end}}" id="smtp_pwd" name="smtp_pwd" type="password" value="{{.smtp_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_passwd">{{.i18n.Tr "install.admin_password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_AdminPasswd}}ipt-error{{end}}" id="admin_passwd" name="admin_passwd" type="password" value="{{.admin_passwd}}" required />
</div>
<div class="field">
<label class="req" for="admin_confirm_passwd">{{.i18n.Tr "install.confirm_password"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_AdminPasswd}}ipt-error{{end}}" id="admin_confirm_passwd" name="admin_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>
</div>
</div>
{{template "ng/base/footer" .}}