[#87] added additional thumb resizers

apis/file.go

@@ -78,7 +78,7 @@ func (api *fileApi) download(c echo.Context) error {
 			// - if exists - compare last modified dates to determine whether the thumb should be recreated
 			tAttrs, tAttrsErr := fs.Attributes(servedPath)
 			if tAttrsErr != nil || oAttrs.ModTime.After(tAttrs.ModTime) {
-				if err := fs.CreateThumb(originalPath, servedPath, thumbSize, false); err != nil {
+				if err := fs.CreateThumb(originalPath, servedPath, thumbSize); err != nil {
 					servedPath = originalPath // fallback to the original
 				}
 			}

apis/file_test.go

@@ -16,7 +16,12 @@ func TestFileDownload(t *testing.T) {
 	dataDirRelPath := "../tests/data/"
 	testFilePath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/848a1dea-5ddd-42d6-a00d-030547bffcfe/8fe61d65-6a2e-4f11-87b3-d8a3170bfd4f.txt")
 	testImgPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png")
-	testThumbPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/100x100_4881bdef-06b4-4dea-8d97-6125ad242677.png")
+	testThumbCropCenterPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50_4881bdef-06b4-4dea-8d97-6125ad242677.png")
+	testThumbCropTopPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50t_4881bdef-06b4-4dea-8d97-6125ad242677.png")
+	testThumbCropBottomPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50b_4881bdef-06b4-4dea-8d97-6125ad242677.png")
+	testThumbFitPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50f_4881bdef-06b4-4dea-8d97-6125ad242677.png")
+	testThumbZeroWidthPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/0x50_4881bdef-06b4-4dea-8d97-6125ad242677.png")
+	testThumbZeroHeightPath := filepath.Join(path.Dir(currentFile), dataDirRelPath, "storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x0_4881bdef-06b4-4dea-8d97-6125ad242677.png")
 
 	testFile, fileErr := os.ReadFile(testFilePath)
 	if fileErr != nil {
@@ -28,7 +33,32 @@ func TestFileDownload(t *testing.T) {
 		t.Fatal(imgErr)
 	}
 
-	testThumb, thumbErr := os.ReadFile(testThumbPath)
+	testThumbCropCenter, thumbErr := os.ReadFile(testThumbCropCenterPath)
+	if thumbErr != nil {
+		t.Fatal(thumbErr)
+	}
+
+	testThumbCropTop, thumbErr := os.ReadFile(testThumbCropTopPath)
+	if thumbErr != nil {
+		t.Fatal(thumbErr)
+	}
+
+	testThumbCropBottom, thumbErr := os.ReadFile(testThumbCropBottomPath)
+	if thumbErr != nil {
+		t.Fatal(thumbErr)
+	}
+
+	testThumbFit, thumbErr := os.ReadFile(testThumbFitPath)
+	if thumbErr != nil {
+		t.Fatal(thumbErr)
+	}
+
+	testThumbZeroWidth, thumbErr := os.ReadFile(testThumbZeroWidthPath)
+	if thumbErr != nil {
+		t.Fatal(thumbErr)
+	}
+
+	testThumbZeroHeight, thumbErr := os.ReadFile(testThumbZeroHeightPath)
 	if thumbErr != nil {
 		t.Fatal(thumbErr)
 	}
@@ -76,11 +106,61 @@ func TestFileDownload(t *testing.T) {
 			},
 		},
 		{
-			Name:            "existing image - existing thumb",
+			Name:            "existing image - existing thumb (crop center)",
 			Method:          http.MethodGet,
-			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=100x100",
+			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=70x50",
 			ExpectedStatus:  200,
-			ExpectedContent: []string{string(testThumb)},
+			ExpectedContent: []string{string(testThumbCropCenter)},
+			ExpectedEvents: map[string]int{
+				"OnFileDownloadRequest": 1,
+			},
+		},
+		{
+			Name:            "existing image - existing thumb (crop top)",
+			Method:          http.MethodGet,
+			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=70x50t",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{string(testThumbCropTop)},
+			ExpectedEvents: map[string]int{
+				"OnFileDownloadRequest": 1,
+			},
+		},
+		{
+			Name:            "existing image - existing thumb (crop bottom)",
+			Method:          http.MethodGet,
+			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=70x50b",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{string(testThumbCropBottom)},
+			ExpectedEvents: map[string]int{
+				"OnFileDownloadRequest": 1,
+			},
+		},
+		{
+			Name:            "existing image - existing thumb (fit)",
+			Method:          http.MethodGet,
+			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=70x50f",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{string(testThumbFit)},
+			ExpectedEvents: map[string]int{
+				"OnFileDownloadRequest": 1,
+			},
+		},
+		{
+			Name:            "existing image - existing thumb (zero width)",
+			Method:          http.MethodGet,
+			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=0x50",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{string(testThumbZeroWidth)},
+			ExpectedEvents: map[string]int{
+				"OnFileDownloadRequest": 1,
+			},
+		},
+		{
+			Name:            "existing image - existing thumb (zero height)",
+			Method:          http.MethodGet,
+			Url:             "/api/files/demo/577bd676-aacb-4072-b7da-99d00ee210a4/4881bdef-06b4-4dea-8d97-6125ad242677.png?thumb=70x0",
+			ExpectedStatus:  200,
+			ExpectedContent: []string{string(testThumbZeroHeight)},
 			ExpectedEvents: map[string]int{
 				"OnFileDownloadRequest": 1,
 			},

core/settings_templates.go

@@ -16,7 +16,6 @@ var defaultVerificationTemplate = EmailTemplate{
 <p>
   <a class="btn" href="` + EmailPlaceholderActionUrl + `" target="_blank" rel="noopener">Verify</a>
 </p>
-
 <p>
   Thanks,<br/>
   ` + EmailPlaceholderAppName + ` team

core/settings_test.go

@@ -174,7 +174,7 @@ func TestSettingsRedactClone(t *testing.T) {
 		t.Fatal(err)
 	}
 
-	expected := `{"meta":{"appName":"test123","appUrl":"http://localhost:8090","senderName":"Support","senderAddress":"support@example.com","verificationTemplate":{"body":"\u003cp\u003eHello,\u003c/p\u003e\n\u003cp\u003eThank you for joining us at {APP_NAME}.\u003c/p\u003e\n\u003cp\u003eClick on the button below to verify your email address.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca class=\"btn\" href=\"{ACTION_URL}\" target=\"_blank\" rel=\"noopener\"\u003eVerify\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  Thanks,\u003cbr/\u003e\n  {APP_NAME} team\n\u003c/p\u003e","subject":"Verify your {APP_NAME} email","actionUrl":"{APP_URL}/_/#/users/confirm-verification/{TOKEN}"},"resetPasswordTemplate":{"body":"\u003cp\u003eHello,\u003c/p\u003e\n\u003cp\u003eClick on the button below to reset your password.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca class=\"btn\" href=\"{ACTION_URL}\" target=\"_blank\" rel=\"noopener\"\u003eReset password\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ci\u003eIf you didn't ask to reset your password, you can ignore this email.\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003e\n  Thanks,\u003cbr/\u003e\n  {APP_NAME} team\n\u003c/p\u003e","subject":"Reset your {APP_NAME} password","actionUrl":"{APP_URL}/_/#/users/confirm-password-reset/{TOKEN}"},"confirmEmailChangeTemplate":{"body":"\u003cp\u003eHello,\u003c/p\u003e\n\u003cp\u003eClick on the button below to confirm your new email address.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca class=\"btn\" href=\"{ACTION_URL}\" target=\"_blank\" rel=\"noopener\"\u003eConfirm new email\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ci\u003eIf you didn't ask to change your email address, you can ignore this email.\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003e\n  Thanks,\u003cbr/\u003e\n  {APP_NAME} team\n\u003c/p\u003e","subject":"Confirm your {APP_NAME} new email address","actionUrl":"{APP_URL}/_/#/users/confirm-email-change/{TOKEN}"}},"logs":{"maxDays":7},"smtp":{"enabled":false,"host":"smtp.example.com","port":587,"username":"","password":"******","tls":true},"s3":{"enabled":false,"bucket":"","region":"","endpoint":"","accessKey":"","secret":"******","forcePathStyle":false},"adminAuthToken":{"secret":"******","duration":1209600},"adminPasswordResetToken":{"secret":"******","duration":1800},"userAuthToken":{"secret":"******","duration":1209600},"userPasswordResetToken":{"secret":"******","duration":1800},"userEmailChangeToken":{"secret":"******","duration":1800},"userVerificationToken":{"secret":"******","duration":604800},"emailAuth":{"enabled":true,"exceptDomains":null,"onlyDomains":null,"minPasswordLength":8},"googleAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"},"facebookAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"},"githubAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"},"gitlabAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"}}`
+	expected := `{"meta":{"appName":"test123","appUrl":"http://localhost:8090","senderName":"Support","senderAddress":"support@example.com","verificationTemplate":{"body":"\u003cp\u003eHello,\u003c/p\u003e\n\u003cp\u003eThank you for joining us at {APP_NAME}.\u003c/p\u003e\n\u003cp\u003eClick on the button below to verify your email address.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca class=\"btn\" href=\"{ACTION_URL}\" target=\"_blank\" rel=\"noopener\"\u003eVerify\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  Thanks,\u003cbr/\u003e\n  {APP_NAME} team\n\u003c/p\u003e","subject":"Verify your {APP_NAME} email","actionUrl":"{APP_URL}/_/#/users/confirm-verification/{TOKEN}"},"resetPasswordTemplate":{"body":"\u003cp\u003eHello,\u003c/p\u003e\n\u003cp\u003eClick on the button below to reset your password.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca class=\"btn\" href=\"{ACTION_URL}\" target=\"_blank\" rel=\"noopener\"\u003eReset password\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ci\u003eIf you didn't ask to reset your password, you can ignore this email.\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003e\n  Thanks,\u003cbr/\u003e\n  {APP_NAME} team\n\u003c/p\u003e","subject":"Reset your {APP_NAME} password","actionUrl":"{APP_URL}/_/#/users/confirm-password-reset/{TOKEN}"},"confirmEmailChangeTemplate":{"body":"\u003cp\u003eHello,\u003c/p\u003e\n\u003cp\u003eClick on the button below to confirm your new email address.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca class=\"btn\" href=\"{ACTION_URL}\" target=\"_blank\" rel=\"noopener\"\u003eConfirm new email\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ci\u003eIf you didn't ask to change your email address, you can ignore this email.\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003e\n  Thanks,\u003cbr/\u003e\n  {APP_NAME} team\n\u003c/p\u003e","subject":"Confirm your {APP_NAME} new email address","actionUrl":"{APP_URL}/_/#/users/confirm-email-change/{TOKEN}"}},"logs":{"maxDays":7},"smtp":{"enabled":false,"host":"smtp.example.com","port":587,"username":"","password":"******","tls":true},"s3":{"enabled":false,"bucket":"","region":"","endpoint":"","accessKey":"","secret":"******","forcePathStyle":false},"adminAuthToken":{"secret":"******","duration":1209600},"adminPasswordResetToken":{"secret":"******","duration":1800},"userAuthToken":{"secret":"******","duration":1209600},"userPasswordResetToken":{"secret":"******","duration":1800},"userEmailChangeToken":{"secret":"******","duration":1800},"userVerificationToken":{"secret":"******","duration":604800},"emailAuth":{"enabled":true,"exceptDomains":null,"onlyDomains":null,"minPasswordLength":8},"googleAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"},"facebookAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"},"githubAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"},"gitlabAuth":{"enabled":false,"allowRegistrations":true,"clientSecret":"******"}}`
 
 	if encodedStr := string(encoded); encodedStr != expected {
 		t.Fatalf("Expected %v, got \n%v", expected, encodedStr)

models/schema/schema_field.go

@@ -7,6 +7,7 @@ import (
 
 	validation "github.com/go-ozzo/ozzo-validation/v4"
 	"github.com/go-ozzo/ozzo-validation/v4/is"
+	"github.com/pocketbase/pocketbase/tools/filesystem"
 	"github.com/pocketbase/pocketbase/tools/list"
 	"github.com/pocketbase/pocketbase/tools/types"
 	"github.com/spf13/cast"
@@ -458,7 +459,10 @@ func (o FileOptions) Validate() error {
 	return validation.ValidateStruct(&o,
 		validation.Field(&o.MaxSelect, validation.Required, validation.Min(1)),
 		validation.Field(&o.MaxSize, validation.Required, validation.Min(1)),
-		validation.Field(&o.Thumbs, validation.Each(validation.Match(regexp.MustCompile(`^[1-9]\d*x[1-9]\d*$`)))),
+		validation.Field(&o.Thumbs, validation.Each(
+			validation.NotIn("0x0", "0x0t", "0x0b", "0x0f"),
+			validation.Match(filesystem.ThumbSizeRegex),
+		)),
 	)
 }
 

models/schema/schema_field_test.go

@@ -1246,30 +1246,12 @@ func TestFileOptionsValidate(t *testing.T) {
 			},
 			[]string{"thumbs"},
 		},
-		{
-			"invalid thumbs format - zero width",
-			schema.FileOptions{
-				MaxSize:   1,
-				MaxSelect: 2,
-				Thumbs:    []string{"0x100"},
-			},
-			[]string{"thumbs"},
-		},
-		{
-			"invalid thumbs format - zero height",
-			schema.FileOptions{
-				MaxSize:   1,
-				MaxSelect: 2,
-				Thumbs:    []string{"100x0"},
-			},
-			[]string{"thumbs"},
-		},
 		{
 			"invalid thumbs format - zero with and height",
 			schema.FileOptions{
 				MaxSize:   1,
 				MaxSelect: 2,
-				Thumbs:    []string{"0x0"},
+				Thumbs:    []string{"0x0", "0x0t", "0x0b", "0x0f"},
 			},
 			[]string{"thumbs"},
 		},
@@ -1278,7 +1260,10 @@ func TestFileOptionsValidate(t *testing.T) {
 			schema.FileOptions{
 				MaxSize:   1,
 				MaxSelect: 2,
-				Thumbs:    []string{"100x100", "200x100", "1x1"},
+				Thumbs: []string{
+					"100x100", "200x100", "0x100", "100x0",
+					"10x10t", "10x10b", "10x10f",
+				},
 			},
 			[]string{},
 		},

tests/data/storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/0x50_4881bdef-06b4-4dea-8d97-6125ad242677.png.attrs

@@ -0,0 +1 @@
+{"user.cache_control":"","user.content_disposition":"","user.content_encoding":"","user.content_language":"","user.content_type":"image/png","user.metadata":null,"md5":"UlDqO9tdyG/wZHge4djvfg=="}

tests/data/storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x0_4881bdef-06b4-4dea-8d97-6125ad242677.png.attrs

@@ -0,0 +1 @@
+{"user.cache_control":"","user.content_disposition":"","user.content_encoding":"","user.content_language":"","user.content_type":"image/png","user.metadata":null,"md5":"eVVDssRj5yVxpXa/D13Oxg=="}

tests/data/storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50_4881bdef-06b4-4dea-8d97-6125ad242677.png.attrs

@@ -0,0 +1 @@
+{"user.cache_control":"","user.content_disposition":"","user.content_encoding":"","user.content_language":"","user.content_type":"image/png","user.metadata":null,"md5":"b+ZUvKPaIXEEHnFZW1BaAQ=="}

tests/data/storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50b_4881bdef-06b4-4dea-8d97-6125ad242677.png.attrs

@@ -0,0 +1 @@
+{"user.cache_control":"","user.content_disposition":"","user.content_encoding":"","user.content_language":"","user.content_type":"image/png","user.metadata":null,"md5":"DHDmiDWZfc+R37OBSxmx6A=="}

tests/data/storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50f_4881bdef-06b4-4dea-8d97-6125ad242677.png.attrs

@@ -0,0 +1 @@
+{"user.cache_control":"","user.content_disposition":"","user.content_encoding":"","user.content_language":"","user.content_type":"image/png","user.metadata":null,"md5":"UlDqO9tdyG/wZHge4djvfg=="}

tests/data/storage/3f2888f8-075d-49fe-9d09-ea7e951000dc/577bd676-aacb-4072-b7da-99d00ee210a4/thumbs_4881bdef-06b4-4dea-8d97-6125ad242677.png/70x50t_4881bdef-06b4-4dea-8d97-6125ad242677.png.attrs

@@ -0,0 +1 @@
+{"user.cache_control":"","user.content_disposition":"","user.content_encoding":"","user.content_language":"","user.content_type":"image/png","user.metadata":null,"md5":"s3qk32WZOj9nnnteIt8Gew=="}

tools/filesystem/filesystem.go

@@ -3,10 +3,12 @@ package filesystem
 import (
 	"context"
 	"errors"
+	"image"
 	"io"
 	"net/http"
 	"os"
 	"path/filepath"
+	"regexp"
 	"sort"
 	"strconv"
 	"strings"
@@ -230,18 +232,31 @@ func (s *System) Serve(response http.ResponseWriter, fileKey string, name string
 	return err
 }
 
+var ThumbSizeRegex = regexp.MustCompile(`^(\d+)x(\d+)(t|b|f)?$`)
+
 // CreateThumb creates a new thumb image for the file at originalKey location.
 // The new thumb file is stored at thumbKey location.
 //
-// thumbSize is in the format "WxH", eg. "100x50".
+// thumbSize is in the format:
-func (s *System) CreateThumb(originalKey string, thumbKey, thumbSize string, cropCenter bool) error {
+// - 0xH  (eg. 0x100)    - resize to H height preserving the aspect ratio
-	thumbSizeParts := strings.SplitN(thumbSize, "x", 2)
+// - Wx0  (eg. 300x0)    - resize to W width preserving the aspect ratio
-	if len(thumbSizeParts) != 2 {
+// - WxH  (eg. 300x100)  - resize and crop to WxH viewbox (from center)
-		return errors.New("Thumb size must be in WxH format.")
+// - WxHt (eg. 300x100t) - resize and crop to WxH viewbox (from top)
+// - WxHb (eg. 300x100b) - resize and crop to WxH viewbox (from bottom)
+// - WxHf (eg. 300x100f) - fit inside a WxH viewbox (without cropping)
+func (s *System) CreateThumb(originalKey string, thumbKey, thumbSize string) error {
+	sizeParts := ThumbSizeRegex.FindStringSubmatch(thumbSize)
+	if len(sizeParts) != 4 {
+		return errors.New("Thumb size must be in WxH, WxHt, WxHb or WxHf format.")
 	}
 
-	width, _ := strconv.Atoi(thumbSizeParts[0])
+	width, _ := strconv.Atoi(sizeParts[1])
-	height, _ := strconv.Atoi(thumbSizeParts[1])
+	height, _ := strconv.Atoi(sizeParts[2])
+	resizeType := sizeParts[3]
+
+	if width == 0 && height == 0 {
+		return errors.New("Thumb width and height cannot be zero at the same time.")
+	}
 
 	// fetch the original
 	r, readErr := s.bucket.NewReader(s.ctx, originalKey, nil)
@@ -256,14 +271,27 @@ func (s *System) CreateThumb(originalKey string, thumbKey, thumbSize string, cro
 		return decodeErr
 	}
 
-	// determine crop anchor
+	var thumbImg *image.NRGBA
-	cropAnchor := imaging.Center
-	if !cropCenter {
-		cropAnchor = imaging.Top
-	}
 
-	// create thumb imaging object
+	if width == 0 || height == 0 {
-	thumbImg := imaging.Fill(img, width, height, cropAnchor, imaging.CatmullRom)
+		// force resize preserving aspect ratio
+		thumbImg = imaging.Resize(img, width, height, imaging.CatmullRom)
+	} else {
+		switch resizeType {
+		case "f":
+			// fit
+			thumbImg = imaging.Fit(img, width, height, imaging.CatmullRom)
+		case "t":
+			// fill and crop from top
+			thumbImg = imaging.Fill(img, width, height, imaging.Top, imaging.CatmullRom)
+		case "b":
+			// fill and crop from bottom
+			thumbImg = imaging.Fill(img, width, height, imaging.Bottom, imaging.CatmullRom)
+		default:
+			// fill and crop from center
+			thumbImg = imaging.Fill(img, width, height, imaging.Center, imaging.CatmullRom)
+		}
+	}
 
 	// open a thumb storage writer (aka. prepare for upload)
 	w, writerErr := s.bucket.NewWriter(s.ctx, thumbKey, nil)
@@ -274,7 +302,6 @@ func (s *System) CreateThumb(originalKey string, thumbKey, thumbSize string, cro
 	// thumb encode (aka. upload)
 	if err := imaging.Encode(w, thumbImg, imaging.PNG); err != nil {
 		w.Close()
-
 		return err
 	}
 

tools/filesystem/filesystem_test.go

@@ -260,7 +260,7 @@ func TestFileSystemCreateThumb(t *testing.T) {
 	}
 
 	for i, scenario := range scenarios {
-		err := fs.CreateThumb(scenario.file, scenario.thumb, "100x100", scenario.cropCenter)
+		err := fs.CreateThumb(scenario.file, scenario.thumb, "100x100")
 
 		hasErr := err != nil
 		if hasErr != scenario.expectError {

ui/dist/assets/PageAdminConfirmPasswordReset.2c620106.js

@@ -1,2 +1,2 @@
-import{S as E,i as G,s as I,F as K,c as A,m as B,t as H,a as N,d as T,C as M,q as J,e as c,w as q,b as k,f as u,r as L,g as b,h as _,u as h,v as O,j as Q,l as U,o as w,A as V,p as W,B as X,D as Y,x as Z,z as S}from"./index.b939bbf0.js";function y(f){let e,o,s;return{c(){e=q("for "),o=c("strong"),s=q(f[3]),u(o,"class","txt-nowrap")},m(l,t){b(l,e,t),b(l,o,t),_(o,s)},p(l,t){t&8&&Z(s,l[3])},d(l){l&&w(e),l&&w(o)}}}function x(f){let e,o,s,l,t,r,p,d;return{c(){e=c("label"),o=q("New password"),l=k(),t=c("input"),u(e,"for",s=f[8]),u(t,"type","password"),u(t,"id",r=f[8]),t.required=!0,t.autofocus=!0},m(n,i){b(n,e,i),_(e,o),b(n,l,i),b(n,t,i),S(t,f[0]),t.focus(),p||(d=h(t,"input",f[6]),p=!0)},p(n,i){i&256&&s!==(s=n[8])&&u(e,"for",s),i&256&&r!==(r=n[8])&&u(t,"id",r),i&1&&t.value!==n[0]&&S(t,n[0])},d(n){n&&w(e),n&&w(l),n&&w(t),p=!1,d()}}}function ee(f){let e,o,s,l,t,r,p,d;return{c(){e=c("label"),o=q("New password confirm"),l=k(),t=c("input"),u(e,"for",s=f[8]),u(t,"type","password"),u(t,"id",r=f[8]),t.required=!0},m(n,i){b(n,e,i),_(e,o),b(n,l,i),b(n,t,i),S(t,f[1]),p||(d=h(t,"input",f[7]),p=!0)},p(n,i){i&256&&s!==(s=n[8])&&u(e,"for",s),i&256&&r!==(r=n[8])&&u(t,"id",r),i&2&&t.value!==n[1]&&S(t,n[1])},d(n){n&&w(e),n&&w(l),n&&w(t),p=!1,d()}}}function te(f){let e,o,s,l,t,r,p,d,n,i,g,R,C,v,P,F,j,m=f[3]&&y(f);return r=new J({props:{class:"form-field required",name:"password",$$slots:{default:[x,({uniqueId:a})=>({8:a}),({uniqueId:a})=>a?256:0]},$$scope:{ctx:f}}}),d=new J({props:{class:"form-field required",name:"passwordConfirm",$$slots:{default:[ee,({uniqueId:a})=>({8:a}),({uniqueId:a})=>a?256:0]},$$scope:{ctx:f}}}),{c(){e=c("form"),o=c("div"),s=c("h4"),l=q(`Reset your admin password
+import{S as E,i as G,s as I,F as K,c as A,m as B,t as H,a as N,d as T,C as M,q as J,e as c,w as q,b as k,f as u,r as L,g as b,h as _,u as h,v as O,j as Q,l as U,o as w,A as V,p as W,B as X,D as Y,x as Z,z as S}from"./index.b371ee76.js";function y(f){let e,o,s;return{c(){e=q("for "),o=c("strong"),s=q(f[3]),u(o,"class","txt-nowrap")},m(l,t){b(l,e,t),b(l,o,t),_(o,s)},p(l,t){t&8&&Z(s,l[3])},d(l){l&&w(e),l&&w(o)}}}function x(f){let e,o,s,l,t,r,p,d;return{c(){e=c("label"),o=q("New password"),l=k(),t=c("input"),u(e,"for",s=f[8]),u(t,"type","password"),u(t,"id",r=f[8]),t.required=!0,t.autofocus=!0},m(n,i){b(n,e,i),_(e,o),b(n,l,i),b(n,t,i),S(t,f[0]),t.focus(),p||(d=h(t,"input",f[6]),p=!0)},p(n,i){i&256&&s!==(s=n[8])&&u(e,"for",s),i&256&&r!==(r=n[8])&&u(t,"id",r),i&1&&t.value!==n[0]&&S(t,n[0])},d(n){n&&w(e),n&&w(l),n&&w(t),p=!1,d()}}}function ee(f){let e,o,s,l,t,r,p,d;return{c(){e=c("label"),o=q("New password confirm"),l=k(),t=c("input"),u(e,"for",s=f[8]),u(t,"type","password"),u(t,"id",r=f[8]),t.required=!0},m(n,i){b(n,e,i),_(e,o),b(n,l,i),b(n,t,i),S(t,f[1]),p||(d=h(t,"input",f[7]),p=!0)},p(n,i){i&256&&s!==(s=n[8])&&u(e,"for",s),i&256&&r!==(r=n[8])&&u(t,"id",r),i&2&&t.value!==n[1]&&S(t,n[1])},d(n){n&&w(e),n&&w(l),n&&w(t),p=!1,d()}}}function te(f){let e,o,s,l,t,r,p,d,n,i,g,R,C,v,P,F,j,m=f[3]&&y(f);return r=new J({props:{class:"form-field required",name:"password",$$slots:{default:[x,({uniqueId:a})=>({8:a}),({uniqueId:a})=>a?256:0]},$$scope:{ctx:f}}}),d=new J({props:{class:"form-field required",name:"passwordConfirm",$$slots:{default:[ee,({uniqueId:a})=>({8:a}),({uniqueId:a})=>a?256:0]},$$scope:{ctx:f}}}),{c(){e=c("form"),o=c("div"),s=c("h4"),l=q(`Reset your admin password
                 `),m&&m.c(),t=k(),A(r.$$.fragment),p=k(),A(d.$$.fragment),n=k(),i=c("button"),g=c("span"),g.textContent="Set new password",R=k(),C=c("div"),v=c("a"),v.textContent="Back to login",u(s,"class","m-b-xs"),u(o,"class","content txt-center m-b-sm"),u(g,"class","txt"),u(i,"type","submit"),u(i,"class","btn btn-lg btn-block"),i.disabled=f[2],L(i,"btn-loading",f[2]),u(e,"class","m-b-base"),u(v,"href","/login"),u(v,"class","link-hint"),u(C,"class","content txt-center")},m(a,$){b(a,e,$),_(e,o),_(o,s),_(s,l),m&&m.m(s,null),_(e,t),B(r,e,null),_(e,p),B(d,e,null),_(e,n),_(e,i),_(i,g),b(a,R,$),b(a,C,$),_(C,v),P=!0,F||(j=[h(e,"submit",O(f[4])),Q(U.call(null,v))],F=!0)},p(a,$){a[3]?m?m.p(a,$):(m=y(a),m.c(),m.m(s,null)):m&&(m.d(1),m=null);const z={};$&769&&(z.$$scope={dirty:$,ctx:a}),r.$set(z);const D={};$&770&&(D.$$scope={dirty:$,ctx:a}),d.$set(D),(!P||$&4)&&(i.disabled=a[2]),$&4&&L(i,"btn-loading",a[2])},i(a){P||(H(r.$$.fragment,a),H(d.$$.fragment,a),P=!0)},o(a){N(r.$$.fragment,a),N(d.$$.fragment,a),P=!1},d(a){a&&w(e),m&&m.d(),T(r),T(d),a&&w(R),a&&w(C),F=!1,V(j)}}}function se(f){let e,o;return e=new K({props:{$$slots:{default:[te]},$$scope:{ctx:f}}}),{c(){A(e.$$.fragment)},m(s,l){B(e,s,l),o=!0},p(s,[l]){const t={};l&527&&(t.$$scope={dirty:l,ctx:s}),e.$set(t)},i(s){o||(H(e.$$.fragment,s),o=!0)},o(s){N(e.$$.fragment,s),o=!1},d(s){T(e,s)}}}function le(f,e,o){let s,{params:l}=e,t="",r="",p=!1;async function d(){if(!p){o(2,p=!0);try{await W.admins.confirmPasswordReset(l==null?void 0:l.token,t,r),X("Successfully set a new admin password."),Y("/")}catch(g){W.errorResponseHandler(g)}o(2,p=!1)}}function n(){t=this.value,o(0,t)}function i(){r=this.value,o(1,r)}return f.$$set=g=>{"params"in g&&o(5,l=g.params)},f.$$.update=()=>{f.$$.dirty&32&&o(3,s=M.getJWTPayload(l==null?void 0:l.token).email||"")},[t,r,p,s,d,l,n,i]}class ae extends E{constructor(e){super(),G(this,e,le,se,I,{params:5})}}export{ae as default};

ui/dist/assets/PageAdminRequestPasswordReset.97c6613b.js

@@ -1,2 +1,2 @@
-import{S as M,i as T,s as j,F as z,c as H,m as L,t as w,a as y,d as S,b as g,e as _,f as p,g as k,h as d,j as A,l as B,k as N,n as D,o as v,p as C,q as G,r as F,u as E,v as I,w as h,x as J,y as P,z as R}from"./index.b939bbf0.js";function K(c){let e,s,n,l,t,o,f,m,i,a,b,u;return l=new G({props:{class:"form-field required",name:"email",$$slots:{default:[Q,({uniqueId:r})=>({5:r}),({uniqueId:r})=>r?32:0]},$$scope:{ctx:c}}}),{c(){e=_("form"),s=_("div"),s.innerHTML=`<h4 class="m-b-xs">Forgotten admin password</h4> 
+import{S as M,i as T,s as j,F as z,c as H,m as L,t as w,a as y,d as S,b as g,e as _,f as p,g as k,h as d,j as A,l as B,k as N,n as D,o as v,p as C,q as G,r as F,u as E,v as I,w as h,x as J,y as P,z as R}from"./index.b371ee76.js";function K(c){let e,s,n,l,t,o,f,m,i,a,b,u;return l=new G({props:{class:"form-field required",name:"email",$$slots:{default:[Q,({uniqueId:r})=>({5:r}),({uniqueId:r})=>r?32:0]},$$scope:{ctx:c}}}),{c(){e=_("form"),s=_("div"),s.innerHTML=`<h4 class="m-b-xs">Forgotten admin password</h4> 
                 <p>Enter the email associated with your account and we\u2019ll send you a recovery link:</p>`,n=g(),H(l.$$.fragment),t=g(),o=_("button"),f=_("i"),m=g(),i=_("span"),i.textContent="Send recovery link",p(s,"class","content txt-center m-b-sm"),p(f,"class","ri-mail-send-line"),p(i,"class","txt"),p(o,"type","submit"),p(o,"class","btn btn-lg btn-block"),o.disabled=c[1],F(o,"btn-loading",c[1]),p(e,"class","m-b-base")},m(r,$){k(r,e,$),d(e,s),d(e,n),L(l,e,null),d(e,t),d(e,o),d(o,f),d(o,m),d(o,i),a=!0,b||(u=E(e,"submit",I(c[3])),b=!0)},p(r,$){const q={};$&97&&(q.$$scope={dirty:$,ctx:r}),l.$set(q),(!a||$&2)&&(o.disabled=r[1]),$&2&&F(o,"btn-loading",r[1])},i(r){a||(w(l.$$.fragment,r),a=!0)},o(r){y(l.$$.fragment,r),a=!1},d(r){r&&v(e),S(l),b=!1,u()}}}function O(c){let e,s,n,l,t,o,f,m,i;return{c(){e=_("div"),s=_("div"),s.innerHTML='<i class="ri-checkbox-circle-line"></i>',n=g(),l=_("div"),t=_("p"),o=h("Check "),f=_("strong"),m=h(c[0]),i=h(" for the recovery link."),p(s,"class","icon"),p(f,"class","txt-nowrap"),p(l,"class","content"),p(e,"class","alert alert-success")},m(a,b){k(a,e,b),d(e,s),d(e,n),d(e,l),d(l,t),d(t,o),d(t,f),d(f,m),d(t,i)},p(a,b){b&1&&J(m,a[0])},i:P,o:P,d(a){a&&v(e)}}}function Q(c){let e,s,n,l,t,o,f,m;return{c(){e=_("label"),s=h("Email"),l=g(),t=_("input"),p(e,"for",n=c[5]),p(t,"type","email"),p(t,"id",o=c[5]),t.required=!0,t.autofocus=!0},m(i,a){k(i,e,a),d(e,s),k(i,l,a),k(i,t,a),R(t,c[0]),t.focus(),f||(m=E(t,"input",c[4]),f=!0)},p(i,a){a&32&&n!==(n=i[5])&&p(e,"for",n),a&32&&o!==(o=i[5])&&p(t,"id",o),a&1&&t.value!==i[0]&&R(t,i[0])},d(i){i&&v(e),i&&v(l),i&&v(t),f=!1,m()}}}function U(c){let e,s,n,l,t,o,f,m;const i=[O,K],a=[];function b(u,r){return u[2]?0:1}return e=b(c),s=a[e]=i[e](c),{c(){s.c(),n=g(),l=_("div"),t=_("a"),t.textContent="Back to login",p(t,"href","/login"),p(t,"class","link-hint"),p(l,"class","content txt-center")},m(u,r){a[e].m(u,r),k(u,n,r),k(u,l,r),d(l,t),o=!0,f||(m=A(B.call(null,t)),f=!0)},p(u,r){let $=e;e=b(u),e===$?a[e].p(u,r):(N(),y(a[$],1,1,()=>{a[$]=null}),D(),s=a[e],s?s.p(u,r):(s=a[e]=i[e](u),s.c()),w(s,1),s.m(n.parentNode,n))},i(u){o||(w(s),o=!0)},o(u){y(s),o=!1},d(u){a[e].d(u),u&&v(n),u&&v(l),f=!1,m()}}}function V(c){let e,s;return e=new z({props:{$$slots:{default:[U]},$$scope:{ctx:c}}}),{c(){H(e.$$.fragment)},m(n,l){L(e,n,l),s=!0},p(n,[l]){const t={};l&71&&(t.$$scope={dirty:l,ctx:n}),e.$set(t)},i(n){s||(w(e.$$.fragment,n),s=!0)},o(n){y(e.$$.fragment,n),s=!1},d(n){S(e,n)}}}function W(c,e,s){let n="",l=!1,t=!1;async function o(){if(!l){s(1,l=!0);try{await C.admins.requestPasswordReset(n),s(2,t=!0)}catch(m){C.errorResponseHandler(m)}s(1,l=!1)}}function f(){n=this.value,s(0,n)}return[n,l,t,o,f]}class Y extends M{constructor(e){super(),T(this,e,W,V,j,{})}}export{Y as default};

ui/dist/assets/PageUserConfirmEmailChange.cbdf8995.js

@@ -1,4 +1,4 @@
-import{S as M,i as N,s as R,F as U,c as L,m as z,t as $,a as v,d as J,C as W,E as Y,g as _,k as j,n as A,o as b,p as F,q as B,e as m,w as y,b as C,f as d,r as H,h as k,u as E,v as D,y as h,x as G,z as S}from"./index.b939bbf0.js";function I(r){let e,s,t,l,n,o,c,a,i,u,g,q,p=r[3]&&T(r);return o=new B({props:{class:"form-field required",name:"password",$$slots:{default:[O,({uniqueId:f})=>({8:f}),({uniqueId:f})=>f?256:0]},$$scope:{ctx:r}}}),{c(){e=m("form"),s=m("div"),t=m("h4"),l=y(`Type your password to confirm changing your email address
+import{S as M,i as N,s as R,F as U,c as L,m as z,t as $,a as v,d as J,C as W,E as Y,g as _,k as j,n as A,o as b,p as F,q as B,e as m,w as y,b as C,f as d,r as H,h as k,u as E,v as D,y as h,x as G,z as S}from"./index.b371ee76.js";function I(r){let e,s,t,l,n,o,c,a,i,u,g,q,p=r[3]&&T(r);return o=new B({props:{class:"form-field required",name:"password",$$slots:{default:[O,({uniqueId:f})=>({8:f}),({uniqueId:f})=>f?256:0]},$$scope:{ctx:r}}}),{c(){e=m("form"),s=m("div"),t=m("h4"),l=y(`Type your password to confirm changing your email address
                     `),p&&p.c(),n=C(),L(o.$$.fragment),c=C(),a=m("button"),i=m("span"),i.textContent="Confirm new email",d(t,"class","m-b-xs"),d(s,"class","content txt-center m-b-sm"),d(i,"class","txt"),d(a,"type","submit"),d(a,"class","btn btn-lg btn-block"),a.disabled=r[1],H(a,"btn-loading",r[1])},m(f,w){_(f,e,w),k(e,s),k(s,t),k(t,l),p&&p.m(t,null),k(e,n),z(o,e,null),k(e,c),k(e,a),k(a,i),u=!0,g||(q=E(e,"submit",D(r[4])),g=!0)},p(f,w){f[3]?p?p.p(f,w):(p=T(f),p.c(),p.m(t,null)):p&&(p.d(1),p=null);const P={};w&769&&(P.$$scope={dirty:w,ctx:f}),o.$set(P),(!u||w&2)&&(a.disabled=f[1]),w&2&&H(a,"btn-loading",f[1])},i(f){u||($(o.$$.fragment,f),u=!0)},o(f){v(o.$$.fragment,f),u=!1},d(f){f&&b(e),p&&p.d(),J(o),g=!1,q()}}}function K(r){let e,s,t,l,n;return{c(){e=m("div"),e.innerHTML=`<div class="icon"><i class="ri-checkbox-circle-line"></i></div> 
             <div class="content txt-bold"><p>Successfully changed the user email address.</p> 
                 <p>You can now sign in with your new email address.</p></div>`,s=C(),t=m("button"),t.textContent="Close",d(e,"class","alert alert-success"),d(t,"type","button"),d(t,"class","btn btn-secondary btn-block")},m(o,c){_(o,e,c),_(o,s,c),_(o,t,c),l||(n=E(t,"click",r[6]),l=!0)},p:h,i:h,o:h,d(o){o&&b(e),o&&b(s),o&&b(t),l=!1,n()}}}function T(r){let e,s,t;return{c(){e=y("to "),s=m("strong"),t=y(r[3]),d(s,"class","txt-nowrap")},m(l,n){_(l,e,n),_(l,s,n),k(s,t)},p(l,n){n&8&&G(t,l[3])},d(l){l&&b(e),l&&b(s)}}}function O(r){let e,s,t,l,n,o,c,a;return{c(){e=m("label"),s=y("Password"),l=C(),n=m("input"),d(e,"for",t=r[8]),d(n,"type","password"),d(n,"id",o=r[8]),n.required=!0,n.autofocus=!0},m(i,u){_(i,e,u),k(e,s),_(i,l,u),_(i,n,u),S(n,r[0]),n.focus(),c||(a=E(n,"input",r[7]),c=!0)},p(i,u){u&256&&t!==(t=i[8])&&d(e,"for",t),u&256&&o!==(o=i[8])&&d(n,"id",o),u&1&&n.value!==i[0]&&S(n,i[0])},d(i){i&&b(e),i&&b(l),i&&b(n),c=!1,a()}}}function Q(r){let e,s,t,l;const n=[K,I],o=[];function c(a,i){return a[2]?0:1}return e=c(r),s=o[e]=n[e](r),{c(){s.c(),t=Y()},m(a,i){o[e].m(a,i),_(a,t,i),l=!0},p(a,i){let u=e;e=c(a),e===u?o[e].p(a,i):(j(),v(o[u],1,1,()=>{o[u]=null}),A(),s=o[e],s?s.p(a,i):(s=o[e]=n[e](a),s.c()),$(s,1),s.m(t.parentNode,t))},i(a){l||($(s),l=!0)},o(a){v(s),l=!1},d(a){o[e].d(a),a&&b(t)}}}function V(r){let e,s;return e=new U({props:{nobranding:!0,$$slots:{default:[Q]},$$scope:{ctx:r}}}),{c(){L(e.$$.fragment)},m(t,l){z(e,t,l),s=!0},p(t,[l]){const n={};l&527&&(n.$$scope={dirty:l,ctx:t}),e.$set(n)},i(t){s||($(e.$$.fragment,t),s=!0)},o(t){v(e.$$.fragment,t),s=!1},d(t){J(e,t)}}}function X(r,e,s){let t,{params:l}=e,n="",o=!1,c=!1;async function a(){if(!o){s(1,o=!0);try{await F.users.confirmEmailChange(l==null?void 0:l.token,n),s(2,c=!0)}catch(g){F.errorResponseHandler(g)}s(1,o=!1)}}const i=()=>window.close();function u(){n=this.value,s(0,n)}return r.$$set=g=>{"params"in g&&s(5,l=g.params)},r.$$.update=()=>{r.$$.dirty&32&&s(3,t=W.getJWTPayload(l==null?void 0:l.token).newEmail||"")},[n,o,c,t,a,l,i,u]}class x extends M{constructor(e){super(),N(this,e,X,V,R,{params:5})}}export{x as default};

ui/dist/assets/PageUserConfirmPasswordReset.911e38e1.js

@@ -1,4 +1,4 @@
-import{S as W,i as Y,s as j,F as A,c as F,m as H,t as P,a as q,d as N,C as B,E as D,g as _,k as G,n as I,o as m,p as E,q as J,e as b,w as y,b as C,f as c,r as M,h as w,u as R,v as K,y as S,x as O,z as h}from"./index.b939bbf0.js";function Q(i){let e,l,t,n,s,o,p,u,r,a,v,g,k,L,d=i[4]&&U(i);return o=new J({props:{class:"form-field required",name:"password",$$slots:{default:[X,({uniqueId:f})=>({10:f}),({uniqueId:f})=>f?1024:0]},$$scope:{ctx:i}}}),u=new J({props:{class:"form-field required",name:"passwordConfirm",$$slots:{default:[Z,({uniqueId:f})=>({10:f}),({uniqueId:f})=>f?1024:0]},$$scope:{ctx:i}}}),{c(){e=b("form"),l=b("div"),t=b("h4"),n=y(`Reset your user password
+import{S as W,i as Y,s as j,F as A,c as F,m as H,t as P,a as q,d as N,C as B,E as D,g as _,k as G,n as I,o as m,p as E,q as J,e as b,w as y,b as C,f as c,r as M,h as w,u as R,v as K,y as S,x as O,z as h}from"./index.b371ee76.js";function Q(i){let e,l,t,n,s,o,p,u,r,a,v,g,k,L,d=i[4]&&U(i);return o=new J({props:{class:"form-field required",name:"password",$$slots:{default:[X,({uniqueId:f})=>({10:f}),({uniqueId:f})=>f?1024:0]},$$scope:{ctx:i}}}),u=new J({props:{class:"form-field required",name:"passwordConfirm",$$slots:{default:[Z,({uniqueId:f})=>({10:f}),({uniqueId:f})=>f?1024:0]},$$scope:{ctx:i}}}),{c(){e=b("form"),l=b("div"),t=b("h4"),n=y(`Reset your user password
                     `),d&&d.c(),s=C(),F(o.$$.fragment),p=C(),F(u.$$.fragment),r=C(),a=b("button"),v=b("span"),v.textContent="Set new password",c(t,"class","m-b-xs"),c(l,"class","content txt-center m-b-sm"),c(v,"class","txt"),c(a,"type","submit"),c(a,"class","btn btn-lg btn-block"),a.disabled=i[2],M(a,"btn-loading",i[2])},m(f,$){_(f,e,$),w(e,l),w(l,t),w(t,n),d&&d.m(t,null),w(e,s),H(o,e,null),w(e,p),H(u,e,null),w(e,r),w(e,a),w(a,v),g=!0,k||(L=R(e,"submit",K(i[5])),k=!0)},p(f,$){f[4]?d?d.p(f,$):(d=U(f),d.c(),d.m(t,null)):d&&(d.d(1),d=null);const T={};$&3073&&(T.$$scope={dirty:$,ctx:f}),o.$set(T);const z={};$&3074&&(z.$$scope={dirty:$,ctx:f}),u.$set(z),(!g||$&4)&&(a.disabled=f[2]),$&4&&M(a,"btn-loading",f[2])},i(f){g||(P(o.$$.fragment,f),P(u.$$.fragment,f),g=!0)},o(f){q(o.$$.fragment,f),q(u.$$.fragment,f),g=!1},d(f){f&&m(e),d&&d.d(),N(o),N(u),k=!1,L()}}}function V(i){let e,l,t,n,s;return{c(){e=b("div"),e.innerHTML=`<div class="icon"><i class="ri-checkbox-circle-line"></i></div> 
             <div class="content txt-bold"><p>Successfully changed the user password.</p> 
                 <p>You can now sign in with your new password.</p></div>`,l=C(),t=b("button"),t.textContent="Close",c(e,"class","alert alert-success"),c(t,"type","button"),c(t,"class","btn btn-secondary btn-block")},m(o,p){_(o,e,p),_(o,l,p),_(o,t,p),n||(s=R(t,"click",i[7]),n=!0)},p:S,i:S,o:S,d(o){o&&m(e),o&&m(l),o&&m(t),n=!1,s()}}}function U(i){let e,l,t;return{c(){e=y("for "),l=b("strong"),t=y(i[4])},m(n,s){_(n,e,s),_(n,l,s),w(l,t)},p(n,s){s&16&&O(t,n[4])},d(n){n&&m(e),n&&m(l)}}}function X(i){let e,l,t,n,s,o,p,u;return{c(){e=b("label"),l=y("New password"),n=C(),s=b("input"),c(e,"for",t=i[10]),c(s,"type","password"),c(s,"id",o=i[10]),s.required=!0,s.autofocus=!0},m(r,a){_(r,e,a),w(e,l),_(r,n,a),_(r,s,a),h(s,i[0]),s.focus(),p||(u=R(s,"input",i[8]),p=!0)},p(r,a){a&1024&&t!==(t=r[10])&&c(e,"for",t),a&1024&&o!==(o=r[10])&&c(s,"id",o),a&1&&s.value!==r[0]&&h(s,r[0])},d(r){r&&m(e),r&&m(n),r&&m(s),p=!1,u()}}}function Z(i){let e,l,t,n,s,o,p,u;return{c(){e=b("label"),l=y("New password confirm"),n=C(),s=b("input"),c(e,"for",t=i[10]),c(s,"type","password"),c(s,"id",o=i[10]),s.required=!0},m(r,a){_(r,e,a),w(e,l),_(r,n,a),_(r,s,a),h(s,i[1]),p||(u=R(s,"input",i[9]),p=!0)},p(r,a){a&1024&&t!==(t=r[10])&&c(e,"for",t),a&1024&&o!==(o=r[10])&&c(s,"id",o),a&2&&s.value!==r[1]&&h(s,r[1])},d(r){r&&m(e),r&&m(n),r&&m(s),p=!1,u()}}}function x(i){let e,l,t,n;const s=[V,Q],o=[];function p(u,r){return u[3]?0:1}return e=p(i),l=o[e]=s[e](i),{c(){l.c(),t=D()},m(u,r){o[e].m(u,r),_(u,t,r),n=!0},p(u,r){let a=e;e=p(u),e===a?o[e].p(u,r):(G(),q(o[a],1,1,()=>{o[a]=null}),I(),l=o[e],l?l.p(u,r):(l=o[e]=s[e](u),l.c()),P(l,1),l.m(t.parentNode,t))},i(u){n||(P(l),n=!0)},o(u){q(l),n=!1},d(u){o[e].d(u),u&&m(t)}}}function ee(i){let e,l;return e=new A({props:{nobranding:!0,$$slots:{default:[x]},$$scope:{ctx:i}}}),{c(){F(e.$$.fragment)},m(t,n){H(e,t,n),l=!0},p(t,[n]){const s={};n&2079&&(s.$$scope={dirty:n,ctx:t}),e.$set(s)},i(t){l||(P(e.$$.fragment,t),l=!0)},o(t){q(e.$$.fragment,t),l=!1},d(t){N(e,t)}}}function te(i,e,l){let t,{params:n}=e,s="",o="",p=!1,u=!1;async function r(){if(!p){l(2,p=!0);try{await E.users.confirmPasswordReset(n==null?void 0:n.token,s,o),l(3,u=!0)}catch(k){E.errorResponseHandler(k)}l(2,p=!1)}}const a=()=>window.close();function v(){s=this.value,l(0,s)}function g(){o=this.value,l(1,o)}return i.$$set=k=>{"params"in k&&l(6,n=k.params)},i.$$.update=()=>{i.$$.dirty&64&&l(4,t=B.getJWTPayload(n==null?void 0:n.token).email||"")},[s,o,p,u,t,r,n,a,v,g]}class le extends W{constructor(e){super(),Y(this,e,te,ee,j,{params:6})}}export{le as default};

ui/dist/assets/PageUserConfirmVerification.6bd0a15b.js

@@ -1,3 +1,3 @@
-import{S as k,i as v,s as y,F as w,c as x,m as C,t as g,a as $,d as L,p as H,E as M,g as r,o as a,e as u,b as m,f,u as _,y as p}from"./index.b939bbf0.js";function P(o){let t,s,e,n,i;return{c(){t=u("div"),t.innerHTML=`<div class="icon"><i class="ri-error-warning-line"></i></div> 
+import{S as k,i as v,s as y,F as w,c as x,m as C,t as g,a as $,d as L,p as H,E as M,g as r,o as a,e as u,b as m,f,u as _,y as p}from"./index.b371ee76.js";function P(o){let t,s,e,n,i;return{c(){t=u("div"),t.innerHTML=`<div class="icon"><i class="ri-error-warning-line"></i></div> 
             <div class="content txt-bold"><p>Invalid or expired verification token.</p></div>`,s=m(),e=u("button"),e.textContent="Close",f(t,"class","alert alert-danger"),f(e,"type","button"),f(e,"class","btn btn-secondary btn-block")},m(l,c){r(l,t,c),r(l,s,c),r(l,e,c),n||(i=_(e,"click",o[4]),n=!0)},p,d(l){l&&a(t),l&&a(s),l&&a(e),n=!1,i()}}}function S(o){let t,s,e,n,i;return{c(){t=u("div"),t.innerHTML=`<div class="icon"><i class="ri-checkbox-circle-line"></i></div> 
             <div class="content txt-bold"><p>Successfully verified email address.</p></div>`,s=m(),e=u("button"),e.textContent="Close",f(t,"class","alert alert-success"),f(e,"type","button"),f(e,"class","btn btn-secondary btn-block")},m(l,c){r(l,t,c),r(l,s,c),r(l,e,c),n||(i=_(e,"click",o[3]),n=!0)},p,d(l){l&&a(t),l&&a(s),l&&a(e),n=!1,i()}}}function T(o){let t;return{c(){t=u("div"),t.innerHTML='<div class="loader loader-lg"><em>Please wait...</em></div>',f(t,"class","txt-center")},m(s,e){r(s,t,e)},p,d(s){s&&a(t)}}}function F(o){let t;function s(i,l){return i[1]?T:i[0]?S:P}let e=s(o),n=e(o);return{c(){n.c(),t=M()},m(i,l){n.m(i,l),r(i,t,l)},p(i,l){e===(e=s(i))&&n?n.p(i,l):(n.d(1),n=e(i),n&&(n.c(),n.m(t.parentNode,t)))},d(i){n.d(i),i&&a(t)}}}function V(o){let t,s;return t=new w({props:{nobranding:!0,$$slots:{default:[F]},$$scope:{ctx:o}}}),{c(){x(t.$$.fragment)},m(e,n){C(t,e,n),s=!0},p(e,[n]){const i={};n&67&&(i.$$scope={dirty:n,ctx:e}),t.$set(i)},i(e){s||(g(t.$$.fragment,e),s=!0)},o(e){$(t.$$.fragment,e),s=!1},d(e){L(t,e)}}}function q(o,t,s){let{params:e}=t,n=!1,i=!1;l();async function l(){s(1,i=!0);try{await H.users.confirmVerification(e==null?void 0:e.token),s(0,n=!0)}catch(d){console.warn(d),s(0,n=!1)}s(1,i=!1)}const c=()=>window.close(),b=()=>window.close();return o.$$set=d=>{"params"in d&&s(2,e=d.params)},[n,i,e,c,b]}class I extends k{constructor(t){super(),v(this,t,q,V,y,{params:2})}}export{I as default};

ui/dist/index.html

@@ -24,8 +24,8 @@
         window.Prism = window.Prism || {};
         window.Prism.manual = true;
     </script>
-  <script type="module" crossorigin src="./assets/index.b939bbf0.js"></script>
+  <script type="module" crossorigin src="./assets/index.b371ee76.js"></script>
-  <link rel="stylesheet" href="./assets/index.45ad4c0e.css">
+  <link rel="stylesheet" href="./assets/index.74115736.css">
 </head>
 <body>
     <div id="app"></div>

ui/package-lock.json

@@ -19,7 +19,7 @@
         "chart.js": "^3.7.1",
         "chartjs-adapter-luxon": "^1.1.0",
         "luxon": "^2.3.2",
-        "pocketbase": "^0.4.0",
+        "pocketbase": "^0.4.1",
         "prismjs": "^1.28.0",
         "sass": "^1.45.0",
         "svelte": "^3.44.0",
@@ -135,9 +135,9 @@
       }
     },
     "node_modules/@codemirror/search": {
-      "version": "6.0.1",
+      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.1.0.tgz",
-      "integrity": "sha512-uOinkOrM+daMduCgMPomDfKLr7drGHB4jHl3Vq6xY2WRlL7MkNsBE0b+XHYa/Mee2npsJOgwvkW4n1lMFeBW2Q==",
+      "integrity": "sha512-ye6m0jFHSgQ4qnfWVwArvm7XrCMNppMYnL5f4M0WdBScslnckomf5eVacYCw8P0UBWeq72lCSXA0/eo1piZxLA==",
       "dev": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
@@ -225,9 +225,9 @@
       }
     },
     "node_modules/@lezer/lr": {
-      "version": "1.2.2",
+      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
-      "integrity": "sha512-Df2R6Q7mieAVKYOD5ifo9j5SUoT6EHp10FvHU0v4cQ3MoPsifi6mb8eEycI0uNTdtPSCZLqDqT8G1mNvEqSB1Q==",
+      "integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==",
       "dev": true,
       "dependencies": {
         "@lezer/common": "^1.0.0"
@@ -948,9 +948,9 @@
       }
     },
     "node_modules/pocketbase": {
-      "version": "0.4.0",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.4.1.tgz",
-      "integrity": "sha512-U/ZBPLijSh+zwwcVo5R5eYjfE2YDxDavLxRXr9PIgIWHpzW1gd1dqrZ/Ba/fQ4lGA89dQjkGBrIYyoX/IL4wyQ==",
+      "integrity": "sha512-aDuN8ySDTRnY6P+jcNcOpb72yHojcdzSzU+3hDiXWxbERYDZP1+drVb9OEufFzbIlMaG7fhcth5ejdEK6sRELA==",
       "dev": true
     },
     "node_modules/postcss": {
@@ -1296,9 +1296,9 @@
       }
     },
     "@codemirror/search": {
-      "version": "6.0.1",
+      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.1.0.tgz",
-      "integrity": "sha512-uOinkOrM+daMduCgMPomDfKLr7drGHB4jHl3Vq6xY2WRlL7MkNsBE0b+XHYa/Mee2npsJOgwvkW4n1lMFeBW2Q==",
+      "integrity": "sha512-ye6m0jFHSgQ4qnfWVwArvm7XrCMNppMYnL5f4M0WdBScslnckomf5eVacYCw8P0UBWeq72lCSXA0/eo1piZxLA==",
       "dev": true,
       "requires": {
         "@codemirror/state": "^6.0.0",
@@ -1377,9 +1377,9 @@
       }
     },
     "@lezer/lr": {
-      "version": "1.2.2",
+      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
-      "integrity": "sha512-Df2R6Q7mieAVKYOD5ifo9j5SUoT6EHp10FvHU0v4cQ3MoPsifi6mb8eEycI0uNTdtPSCZLqDqT8G1mNvEqSB1Q==",
+      "integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==",
       "dev": true,
       "requires": {
         "@lezer/common": "^1.0.0"
@@ -1808,9 +1808,9 @@
       "dev": true
     },
     "pocketbase": {
-      "version": "0.4.0",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.4.1.tgz",
-      "integrity": "sha512-U/ZBPLijSh+zwwcVo5R5eYjfE2YDxDavLxRXr9PIgIWHpzW1gd1dqrZ/Ba/fQ4lGA89dQjkGBrIYyoX/IL4wyQ==",
+      "integrity": "sha512-aDuN8ySDTRnY6P+jcNcOpb72yHojcdzSzU+3hDiXWxbERYDZP1+drVb9OEufFzbIlMaG7fhcth5ejdEK6sRELA==",
       "dev": true
     },
     "postcss": {

ui/package.json

@@ -25,7 +25,7 @@
     "chart.js": "^3.7.1",
     "chartjs-adapter-luxon": "^1.1.0",
     "luxon": "^2.3.2",
-    "pocketbase": "^0.4.0",
+    "pocketbase": "^0.4.1",
     "prismjs": "^1.28.0",
     "sass": "^1.45.0",
     "svelte": "^3.44.0",

ui/src/components/base/MultipleValueInput.svelte

@@ -4,7 +4,7 @@
     export let value = [];
     export let separator = ",";
 
-    $: valueStr = (value || []).join(",");
+    $: valueStr = (value || []).join(", ");
 </script>
 
 <input

ui/src/components/collections/schema/FileOptions.svelte

@@ -52,9 +52,10 @@
                 bind:value={options.mimeTypes}
             />
             <div class="help-block">
-                Use comma as separator.
+                <span class="txt">Use comma as separator.</span>
-                <span class="inline-flex">
+                <button type="button" class="inline-flex flex-gap-0">
                     <span class="txt link-primary">Choose presets</span>
+                    <i class="ri-arrow-drop-down-fill" />
                     <Toggler class="dropdown dropdown-sm dropdown-nowrap">
                         <div
                             tabindex="0"
@@ -114,7 +115,7 @@
                             <span class="txt">Archives (zip, 7zip, rar)</span>
                         </div>
                     </Toggler>
-                </span>
+                </button>
             </div>
         </Field>
     </div>
@@ -126,13 +127,47 @@
                 <i
                     class="ri-information-line link-hint"
                     use:tooltip={{
-                        text: "List of additional thumb sizes for image files, along with the default thumb size of 100x100. The thumbs will be generated lazily on first access.",
+                        text: "List of additional thumb sizes for image files, along with the default thumb size of 100x100. The thumbs are generated lazily on first access.",
                         position: "top",
                     }}
                 />
             </label>
             <MultipleValueInput id={uniqueId} placeholder="eg. 50x50, 480x720" bind:value={options.thumbs} />
-            <div class="help-block">Use comma as separator.</div>
+            <div class="help-block">
+                <span class="txt">Use comma as separator.</span>
+                <button type="button" class="inline-flex flex-gap-0">
+                    <span class="txt link-primary">Supported formats</span>
+                    <i class="ri-arrow-drop-down-fill" />
+                    <Toggler class="dropdown dropdown-sm dropdown-center dropdown-nowrap p-r-10">
+                        <ul class="m-0">
+                            <li>
+                                <strong>WxH</strong>
+                                (eg. 100x50) - crop to WxH viewbox (from center)
+                            </li>
+                            <li>
+                                <strong>WxHt</strong>
+                                (eg. 100x50t) - crop to WxH viewbox (from top)
+                            </li>
+                            <li>
+                                <strong>WxHb</strong>
+                                (eg. 100x50b) - crop to WxH viewbox (from bottom)
+                            </li>
+                            <li>
+                                <strong>WxHf</strong>
+                                (eg. 100x50f) - fit inside a WxH viewbox (without cropping)
+                            </li>
+                            <li>
+                                <strong>0xH</strong>
+                                (eg. 0x50) - resize to H height preserving the aspect ratio
+                            </li>
+                            <li>
+                                <strong>Wx0</strong>
+                                (eg. 100x0) - resize to W width preserving the aspect ratio
+                            </li>
+                        </ul>
+                    </Toggler>
+                </button>
+            </div>
         </Field>
     </div>
 </div>

ui/src/scss/_base.scss

@@ -223,6 +223,9 @@ a {
 .txt-center {
     text-align: center !important;
 }
+.txt-justify {
+    text-align: justify !important;
+}
 .txt-left {
     text-align: left !important;
 }
@@ -278,7 +281,9 @@ a {
         text-decoration: none;
         user-select: none;
         transition: opacity var(--baseAnimationSpeed);
-        &:hover {
+        &:focus-visible,
+        &:hover,
+        &:active {
             opacity: 0.8;
         }
     }

ui/src/scss/_dropdown.scss

@@ -12,7 +12,7 @@
     margin: 10px 0 0;
     width: auto;
     min-width: 140px;
-    max-width: 350px;
+    max-width: 450px;
     max-height: 330px;
     overflow-x: hidden;
     overflow-y: auto;