trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin: add ServiceAccount creation form

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-24 20:13:05 +02:00
parent 1a20c8ffc1
commit 16cfa8cae2
5 changed files with 163 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/src/elements/forms/ModalForm.ts
View file

@ -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,16 +66,18 @@ export class ModalForm extends ModalButton {
<slot name="form"></slot>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
this.loading = true;
this.locked = true;
return this.confirm();
}}
class="pf-m-primary"
>
<slot name="submit"></slot> </ak-spinner-button
>&nbsp;
${this.showSubmitButton
? html`<ak-spinner-button
.callAction=${() => {
this.loading = true;
this.locked = true;
return this.confirm();
}}
class="pf-m-primary"
>
<slot name="submit"></slot> </ak-spinner-button
>&nbsp;`
: 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>`;
}

24
web/src/locales/en.po
View file

@ -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

24
web/src/locales/pseudo-LOCALE.po
View file

@ -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
View 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();
}
}

9
web/src/pages/users/UserListPage.ts
View file

@ -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()}
`;
}