From 409f474db4fbf4e77d5f92dbc7d475700e226b5a Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 27 Nov 2023 14:25:24 +0100
Subject: [PATCH] simplify modal

---
 .../invite/user-invite-modal.element.ts       | 127 ++++--------------
 1 file changed, 28 insertions(+), 99 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/invite/user-invite-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/invite/user-invite-modal.element.ts
index dc4eefe188..4eefa18fab 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/invite/user-invite-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/invite/user-invite-modal.element.ts
@@ -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;
 	}
 }