Change invite member page

Author: Sonic853

templates/org/member/invite.tmpl

@@ -4,20 +4,24 @@
     <div class="ui container">
         {{template "base/alert" .}}
 
-        <div class="ui action input">
-            <input type="hidden" name="uid" value="{{.SignedUser.ID}}">
-            <div class="ui label">{{ctx.Locale.Tr "org.members.invite"}}</div>
-            <div id="search-user-box" class="ui search input"{{if .IsEmailInviteEnabled}} data-allow-email="true" data-allow-email-description="{{ctx.Locale.Tr "org.teams.invite_team_member" $.Team.Name}}"{{end}}>
-                <input class="prompt" name="uname" placeholder="{{ctx.Locale.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
-            </div>
-            <div class="ui label">{{ctx.Locale.Tr "org.members.to"}}</div>
-            <select class="ui selection dropdown" name="team">
-                {{range .Teams}}
-                    <option value="{{.LowerName | PathEscape}}">{{.Name}}</option>
-                {{end}}
-            </select>
-            <div class="ui label">{{ctx.Locale.Tr "org.members.team"}}</div>
-            <button class="ui primary button">{{ctx.Locale.Tr "org.members.invite_now"}}</button>
+        <div class="center">
+            <h1 class="ui header">{{ctx.Locale.Tr "org.members.invite_member"}}</h1>
+            <form class="ui action input member-invite" data-org-link="{{.OrgLink}}" method="POST">
+                {{.CsrfTokenHtml}}
+                <input type="hidden" name="uid" value="{{.SignedUser.ID}}">
+                <div class="ui label">{{ctx.Locale.Tr "org.members.invite"}}</div>
+                <div id="search-user-box" class="ui search input"{{if .IsEmailInviteEnabled}} data-allow-email="true" data-allow-email-description="{{ctx.Locale.Tr "org.teams.invite_team_member" $.Team.Name}}"{{end}}>
+                    <input class="prompt" name="uname" placeholder="{{ctx.Locale.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
+                </div>
+                <div class="ui label">{{ctx.Locale.Tr "org.members.to"}}</div>
+                <select class="ui selection dropdown" name="team">
+                    {{range .Teams}}
+                        <option value="{{.LowerName | PathEscape}}">{{.Name}}</option>
+                    {{end}}
+                </select>
+                <div class="ui label">{{ctx.Locale.Tr "org.members.team"}}</div>
+                <button class="ui primary button">{{ctx.Locale.Tr "org.members.invite_now"}}</button>
+            </form>
         </div>
     </div>
 </div>

web_src/css/base.css

@@ -193,6 +193,22 @@ a.label,
   text-decoration: none !important;
 }
 
+.ui.search > .prompt {
+  color: var(--color-text);
+  background: var(--color-box-body);
+  border-color: var(--color-secondary);
+}
+
+.ui.search .prompt {
+  border-radius: var(--border-radius);
+}
+
+.ui.search > .prompt:focus {
+  border-color: var(--color-primary);
+  background: var(--color-box-body);
+  color: var(--color-text);
+}
+
 .ui.search > .results {
   background: var(--color-body);
   border-color: var(--color-secondary);
@@ -257,6 +273,8 @@ ol.ui.list li,
 .ui.input.focus > input,
 .ui.input > input:focus {
   border-color: var(--color-primary);
+  background: var(--color-box-body);
+  color: var(--color-text);
 }
 
 .ui.action.input .ui.ui.button {

web_src/js/features/org-member.js

@@ -0,0 +1,31 @@
+export function initOrgMemberInvite() {
+  if (document.querySelector('.page-content.organization.invitemember') === null) {
+    return;
+  }
+
+  /**
+   * @type {HTMLFormElement | null}
+   */
+  const memberInvite = document.querySelector('form.member-invite');
+  if (memberInvite === null) {
+    return;
+  }
+
+  const orgLink = memberInvite.getAttribute('data-org-link');
+  if (orgLink === null) {
+    return;
+  }
+
+  /**
+   * @type {HTMLSelectElement | null}
+   */
+  const teamSelect = memberInvite.querySelector('select[name=team]');
+  if (teamSelect === null) {
+    return;
+  }
+
+  memberInvite.action = `${orgLink}/teams/${teamSelect.value}/action/add`;
+  teamSelect.addEventListener('change', () => {
+    memberInvite.action = `${orgLink}/teams/${teamSelect.value}/action/add`;
+  });
+}

web_src/js/index.js

@@ -64,6 +64,7 @@ import {
   initRepoSettingSearchTeamBox,
 } from './features/repo-settings.js';
 import {initRepoDiffView} from './features/repo-diff.js';
+import {initOrgMemberInvite} from './features/org-member.js';
 import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.js';
 import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js';
 import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js';
@@ -135,6 +136,8 @@ onDomReady(() => {
   initNotificationCount();
   initNotificationsTable();
 
+  initOrgMemberInvite();
+
   initOrgTeamSearchRepoBox();
   initOrgTeamSettings();