f71a240239
Currently the collapsed sections on the installation page have bad visibility, clickability and don't look good. This commit attempts to improve this. It is also worth noting that the amount of these sections might increase.
### Changes
* make custom style for these collapsible sections of the form. This is not a standard design to Forgejo, but we also don't have forms this large anywhere else, and it's fit in a few small CSS rules, so I think that's justified. I'm curious how it looks to others visually, good or bad.
* improve the positioning of the installation location hint.
* remove very rare occasion of dashed horizontal divider as this rule is no longer needed with the new borders. It was [added](c16ae1ab39 (diff-f8dad1e2c95a9e959d4688c763f3e02d1878c8e0)) just a month ago and had a visual bug with duplicated dividers.
### Preview
|Before|After|
|-|-|
|||
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4062
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
367 lines
18 KiB
Go HTML Template
367 lines
18 KiB
Go HTML Template
{{template "base/head" .}}
|
|
<div role="main" aria-label="{{.Title}}" class="page-content install">
|
|
<div class="ui grid install-config-container">
|
|
<div class="sixteen wide center aligned centered column">
|
|
<h3 class="ui top attached header">
|
|
{{ctx.Locale.Tr "install.title"}}
|
|
</h3>
|
|
<div class="ui attached segment">
|
|
{{template "base/alert" .}}
|
|
|
|
<p>{{ctx.Locale.Tr "install.docker_helper" "https://forgejo.org/docs/latest/admin/installation-docker/"}}</p>
|
|
|
|
<form class="ui form" action="{{AppSubUrl}}/" method="post">
|
|
<!-- Database Settings -->
|
|
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.db_title"}}</h4>
|
|
<p>{{ctx.Locale.Tr "install.require_db_desc"}}</p>
|
|
<div class="inline required field {{if .Err_DbType}}error{{end}}">
|
|
<label>{{ctx.Locale.Tr "install.db_type"}}</label>
|
|
<div class="ui selection database type dropdown">
|
|
<input type="hidden" id="db_type" name="db_type" value="{{.CurDbType}}">
|
|
<div class="text">{{.CurDbType}}</div>
|
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
|
<div class="menu">
|
|
{{range .DbTypeNames}}
|
|
<div class="item" data-value="{{.type}}">{{.name}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-mt-4 tw-hidden" data-db-setting-for="common-host">
|
|
<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
|
|
<label for="db_host">{{ctx.Locale.Tr "install.host"}}</label>
|
|
<input id="db_host" name="db_host" value="{{.db_host}}">
|
|
</div>
|
|
<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
|
|
<label for="db_user">{{ctx.Locale.Tr "install.user"}}</label>
|
|
<input id="db_user" name="db_user" value="{{.db_user}}">
|
|
</div>
|
|
<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
|
|
<label for="db_passwd">{{ctx.Locale.Tr "install.password"}}</label>
|
|
<input id="db_passwd" name="db_passwd" type="password" value="{{.db_passwd}}">
|
|
</div>
|
|
<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
|
|
<label for="db_name">{{ctx.Locale.Tr "install.db_name"}}</label>
|
|
<input id="db_name" name="db_name" value="{{.db_name}}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-mt-4 tw-hidden" data-db-setting-for="postgres">
|
|
<div class="inline required field">
|
|
<label>{{ctx.Locale.Tr "install.ssl_mode"}}</label>
|
|
<div class="ui selection database type dropdown">
|
|
<input type="hidden" name="ssl_mode" value="{{if .ssl_mode}}{{.ssl_mode}}{{else}}disable{{end}}">
|
|
<div class="default text">disable</div>
|
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
|
<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 class="inline field {{if .Err_DbSetting}}error{{end}}">
|
|
<label for="db_schema">{{ctx.Locale.Tr "install.db_schema"}}</label>
|
|
<input id="db_schema" name="db_schema" value="{{.db_schema}}">
|
|
<span class="help">{{ctx.Locale.Tr "install.db_schema_helper"}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-mt-4 tw-hidden" data-db-setting-for="sqlite3">
|
|
<div class="inline required field {{if or .Err_DbPath .Err_DbSetting}}error{{end}}">
|
|
<label for="db_path">{{ctx.Locale.Tr "install.path"}}</label>
|
|
<input id="db_path" name="db_path" value="{{.db_path}}">
|
|
<span class="help">{{ctx.Locale.Tr "install.sqlite_helper"}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{if .Err_DbInstalledBefore}}
|
|
<div>
|
|
<p class="reinstall-message">{{ctx.Locale.Tr "install.reinstall_confirm_message"}}</p>
|
|
<div class="reinstall-confirm">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.reinstall_confirm_check_1"}}</label>
|
|
<input name="reinstall_confirm_first" type="checkbox">
|
|
</div>
|
|
</div>
|
|
<div class="reinstall-confirm">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.reinstall_confirm_check_2"}}</label>
|
|
<input name="reinstall_confirm_second" type="checkbox">
|
|
</div>
|
|
</div>
|
|
<div class="reinstall-confirm">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.reinstall_confirm_check_3"}}</label>
|
|
<input name="reinstall_confirm_third" type="checkbox">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- General Settings -->
|
|
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.general_title"}}</h4>
|
|
<div class="inline required field {{if .Err_AppName}}error{{end}}">
|
|
<label for="app_name">{{ctx.Locale.Tr "install.app_name"}}</label>
|
|
<input id="app_name" name="app_name" value="{{.app_name}}" required>
|
|
<span class="help">{{ctx.Locale.Tr "install.app_name_helper"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="app_slogan">{{ctx.Locale.Tr "install.app_slogan"}}</label>
|
|
<input id="app_slogan" name="app_slogan" value="{{.app_slogan}}">
|
|
<span class="help">{{ctx.Locale.Tr "install.app_slogan_helper"}}</span>
|
|
</div>
|
|
<div class="inline required field {{if .Err_RepoRootPath}}error{{end}}">
|
|
<label for="repo_root_path">{{ctx.Locale.Tr "install.repo_path"}}</label>
|
|
<input id="repo_root_path" name="repo_root_path" value="{{.repo_root_path}}" required>
|
|
<span class="help">{{ctx.Locale.Tr "install.repo_path_helper"}}</span>
|
|
</div>
|
|
<div class="inline field {{if .Err_LFSRootPath}}error{{end}}">
|
|
<label for="lfs_root_path">{{ctx.Locale.Tr "install.lfs_path"}}</label>
|
|
<input id="lfs_root_path" name="lfs_root_path" value="{{.lfs_root_path}}">
|
|
<span class="help">{{ctx.Locale.Tr "install.lfs_path_helper"}}</span>
|
|
</div>
|
|
<div class="inline required field {{if .Err_RunUser}}error{{end}}">
|
|
<label for="run_user">{{ctx.Locale.Tr "install.run_user"}}</label>
|
|
<input id="run_user" name="run_user" value="{{.run_user}}" readonly>
|
|
<span class="help">{{ctx.Locale.Tr "install.run_user_helper"}}</span>
|
|
</div>
|
|
<div class="inline required field">
|
|
<label for="domain">{{ctx.Locale.Tr "install.domain"}}</label>
|
|
<input id="domain" name="domain" value="{{.domain}}" placeholder="next.forgejo.org" required>
|
|
<span class="help">{{ctx.Locale.Tr "install.domain_helper"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="ssh_port">{{ctx.Locale.Tr "install.ssh_port"}}</label>
|
|
<input id="ssh_port" name="ssh_port" value="{{.ssh_port}}">
|
|
<span class="help">{{ctx.Locale.Tr "install.ssh_port_helper"}}</span>
|
|
</div>
|
|
<div class="inline required field">
|
|
<label for="http_port">{{ctx.Locale.Tr "install.http_port"}}</label>
|
|
<input id="http_port" name="http_port" value="{{.http_port}}" required>
|
|
<span class="help">{{ctx.Locale.Tr "install.http_port_helper"}}</span>
|
|
</div>
|
|
<div class="inline required field">
|
|
<label for="app_url">{{ctx.Locale.Tr "install.app_url"}}</label>
|
|
<input id="app_url" name="app_url" value="{{.app_url}}" placeholder="https://next.forgejo.org" required>
|
|
<span class="help">{{ctx.Locale.Tr "install.app_url_helper"}}</span>
|
|
</div>
|
|
<div class="inline required field">
|
|
<label for="log_root_path">{{ctx.Locale.Tr "install.log_root_path"}}</label>
|
|
<input id="log_root_path" name="log_root_path" value="{{.log_root_path}}" placeholder="log" required>
|
|
<span class="help">{{ctx.Locale.Tr "install.log_root_path_helper"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="disable-registration">
|
|
<label>{{ctx.Locale.Tr "install.disable_registration"}}</label>
|
|
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.disable_registration.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.enable_update_checker"}}</label>
|
|
<input name="enable_update_checker" type="checkbox" {{if .enable_update_checker}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.enable_update_checker_helper_forgejo"}}</span>
|
|
</div>
|
|
|
|
<!-- Optional Settings -->
|
|
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4>
|
|
|
|
<!-- Email -->
|
|
<details class="collapsible optional field">
|
|
<summary class="tw-py-2{{if .Err_SMTP}} text red{{end}}">
|
|
{{ctx.Locale.Tr "install.email_title"}}
|
|
</summary>
|
|
<div class="inline field">
|
|
<label for="smtp_addr">{{ctx.Locale.Tr "install.smtp_addr"}}</label>
|
|
<input id="smtp_addr" name="smtp_addr" value="{{.smtp_addr}}">
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="smtp_port">{{ctx.Locale.Tr "install.smtp_port"}}</label>
|
|
<input id="smtp_port" name="smtp_port" value="{{.smtp_port}}">
|
|
</div>
|
|
<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
|
|
<label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
|
|
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
|
|
<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
|
|
</div>
|
|
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
|
|
<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
|
|
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="smtp_passwd">{{ctx.Locale.Tr "install.mailer_password"}}</label>
|
|
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.register_confirm"}}</label>
|
|
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
|
|
</div>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.mail_notify"}}</label>
|
|
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Server and other services -->
|
|
<details class="collapsible optional field">
|
|
<summary class="tw-py-2{{if .Err_Services}} text red{{end}}">
|
|
{{ctx.Locale.Tr "install.server_service_title"}}
|
|
</summary>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="offline-mode">
|
|
<label>{{ctx.Locale.Tr "install.offline_mode"}}</label>
|
|
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.offline_mode.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="disable-gravatar">
|
|
<label>{{ctx.Locale.Tr "install.disable_gravatar"}}</label>
|
|
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.disable_gravatar.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="federated-avatar-lookup">
|
|
<label>{{ctx.Locale.Tr "install.federated_avatar_lookup"}}</label>
|
|
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.federated_avatar_lookup.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="enable-openid-signin">
|
|
<label>{{ctx.Locale.Tr "install.openid_signin"}}</label>
|
|
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.openid_signin.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="allow-only-external-registration">
|
|
<label>{{ctx.Locale.Tr "install.allow_only_external_registration"}}</label>
|
|
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.allow_only_external_registration.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="enable-openid-signup">
|
|
<label>{{ctx.Locale.Tr "install.openid_signup"}}</label>
|
|
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.openid_signup.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox" id="enable-captcha">
|
|
<label>{{ctx.Locale.Tr "install.enable_captcha"}}</label>
|
|
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.enable_captcha.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.require_sign_in_view"}}</label>
|
|
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.require_sign_in_view.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.default_keep_email_private"}}</label>
|
|
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.default_keep_email_private.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.default_allow_create_organization"}}</label>
|
|
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.default_allow_create_organization.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<label>{{ctx.Locale.Tr "install.default_enable_timetracking"}}</label>
|
|
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.default_enable_timetracking.description"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="no_reply_address">{{ctx.Locale.Tr "install.no_reply_address"}}</label>
|
|
<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
|
|
<span class="help">{{ctx.Locale.Tr "install.no_reply_address_helper"}}</span>
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="password_algorithm">{{ctx.Locale.Tr "install.password_algorithm"}}</label>
|
|
<div class="ui selection dropdown">
|
|
<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
|
|
<div class="text">{{.password_algorithm}}</div>
|
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
|
<div class="menu">
|
|
{{range .PasswordHashAlgorithms}}
|
|
<div class="item" data-value="{{.}}">{{.}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<span class="help">{{ctx.Locale.Tr "install.password_algorithm_helper"}}</span>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Admin -->
|
|
<details class="collapsible optional field">
|
|
<summary class="tw-py-2{{if .Err_Admin}} text red{{end}}">
|
|
{{ctx.Locale.Tr "install.admin_title"}}
|
|
</summary>
|
|
<p class="center">{{ctx.Locale.Tr "install.admin_setting.description"}}</p>
|
|
<div class="inline field {{if .Err_AdminName}}error{{end}}">
|
|
<label for="admin_name">{{ctx.Locale.Tr "install.admin_name"}}</label>
|
|
<input id="admin_name" name="admin_name" value="{{.admin_name}}">
|
|
</div>
|
|
<div class="inline field {{if .Err_AdminEmail}}error{{end}}">
|
|
<label for="admin_email">{{ctx.Locale.Tr "install.admin_email"}}</label>
|
|
<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
|
|
</div>
|
|
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
|
|
<label for="admin_passwd">{{ctx.Locale.Tr "install.admin_password"}}</label>
|
|
<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}">
|
|
</div>
|
|
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
|
|
<label for="admin_confirm_passwd">{{ctx.Locale.Tr "install.confirm_password"}}</label>
|
|
<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}">
|
|
</div>
|
|
</details>
|
|
|
|
<div class="divider"></div>
|
|
|
|
{{if .EnvConfigKeys}}
|
|
<!-- Environment Config -->
|
|
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.env_config_keys"}}</h4>
|
|
<div class="inline field">
|
|
<div class="right-content">
|
|
{{ctx.Locale.Tr "install.env_config_keys_prompt"}}
|
|
</div>
|
|
<div class="right-content tw-mt-2">
|
|
{{range .EnvConfigKeys}}<span class="ui label">{{.}}</span>{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<p>{{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}}</p>
|
|
<div class="inline field">
|
|
<div class="tw-mt-4 tw-mb-2 tw-text-center">
|
|
<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img class="tw-hidden" src="{{AssetUrlPrefix}}/img/forgejo-loading.svg" width="256" height="256">
|
|
{{template "base/footer" .}}
|