Added welcome page

auth/auth.go

@@ -3,7 +3,7 @@ package auth
 import "github.com/aerogo/aero"
 import "github.com/animenotifier/notify.moe/utils"
 
-const newUserStartRoute = "/settings"
+const newUserStartRoute = "/welcome"
 
 // Install installs the authentication routes in the application.
 func Install(app *aero.Application) {

pages/embed/embed.go

@@ -16,6 +16,10 @@ func Get(ctx *aero.Context) string {
 		return utils.AllowEmbed(ctx, ctx.HTML(components.Login("_blank")))
 	}
 
+	if !user.HasBasicInfo() {
+		return utils.AllowEmbed(ctx, ctx.HTML(components.ExtensionEnterBasicInfo()))
+	}
+
 	// Extension is enabled as long as the site isn't finished yet.
 	// ---
 	// if !user.IsPro() && user.TimeSinceRegistered() > 14*24*time.Hour {

pages/embed/embed.pixy

@@ -11,3 +11,12 @@ component ExtensionNavigation(user *arn.User)
 
 			a.button(href="/support", target="_blank")
 				RawIcon("heart")
+
+component ExtensionEnterBasicInfo
+	h1.mountable Welcome!
+	p.welcome-text.mountable Please complete some basic information about your profile.
+
+	.buttons.mountable
+		a.button(href="/welcome", target="_blank")
+			Icon("pencil")
+			span Complete profile

pages/home/home.go

@@ -14,5 +14,9 @@ func Get(ctx *aero.Context) string {
 		return frontpage.Get(ctx)
 	}
 
+	if !user.HasBasicInfo() {
+		return utils.SmartRedirect(ctx, "/welcome")
+	}
+
 	return utils.SmartRedirect(ctx, "/+"+user.Nick+"/animelist/watching")
 }

pages/index/coreroutes/coreroutes.go

@@ -9,6 +9,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/login"
 	"github.com/animenotifier/notify.moe/pages/statistics"
 	"github.com/animenotifier/notify.moe/pages/terms"
+	"github.com/animenotifier/notify.moe/pages/welcome"
 )
 
 // Register registers the page routes.
@@ -19,6 +20,9 @@ func Register(l *layout.Layout) {
 	// Login
 	l.Page("/login", login.Get)
 
+	// Welcome
+	l.Page("/welcome", welcome.Get)
+
 	// Activity
 	l.Page("/activity", activity.Global)
 	l.Page("/activity/from/:index", activity.Global)

pages/listimport/listimport.pixy

@@ -23,3 +23,15 @@ component ImportLists(user *arn.User)
 			a.button(href="/import/myanimelist/animelist")
 				Icon("download")
 				span Import MyAnimeList
+
+component ImportFinished(user *arn.User)
+	h1.mountable Import finished
+
+	.buttons
+		a.button.mountable(href=user.Link())
+			Icon("user")
+			span Profile
+		
+		a.button.mountable(href=user.Link() + "/animelist/watching")
+			Icon("list")
+			span Anime list

pages/listimport/listimportanilist/anilist.go

@@ -67,8 +67,7 @@ func Finish(ctx *aero.Context) string {
 	}
 
 	animeList.Save()
-
-	return utils.SmartRedirect(ctx, "/+"+user.Nick+"/animelist/watching")
+	return ctx.HTML(components.ImportFinished(user))
 }
 
 // getMatches finds and returns all matches for the logged in user.

pages/listimport/listimportkitsu/kitsu.go

@@ -78,8 +78,7 @@ func Finish(ctx *aero.Context) string {
 	}
 
 	animeList.Save()
-
-	return utils.SmartRedirect(ctx, "/+"+user.Nick+"/animelist/watching")
+	return ctx.HTML(components.ImportFinished(user))
 }
 
 // getMatches finds and returns all matches for the logged in user.

pages/listimport/listimportmyanimelist/myanimelist.go

@@ -72,8 +72,7 @@ func Finish(ctx *aero.Context) string {
 	}
 
 	animeList.Save()
-
-	return utils.SmartRedirect(ctx, "/+"+user.Nick+"/animelist/watching")
+	return ctx.HTML(components.ImportFinished(user))
 }
 
 // getMatches finds and returns all matches for the logged in user.

pages/settings/personal.pixy

@@ -42,16 +42,7 @@ component SettingsPersonal(user *arn.User)
 			//- //- File upload
 			//- if user.Settings().Avatar.Source == "FileSystem"
 			
-			InputFileUpload("avatar-input", "File", "image", "/api/upload/avatar")
-
-			.profile-image-container.avatar-preview
-				if user.HasAvatar()
-					img.avatar-input-preview.profile-image.lazy(data-src=user.AvatarLink("large"), data-webp="true", alt="Profile image", title="Recommended: 560 x 560 | PNG or JPG")
-				else
-					img.avatar-input-preview.profile-image.hidden(src=user.AvatarLink("large"), alt="Profile image", title="Recommended: 560 x 560 | PNG or JPG")
-
-					#avatar-input-preview-svg
-						SVGProfileImage(user)
+			AvatarInput(user)
 		
 		.widget.mountable(data-api="/api/settings/" + user.ID)
 			h3.widget-title
@@ -66,3 +57,15 @@ component SettingsPersonal(user *arn.User)
 			if !user.IsPro()
 				.footer
 					p PRO account required.
