web/admin: add ServiceAccount creation form
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
1a20c8ffc1
commit
16cfa8cae2
|
@ -11,9 +11,15 @@ export class ModalForm extends ModalButton {
|
|||
@property({ type: Boolean })
|
||||
closeAfterSuccessfulSubmit = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
showSubmitButton = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
loading = false;
|
||||
|
||||
@property({ type: String })
|
||||
cancelText = t`Cancel`;
|
||||
|
||||
confirm(): Promise<void> {
|
||||
const form = this.querySelector<Form<unknown>>("[slot=form]");
|
||||
if (!form) {
|
||||
|
@ -60,7 +66,8 @@ export class ModalForm extends ModalButton {
|
|||
<slot name="form"></slot>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
${this.showSubmitButton
|
||||
? html`<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
this.loading = true;
|
||||
this.locked = true;
|
||||
|
@ -69,7 +76,8 @@ export class ModalForm extends ModalButton {
|
|||
class="pf-m-primary"
|
||||
>
|
||||
<slot name="submit"></slot> </ak-spinner-button
|
||||
>
|
||||
> `
|
||||
: html``}
|
||||
<ak-spinner-button
|
||||
.callAction=${async () => {
|
||||
this.resetForms();
|
||||
|
@ -77,7 +85,7 @@ export class ModalForm extends ModalButton {
|
|||
}}
|
||||
class="pf-m-secondary"
|
||||
>
|
||||
${t`Cancel`}
|
||||
${this.cancelText}
|
||||
</ak-spinner-button>
|
||||
</footer>`;
|
||||
}
|
||||
|
|
|
@ -723,6 +723,7 @@ msgid "Client type"
|
|||
msgstr "Client type"
|
||||
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
msgid "Close"
|
||||
msgstr "Close"
|
||||
|
||||
|
@ -957,6 +958,7 @@ msgstr "Copy recovery link"
|
|||
#: src/pages/user-settings/tokens/UserTokenList.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
msgid "Create"
|
||||
msgstr "Create"
|
||||
|
||||
|
@ -1018,6 +1020,11 @@ msgstr "Create Policy"
|
|||
msgid "Create Prompt"
|
||||
msgstr "Create Prompt"
|
||||
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
msgid "Create Service account"
|
||||
msgstr "Create Service account"
|
||||
|
||||
#: src/pages/flows/BoundStagesList.ts
|
||||
msgid "Create Stage"
|
||||
msgstr "Create Stage"
|
||||
|
@ -1040,6 +1047,10 @@ msgstr "Create Token"
|
|||
msgid "Create User"
|
||||
msgstr "Create User"
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Create group"
|
||||
msgstr "Create group"
|
||||
|
||||
#: src/pages/applications/ApplicationForm.ts
|
||||
msgid "Create provider"
|
||||
msgstr "Create provider"
|
||||
|
@ -1455,6 +1466,10 @@ msgstr "Enable compatibility mode, increases compatibility with password manager
|
|||
msgid "Enabled"
|
||||
msgstr "Enabled"
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Enabling this toggle will create a group named after the user, with the user as member."
|
||||
msgstr "Enabling this toggle will create a group named after the user, with the user as member."
|
||||
|
||||
#: src/pages/flows/FlowForm.ts
|
||||
msgid "Enrollment"
|
||||
msgstr "Enrollment"
|
||||
|
@ -2915,6 +2930,7 @@ msgstr "Passing"
|
|||
#: src/flows/stages/identification/IdentificationStage.ts
|
||||
#: src/flows/stages/identification/IdentificationStage.ts
|
||||
#: src/flows/stages/password/PasswordStage.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Password"
|
||||
msgstr "Password"
|
||||
|
||||
|
@ -3329,6 +3345,7 @@ msgid "Required"
|
|||
msgstr "Required"
|
||||
|
||||
#: src/pages/user-settings/UserSelfForm.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/UserForm.ts
|
||||
msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
|
||||
msgstr "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
|
||||
|
@ -3973,6 +3990,7 @@ msgstr "Successfully created token."
|
|||
msgid "Successfully created transport."
|
||||
msgstr "Successfully created transport."
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/UserForm.ts
|
||||
msgid "Successfully created user."
|
||||
msgstr "Successfully created user."
|
||||
|
@ -4726,6 +4744,10 @@ msgstr "Use the user's email address, but deny enrollment when the email address
|
|||
msgid "Use the user's username, but deny enrollment when the username already exists."
|
||||
msgstr "Use the user's username, but deny enrollment when the username already exists."
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page."
|
||||
msgstr "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page."
|
||||
|
||||
#: src/pages/providers/proxy/ProxyProviderForm.ts
|
||||
msgid "Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /akprox must be routed to the outpost (when using a manged outpost, this is done for you)."
|
||||
msgstr "Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /akprox must be routed to the outpost (when using a manged outpost, this is done for you)."
|
||||
|
@ -4849,6 +4871,8 @@ msgstr "Userinfo URL"
|
|||
#: src/pages/policies/reputation/UserReputationListPage.ts
|
||||
#: src/pages/stages/identification/IdentificationStageForm.ts
|
||||
#: src/pages/user-settings/UserSelfForm.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/UserForm.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserViewPage.ts
|
||||
|
|
|
@ -717,6 +717,7 @@ msgid "Client type"
|
|||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
msgid "Close"
|
||||
msgstr ""
|
||||
|
||||
|
@ -951,6 +952,7 @@ msgstr ""
|
|||
#: src/pages/user-settings/tokens/UserTokenList.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
msgid "Create"
|
||||
msgstr ""
|
||||
|
||||
|
@ -1012,6 +1014,11 @@ msgstr ""
|
|||
msgid "Create Prompt"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
msgid "Create Service account"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/flows/BoundStagesList.ts
|
||||
msgid "Create Stage"
|
||||
msgstr ""
|
||||
|
@ -1034,6 +1041,10 @@ msgstr ""
|
|||
msgid "Create User"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Create group"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/applications/ApplicationForm.ts
|
||||
msgid "Create provider"
|
||||
msgstr ""
|
||||
|
@ -1447,6 +1458,10 @@ msgstr ""
|
|||
msgid "Enabled"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Enabling this toggle will create a group named after the user, with the user as member."
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/flows/FlowForm.ts
|
||||
msgid "Enrollment"
|
||||
msgstr ""
|
||||
|
@ -2907,6 +2922,7 @@ msgstr ""
|
|||
#: src/flows/stages/identification/IdentificationStage.ts
|
||||
#: src/flows/stages/identification/IdentificationStage.ts
|
||||
#: src/flows/stages/password/PasswordStage.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Password"
|
||||
msgstr ""
|
||||
|
||||
|
@ -3321,6 +3337,7 @@ msgid "Required"
|
|||
msgstr ""
|
||||
|
||||
#: src/pages/user-settings/UserSelfForm.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/UserForm.ts
|
||||
msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
|
||||
msgstr ""
|
||||
|
@ -3965,6 +3982,7 @@ msgstr ""
|
|||
msgid "Successfully created transport."
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/UserForm.ts
|
||||
msgid "Successfully created user."
|
||||
msgstr ""
|
||||
|
@ -4711,6 +4729,10 @@ msgstr ""
|
|||
msgid "Use the user's username, but deny enrollment when the username already exists."
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
msgid "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page."
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/providers/proxy/ProxyProviderForm.ts
|
||||
msgid "Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /akprox must be routed to the outpost (when using a manged outpost, this is done for you)."
|
||||
msgstr ""
|
||||
|
@ -4834,6 +4856,8 @@ msgstr ""
|
|||
#: src/pages/policies/reputation/UserReputationListPage.ts
|
||||
#: src/pages/stages/identification/IdentificationStageForm.ts
|
||||
#: src/pages/user-settings/UserSelfForm.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/ServiceAccountForm.ts
|
||||
#: src/pages/users/UserForm.ts
|
||||
#: src/pages/users/UserListPage.ts
|
||||
#: src/pages/users/UserViewPage.ts
|
||||
|
|
87
web/src/pages/users/ServiceAccountForm.ts
Normal file
87
web/src/pages/users/ServiceAccountForm.ts
Normal file
|
@ -0,0 +1,87 @@
|
|||
import { CoreApi, UserServiceAccountRequest, UserServiceAccountResponse } from "@goauthentik/api";
|
||||
import { t } from "@lingui/macro";
|
||||
import { customElement, property } from "lit-element";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import "../../elements/forms/HorizontalFormElement";
|
||||
import { Form } from "../../elements/forms/Form";
|
||||
import { ModalForm } from "../../elements/forms/ModalForm";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
|
||||
@customElement("ak-user-service-account")
|
||||
export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
|
||||
@property({ attribute: false })
|
||||
result?: UserServiceAccountResponse;
|
||||
|
||||
getSuccessMessage(): string {
|
||||
return t`Successfully created user.`;
|
||||
}
|
||||
|
||||
send = (data: UserServiceAccountRequest): Promise<UserServiceAccountResponse> => {
|
||||
return new CoreApi(DEFAULT_CONFIG)
|
||||
.coreUsersServiceAccountCreate({
|
||||
userServiceAccountRequest: data,
|
||||
})
|
||||
.then((result) => {
|
||||
this.result = result;
|
||||
(this.parentElement as ModalForm).showSubmitButton = false;
|
||||
return result;
|
||||
});
|
||||
};
|
||||
|
||||
resetForm(): void {
|
||||
super.resetForm();
|
||||
this.result = undefined;
|
||||
}
|
||||
|
||||
renderRequestForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Username`} ?required=${true} name="name">
|
||||
<input type="text" value="" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="createGroup">
|
||||
<div class="pf-c-check">
|
||||
<input type="checkbox" class="pf-c-check__input" ?checked=${true} />
|
||||
<label class="pf-c-check__label"> ${t`Create group`} </label>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Enabling this toggle will create a group named after the user, with the user as member.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
renderResponseForm(): TemplateResult {
|
||||
return html`<p>
|
||||
${t`Use the username and password below to authenticate. The password can be retrieved later on the Tokens page.`}
|
||||
</p>
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Username`}>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value=${ifDefined(this.result?.username)}
|
||||
class="pf-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Password`}>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value=${ifDefined(this.result?.token)}
|
||||
class="pf-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
if (this.result) {
|
||||
return this.renderResponseForm();
|
||||
}
|
||||
return this.renderRequestForm();
|
||||
}
|
||||
}
|
|
@ -14,6 +14,7 @@ import "../../elements/forms/DeleteBulkForm";
|
|||
import "./UserActiveForm";
|
||||
import "./UserForm";
|
||||
import "./UserResetEmailForm";
|
||||
import "./ServiceAccountForm";
|
||||
import { showMessage } from "../../elements/messages/MessageContainer";
|
||||
import { MessageLevel } from "../../elements/messages/Message";
|
||||
import { first } from "../../utils";
|
||||
|
@ -247,6 +248,14 @@ export class UserListPage extends TablePage<User> {
|
|||
<ak-user-form slot="form"> </ak-user-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
|
||||
</ak-forms-modal>
|
||||
<ak-forms-modal .closeAfterSuccessfulSubmit=${false} .cancelText=${t`Close`}>
|
||||
<span slot="submit"> ${t`Create`} </span>
|
||||
<span slot="header"> ${t`Create Service account`} </span>
|
||||
<ak-user-service-account slot="form"> </ak-user-service-account>
|
||||
<button slot="trigger" class="pf-c-button pf-m-secondary">
|
||||
${t`Create Service account`}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
${super.renderToolbar()}
|
||||
`;
|
||||
}
|
||||
|
|
Reference in a new issue