diff --git a/main.go b/main.go index 8e01f2b2..4c686026 100644 --- a/main.go +++ b/main.go @@ -23,6 +23,9 @@ func configure(app *aero.Application) *aero.Application { app.Sessions.Duration = 3600 * 24 * 30 * 6 app.Sessions.Store = nanostore.New(arn.DB.Collection("Session")) + // Content security policy + app.ContentSecurityPolicy.Set("img-src", "https: data:") + // Security configureHTTPS(app) diff --git a/mixins/Input.pixy b/mixins/Input.pixy index 5d97e398..92d8fdb5 100644 --- a/mixins/Input.pixy +++ b/mixins/Input.pixy @@ -30,6 +30,13 @@ component InputSelection(id string, value string, label string, placeholder stri each option in options option(value=option.Value)= option.Label +component InputImage(id string, label string, src string) + .widget-section + label(for=id)= label + ":" + button.action(data-action="selectFile", data-trigger="click", data-preview-image-id=id + "-preview") + Icon("upload") + span Select file + component InputTags(id string, value []string, label string, tooltip string) .widget-section label(for=id)= label + ":" diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index 7b4a92bb..601ff0ee 100644 --- a/pages/settings/settings.pixy +++ b/pages/settings/settings.pixy @@ -33,18 +33,28 @@ component SettingsPersonal(user *arn.User) option(value="") Automatic option(value="Gravatar") Gravatar option(value="URL") Link - //- option(value="FileSystem") Upload + option(value="FileSystem") Upload + //- URL input if user.Settings().Avatar.Source == "URL" InputText("Avatar.SourceURL", user.Settings().Avatar.SourceURL, "Link", "Post the link to the image here") + //- Gravatar preview image if user.Settings().Avatar.Source == "Gravatar" || (user.Settings().Avatar.Source == "" && user.Avatar.Source == "Gravatar") .profile-image-container.avatar-preview img.profile-image.mountable(src=user.Gravatar(), alt="Gravatar (" + user.Email + ")", title="Gravatar (" + user.Email + ")") - if user.Settings().Avatar.Source == "URL" && user.Settings().Avatar.SourceURL != "" + //- URL preview image + if user.Settings().Avatar.Source == "URL" && user.Settings().Avatar.SourceURL != "" .profile-image-container.avatar-preview img.profile-image.mountable(src=strings.Replace(user.Settings().Avatar.SourceURL, "http://", "https://", 1), alt="Avatar preview") + + //- File upload + if user.Settings().Avatar.Source == "FileSystem" + InputImage("avatar-input", "File", user.LargeAvatar()) + + .profile-image-container.avatar-preview + img.profile-image.hidden(id="avatar-input-preview", src="", alt="Image preview") component SettingsNotifications(user *arn.User) SettingsTabs diff --git a/scripts/Actions.ts b/scripts/Actions.ts index e33e0eb9..7b581847 100644 --- a/scripts/Actions.ts +++ b/scripts/Actions.ts @@ -14,4 +14,5 @@ export * from "./Actions/Serialization" export * from "./Actions/Shop" export * from "./Actions/SideBar" export * from "./Actions/StatusMessage" -export * from "./Actions/Theme" \ No newline at end of file +export * from "./Actions/Theme" +export * from "./Actions/Upload" \ No newline at end of file diff --git a/scripts/Actions/Upload.ts b/scripts/Actions/Upload.ts new file mode 100644 index 00000000..fa6ba33e --- /dev/null +++ b/scripts/Actions/Upload.ts @@ -0,0 +1,39 @@ +import { AnimeNotifier } from "../AnimeNotifier" + +// Select file +export function selectFile(arn: AnimeNotifier, button: HTMLButtonElement) { + let input = document.createElement("input") + let preview = document.getElementById(button.dataset.previewImageId) as HTMLImageElement + input.setAttribute("type", "file") + + input.onchange = () => { + previewImage(input, preview) + uploadImage(input, preview) + } + + input.click() +} + +// Preview image +function previewImage(input: HTMLInputElement, preview: HTMLImageElement) { + let file = input.files[0] + let reader = new FileReader() + + console.log(file.name, file.size, file.type) + + reader.onloadend = () => { + preview.classList.remove("hidden") + preview.src = reader.result + } + + if(file) { + reader.readAsDataURL(file) + } else { + preview.src = "" + } +} + +// Upload image +function uploadImage(input: HTMLInputElement, preview: HTMLImageElement) { + +} \ No newline at end of file