+
+component AvatarInput(user *arn.User)
+	InputFileUpload("avatar-input", "File", "image", "/api/upload/avatar")
+
+	.profile-image-container.avatar-preview
+		if user.HasAvatar()
+			img.avatar-input-preview.profile-image.lazy(data-src=user.AvatarLink("large"), data-webp="true", alt="Profile image", title="Recommended: 560 x 560 | PNG or JPG")
+		else
+			img.avatar-input-preview.profile-image.hidden(src=user.AvatarLink("large"), alt="Profile image", title="Recommended: 560 x 560 | PNG or JPG")
+
+			#avatar-input-preview-svg
+				SVGProfileImage(user)

pages/welcome/welcome.go

@@ -0,0 +1,20 @@
+package welcome
+
+import (
+	"net/http"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
+)
+
+// Get returns the welcome page.
+func Get(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+
+	if user == nil {
+		return ctx.Error(http.StatusUnauthorized, "Not logged in")
+	}
+
+	return ctx.HTML(components.Welcome(user))
+}

pages/welcome/welcome.pixy

@@ -0,0 +1,44 @@
+component Welcome(user *arn.User)
+	.welcome
+		if user.HasBasicInfo()
+			h1.mountable Thanks!
+		else
+			h1.mountable Welcome!
+
+		if !user.HasNick()
+			p.welcome-text.mountable To start using notify.moe, please enter a username.
+
+			.mountable(data-api="/api/user/" + user.ID)
+				//- [^\\W\\s\\d]{1,24}[A-Za-z]{1}
+				InputText("Nick", user.CleanNick(), "Nick", "Your username on notify.moe")
+				
+				.footer.mountable
+					p Only letters and underscore.
+		else if !user.HasAvatar()
+			p.welcome-text.mountable Add an avatar so people can recognize you.
+
+			.mountable(data-api="/api/user/" + user.ID)
+				AvatarInput(user)
+
+			.footer.mountable
+				p Recommended size: 560x560 (minimum: 280x280)
+		else if user.Introduction == ""
+			p.welcome-text.mountable Write a little introduction so people know who you are!
+
+			.mountable(data-api="/api/user/" + user.ID)
+				InputTextArea("Introduction", user.Introduction, "Introduction", "Tell us about yourself")
+
+			.footer.mountable
+				p Markdown allowed.
+		else
+			p.welcome-text.mountable You're ready to start using Anime Notifier!
+
+			.buttons.mountable
+				if len(user.AnimeList().Items) == 0
+					a.button(href="/settings/accounts")
+						Icon("download")
+						span Import anime list
+				else
+					a.button(href=user.Link())
+						Icon("user")
+						span= user.Nick

pages/welcome/welcome.scarlet

@@ -0,0 +1,10 @@
+.welcome
+	max-width 600px
+	margin 0 auto
+
+	label
+		display none
+
+.welcome-text
+	text-align center
+	margin-bottom 1rem

scripts/Actions/Theme.ts

@@ -41,9 +41,9 @@ const themes = {
 		"tip-bg-color": "hsl(0, 0%, 10%)",
 		// "tip-bg-color": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)",
 
-		"post-like-color": "var(--link-color)",
-		"post-unlike-color": "var(--link-color)",
-		"post-permalink-color": "var(--link-color)",
+		"like-color": "var(--link-color)",
+		"unlike-color": "var(--link-color)",
+		"permalink-color": "var(--link-color)",
 
 		"quote-color": "var(--text-color)",
 

scripts/AnimeNotifier.ts

@@ -171,6 +171,12 @@ export default class AnimeNotifier {
 
 		// Apply page title
 		this.applyPageTitle()
+
+		// Auto-focus first input element on welcome page.
+		if(location.pathname === "/welcome") {
+			let firstInput = this.app.content.getElementsByTagName("input")[0] as HTMLInputElement
+			firstInput.focus()
+		}
 	}
 
 	applyPageTitle() {
@@ -1118,6 +1124,7 @@ export default class AnimeNotifier {
 		}
 
 		if(!apiObject) {
+			this.statusMessage.showError("API object not found")
 			throw "API object not found"
 		}
 

styles/forum.scarlet

@@ -107,16 +107,16 @@ post-content-padding-y = 0.75rem
 	margin-right 0.4em
 
 .post-permalink
-	color post-permalink-color
+	color permalink-color
 
 .post-like
-	color post-like-color
+	color like-color
 
 .post-unlike
-	color post-unlike-color
+	color unlike-color
 
 .post-delete
-	color post-delete-color
+	color delete-color
 
 .post-save
 	//

styles/include/config.scarlet

@@ -80,10 +80,10 @@ quote-color = hsl(0, 0%, 45%)
 quote-side-border-color = quote-color
 
 // Forum
-post-like-color = green !important
-post-unlike-color = rgb(255, 32, 12) !important
-post-delete-color = post-unlike-color !important
-post-permalink-color = blue !important
+like-color = green
+unlike-color = rgb(255, 32, 12)
+delete-color = unlike-color
+permalink-color = blue
 
 table-row-hover-background = hsla(0, 0%, 0%, 0.01)
 anime-list-item-name-color = link-color

styles/input.scarlet

@@ -34,6 +34,14 @@ input, select
 input
 	height input-height
 
+	[pattern]
+		:focus
+			:invalid
+				border-color red !important
+
+			:valid
+				border-color green !important
+
 	:active
 		transform translateY(3px)
 

utils/routetests/All.go

@@ -483,6 +483,7 @@ var routeTests = map[string][]string{
 	"/log/from/:index":                               nil,
 	"/inventory":                                     nil,
 	"/extension/embed":                               nil,
+	"/welcome":                                       nil,
 }
 
 // All returns which specific routes to test for a given generic route.