Skip to content

Commit 1a7473f

Browse files
wxiaoguanglunny6543
authored
Split index.js to separate files (#17315)
* split `index.js` to separate files * tune clipboard * fix promise * fix document * remove intermediate empty file * fix async event listener * use `export function` instead of `export {}`, add more comments Co-authored-by: Lunny Xiao <[email protected]> Co-authored-by: 6543 <[email protected]>
1 parent 3728f1d commit 1a7473f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+3687
-3502
lines changed

docs/content/doc/developers/guidelines-frontend.md

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,6 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
3939
6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}`
4040
7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
4141

42-
## Legacy Problems and Solutions
43-
44-
### Too much code in `web_src/index.js`
45-
46-
Previously, most JavaScript code was written into `web_src/index.js` directly, making the file unmaintainable.
47-
Try to keep this file small by creating new modules instead. These modules can be put in the `web_src/js/features` directory for now.
48-
4942
### Vue2/Vue3 and JSX
5043

5144
Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.

templates/repo/branch/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
{{if .IsDeleted}}
126126
<a class="ui basic jump button icon poping up undo-button" href data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID | urlquery}}&name={{.DeletedBranch.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.restore" (.Name)}}" data-variation="tiny inverted" data-position="top right"><span class="text blue">{{svg "octicon-reply"}}</span></a>
127127
{{else}}
128-
<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}">
128+
<a class="ui basic jump button icon poping up delete-button delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}">
129129
{{svg "octicon-trash"}}
130130
</a>
131131
{{end}}

web_src/js/code/linebutton.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

web_src/js/components/DashboardRepoList.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ function initVueComponents() {
348348
}
349349

350350

351-
function initDashboardRepoList() {
351+
export function initDashboardRepoList() {
352352
const el = document.getElementById('dashboard-repo-list');
353353
const dashboardRepoListData = pageData.dashboardRepoList || null;
354354
if (!el || !dashboardRepoListData) return;
@@ -366,5 +366,3 @@ function initDashboardRepoList() {
366366
},
367367
});
368368
}
369-
370-
export {initDashboardRepoList};

web_src/js/components/RepoActivityTopAuthors.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,9 @@ const sfc = {
101101
}
102102
};
103103
104-
function initRepoActivityTopAuthorsChart() {
104+
export function initRepoActivityTopAuthorsChart() {
105105
initVueApp('#repo-activity-top-authors-chart', sfc);
106106
}
107107
108-
export default sfc;
109-
export {initRepoActivityTopAuthorsChart};
108+
export default sfc; // this line is necessary to activate the IDE's Vue plugin
110109
</script>

web_src/js/components/RepoBranchTagDropdown.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from 'vue';
2+
import {vueDelimiters} from './VueComponentLoader.js';
23

3-
function initRepoBranchTagDropdown(selector) {
4+
export function initRepoBranchTagDropdown(selector) {
45
$(selector).each(function () {
56
const $dropdown = $(this);
67
const $data = $dropdown.find('.data');
@@ -26,7 +27,7 @@ function initRepoBranchTagDropdown(selector) {
2627
$data.remove();
2728
new Vue({
2829
el: this,
29-
delimiters: ['${', '}'],
30+
delimiters: vueDelimiters,
3031
data,
3132
computed: {
3233
filteredItems() {
@@ -157,5 +158,3 @@ function initRepoBranchTagDropdown(selector) {
157158
});
158159
});
159160
}
160-
161-
export {initRepoBranchTagDropdown};

web_src/js/components/VueComponentLoader.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import Vue from 'vue';
22
import {svgs} from '../svg.js';
33

4-
const vueDelimiters = ['${', '}'];
4+
export const vueDelimiters = ['${', '}'];
55

66
let vueEnvInited = false;
7-
function initVueEnv() {
7+
export function initVueEnv() {
88
if (vueEnvInited) return;
99
vueEnvInited = true;
1010

@@ -14,7 +14,7 @@ function initVueEnv() {
1414
}
1515

1616
let vueSvgInited = false;
17-
function initVueSvg() {
17+
export function initVueSvg() {
1818
if (vueSvgInited) return;
1919
vueSvgInited = true;
2020

@@ -36,8 +36,7 @@ function initVueSvg() {
3636
}
3737
}
3838

39-
40-
function initVueApp(el, opts = {}) {
39+
export function initVueApp(el, opts = {}) {
4140
if (typeof el === 'string') {
4241
el = document.querySelector(el);
4342
}
@@ -48,5 +47,3 @@ function initVueApp(el, opts = {}) {
4847
delimiters: vueDelimiters,
4948
}, opts));
5049
}
51-
52-
export {vueDelimiters, initVueEnv, initVueSvg, initVueApp};

web_src/js/features/admin-common.js

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
const {csrf} = window.config;
2+
3+
export function initAdminCommon() {
4+
if ($('.admin').length === 0) {
5+
return;
6+
}
7+
8+
// New user
9+
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
10+
$('#login_type').on('change', function () {
11+
if ($(this).val().substring(0, 1) === '0') {
12+
$('#user_name').removeAttr('disabled');
13+
$('#login_name').removeAttr('required');
14+
$('.non-local').hide();
15+
$('.local').show();
16+
$('#user_name').focus();
17+
18+
if ($(this).data('password') === 'required') {
19+
$('#password').attr('required', 'required');
20+
}
21+
} else {
22+
if ($('.admin.edit.user').length > 0) {
23+
$('#user_name').attr('disabled', 'disabled');
24+
}
25+
$('#login_name').attr('required', 'required');
26+
$('.non-local').show();
27+
$('.local').hide();
28+
$('#login_name').focus();
29+
30+
$('#password').removeAttr('required');
31+
}
32+
});
33+
}
34+
35+
function onSecurityProtocolChange() {
36+
if ($('#security_protocol').val() > 0) {
37+
$('.has-tls').show();
38+
} else {
39+
$('.has-tls').hide();
40+
}
41+
}
42+
43+
function onUsePagedSearchChange() {
44+
if ($('#use_paged_search').prop('checked')) {
45+
$('.search-page-size').show()
46+
.find('input').attr('required', 'required');
47+
} else {
48+
$('.search-page-size').hide()
49+
.find('input').removeAttr('required');
50+
}
51+
}
52+
53+
function onOAuth2Change(applyDefaultValues) {
54+
$('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url').hide();
55+
$('.open_id_connect_auto_discovery_url input[required]').removeAttr('required');
56+
57+
const provider = $('#oauth2_provider').val();
58+
switch (provider) {
59+
case 'openidConnect':
60+
$('.open_id_connect_auto_discovery_url input').attr('required', 'required');
61+
$('.open_id_connect_auto_discovery_url').show();
62+
break;
63+
default:
64+
if ($(`#${provider}_customURLSettings`).data('required')) {
65+
$('#oauth2_use_custom_url').attr('checked', 'checked');
66+
}
67+
if ($(`#${provider}_customURLSettings`).data('available')) {
68+
$('.oauth2_use_custom_url').show();
69+
}
70+
}
71+
onOAuth2UseCustomURLChange(applyDefaultValues);
72+
}
73+
74+
function onOAuth2UseCustomURLChange(applyDefaultValues) {
75+
const provider = $('#oauth2_provider').val();
76+
$('.oauth2_use_custom_url_field').hide();
77+
$('.oauth2_use_custom_url_field input[required]').removeAttr('required');
78+
79+
if ($('#oauth2_use_custom_url').is(':checked')) {
80+
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
81+
if (applyDefaultValues) {
82+
$(`#oauth2_${custom}`).val($(`#${provider}_${custom}`).val());
83+
}
84+
if ($(`#${provider}_${custom}`).data('available')) {
85+
$(`.oauth2_${custom} input`).attr('required', 'required');
86+
$(`.oauth2_${custom}`).show();
87+
}
88+
}
89+
}
90+
}
91+
92+
function onVerifyGroupMembershipChange() {
93+
if ($('#groups_enabled').is(':checked')) {
94+
$('#groups_enabled_change').show();
95+
} else {
96+
$('#groups_enabled_change').hide();
97+
}
98+
}
99+
100+
// New authentication
101+
if ($('.admin.new.authentication').length > 0) {
102+
$('#auth_type').on('change', function () {
103+
$('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi').hide();
104+
105+
$('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]').removeAttr('required');
106+
$('.binddnrequired').removeClass('required');
107+
108+
const authType = $(this).val();
109+
switch (authType) {
110+
case '2': // LDAP
111+
$('.ldap').show();
112+
$('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required');
113+
$('.binddnrequired').addClass('required');
114+
break;
115+
case '3': // SMTP
116+
$('.smtp').show();
117+
$('.has-tls').show();
118+
$('.smtp div.required input, .has-tls').attr('required', 'required');
119+
break;
120+
case '4': // PAM
121+
$('.pam').show();
122+
$('.pam input').attr('required', 'required');
123+
break;
124+
case '5': // LDAP
125+
$('.dldap').show();
126+
$('.dldap div.required:not(.ldap) input').attr('required', 'required');
127+
break;
128+
case '6': // OAuth2
129+
$('.oauth2').show();
130+
$('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required');
131+
onOAuth2Change(true);
132+
break;
133+
case '7': // SSPI
134+
$('.sspi').show();
135+
$('.sspi div.required input').attr('required', 'required');
136+
break;
137+
}
138+
if (authType === '2' || authType === '5') {
139+
onSecurityProtocolChange();
140+
onVerifyGroupMembershipChange();
141+
}
142+
if (authType === '2') {
143+
onUsePagedSearchChange();
144+
}
145+
});
146+
$('#auth_type').trigger('change');
147+
$('#security_protocol').on('change', onSecurityProtocolChange);
148+
$('#use_paged_search').on('change', onUsePagedSearchChange);
149+
$('#oauth2_provider').on('change', () => onOAuth2Change(true));
150+
$('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(true));
151+
$('#groups_enabled').on('change', onVerifyGroupMembershipChange);
152+
}
153+
// Edit authentication
154+
if ($('.admin.edit.authentication').length > 0) {
155+
const authType = $('#auth_type').val();
156+
if (authType === '2' || authType === '5') {
157+
$('#security_protocol').on('change', onSecurityProtocolChange);
158+
$('#groups_enabled').on('change', onVerifyGroupMembershipChange);
159+
onVerifyGroupMembershipChange();
160+
if (authType === '2') {
161+
$('#use_paged_search').on('change', onUsePagedSearchChange);
162+
}
163+
} else if (authType === '6') {
164+
$('#oauth2_provider').on('change', () => onOAuth2Change(true));
165+
$('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(false));
166+
onOAuth2Change(false);
167+
}
168+
}
169+
170+
// Notice
171+
if ($('.admin.notice')) {
172+
const $detailModal = $('#detail-modal');
173+
174+
// Attach view detail modals
175+
$('.view-detail').on('click', function () {
176+
$detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text());
177+
$detailModal.find('.sub.header').text($(this).parents('tr').find('.notice-created-time').text());
178+
$detailModal.modal('show');
179+
return false;
180+
});
181+
182+
// Select actions
183+
const $checkboxes = $('.select.table .ui.checkbox');
184+
$('.select.action').on('click', function () {
185+
switch ($(this).data('action')) {
186+
case 'select-all':
187+
$checkboxes.checkbox('check');
188+
break;
189+
case 'deselect-all':
190+
$checkboxes.checkbox('uncheck');
191+
break;
192+
case 'inverse':
193+
$checkboxes.checkbox('toggle');
194+
break;
195+
}
196+
});
197+
$('#delete-selection').on('click', function () {
198+
const $this = $(this);
199+
$this.addClass('loading disabled');
200+
const ids = [];
201+
$checkboxes.each(function () {
202+
if ($(this).checkbox('is checked')) {
203+
ids.push($(this).data('id'));
204+
}
205+
});
206+
$.post($this.data('link'), {
207+
_csrf: csrf,
208+
ids
209+
}).done(() => {
210+
window.location.href = $this.data('redirect');
211+
});
212+
});
213+
}
214+
}

web_src/js/features/admin-emails.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export function initAdminEmails() {
2+
function linkEmailAction(e) {
3+
const $this = $(this);
4+
$('#form-uid').val($this.data('uid'));
5+
$('#form-email').val($this.data('email'));
6+
$('#form-primary').val($this.data('primary'));
7+
$('#form-activate').val($this.data('activate'));
8+
$('#change-email-modal').modal('show');
9+
e.preventDefault();
10+
}
11+
$('.link-email-action').on('click', linkEmailAction);
12+
}

0 commit comments

Comments
 (0)