Initial code commit.

ui/Sufi.Demo.PeopleDirectory.UI/Client/Pages/Dialogs/CreateContactDialog.razor

@@ -0,0 +1,60 @@
+<MudDialog>
+	<DialogContent>
+		<MudForm @ref="form" Model="request" @bind-IsValid="success" @bind-Errors="errors">
+			<MudTextField Label="Username" Required @bind-Value="request.UserName" />
+			<MudTextField Label="Email" Required @bind-Value="request.Email" />
+			<MudTextField Label="Phone" Required @bind-Value="request.Phone" MaxLength="20" />
+			<MudTextField Label="Skill Sets" Required @bind-Value="request.SkillSets" />
+			<MudTextField Label="Hobby" Required @bind-Value="request.Hobby" />
+		</MudForm>
+	</DialogContent>
+	<DialogActions>
+		<MudButton OnClick="Cancel">Cancel</MudButton>
+		<MudButton OnClick="Submit">Ok</MudButton>
+	</DialogActions>
+</MudDialog>
+
+@code {
+	private static readonly string[] SampleUserNames = new[]
+	{
+		"alex99",
+		"samwise",
+		"lunaStar",
+		"maverick",
+		"nova",
+		"pixelPro",
+		"kanu",
+		"tay",
+		"zorin",
+		"echo"
+	};
+	private static readonly Random _rnd = new();
+
+	[CascadingParameter]
+	private IMudDialogInstance MudDialog { get; set; } = null!;
+
+	private AddEditContactCommand request = new();
+	private MudForm? form;
+	private bool success;
+	private string[] errors = { };
+
+	private void Cancel() => MudDialog.Cancel();
+
+	private async Task Submit()
+	{
+		await form!.Validate();
+		if (!success)
+		{
+			return;
+		}
+
+		MudDialog.Close(request);
+	}
+
+	protected override Task OnInitializedAsync()
+	{
+		// Assign a random username from the in-memory list when the dialog opens
+		request.UserName = SampleUserNames[_rnd.Next(SampleUserNames.Length)];
+		return base.OnInitializedAsync();
+	}
+}