Fix Org edit page bugs: renaming detection, maxlength (#24161)

## Before

* The renaming detection is wrong (eg: pasting a new name into the input
doesn't trigger the detection)
* The renaming prompt layout is not good
* Some MaxSize/maxlength rules is missing


![image](https://user-images.githubusercontent.com/2114189/232379191-5d0f6d10-56ca-4cec-ac52-7f77b9cb4a8a.png)


![image](https://user-images.githubusercontent.com/2114189/232379234-3289373b-9ddb-4627-ae86-f4d74589fa0c.png)

## After

* Fix these problems


![image](https://user-images.githubusercontent.com/2114189/232379098-31c6fa21-c210-4e7f-a337-b38b99670835.png)
This commit is contained in:
wxiaoguang 2023-04-17 23:35:57 +08:00 committed by GitHub
parent 4b1c6cd8e5
commit f20057271d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 25 deletions

View File

@ -30,8 +30,8 @@ type OrganizationPermissions struct {
// CreateOrgOption options for creating an organization
type CreateOrgOption struct {
// required: true
UserName string `json:"username" binding:"Required"`
FullName string `json:"full_name"`
UserName string `json:"username" binding:"Required;Username;MaxSize(40)"`
FullName string `json:"full_name" binding:"MaxSize(100)"`
Description string `json:"description" binding:"MaxSize(255)"`
Website string `json:"website" binding:"ValidUrl;MaxSize(255)"`
Location string `json:"location" binding:"MaxSize(50)"`
@ -45,7 +45,7 @@ type CreateOrgOption struct {
// EditOrgOption options for editing an organization
type EditOrgOption struct {
FullName string `json:"full_name"`
FullName string `json:"full_name" binding:"MaxSize(100)"`
Description string `json:"description" binding:"MaxSize(255)"`
Website string `json:"website" binding:"ValidUrl;MaxSize(255)"`
Location string `json:"location" binding:"MaxSize(50)"`

View File

@ -11,7 +11,7 @@
{{template "base/alert" .}}
<div class="inline required field {{if .Err_OrgName}}error{{end}}">
<label for="org_name">{{.locale.Tr "org.org_name_holder"}}</label>
<input id="org_name" name="org_name" value="{{.org_name}}" autofocus required>
<input id="org_name" name="org_name" value="{{.org_name}}" autofocus required maxlength="40">
<span class="help">{{.locale.Tr "org.org_name_helper"}}</span>
</div>

View File

@ -14,26 +14,27 @@
{{.CsrfTokenHtml}}
<div class="required field {{if .Err_Name}}error{{end}}">
<label for="org_name">{{.locale.Tr "org.org_name_holder"}}
<span class="text red gt-hidden" id="org-name-change-prompt"> {{.locale.Tr "org.settings.change_orgname_prompt"}}</span>
<span class="text red gt-hidden" id="org-name-change-redirect-prompt"> {{.locale.Tr "org.settings.change_orgname_redirect_prompt"}}</span>
<span class="text red gt-hidden" id="org-name-change-prompt">
<br>{{.locale.Tr "org.settings.change_orgname_prompt"}}<br>{{.locale.Tr "org.settings.change_orgname_redirect_prompt"}}
</span>
</label>
<input id="org_name" name="name" value="{{.Org.Name}}" data-org-name="{{.Org.Name}}" autofocus required>
<input id="org_name" name="name" value="{{.Org.Name}}" data-org-name="{{.Org.Name}}" autofocus required maxlength="40">
</div>
<div class="field {{if .Err_FullName}}error{{end}}">
<label for="full_name">{{.locale.Tr "org.org_full_name_holder"}}</label>
<input id="full_name" name="full_name" value="{{.Org.FullName}}">
<input id="full_name" name="full_name" value="{{.Org.FullName}}" maxlength="100">
</div>
<div class="field {{if .Err_Description}}error{{end}}">
<label for="description">{{$.locale.Tr "org.org_desc"}}</label>
<textarea id="description" name="description" rows="2">{{.Org.Description}}</textarea>
<textarea id="description" name="description" rows="2" maxlength="255">{{.Org.Description}}</textarea>
</div>
<div class="field {{if .Err_Website}}error{{end}}">
<label for="website">{{.locale.Tr "org.settings.website"}}</label>
<input id="website" name="website" type="url" value="{{.Org.Website}}">
<input id="website" name="website" type="url" value="{{.Org.Website}}" maxlength="255">
</div>
<div class="field">
<label for="location">{{.locale.Tr "org.settings.location"}}</label>
<input id="location" name="location" value="{{.Org.Location}}">
<input id="location" name="location" value="{{.Org.Location}}" maxlength="50">
</div>
<div class="ui divider"></div>

View File

@ -1,25 +1,16 @@
import $ from 'jquery';
import {initCompLabelEdit} from './comp/LabelEdit.js';
import {hideElem, showElem} from '../utils/dom.js';
import {toggleElem} from '../utils/dom.js';
export function initCommonOrganization() {
if ($('.organization').length === 0) {
return;
}
if ($('.organization.settings.options').length > 0) {
$('#org_name').on('keyup', function () {
const $prompt = $('#org-name-change-prompt');
const $prompt_redirect = $('#org-name-change-redirect-prompt');
if ($(this).val().toString().toLowerCase() !== $(this).data('org-name').toString().toLowerCase()) {
showElem($prompt);
showElem($prompt_redirect);
} else {
hideElem($prompt);
hideElem($prompt_redirect);
}
});
}
$('.organization.settings.options #org_name').on('input', function () {
const nameChanged = $(this).val().toLowerCase() !== $(this).attr('data-org-name').toLowerCase();
toggleElem('#org-name-change-prompt', nameChanged);
});
// Labels
initCompLabelEdit('.organization.settings.labels');