yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify modal

Browse Source
This commit is contained in:
Mads Rasmussen
2023-11-27 14:25:24 +01:00
parent 6008c7d44c
commit 409f474db4
1 changed files with 28 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/Umbraco.Web.UI.Client/src/packages/user/user/modals/invite/user-invite-modal.element.ts
View File

@@ -1,20 +1,14 @@
import { UmbUserGroupInputElement } from '../../../user-group/components/input-user-group/user-group-input.element.js';
import { UmbInviteUserRepository } from '../../repository/invite/invite-user.repository.js';
import { css, html, nothing, customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
import { css, html, customElement, query } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
@customElement('umb-user-invite-modal')
export class UmbUserInviteModalElement extends UmbModalBaseElement {
@query('#form')
private _form!: HTMLFormElement;
@customElement('umb-invite-user-modal')
export class UmbInviteUserModalElement extends UmbModalBaseElement {
#inviteUserRepository = new UmbInviteUserRepository(this);
@state()
private _invitedUser?: any;
#userRepository = new UmbInviteUserRepository(this);
private async _handleSubmit(e: Event) {
async #onSubmit(e: Event) {
e.preventDefault();
const form = e.target as HTMLFormElement;
@@ -34,12 +28,9 @@ export class UmbUserInviteModalElement extends UmbModalBaseElement {
const message = formData.get('message') as string;
alert('implement');
// TODO: figure out when to use email or username
// TODO: invite request gives 500 error.
/*
const { data } = await this.#userRepository.invite({
const { error } = await this.#inviteUserRepository.invite({
name,
email,
userName: email,
@@ -47,39 +38,36 @@ export class UmbUserInviteModalElement extends UmbModalBaseElement {
userGroupIds,
});
if (data) {
this._invitedUser = data;
if (!error) {
this.#closeModal();
}
*/
}
private _submitForm() {
this._form?.requestSubmit();
}
private _closeModal() {
#closeModal() {
this.modalContext?.reject();
}
private _resetForm() {
this._invitedUser = undefined;
render() {
return html`<uui-dialog-layout headline="Invite User">
${this.#renderForm()}
<uui-button @click=${this.#closeModal} slot="actions" label="Cancel" look="secondary"></uui-button>
<uui-button
form="InviteUserForm"
slot="actions"
type="submit"
label="Send invite"
look="primary"
color="positive"></uui-button
></uui-dialog-layout>`;
}
private _goToProfile() {
if (!this._invitedUser) return;
this._closeModal();
history.pushState(null, '', 'section/user-management/view/users/user/' + this._invitedUser?.id); //TODO: URL Should be dynamic
}
private _renderForm() {
return html` <h1>Invite user</h1>
<p style="margin-top: 0">
#renderForm() {
return html` <p style="margin-top: 0">
Invite new users to give them access to Umbraco. An invite email will be sent to the user with information on
how to log in to Umbraco. Invites last for 72 hours.
</p>
<uui-form>
<form id="form" name="form" @submit="${this._handleSubmit}">
<form id="InviteUserForm" name="form" @submit="${this.#onSubmit}">
<uui-form-layout-item>
<uui-label id="nameLabel" slot="label" for="name" required>Name</uui-label>
<uui-input id="name" label="name" type="text" name="name" required></uui-input>
@@ -101,48 +89,6 @@ export class UmbUserInviteModalElement extends UmbModalBaseElement {
</uui-form>`;
}
private _renderPostInvite() {
if (!this._invitedUser) return nothing;
return html`<div>
<h1><b style="color: var(--uui-color-interactive-emphasis)">${this._invitedUser.name}</b> has been invited</h1>
<p>An invitation has been sent to the new user with details about how to log in to Umbraco.</p>
</div>`;
}
render() {
return html`<uui-dialog-layout>
${this._invitedUser ? this._renderPostInvite() : this._renderForm()}
${this._invitedUser
? html`
<uui-button
@click=${this._closeModal}
slot="actions"
label="Close"
look="secondary"></uui-button>
<uui-button
@click=${this._resetForm}
slot="actions"
label="Invite another user"
look="secondary"></uui-button>
<uui-button @click=${this._goToProfile} slot="actions" label="Go to profile" look="primary"></uui-button>
`
: html`
<uui-button
@click=${this._closeModal}
slot="actions"
label="Cancel"
look="secondary"></uui-button>
<uui-button
@click="${this._submitForm}"
slot="actions"
type="submit"
label="Send invite"
look="primary"></uui-button>
`}
</uui-dialog-layout>`;
}
static styles = [
UmbTextStyles,
css`
@@ -153,39 +99,22 @@ export class UmbUserInviteModalElement extends UmbModalBaseElement {
height: 100%;
width: 100%;
}
uui-box {
max-width: 500px;
}
uui-form-layout-item {
display: flex;
flex-direction: column;
}
uui-input {
width: 100%;
}
form {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
uui-form-layout-item {
margin-bottom: 0;
}
uui-textarea {
--uui-textarea-min-height: 100px;
}
/* TODO: Style below is to fix a11y contrast issue, find a proper solution */
[slot='description'] {
color: black;
}
`,
];
}
export default UmbUserInviteModalElement;
export default UmbInviteUserModalElement;
declare global {
interface HTMLElementTagNameMap {
'umb-user-invite-modal': UmbUserInviteModalElement;
'umb-invite-user-modal': UmbInviteUserModalElement;
}
}