LANCommander/LANCommander.Server/UI/Pages/Settings/Authentication/Components/ScopesEditor.razor

<Flex Vertical Gap="@("16")">
    @if (!Scopes.Any())
    {
        <Empty Small Description="@("No scopes have been defined")" />
    }

    @foreach (var scope in Scopes)
    {
        <Flex @key="scope">
            <Input Value="@scope.Name" ValueChanged="@((string value) => OnScopeChanged(scope, value))" BindOnInput />
            <Button Type="@ButtonType.Text" Icon="@IconType.Outline.Close" Danger OnClick="() => Remove(scope)" />
        </Flex>
    }

    <Flex Justify="FlexJustify.End">
        <Button Type="@ButtonType.Primary" OnClick="Add">Add Scope</Button>
    </Flex>
</Flex>

@code {
    [Parameter] public IEnumerable<string> Values { get; set; }
    [Parameter] public EventCallback<IEnumerable<string>> ValuesChanged { get; set; }

    List<ExternalProviderScope> Scopes = new();

    protected override void OnParametersSet()
    {
        var incoming = (Values ?? Enumerable.Empty<string>()).ToList();

        // Only rebuild local state when the incoming values actually differ. Without
        // this guard, the round-trip caused by our own ValuesChanged would clobber
        // in-progress edits on every re-render.
        if (!incoming.SequenceEqual(Scopes.Select(s => s.Name)))
            Scopes = incoming.Select(v => new ExternalProviderScope { Name = v }).ToList();
    }

    async Task OnScopeChanged(ExternalProviderScope scope, string value)
    {
        scope.Name = value;

        await Update();
    }

    async Task Add()
    {
        Scopes.Add(new ExternalProviderScope());

        await Update();
    }

    async Task Remove(ExternalProviderScope scope)
    {
        Scopes.Remove(scope);

        await Update();
    }

    async Task Update()
    {
        if (ValuesChanged.HasDelegate)
            await ValuesChanged.InvokeAsync(Scopes.Select(s => s.Name).ToList());
    }
}