Remotely/Server/Pages/Branding.razor

@page "/branding"
@inherits AuthComponentBase
@attribute [Authorize(Policy = PolicyNames.OrganizationAdminRequired)]
@inject IDataService DataService
@inject IToastService ToastService
@inject IJsInterop JsInterop 
@using Remotely.Server.Models
@using System.ComponentModel.DataAnnotations

<h3 class="mb-3">Branding</h3>

<AlertBanner Message="@_alertMessage" />

<div class="row">
    <div class="col-sm-8 col-lg-6 col-xl-5">
        <div class="form-group">
            <label class="mb-1">Branding Areas</label>
            <br />
            <img class="img-fluid" src="/images/Remotely_Desktop.png" />
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-8 col-lg-6 col-xl-5">
        <EditForm OnValidSubmit="HandleValidSubmit" Model="_inputModel">
            <DataAnnotationsValidator />

            <div class="form-group mb-5">
                <label class="text-info font-weight-bold">Product Name</label>
                <InputText class="form-control" @bind-Value="_inputModel.ProductName" />
                <ValidationMessage For="() => _inputModel.ProductName" />
            </div>

            @if (!string.IsNullOrWhiteSpace(_base64Icon))
            {
                <div class="form-group mb-4">
                    <label class="text-info font-weight-bold">Current Icon</label>
                    <br />
                    <img class="img-fluid" src="data:image/png;base64,@_base64Icon" />
                </div>
            }

            <div class="form-group mb-5">
                <label class="text-info font-weight-bold">New Icon</label>
                <InputFile type="file" accept="image/png" class="form-control" OnChange="IconUploadInputChanged" />
            </div>
            <div class="form-group mb-5">
                <label class="text-info font-weight-bold">Title Foreground</label>
                <ColorPicker @bind-Color="_inputModel.TitleForegroundColor" />
            </div>
            <div class="form-group mb-5">
                <label class="text-info font-weight-bold">Title Background</label>
                <ColorPicker @bind-Color="_inputModel.TitleBackgroundColor" />
            </div>
            <div class="form-group mb-5">
                <label class="text-info font-weight-bold">Button Color</label>
                <ColorPicker @bind-Color="_inputModel.TitleButtonColor" />
            </div>
            <div class="form-group text-right">
                <button class="btn btn-secondary mr-3" type="button" @onclick="ResetBranding">Reset</button>
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>
        </EditForm>
    </div>
</div>
@code {
    private string _alertMessage;
    private string _base64Icon;
    private InputModel _inputModel = new();

    private class InputModel
    {
        [StringLength(25)]
        [Required]
        [Display(Name = "Product Name")]
        public string ProductName { get; set; }

        public ColorPickerModel TitleForegroundColor { get; set; } = new();
        public ColorPickerModel TitleBackgroundColor { get; set; } = new();
        public ColorPickerModel TitleButtonColor { get; set; } = new();

        public byte[] IconBytes { get; set; }
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        await LoadBrandingInfo();
    }

    private async Task HandleValidSubmit(EditContext context)
    {
        await DataService.UpdateBrandingInfo(
            User.OrganizationID,
            _inputModel.ProductName,
            _inputModel.IconBytes,
            _inputModel.TitleForegroundColor,
            _inputModel.TitleBackgroundColor,
            _inputModel.TitleButtonColor);

        if (_inputModel?.IconBytes?.Any() == true)
        {
            _base64Icon = Convert.ToBase64String(_inputModel.IconBytes);
        }

        _alertMessage = "Branding saved.";
        ToastService.ShowToast("Branding saved.");
    }

    private async Task IconUploadInputChanged(InputFileChangeEventArgs args)
    {
        if (args.File is null)
        {
            return;
        }

        if (args.File.Size > 1_024_000)
        {
            ToastService.ShowToast("File size must be under 1 MB.", classString: "bg-warning");
            return;
        }

        using var rs = args.File.OpenReadStream(1_024_000);
        _inputModel.IconBytes = new byte[args.File.Size];
        await rs.ReadAsync(_inputModel.IconBytes, 0, (int)args.File.Size);
    }

    private async Task LoadBrandingInfo()
    {
        var organization = await DataService.GetOrganizationByUserName(User.UserName);

        var brandingInfo = await DataService.GetBrandingInfo(organization.ID);


        _inputModel.ProductName = brandingInfo.Product;

        if (brandingInfo?.Icon?.Any() == true)
        {
            _base64Icon = Convert.ToBase64String(brandingInfo.Icon);
        }

        _inputModel.TitleForegroundColor.Red = brandingInfo.TitleForegroundRed;
        _inputModel.TitleForegroundColor.Green = brandingInfo.TitleForegroundGreen;
        _inputModel.TitleForegroundColor.Blue = brandingInfo.TitleForegroundBlue;

        _inputModel.TitleBackgroundColor.Red = brandingInfo.TitleBackgroundRed;
        _inputModel.TitleBackgroundColor.Green = brandingInfo.TitleBackgroundGreen;
        _inputModel.TitleBackgroundColor.Blue = brandingInfo.TitleBackgroundBlue;

        _inputModel.TitleButtonColor.Red = brandingInfo.ButtonForegroundRed;
        _inputModel.TitleButtonColor.Green = brandingInfo.ButtonForegroundGreen;
        _inputModel.TitleButtonColor.Blue = brandingInfo.ButtonForegroundBlue;
    }

    private async Task ResetBranding()
    {
        var result = await JsInterop.Confirm("Are you sure you want to reset branding to default?");
        if (result)
        {
            await DataService.ResetBranding(User.OrganizationID);
            _base64Icon = string.Empty;
            await LoadBrandingInfo();
            ToastService.ShowToast("Branding reset.");
        }
    }
}