♻️ Refactor frontend

This commit is contained in:
LittleSheep 2024-04-20 14:05:50 +08:00
parent e5d53ab77b
commit 0d78f34535
69 changed files with 473 additions and 2244 deletions

8
.idea/.gitignore vendored
View File

@ -1,8 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

View File

@ -1 +0,0 @@
Identity

View File

@ -1,57 +0,0 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<HTMLCodeStyleSettings>
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
</HTMLCodeStyleSettings>
<JSCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="Remove" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="Remove" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</TypeScriptCodeStyleSettings>
<VueCodeStyleSettings>
<option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
<option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
</VueCodeStyleSettings>
<codeStyleSettings language="HTML">
<option name="SOFT_MARGINS" value="120" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="SOFT_MARGINS" value="120" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="SOFT_MARGINS" value="120" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="Vue">
<option name="SOFT_MARGINS" value="120" />
<indentOptions>
<option name="CONTINUATION_INDENT_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

View File

@ -1,5 +0,0 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

View File

@ -1,19 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
<data-source source="LOCAL" name="hy_identity@localhost" uuid="49a1c31c-500d-4f9f-bbf4-b4ddc9f3dc56">
<driver-ref>postgresql</driver-ref>
<synchronize>true</synchronize>
<jdbc-driver>org.postgresql.Driver</jdbc-driver>
<jdbc-url>jdbc:postgresql://localhost:5432/hy_identity</jdbc-url>
<working-dir>$ProjectFileDir$</working-dir>
</data-source>
<data-source source="LOCAL" name="identity@id.solsynth.dev" uuid="df97c878-c355-4a1b-b7fb-3280c4ad4553">
<driver-ref>postgresql</driver-ref>
<synchronize>true</synchronize>
<jdbc-driver>org.postgresql.Driver</jdbc-driver>
<jdbc-url>jdbc:postgresql://id.solsynth.dev:5432/identity</jdbc-url>
<working-dir>$ProjectFileDir$</working-dir>
</data-source>
</component>
</project>

View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

View File

@ -2,7 +2,7 @@
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Identity.iml" filepath="$PROJECT_DIR$/.idea/Identity.iml" />
<module fileurl="file://$PROJECT_DIR$/.idea/Passport.iml" filepath="$PROJECT_DIR$/.idea/Passport.iml" />
</modules>
</component>
</project>

167
.idea/workspace.xml Normal file
View File

@ -0,0 +1,167 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="ALL" />
</component>
<component name="ChangeListManager">
<list default="true" id="3fefb2c4-b6f9-466b-a523-53352e8d6f95" name="更改" comment="">
<change afterPath="$PROJECT_DIR$/pkg/embed.go" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/i18n/bundle.go" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/i18n/embed.go" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/i18n/locale.en.json" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/i18n/locale.zh.json" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/i18n/middleware.go" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/server/ui/auth.go" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/server/ui/index.go" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/views/index.gohtml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/views/layouts/auth.gohtml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/views/partials/header.gohtml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/pkg/views/signin.gohtml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/.gitignore" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/.name" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/Identity.iml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/codeStyles/Project.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/dataSources.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/modules.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/go.mod" beforeDir="false" afterPath="$PROJECT_DIR$/go.mod" afterDir="false" />
<change beforePath="$PROJECT_DIR$/go.sum" beforeDir="false" afterPath="$PROJECT_DIR$/go.sum" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/cmd/main.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/cmd/main.go" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/meta.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/meta.go" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/server/startup.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/startup.go" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/server/userinfo..go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/userinfo.go" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/.eslintrc.cjs" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/.eslintrc.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/.gitignore" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/.prettierrc.json" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/.vscode/extensions.json" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/README.md" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/embed.go" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/env.d.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/index.html" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/package.json" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/public/favicon.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/assets/utils.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/Copyright.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/NotificationList.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/UserMenu.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/auth/AccountLocator.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/auth/CallbackNotify.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/auth/FactorApplicator.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/components/auth/FactorPicker.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/index.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/layouts/master.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/layouts/user-center.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/main.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/router/index.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/scripts/request.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/stores/notifications.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/stores/userinfo.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/auth/claims.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/auth/connect.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/auth/sign-in.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/auth/sign-up.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/confirm.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/dashboard.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/personal-page.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/personalize.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/src/views/security.vue" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/tsconfig.app.json" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/tsconfig.json" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/tsconfig.node.json" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/uno.config.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/pkg/views/vite.config.ts" beforeDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="Go File" />
</list>
</option>
</component>
<component name="GOROOT" url="file:///opt/homebrew/opt/go/libexec" />
<component name="Git.Settings">
<option name="RECENT_BRANCH_BY_REPOSITORY">
<map>
<entry key="$PROJECT_DIR$" value="master" />
</map>
</option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="ProjectColorInfo"><![CDATA[{
"customColor": "",
"associatedIndex": 6
}]]></component>
<component name="ProjectId" id="2fLXu43fjlLYVIGNrhGhOgBFq2O" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"DefaultGoTemplateProperty": "Go File",
"Go 构建.Backend.executor": "Run",
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.go.formatter.settings.were.checked": "true",
"RunOnceActivity.go.migrated.go.modules.settings": "true",
"RunOnceActivity.go.modules.automatic.dependencies.download": "true",
"RunOnceActivity.go.modules.go.list.on.any.changes.was.set": "true",
"git-widget-placeholder": "refactor/ux",
"go.import.settings.migrated": "true",
"go.sdk.automatically.set": "true",
"last_opened_file_path": "/Users/littlesheep/Documents/Projects/Hydrogen/Passport/pkg",
"node.js.detected.package.eslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.lookFeel",
"vue.rearranger.settings.migration": "true"
}
}]]></component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/pkg" />
</key>
</component>
<component name="RunManager">
<configuration name="Backend" type="GoApplicationRunConfiguration" factoryName="Go Application">
<module name="Passport" />
<working_directory value="$PROJECT_DIR$" />
<kind value="FILE" />
<directory value="$PROJECT_DIR$" />
<filePath value="$PROJECT_DIR$/pkg/cmd/main.go" />
<output_directory value="$PROJECT_DIR$/dist" />
<method v="2" />
</configuration>
</component>
<component name="SharedIndexes">
<attachedChunks>
<set>
<option value="bundled-gosdk-33c477a475b1-b97fc8a1e17c-org.jetbrains.plugins.go.sharedIndexes.bundled-GO-241.14494.238" />
<option value="bundled-js-predefined-1d06a55b98c1-74d2a5396914-JavaScript-GO-241.14494.238" />
</set>
</attachedChunks>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State />
</value>
</entry>
</map>
</option>
</component>
<component name="VgoProject">
<settings-migrated>true</settings-migrated>
</component>
</project>

4
go.mod
View File

@ -7,6 +7,7 @@ require (
github.com/go-playground/validator/v10 v10.17.0
github.com/gofiber/contrib/websocket v1.3.0
github.com/gofiber/fiber/v2 v2.52.4
github.com/gofiber/template/html/v2 v2.1.1
github.com/golang-jwt/jwt/v5 v5.2.0
github.com/google/uuid v1.6.0
github.com/jordan-wright/email v4.0.1-0.20210109023952-943e75fe5223+incompatible
@ -40,6 +41,8 @@ require (
github.com/go-playground/locales v0.14.1 // indirect
github.com/go-playground/universal-translator v0.18.1 // indirect
github.com/go-sql-driver/mysql v1.7.1 // indirect
github.com/gofiber/template v1.8.3 // indirect
github.com/gofiber/utils v1.1.0 // indirect
github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
github.com/golang/protobuf v1.5.3 // indirect
github.com/google/s2a-go v0.1.7 // indirect
@ -61,6 +64,7 @@ require (
github.com/mitchellh/mapstructure v1.5.0 // indirect
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
github.com/modern-go/reflect2 v1.0.2 // indirect
github.com/nicksnyder/go-i18n/v2 v2.4.0 // indirect
github.com/pelletier/go-toml/v2 v2.1.1 // indirect
github.com/philhofer/fwd v1.1.2 // indirect
github.com/rivo/uniseg v0.4.7 // indirect

8
go.sum
View File

@ -54,6 +54,12 @@ github.com/gofiber/contrib/websocket v1.3.0 h1:XADFAGorer1VJ1bqC4UkCjqS37kwRTV04
github.com/gofiber/contrib/websocket v1.3.0/go.mod h1:xguaOzn2ZZ759LavtosEP+rcxIgBEE/rdumPINhR+Xo=
github.com/gofiber/fiber/v2 v2.52.4 h1:P+T+4iK7VaqUsq2PALYEfBBo6bJZ4q3FP8cZ84EggTM=
github.com/gofiber/fiber/v2 v2.52.4/go.mod h1:KEOE+cXMhXG0zHc9d8+E38hoX+ZN7bhOtgeF2oT6jrQ=
github.com/gofiber/template v1.8.3 h1:hzHdvMwMo/T2kouz2pPCA0zGiLCeMnoGsQZBTSYgZxc=
github.com/gofiber/template v1.8.3/go.mod h1:bs/2n0pSNPOkRa5VJ8zTIvedcI/lEYxzV3+YPXdBvq8=
github.com/gofiber/template/html/v2 v2.1.1 h1:QEy3O3EBkvwDthy5bXVGUseOyO6ldJoiDxlF4+MJiV8=
github.com/gofiber/template/html/v2 v2.1.1/go.mod h1:2G0GHHOUx70C1LDncoBpe4T6maQbNa4x1CVNFW0wju0=
github.com/gofiber/utils v1.1.0 h1:vdEBpn7AzIUJRhe+CiTOJdUcTg4Q9RK+pEa0KPbLdrM=
github.com/gofiber/utils v1.1.0/go.mod h1:poZpsnhBykfnY1Mc0KeEa6mSHrS3dV0+oBWyeQmb2e0=
github.com/golang-jwt/jwt/v5 v5.2.0 h1:d/ix8ftRUorsN+5eMIlF4T6J8CAt9rch3My2winC1Jw=
github.com/golang-jwt/jwt/v5 v5.2.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
github.com/golang-sql/civil v0.0.0-20220223132316-b832511892a9 h1:au07oEsX2xN0ktxqI+Sida1w446QrXBRJ0nee3SNZlA=
@ -146,6 +152,8 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
github.com/nicksnyder/go-i18n/v2 v2.4.0 h1:3IcvPOAvnCKwNm0TB0dLDTuawWEj+ax/RERNC+diLMM=
github.com/nicksnyder/go-i18n/v2 v2.4.0/go.mod h1:nxYSZE9M0bf3Y70gPQjN9ha7XNHX7gMc814+6wVyEI4=
github.com/pelletier/go-toml/v2 v2.1.1 h1:LWAJwfNvjQZCFIDKWYQaM62NcYeYViCmWIwmOStowAI=
github.com/pelletier/go-toml/v2 v2.1.1/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
github.com/philhofer/fwd v1.1.2 h1:bnDivRJ1EWPjUIRXV5KfORO897HTbpFAQddBdE8t7Gw=

View File

@ -1,6 +1,8 @@
package main
import (
"git.solsynth.dev/hydrogen/passport/pkg"
"git.solsynth.dev/hydrogen/passport/pkg/i18n"
"os"
"os/signal"
"syscall"
@ -11,7 +13,6 @@ import (
"git.solsynth.dev/hydrogen/passport/pkg/services"
"github.com/robfig/cron/v3"
passport "git.solsynth.dev/hydrogen/passport/pkg"
"git.solsynth.dev/hydrogen/passport/pkg/database"
"github.com/rs/zerolog"
"github.com/rs/zerolog/log"
@ -35,6 +36,8 @@ func main() {
log.Panic().Err(err).Msg("An error occurred when loading settings.")
}
i18n.InitInternationalization()
// Connect to database
if err := database.NewGorm(); err != nil {
log.Fatal().Err(err).Msg("An error occurred when connect to database.")
@ -72,13 +75,13 @@ func main() {
quartz.Start()
// Messages
log.Info().Msgf("Identity v%s is started...", passport.AppVersion)
log.Info().Msgf("Passport v%s is started...", pkg.AppVersion)
quit := make(chan os.Signal, 1)
signal.Notify(quit, syscall.SIGINT, syscall.SIGTERM)
<-quit
log.Info().Msgf("Identity v%s is quitting...", passport.AppVersion)
log.Info().Msgf("Passport v%s is quitting...", pkg.AppVersion)
quartz.Stop()

6
pkg/embed.go Normal file
View File

@ -0,0 +1,6 @@
package pkg
import "embed"
//go:embed views/*
var FS embed.FS

16
pkg/i18n/bundle.go Normal file
View File

@ -0,0 +1,16 @@
package i18n
import (
jsoniter "github.com/json-iterator/go"
"github.com/nicksnyder/go-i18n/v2/i18n"
"golang.org/x/text/language"
)
var Bundle *i18n.Bundle
func InitInternationalization() {
Bundle = i18n.NewBundle(language.English)
Bundle.RegisterUnmarshalFunc("json", jsoniter.ConfigCompatibleWithStandardLibrary.Unmarshal)
Bundle.LoadMessageFileFS(FS, "locale.en.json")
Bundle.LoadMessageFileFS(FS, "locale.zh.json")
}

6
pkg/i18n/embed.go Normal file
View File

@ -0,0 +1,6 @@
package i18n
import "embed"
//go:embed locale.*.json
var FS embed.FS

7
pkg/i18n/locale.en.json Normal file
View File

@ -0,0 +1,7 @@
{
"next": "Next",
"username": "Username",
"password": "Password",
"signinTitle": "Sign In",
"signinCaption": "Sign in to Solarpass to explore entire Solar Network. Explore posts, discover communities, talk with your best friends. All these things in the Solar Network!"
}

7
pkg/i18n/locale.zh.json Normal file
View File

@ -0,0 +1,7 @@
{
"next": "下一步",
"username": "用户名",
"password": "密码",
"signinTitle": "登陆",
"signinCaption": "登陆 Solarpass 以探索整个 Solar Network浏览帖子、探索社区、和你的好朋友聊八卦一切尽在 Solar Network!"
}

15
pkg/i18n/middleware.go Normal file
View File

@ -0,0 +1,15 @@
package i18n
import (
"github.com/gofiber/fiber/v2"
"github.com/nicksnyder/go-i18n/v2/i18n"
)
func I18nMiddleware(c *fiber.Ctx) error {
accept := c.Get(fiber.HeaderAcceptLanguage)
localizer := i18n.NewLocalizer(Bundle, accept)
c.Locals("localizer", localizer)
return c.Next()
}

View File

@ -1,4 +1,4 @@
package passport
package pkg
const (
AppVersion = "1.0.0"

View File

@ -1,35 +1,39 @@
package server
import (
"git.solsynth.dev/hydrogen/passport/pkg"
"git.solsynth.dev/hydrogen/passport/pkg/i18n"
"git.solsynth.dev/hydrogen/passport/pkg/server/ui"
"github.com/gofiber/contrib/websocket"
"net/http"
"strings"
"time"
"git.solsynth.dev/hydrogen/passport/pkg/views"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/cache"
"github.com/gofiber/fiber/v2/middleware/cors"
"github.com/gofiber/fiber/v2/middleware/filesystem"
"github.com/gofiber/fiber/v2/middleware/favicon"
"github.com/gofiber/fiber/v2/middleware/idempotency"
"github.com/gofiber/fiber/v2/middleware/logger"
"github.com/gofiber/template/html/v2"
jsoniter "github.com/json-iterator/go"
"github.com/rs/zerolog/log"
"github.com/spf13/viper"
"net/http"
"strings"
)
var A *fiber.App
func NewServer() {
templates := html.NewFileSystem(http.FS(pkg.FS), ".gohtml")
A = fiber.New(fiber.Config{
DisableStartupMessage: true,
EnableIPValidation: true,
ServerHeader: "Hydrogen.Identity",
AppName: "Hydrogen.Identity",
ServerHeader: "Hydrogen.Passport",
AppName: "Hydrogen.Passport",
ProxyHeader: fiber.HeaderXForwardedFor,
JSONEncoder: jsoniter.ConfigCompatibleWithStandardLibrary.Marshal,
JSONDecoder: jsoniter.ConfigCompatibleWithStandardLibrary.Unmarshal,
EnablePrintRoutes: viper.GetBool("debug.print_routes"),
Views: templates,
ViewsLayout: "views/index",
})
A.Use(idempotency.New())
@ -54,6 +58,8 @@ func NewServer() {
Output: log.Logger,
}))
A.Use(i18n.I18nMiddleware)
A.Get("/.well-known", getMetadata)
A.Get("/.well-known/openid-configuration", getOidcConfiguration)
@ -120,15 +126,13 @@ func NewServer() {
}
}
A.Use("/", cache.New(cache.Config{
Expiration: 24 * time.Hour,
CacheControl: true,
}), filesystem.New(filesystem.Config{
Root: http.FS(views.FS),
PathPrefix: "dist",
Index: "index.html",
NotFoundFile: "dist/index.html",
A.Use(favicon.New(favicon.Config{
FileSystem: http.FS(pkg.FS),
File: "views/favicon.png",
URL: "/favicon.png",
}))
ui.MapUserInterface(A)
}
func Listen() {

26
pkg/server/ui/auth.go Normal file
View File

@ -0,0 +1,26 @@
package ui
import (
"github.com/gofiber/fiber/v2"
"github.com/nicksnyder/go-i18n/v2/i18n"
)
func signinPage(c *fiber.Ctx) error {
localizer := c.Locals("localizer").(*i18n.Localizer)
next, _ := localizer.LocalizeMessage(&i18n.Message{ID: "next"})
username, _ := localizer.LocalizeMessage(&i18n.Message{ID: "username"})
password, _ := localizer.LocalizeMessage(&i18n.Message{ID: "password"})
title, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signinTitle"})
caption, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signinCaption"})
return c.Render("views/signin", fiber.Map{
"i18n": fiber.Map{
"next": next,
"username": username,
"password": password,
"title": title,
"caption": caption,
},
}, "views/layouts/auth")
}

8
pkg/server/ui/index.go Normal file
View File

@ -0,0 +1,8 @@
package ui
import "github.com/gofiber/fiber/v2"
func MapUserInterface(A *fiber.App) {
pages := A.Group("/").Name("Pages")
pages.Get("/sign-in", signinPage)
}

View File

@ -1,15 +0,0 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript",
"@vue/eslint-config-prettier/skip-formatting",
],
parserOptions: {
ecmaVersion: "latest",
},
}

View File

@ -1,6 +0,0 @@
module.exports = {
extends: ["plugin:vue/vue3-recommended"],
rules: {
"vue/multi-word-component-names": "off",
},
}

30
pkg/views/.gitignore vendored
View File

@ -1,30 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

View File

@ -1,8 +0,0 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": false,
"printWidth": 120,
"trailingComma": "all"
}

View File

@ -1,3 +0,0 @@
{
"recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

View File

@ -1,39 +0,0 @@
# views
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

View File

@ -1,6 +0,0 @@
package views
import "embed"
//go:embed all:dist
var FS embed.FS

1
pkg/views/env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="vite/client" />

BIN
pkg/views/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

10
pkg/views/index.gohtml Normal file
View File

@ -0,0 +1,10 @@
<!doctype html>
<html lang="en">
{{template "views/partials/header"}}
<body>
{{embed}}
</body>
</html>

View File

@ -1,13 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/xml+svg" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solarpass</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@ -0,0 +1,87 @@
<!doctype html>
<html lang="en">
{{template "views/partials/header"}}
<body>
<div class="wrapper-container">
<div class="wrapper-card">
{{embed}}
</div>
</div>
</body>
<style>
.wrapper-container {
width: 100dvw;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper-card {
width: 100%;
max-width: 720px;
transition: all .3s;
height: auto;
overflow: auto;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
border-radius: 28px;
padding: 56px;
margin: 2rem;
gap: 0 2rem;
background-color: #ebf1fa;
}
.logo {
margin-left: -8px;
margin-bottom: -8px;
display: block;
}
.title {
margin-block-start: 0.33em;
margin-block-end: 0.33em;
font-size: 2.5rem;
}
.caption {
font-size: 1rem;
}
.action-form {
display: flex;
flex-direction: column;
gap: 0.8rem 0;
}
.action-form-buttons {
display: flex;
justify-content: end;
margin-top: 8px;
gap: 4px;
}
.block-field {
width: 100%;
}
.responsive-hidden {
display: unset;
}
@media (min-width: 768px) {
.wrapper-card {
grid-template-columns: 1fr 1fr;
}
.responsive-title-gap {
height: calc(56px + 0.44rem);
display: block;
}
}
</style>
</html>

View File

@ -1,45 +0,0 @@
{
"name": "@hydrogen/passport",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"@fontsource/roboto": "^5.0.12",
"@mdi/font": "^7.4.47",
"@unocss/reset": "^0.58.5",
"dompurify": "^3.0.10",
"marked": "^12.0.1",
"pinia": "^2.1.7",
"universal-cookie": "^7.1.0",
"unocss": "^0.58.5",
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"vuetify": "^3.5.8"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node20": "^20.1.2",
"@types/dompurify": "^3.0.5",
"@types/node": "^20.11.25",
"@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.5.1",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"npm-run-all2": "^6.1.2",
"prettier": "^3.0.3",
"typescript": "~5.4.0",
"vite": "^5.1.5",
"vue-tsc": "^2.0.6"
}
}

View File

@ -0,0 +1,37 @@
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import "@material/web/all.js";
import {styles as typescaleStyles} from "@material/web/typography/md-typescale-styles.js";
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>
<title>Solarpass</title>
<style>
html, body {
padding: 0;
margin: 0;
font-family: Roboto Mono, monospace;
}
</style>
</head>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

34
pkg/views/signin.gohtml Normal file
View File

@ -0,0 +1,34 @@
<div class="left-part">
<img class="logo" src="/favicon.png" width="64" height="64"/>
<h1 class="title">{{.i18n.title}}</h1>
<p class="caption">{{.i18n.caption}}</p>
</div>
<div class="right-part">
<div class="responsive-title-gap"></div>
<form class="action-form">
<md-outlined-text-field
class="block-field"
name="username"
type="text"
autocomplete="username"
label={{.i18n.username}}
>
</md-outlined-text-field>
<md-outlined-text-field
class="block-field"
name="password"
type="password"
autocomplete="password"
label={{.i18n.password}}
>
</md-outlined-text-field>
<div class="action-form-buttons">
<md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
</div>
</form>
</div>

View File

@ -1,14 +0,0 @@
html,
body,
#app,
.v-application {
font-family: "Roboto Sans", ui-sans-serif, system-ui, sans-serif;
}
.no-scrollbar {
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
width: 0;
}

View File

@ -1,6 +0,0 @@
<template>
<div class="text-xs text-center opacity-80">
<p>Copyright © {{ new Date().getFullYear() }} Solsynth</p>
<p>Powered by <a class="underline" href="#">Hydrogen.Identity</a></p>
</div>
</template>

View File

@ -1,70 +0,0 @@
<template>
<v-menu eager :close-on-content-click="false">
<template #activator="{ props }">
<v-btn v-bind="props" icon size="small" variant="text" :loading="loading">
<v-badge v-if="notify.total > 0" color="error" :content="notify.total">
<v-icon icon="mdi-bell" />
</v-badge>
<v-icon v-else icon="mdi-bell" />
</v-btn>
</template>
<v-list v-if="notify.notifications.length <= 0" class="w-[380px]" density="compact">
<v-list-item>
<v-alert class="text-sm" variant="tonal" type="info">You are done! There is no unread notifications for you.</v-alert>
</v-list-item>
</v-list>
<v-list v-else class="w-[380px]" density="compact" lines="three">
<v-list-item v-for="(item, idx) in notify.notifications">
<template #title>{{ item.subject }}</template>
<template #subtitle>{{ item.content }}</template>
<template #append>
<v-btn icon="mdi-check" size="x-small" variant="text" :disabled="loading" @click="markAsRead(item, idx)" />
</template>
<div class="flex text-xs gap-1">
<a v-for="link in item.links" class="mt-1 underline" target="_blank" :href="link.url">{{ link.label }}</a>
</div>
</v-list-item>
</v-list>
</v-menu>
<!-- @vue-ignore -->
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
</template>
<script setup lang="ts">
import { request } from "@/scripts/request"
import { getAtk } from "@/stores/userinfo"
import { computed, onMounted, onUnmounted, ref } from "vue";
import { useNotifications } from "@/stores/notifications";
const notify = useNotifications()
const error = ref<string | null>(null)
const submitting = ref(false)
const loading = computed(() => notify.loading || submitting.value)
async function markAsRead(item: any, idx: number) {
submitting.value = true
const res = await request(`/api/notifications/${item.id}/read`, {
method: "PUT",
headers: { Authorization: `Bearer ${getAtk()}` },
})
if (res.status !== 200) {
error.value = await res.text()
} else {
notify.remove(idx)
error.value = null
}
submitting.value = false
}
notify.list()
onMounted(() => notify.connect())
onUnmounted(() => notify.disconnect())
</script>

View File

@ -1,43 +0,0 @@
<template>
<v-menu>
<template #activator="{ props }">
<v-btn flat exact v-bind="props" icon>
<v-avatar color="transparent" icon="mdi-account-circle" :image="'/api/avatar/' + id.userinfo.data?.avatar" />
</v-btn>
</template>
<v-list density="compact" v-if="!id.userinfo.isLoggedIn">
<v-list-item title="Sign in" prepend-icon="mdi-login-variant" :to="{ name: 'auth.sign-in' }" />
<v-list-item title="Create account" prepend-icon="mdi-account-plus" :to="{ name: 'auth.sign-up' }" />
</v-list>
<v-list density="compact" v-else>
<v-list-item :title="nickname" :subtitle="username" />
<v-divider class="border-opacity-50 my-2" />
<v-list-item title="User Center" prepend-icon="mdi-account-supervisor" exact :to="{ name: 'dashboard' }" />
</v-list>
</v-menu>
</template>
<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import { computed } from "vue"
const id = useUserinfo()
const username = computed(() => {
if (id.userinfo.isLoggedIn) {
return "@" + id.userinfo.data?.name
} else {
return "@vistor"
}
})
const nickname = computed(() => {
if (id.userinfo.isLoggedIn) {
return id.userinfo.data?.nick
} else {
return "Anonymous"
}
})
</script>

View File

@ -1,61 +0,0 @@
<template>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-text-field label="Account ID" variant="solo" density="comfortable" :disabled="props.loading" v-model="probe" />
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<div class="flex justify-between">
<v-btn type="button" variant="plain" color="grey-darken-3" :to="{ name: 'auth.sign-up' }">Sign up</v-btn>
<v-btn
type="submit"
variant="text"
color="primary"
class="justify-self-end"
append-icon="mdi-arrow-right"
:disabled="props.loading"
>
Next
</v-btn>
</div>
</v-form>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { request } from "@/scripts/request"
const probe = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean }>()
const emits = defineEmits(["swap", "update:loading", "update:factors", "update:challenge"])
async function submit() {
if (!probe) return
emits("update:loading", true)
const res = await request("/api/auth", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id: probe.value }),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
emits("update:factors", data["factors"])
emits("update:challenge", data["challenge"])
emits("swap", "pick")
error.value = null
}
emits("update:loading", false)
}
</script>

View File

@ -1,16 +0,0 @@
<template>
<div class="w-full max-w-[720px]">
<v-expand-transition>
<v-alert v-show="route.query['redirect_uri']" variant="tonal" type="info" class="text-xs">
You need to sign in before access that page. After you signed in, we will redirect you to: <br />
<span class="font-mono">{{ route.query["redirect_uri"] }}</span>
</v-alert>
</v-expand-transition>
</div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router"
const route = useRoute()
</script>

View File

@ -1,129 +0,0 @@
<template>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<div v-if="inputType === 'one-time-password'" class="text-center">
<p class="text-xs opacity-90">Check your inbox!</p>
<v-otp-input
class="pt-0"
variant="solo"
density="compact"
type="text"
:length="6"
v-model="password"
:loading="loading"
/>
</div>
<v-text-field
v-else
label="Password"
type="password"
variant="solo"
density="comfortable"
:disabled="loading"
v-model="password"
/>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<div class="flex justify-end">
<v-btn
type="submit"
variant="text"
color="primary"
class="justify-self-end"
append-icon="mdi-arrow-right"
:disabled="loading"
>
Next
</v-btn>
</div>
</v-form>
</div>
</template>
<script setup lang="ts">
import { request } from "@/scripts/request"
import { useUserinfo } from "@/stores/userinfo"
import { computed, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
const password = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean; currentFactor?: any; challenge?: any }>()
const emits = defineEmits(["swap", "update:challenge"])
const route = useRoute()
const router = useRouter()
const { readProfiles } = useUserinfo()
async function submit() {
const res = await request(`/api/auth`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
challenge_id: props.challenge?.id,
factor_id: props.currentFactor?.id,
secret: password.value,
}),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
if (data["is_finished"]) {
await getToken(data["session"]["grant_token"])
await readProfiles()
callback()
} else {
emits("swap", "pick")
emits("update:challenge", data["challenge"])
error.value = null
password.value = ""
}
}
}
async function getToken(tk: string) {
const res = await request("/api/auth/token", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
code: tk,
grant_type: "grant_token",
}),
})
if (res.status !== 200) {
const err = await res.text()
error.value = err
throw new Error(err)
} else {
error.value = null
}
}
function callback() {
if (route.query["closable"]) {
window.close()
} else if (route.query["redirect_uri"]) {
window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
} else {
router.push({ name: "dashboard" })
}
}
const inputType = computed(() => {
switch (props.currentFactor?.type) {
case 0:
return "text"
case 1:
return "one-time-password"
}
})
</script>

View File

@ -1,75 +0,0 @@
<template>
<div class="flex items-center">
<div class="flex-grow-1">
<v-card class="mb-3">
<v-list density="compact" color="primary">
<v-list-item
v-for="item in props.factors ?? []"
:prepend-icon="getFactorType(item)?.icon"
:title="getFactorType(item)?.label"
:active="focus === item.id"
:disabled="getFactorAvailable(item)"
@click="focus = item.id"
/>
</v-list>
</v-card>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<div class="flex justify-end">
<v-btn variant="text" color="primary" class="justify-self-end" append-icon="mdi-arrow-right" @click="submit">
Next
</v-btn>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { request } from "@/scripts/request"
const focus = ref<number | null>(null)
const error = ref<string | null>(null)
const props = defineProps<{ factors?: any[]; challenge?: any }>()
const emits = defineEmits(["swap", "update:loading", "update:currentFactor"])
async function submit() {
if (!focus) return
emits("update:loading", true)
const res = await request(`/api/auth/factors/${focus.value}`, {
method: "POST",
})
if (res.status !== 200 && res.status !== 204) {
error.value = await res.text()
} else {
const item = props.factors?.find((item: any) => item.id === focus.value)
emits("update:currentFactor", item)
emits("swap", "applicator")
error.value = null
focus.value = null
}
emits("update:loading", false)
}
function getFactorType(item: any) {
switch (item.type) {
case 0:
return { icon: "mdi-form-textbox-password", label: "Password Validation" }
case 1:
return { icon: "mdi-email-fast", label: "Email One Time Password" }
}
}
function getFactorAvailable(factor: any) {
const blacklist: number[] = props.challenge?.blacklist_factors ?? []
return blacklist.includes(factor.id)
}
</script>

View File

@ -1,5 +0,0 @@
<template>
<v-app>
<router-view />
</v-app>
</template>

View File

@ -1,46 +0,0 @@
<template>
<v-app-bar height="64" color="primary" scroll-behavior="elevate" flat>
<div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
<router-link :to="{ name: 'dashboard' }" class="flex gap-1">
<img src="/favicon.png" width="27" height="24" class="icon-filter" />
<h2 class="ml-2 text-lg font-500">Solarpass</h2>
</router-link>
<v-spacer />
<div class="me-2">
<notification-list />
</div>
<div>
<user-menu />
</div>
</div>
</v-app-bar>
<v-main>
<router-view />
</v-main>
</template>
<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import NotificationList from "@/components/NotificationList.vue"
import UserMenu from "@/components/UserMenu.vue"
const id = useUserinfo()
id.readProfiles()
</script>
<style scoped>
.editor-fab {
position: fixed !important;
bottom: 16px;
right: 20px;
}
.icon-filter {
filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg) brightness(104%) contrast(104%);
}
</style>

View File

@ -1,22 +0,0 @@
<template>
<v-container class="pt-6 px-6">
<v-row>
<v-col :cols="12" :xs="12" :sm="12" :md="4" :lg="3">
<v-card title="Navigation">
<v-list density="comfortable">
<v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
<v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'personalize' }" />
<v-list-item title="Personal Page" prepend-icon="mdi-sitemap" :to="{ name: 'personal-page' }" />
<v-list-item title="Security" prepend-icon="mdi-security" :to="{ name: 'security' }" />
</v-list>
</v-card>
</v-col>
<v-col :cols="12" :xs="12" :sm="12" :md="8" :lg="9">
<router-view />
</v-col>
</v-row>
</v-container>
</template>
<script setup lang="ts">
</script>

View File

@ -1,54 +0,0 @@
import "virtual:uno.css"
import "./assets/utils.css"
import { createApp } from "vue"
import { createPinia } from "pinia"
import "vuetify/styles"
import { createVuetify } from "vuetify"
import { md3 } from "vuetify/blueprints"
import * as components from "vuetify/components"
import * as labsComponents from "vuetify/labs/components"
import * as directives from "vuetify/directives"
import "@mdi/font/css/materialdesignicons.min.css"
import "@fontsource/roboto/latin.css"
import "@unocss/reset/tailwind.css"
import index from "./index.vue"
import router from "./router"
const app = createApp(index)
app.use(
createVuetify({
directives,
components: {
...components,
...labsComponents,
},
blueprint: md3,
theme: {
defaultTheme: "original",
themes: {
original: {
colors: {
primary: "#4a5099",
secondary: "#2196f3",
accent: "#009688",
error: "#f44336",
warning: "#ff9800",
info: "#03a9f4",
success: "#4caf50",
},
},
},
},
}),
)
app.use(createPinia())
app.use(router)
app.mount("#app")

View File

@ -1,96 +0,0 @@
import { createRouter, createWebHistory } from "vue-router"
import { useUserinfo } from "@/stores/userinfo"
import MasterLayout from "@/layouts/master.vue"
import UserCenterLayout from "@/layouts/user-center.vue"
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
component: MasterLayout,
children: [
{
path: "/",
component: UserCenterLayout,
children: [
{
path: "/",
name: "dashboard",
component: () => import("@/views/dashboard.vue"),
meta: { title: "Your account" },
},
{
path: "/me/personalize",
name: "personalize",
component: () => import("@/views/personalize.vue"),
meta: { title: "Your personality" },
},
{
path: "/me/personal-page",
name: "personal-page",
component: () => import("@/views/personal-page.vue"),
meta: { title: "Your personal page" },
},
{
path: "/me/security",
name: "security",
component: () => import("@/views/security.vue"),
meta: { title: "Your security" },
},
],
},
],
},
{
path: "/auth",
children: [
{
path: "sign-in",
name: "auth.sign-in",
component: () => import("@/views/auth/sign-in.vue"),
meta: { public: true, title: "Sign in" },
},
{
path: "sign-up",
name: "auth.sign-up",
component: () => import("@/views/auth/sign-up.vue"),
meta: { public: true, title: "Sign up" },
},
{
path: "o/connect",
name: "openid.connect",
component: () => import("@/views/auth/connect.vue"),
},
{
path: "/me/confirm",
name: "callback.confirm",
component: () => import("@/views/confirm.vue"),
meta: { public: true, title: "Confirm registration" },
},
],
},
],
})
router.beforeEach(async (to, from, next) => {
const id = useUserinfo()
if (!id.isReady) {
await id.readProfiles()
}
if (to.meta.title) {
document.title = `Solarpass | ${to.meta.title}`
} else {
document.title = "Solarpass"
}
if (!to.meta.public && !id.userinfo.isLoggedIn) {
next({ name: "auth.sign-in", query: { redirect_uri: to.fullPath } })
} else {
next()
}
})
export default router

View File

@ -1,10 +0,0 @@
declare global {
interface Window {
__LAUNCHPAD_TARGET__?: string
}
}
export async function request(input: string, init?: RequestInit) {
const prefix = window.__LAUNCHPAD_TARGET__ ?? ""
return await fetch(prefix + input, init)
}

View File

@ -1,64 +0,0 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { checkLoggedIn, getAtk } from "@/stores/userinfo";
import { request } from "@/scripts/request";
export const useNotifications = defineStore("notifications", () => {
let socket: WebSocket;
const loading = ref(false);
const notifications = ref<any[]>([]);
const total = ref(0)
async function list() {
loading.value = true;
const res = await request(
"/api/notifications?" +
new URLSearchParams({
take: (25).toString(),
offset: (0).toString()
}),
{
headers: { Authorization: `Bearer ${getAtk()}` }
}
);
if (res.status === 200) {
const data = await res.json();
notifications.value = data["data"];
total.value = data["count"];
}
loading.value = false;
}
function remove(idx: number) {
notifications.value.splice(idx, 1)
total.value--;
}
async function connect() {
if (!(checkLoggedIn())) return;
const uri = `ws://${window.location.host}/api/notifications/listen`;
socket = new WebSocket(uri + `?tk=${getAtk() as string}`);
socket.addEventListener("open", (event) => {
console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type);
});
socket.addEventListener("close", (event) => {
console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code);
});
socket.addEventListener("message", (event) => {
const data = JSON.parse(event.data);
notifications.value.push(data);
total.value++;
});
}
function disconnect() {
socket.close();
}
return { loading, notifications, total, list, remove, connect, disconnect };
});

View File

@ -1,54 +0,0 @@
import Cookie from "universal-cookie"
import { defineStore } from "pinia"
import { ref } from "vue"
import { request } from "@/scripts/request"
export interface Userinfo {
isLoggedIn: boolean
displayName: string
data: any
}
const defaultUserinfo: Userinfo = {
isLoggedIn: false,
displayName: "Citizen",
data: null,
}
export function getAtk(): string {
return new Cookie().get("passport_auth_key")
}
export function checkLoggedIn(): boolean {
return new Cookie().get("passport_auth_key")
}
export const useUserinfo = defineStore("userinfo", () => {
const userinfo = ref(defaultUserinfo)
const isReady = ref(false)
async function readProfiles() {
if (!checkLoggedIn()) {
isReady.value = true
}
const res = await request("/api/users/me", {
headers: { Authorization: `Bearer ${getAtk()}` },
})
if (res.status !== 200) {
return
}
const data = await res.json()
isReady.value = true
userinfo.value = {
isLoggedIn: true,
displayName: data["nick"],
data: data,
}
}
return { userinfo, isReady, readProfiles }
})

View File

@ -1,13 +0,0 @@
export interface ClaimType {
icon: string
name: string
description: string
}
export const claims: { [id: string]: ClaimType } = {
openid: {
icon: "mdi-identifier",
name: "Open Identity",
description: "Allow them to read your personal information.",
},
}

View File

@ -1,192 +0,0 @@
<template>
<v-container class="h-screen flex flex-col gap-3 items-center justify-center">
<v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-connection" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Connect to third-party</h1>
<p>One Solarpass, entire internet.</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item value="confirm">
<div class="flex flex-col gap-2">
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
<p>Something went wrong... {{ error }}</p>
<br />
<p class="font-bold">
It's usually not our fault. Try bringing this link to give feedback to the developer of the app you
came from.
</p>
</v-alert>
</v-expand-transition>
<div v-if="!error">
<h1 class="font-bold text-xl">{{ metadata?.name ?? "Loading" }}</h1>
<p>{{ metadata?.description ?? "Hold on a second please!" }}</p>
<div class="mt-3">
<p class="opacity-80 text-xs">Permissions they requested</p>
<v-card variant="tonal" class="mt-1 mx-[-4px]">
<v-list density="compact">
<v-list-item v-for="claim in requestedClaims" lines="two">
<template #title>
<span class="capitalize">{{ getClaimDescription(claim)?.name }}</span>
</template>
<template #subtitle>
<span>{{ getClaimDescription(claim)?.description }}</span>
</template>
<template #prepend>
<v-icon :icon="getClaimDescription(claim)?.icon" size="x-large" />
</template>
</v-list-item>
</v-list>
</v-card>
<div class="mt-5 flex justify-between">
<v-btn prepend-icon="mdi-close" variant="text" color="error" :disabled="loading" @click="decline">
Decline
</v-btn>
<v-btn append-icon="mdi-check" variant="tonal" color="success" :disabled="loading" @click="approve">
Approve
</v-btn>
</div>
<div class="mt-5 text-xs text-center opacity-75">
<p>After approve their request, you will be redirect to</p>
<p class="text-mono">{{ route.query["redirect_uri"] }}</p>
</div>
</div>
</div>
</div>
</v-window-item>
<v-window-item value="callback">
<div>
<v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
<h1 class="font-bold text-xl">Authoirzed</h1>
<p>You're done! We sucessfully established connection between you and {{ metadata?.name }}.</p>
<p class="mt-3">Now you can continue your their app, we will redirect you soon.</p>
<p class="mt-3">Teleporting you to...</p>
<p class="text-xs text-mono">{{ route.query["redirect_uri"] }}</p>
</div>
</v-window-item>
</v-window>
</v-card-text>
</v-card>
<copyright />
</v-container>
</template>
<script setup lang="ts">
import { computed, ref } from "vue"
import { useRoute } from "vue-router"
import { request } from "@/scripts/request"
import { getAtk } from "@/stores/userinfo"
import { claims, type ClaimType } from "@/views/auth/claims"
import Copyright from "@/components/Copyright.vue"
const route = useRoute()
const error = ref<string | null>(null)
const loading = ref(false)
const metadata = ref<any>(null)
const requestedClaims = computed(() => {
const scope: string = (route.query["scope"] as string) ?? ""
return scope.split(" ")
})
const panel = ref("confirm")
async function preconnect() {
const res = await request(`/api/auth/o/connect${location.search}`, {
headers: { Authorization: `Bearer ${getAtk()}` },
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
if (data["session"]) {
panel.value = "callback"
callback(data["session"])
} else {
document.title = `Solarpass | Connect to ${data["client"]?.name}`
metadata.value = data["client"]
loading.value = false
}
}
}
preconnect()
function decline() {
if (window.history.length > 0) {
window.history.back()
} else {
window.close()
}
}
async function approve() {
loading.value = true
const res = await request(
"/api/auth/o/connect?" +
new URLSearchParams({
client_id: route.query["client_id"] as string,
redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string),
response_type: "code",
scope: route.query["scope"] as string,
}),
{
method: "POST",
headers: { Authorization: `Bearer ${getAtk()}` },
},
)
if (res.status !== 200) {
error.value = await res.text()
loading.value = false
} else {
const data = await res.json()
panel.value = "callback"
setTimeout(() => callback(data["session"]), 1850)
}
}
function callback(session: any) {
const url = `${route.query["redirect_uri"]}?code=${session["grant_token"]}&state=${route.query["state"]}`
window.open(url, "_self")
}
function getClaimDescription(key: string): ClaimType {
return claims.hasOwnProperty(key) ? claims[key] : { icon: "mdi-asterisk", name: key, description: "Unknown claim..." }
}
</script>
<style scoped>
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
.card-rounded {
border-radius: 8px;
}
</style>

View File

@ -1,76 +0,0 @@
<template>
<v-container class="h-screen flex flex-col gap-3 items-center justify-center">
<callback-notify />
<v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-login-variant" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Sign in</h1>
<div v-if="challenge" class="flex items-center gap-4">
<v-tooltip>
<template v-slot:activator="{ props }">
<v-progress-circular v-bind="props" size="large"
:model-value="(challenge?.progress / challenge?.requirements) * 100" />
</template>
<p><b>Risk: </b> {{ challenge?.risk_level }}</p>
<p><b>Progress: </b> {{ challenge?.progress }}/{{ challenge?.requirements }}</p>
</v-tooltip>
<p>We need to verify that the person trying to access your account is you.</p>
</div>
<p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item v-for="k in Object.keys(panels)" :value="k">
<component :is="panels[k]" @swap="(val: string) => (panel = val)" v-model:loading="loading"
v-model:factors="factors" v-model:currentFactor="currentFactor" v-model:challenge="challenge" />
</v-window-item>
</v-window>
</v-card-text>
</v-card>
<copyright />
</v-container>
</template>
<script setup lang="ts">
import { ref, type Component } from "vue"
import Copyright from "@/components/Copyright.vue"
import CallbackNotify from "@/components/auth/CallbackNotify.vue"
import AccountLocator from "@/components/auth/AccountLocator.vue"
import FactorPicker from "@/components/auth/FactorPicker.vue"
import FactorApplicator from "@/components/auth/FactorApplicator.vue"
const loading = ref(false)
const factors = ref<any>(null)
const currentFactor = ref<any>(null)
const challenge = ref<any>(null)
const panel = ref("locate")
const panels: { [id: string]: Component } = {
locate: AccountLocator,
pick: FactorPicker,
applicator: FactorApplicator,
}
</script>
<style scoped>
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
.card-rounded {
border-radius: 8px;
}
</style>

View File

@ -1,162 +0,0 @@
<template>
<v-container class="h-screen flex flex-col gap-3 items-center justify-center">
<callback-notify />
<v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-login-variant" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Create an account</h1>
<p>Create an account on Solar Network. Then enjoy all our services.</p>
</div>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-row dense class="mb-3">
<v-col :cols="6">
<v-text-field
hide-details
label="Name"
autocomplete="username"
variant="solo"
density="comfortable"
v-model="data.name"
/>
</v-col>
<v-col :cols="6">
<v-text-field
hide-details
label="Nick"
autocomplete="nickname"
variant="solo"
density="comfortable"
v-model="data.nick"
/>
</v-col>
<v-col :cols="12">
<v-text-field
hide-details
label="Email Address"
type="email"
variant="solo"
density="comfortable"
v-model="data.email"
/>
</v-col>
<v-col :cols="12">
<v-text-field
hide-details
label="Password"
type="password"
autocomplete="new-password"
variant="solo"
density="comfortable"
v-model="data.password"
/>
</v-col>
</v-row>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<div class="flex justify-between">
<v-btn type="button" variant="plain" color="grey-darken-3" :to="{ name: 'auth.sign-in' }">
Sign in
</v-btn>
<v-btn type="submit" variant="text" color="primary" append-icon="mdi-arrow-right" :disabled="loading">
Next
</v-btn>
</div>
</v-form>
</div>
</v-card-text>
</v-card>
<v-dialog v-model="done" class="max-w-[560px]">
<v-card title="Congratulations">
<template #text>
You successfully created an account on Solar Network. Now sign in to your account and start exploring!
</template>
<template #actions>
<div class="flex flex-grow-1 justify-end">
<v-btn @click="callback">Let's go</v-btn>
</div>
</template>
</v-card>
</v-dialog>
<copyright />
</v-container>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { request } from "@/scripts/request"
import { useRoute, useRouter } from "vue-router"
import Copyright from "@/components/Copyright.vue"
import CallbackNotify from "@/components/auth/CallbackNotify.vue"
const error = ref<string | null>(null)
const route = useRoute()
const router = useRouter()
const done = ref(false)
const loading = ref(false)
const data = ref({
name: "",
nick: "",
email: "",
password: "",
})
async function submit() {
const payload = data.value
if (!payload.name || !payload.nick || !payload.email || !payload.password) return
loading.value = true
const res = await request("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
done.value = true
error.value = null
}
loading.value = false
}
function callback() {
if (route.params["closable"]) {
window.close()
} else {
router.push({ name: "auth.sign-in" })
}
}
</script>
<style scoped>
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
.card-rounded {
border-radius: 8px;
}
</style>

View File

@ -1,104 +0,0 @@
<template>
<v-container class="h-screen flex flex-col gap-3 items-center justify-center">
<v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-check-decagram" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Confirm registration</h1>
<p>Confirm your account to keep your account longer than 48 hours.</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item value="confirm">
<div>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<v-progress-circular v-if="!error" indeterminate size="32" color="grey-darken-3" class="mb-3" />
<h1 class="font-bold text-xl">Confirming</h1>
<p>We are confirming your account. Please stand by, this won't took a long time...</p>
</div>
</v-window-item>
<v-window-item value="callback">
<div>
<v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
<h1 class="font-bold text-xl">Confirmed</h1>
<p>You're done! We sucessfully confirmed your account.</p>
<p class="mt-3">Now you can continue use Solarpass, we will redirect to dashboard you soon.</p>
</div>
</v-window-item>
</v-window>
</v-card-text>
</v-card>
<copyright />
</v-container>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { request } from "@/scripts/request"
import { useUserinfo } from "@/stores/userinfo"
import Copyright from "@/components/Copyright.vue"
const route = useRoute()
const router = useRouter()
const { readProfiles } = useUserinfo()
const error = ref<string | null>(null)
const loading = ref(false)
const panel = ref("confirm")
async function confirm() {
if (!route.query["tk"]) {
error.value = "code was not exists"
return
}
const res = await request("/api/users/me/confirm", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
code: route.query["tk"],
}),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
loading.value = true
panel.value = "callback"
await readProfiles()
router.push({ name: "dashboard" })
}
loading.value = false
}
confirm()
</script>
<style scoped>
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
}
.card-rounded {
border-radius: 8px;
}
</style>

View File

@ -1,77 +0,0 @@
<template>
<div>
<v-card>
<v-img cover class="bg-grey-lighten-2" :height="240" :src="'/api/avatar/' + id.userinfo.data.banner" />
<v-card-text class="flex gap-3.5 px-5 pb-5">
<v-avatar
color="grey-lighten-2"
icon="mdi-account-circle"
class="rounded-card"
:size="54"
:image="'/api/avatar/' + id.userinfo.data.avatar"
/>
<div>
<h1 class="text-2xl cursor-pointer" @click="show.realname = !show.realname">{{ displayName }}</h1>
<p v-html="description"></p>
<div class="mt-5">
<p class="opacity-80 desc-line">
<v-icon icon="mdi-calendar-blank" size="16" />
<span>Joined at {{ new Date(id.userinfo.data?.created_at)?.toLocaleString() }}</span>
</p>
<p class="opacity-80 desc-line">
<v-icon icon="mdi-cake-variant" size="16" />
<span>Birthday is {{ new Date(id.userinfo.data?.profile.birthday)?.toLocaleString() }}</span>
</p>
</div>
</div>
</v-card-text>
</v-card>
</div>
</template>
<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import { computed } from "vue"
import { reactive } from "vue"
import { parse } from "marked"
import dompurify from "dompurify"
const id = useUserinfo()
const displayName = computed(() => {
if (show.realname) {
return (
(id.userinfo.data?.profile?.first_name ?? "Unknown") + " " + (id.userinfo.data?.profile?.last_name ?? "Unknown")
)
} else {
return id.userinfo.displayName
}
})
const description = computed(() => {
if (id.userinfo.data?.description) {
return dompurify().sanitize(parse(id.userinfo.data?.description) as string)
} else {
return "No description yet."
}
})
const show = reactive({
realname: false,
})
</script>
<style scoped>
.desc-line {
display: flex;
align-items: center;
gap: 4px;
}
</style>
<style>
.rounded-card {
border-radius: 8px;
}
</style>

View File

@ -1,71 +0,0 @@
<template>
<div>
<v-card class="mb-3" title="Design" prepend-icon="mdi-pencil-ruler" :loading="loading">
<template #text>
<v-form class="mt-1" @submit.prevent="submit">
<v-row dense>
<v-col :cols="12">
<v-textarea hide-details label="Content" density="comfortable" variant="outlined"
v-model="data.content" />
</v-col>
</v-row>
<v-btn type="submit" class="mt-2" variant="text" prepend-icon="mdi-content-save" :disabled="loading">
Apply Changes
</v-btn>
</v-form>
</template>
</v-card>
<v-snackbar v-model="done" :timeout="3000"> Your personal page has been updated.</v-snackbar>
<!-- @vue-ignore -->
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getAtk } from "@/stores/userinfo";
import { request } from "@/scripts/request";
const error = ref<string | null>(null);
const done = ref(false);
const loading = ref(false);
const data = ref<any>({});
async function read() {
loading.value = true;
const res = await request("/api/users/me/page", {
headers: { Authorization: `Bearer ${(getAtk())}` }
});
if (res.status !== 200) {
error.value = await res.text();
} else {
data.value = await res.json();
}
loading.value = false;
}
async function submit() {
const payload = data.value;
loading.value = true;
const res = await request("/api/users/me/page", {
method: "PUT",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
body: JSON.stringify(payload)
});
if (res.status !== 200) {
error.value = await res.text();
} else {
await read();
done.value = true;
error.value = null;
}
loading.value = false;
}
read();
</script>

View File

@ -1,170 +0,0 @@
<template>
<div>
<v-card class="mb-3" title="Information" prepend-icon="mdi-face-man-profile" :loading="loading">
<template #text>
<v-form class="mt-1" @submit.prevent="submit">
<v-row dense>
<v-col :xs="12" :md="6">
<v-text-field readonly hide-details label="Username" density="comfortable" variant="outlined"
v-model="data.name" />
</v-col>
<v-col :xs="12" :md="6">
<v-text-field hide-details label="Nickname" density="comfortable" variant="outlined"
v-model="data.nick" />
</v-col>
<v-col :cols="12">
<v-textarea hide-details label="Description" density="comfortable" variant="outlined"
v-model="data.description" />
</v-col>
<v-col :xs="12" :md="6" :lg="4">
<v-text-field hide-details label="First Name" density="comfortable" variant="outlined"
v-model="data.first_name" />
</v-col>
<v-col :xs="12" :md="6" :lg="4">
<v-text-field hide-details label="Last Name" density="comfortable" variant="outlined"
v-model="data.last_name" />
</v-col>
<v-col :xs="12" :lg="4">
<v-text-field hide-details label="Birthday" density="comfortable" variant="outlined" type="datetime-local"
v-model="data.birthday" />
</v-col>
</v-row>
<v-btn type="submit" class="mt-2" variant="text" prepend-icon="mdi-content-save" :disabled="loading">
Apply Changes
</v-btn>
</v-form>
</template>
</v-card>
<v-card>
<v-card-text class="flex items-center gap-3">
<v-avatar color="grey-lighten-2" icon="mdi-account-circle" class="rounded-card" size="large"
:image="'/api/avatar/' + id.userinfo.data.avatar" />
<v-file-input clearable hide-details label="Upload another avatar" variant="outlined" density="comfortable"
accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="avatar" @click:append="applyAvatar" />
</v-card-text>
<v-img cover class="bg-grey-lighten-2" :height="320" :src="'/api/avatar/' + id.userinfo.data.banner" />
<v-card-text>
<v-file-input clearable hide-details label="Update your banner" variant="outlined" density="comfortable"
accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="banner" @click:append="applyBanner" />
</v-card-text>
</v-card>
<v-snackbar v-model="done" :timeout="3000"> Your personal information has been updated. </v-snackbar>
<!-- @vue-ignore -->
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue"
import { useUserinfo, getAtk } from "@/stores/userinfo"
import { request } from "@/scripts/request"
const id = useUserinfo()
const error = ref<string | null>(null)
const done = ref(false)
const loading = ref(false)
const data = ref<any>({})
const avatar = ref<any>(null)
const banner = ref<any>(null)
watch(
id,
(val) => {
if (val.isReady) {
data.value.name = id.userinfo.data.name
data.value.nick = id.userinfo.data.nick
data.value.description = id.userinfo.data.description
data.value.first_name = id.userinfo.data.profile.first_name
data.value.last_name = id.userinfo.data.profile.last_name
data.value.birthday = id.userinfo.data.profile.birthday
if (data.value.birthday) data.value.birthday = data.value.birthday.substring(0, 16)
}
},
{ immediate: true, deep: true },
)
async function submit() {
const payload = data.value
if (payload.birthday) payload.birthday = new Date(payload.birthday).toISOString()
loading.value = true
const res = await request("/api/users/me", {
method: "PUT",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
body: JSON.stringify(payload),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
await id.readProfiles()
done.value = true
error.value = null
}
loading.value = false
}
async function applyAvatar() {
if (!avatar.value) return
if (loading.value) return
const payload = new FormData()
payload.set("avatar", avatar.value[0])
loading.value = true
const res = await request("/api/users/me/avatar", {
method: "PUT",
headers: { Authorization: `Bearer ${getAtk()}` },
body: payload,
})
if (res.status !== 200) {
error.value = await res.text()
} else {
await id.readProfiles()
done.value = true
error.value = null
avatar.value = null
}
loading.value = false
}
async function applyBanner() {
if (!banner.value) return
if (loading.value) return
const payload = new FormData()
payload.set("banner", banner.value[0])
loading.value = true
const res = await request("/api/users/me/banner", {
method: "PUT",
headers: { Authorization: `Bearer ${getAtk()}` },
body: payload,
})
if (res.status !== 200) {
error.value = await res.text()
} else {
await id.readProfiles()
done.value = true
error.value = null
banner.value = null
}
loading.value = false
}
</script>
<style>
.rounded-card {
border-radius: 8px;
}
</style>

View File

@ -1,266 +0,0 @@
<template>
<div>
<v-expansion-panels>
<v-expansion-panel eager title="Challenges">
<template #text>
<v-card :loading="reverting.challenges" variant="outlined">
<v-data-table-server
density="compact"
:headers="dataDefinitions.challenges"
:items="challenges"
:items-length="pagination.challenges.total"
:loading="reverting.challenges"
v-model:items-per-page="pagination.challenges.pageSize"
@update:options="readChallenges"
item-value="id"
>
<template v-slot:item="{ item }: { item: any }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.ip_address }}</td>
<td>
<v-tooltip :text="item.user_agent" location="top">
<template #activator="{ props }">
<div v-bind="props" class="text-ellipsis whitespace-nowrap overflow-hidden max-w-[280px]">
{{ item.user_agent }}
</div>
</template>
</v-tooltip>
</td>
<td>{{ new Date(item.created_at).toLocaleString() }}</td>
</tr>
</template>
</v-data-table-server>
</v-card>
</template>
</v-expansion-panel>
<v-expansion-panel eager title="Sessions">
<template #text>
<v-card :loading="reverting.sessions" variant="outlined">
<v-data-table-server
density="compact"
:headers="dataDefinitions.sessions"
:items="sessions"
:items-length="pagination.sessions.total"
:loading="reverting.sessions"
v-model:items-per-page="pagination.sessions.pageSize"
@update:options="readSessions"
item-value="id"
>
<template v-slot:item="{ item }: { item: any }">
<tr>
<td>{{ item.id }}</td>
<td>
<v-chip v-for="value in item.audiences" size="x-small" color="warning" class="capitalize">
{{ value }}
</v-chip>
</td>
<td>
<v-chip v-for="value in item.claims" size="x-small" color="info" class="font-mono">
{{ value }}
</v-chip>
</td>
<td>{{ new Date(item.created_at).toLocaleString() }}</td>
<td>
<v-tooltip text="Sign out">
<template #activator="{ props }">
<v-btn
v-bind="props"
variant="text"
size="x-small"
color="error"
icon="mdi-logout-variant"
@click="killSession(item)"
/>
</template>
</v-tooltip>
</td>
</tr>
</template>
</v-data-table-server>
</v-card>
</template>
</v-expansion-panel>
<v-expansion-panel eager title="Events">
<template #text>
<v-card :loading="reverting.events" variant="outlined">
<v-data-table-server
density="compact"
:headers="dataDefinitions.events"
:items="events"
:items-length="pagination.events.total"
:loading="reverting.events"
v-model:items-per-page="pagination.events.pageSize"
@update:options="readEvents"
item-value="id"
>
<template v-slot:item="{ item }: { item: any }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.type }}</td>
<td>{{ item.target }}</td>
<td>{{ item.ip_address }}</td>
<td>
<v-tooltip :text="item.user_agent" location="top">
<template #activator="{ props }">
<div v-bind="props" class="text-ellipsis whitespace-nowrap overflow-hidden max-w-[180px]">
{{ item.user_agent }}
</div>
</template>
</v-tooltip>
</td>
<td>{{ new Date(item.created_at).toLocaleString() }}</td>
</tr>
</template>
</v-data-table-server>
</v-card>
</template>
</v-expansion-panel>
</v-expansion-panels>
</div>
</template>
<script setup lang="ts">
import { request } from "@/scripts/request"
import { getAtk, useUserinfo } from "@/stores/userinfo"
import { reactive, ref } from "vue"
const id = useUserinfo()
const error = ref<string | null>(null)
const dataDefinitions: { [id: string]: any[] } = {
challenges: [
{ align: "start", key: "id", title: "ID" },
{ align: "start", key: "ip_address", title: "IP Address" },
{ align: "start", key: "user_agent", title: "User Agent" },
{ align: "start", key: "created_at", title: "Issued At" },
],
sessions: [
{ align: "start", key: "id", title: "ID" },
{ align: "start", key: "audiences", title: "Audiences" },
{ align: "start", key: "claims", title: "Claims" },
{ align: "start", key: "created_at", title: "Issued At" },
{ align: "start", key: "actions", title: "Actions", sortable: false },
],
events: [
{ align: "start", key: "id", title: "ID" },
{ align: "start", key: "type", title: "Type" },
{ align: "start", key: "target", title: "Affected Object" },
{ align: "start", key: "ip_address", title: "IP Address" },
{ align: "start", key: "user_agent", title: "User Agent" },
{ align: "start", key: "created_at", title: "Performed At" },
],
}
const challenges = ref<any>([])
const sessions = ref<any>([])
const events = ref<any>([])
const reverting = reactive({ challenges: false, sessions: false, events: false })
const pagination = reactive({
challenges: { page: 1, pageSize: 5, total: 0 },
sessions: { page: 1, pageSize: 5, total: 0 },
events: { page: 1, pageSize: 5, total: 0 },
})
async function readChallenges({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
if (itemsPerPage) pagination.challenges.pageSize = itemsPerPage
if (page) pagination.challenges.page = page
reverting.challenges = true
const res = await request(
"/api/users/me/challenges?" +
new URLSearchParams({
take: pagination.challenges.pageSize.toString(),
offset: ((pagination.challenges.page - 1) * pagination.challenges.pageSize).toString(),
}),
{
headers: { Authorization: `Bearer ${getAtk()}` },
},
)
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
challenges.value = data["data"]
pagination.challenges.total = data["count"]
}
reverting.challenges = false
}
async function readSessions({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
if (itemsPerPage) pagination.sessions.pageSize = itemsPerPage
if (page) pagination.sessions.page = page
reverting.sessions = true
const res = await request(
"/api/users/me/sessions?" +
new URLSearchParams({
take: pagination.sessions.pageSize.toString(),
offset: ((pagination.sessions.page - 1) * pagination.sessions.pageSize).toString(),
}),
{
headers: { Authorization: `Bearer ${getAtk()}` },
},
)
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
sessions.value = data["data"]
pagination.sessions.total = data["count"]
}
reverting.sessions = false
}
async function readEvents({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
if (itemsPerPage) pagination.events.pageSize = itemsPerPage
if (page) pagination.events.page = page
reverting.events = true
const res = await request(
"/api/users/me/events?" +
new URLSearchParams({
take: pagination.events.pageSize.toString(),
offset: ((pagination.events.page - 1) * pagination.events.pageSize).toString(),
}),
{
headers: { Authorization: `Bearer ${getAtk()}` },
},
)
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
events.value = data["data"]
pagination.events.total = data["count"]
}
reverting.events = false
}
Promise.all([readChallenges({}), readSessions({}), readEvents({})])
async function killSession(item: any) {
reverting.sessions = true
const res = await request(`/api/users/me/sessions/${item.id}`, {
method: "DELETE",
headers: { Authorization: `Bearer ${getAtk()}` },
})
if (res.status !== 200) {
error.value = await res.text()
} else {
await readSessions({})
error.value = null
}
reverting.sessions = false
}
</script>
<style>
.rounded-card {
border-radius: 8px;
}
</style>

View File

@ -1,14 +0,0 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

View File

@ -1,11 +0,0 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

View File

@ -1,13 +0,0 @@
{
"extends": "@tsconfig/node20/tsconfig.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
"compilerOptions": {
"composite": true,
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

View File

@ -1,5 +0,0 @@
import { defineConfig, presetAttributify, presetTypography, presetUno } from "unocss"
export default defineConfig({
presets: [presetAttributify(), presetTypography(), presetUno({ preflight: false })],
})

View File

@ -1,27 +0,0 @@
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import unocss from "unocss/vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx(), unocss()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
}
},
server: {
proxy: {
"/api/notifications/listen": {
target: "ws://localhost:8444",
ws: true
},
"/api": "http://localhost:8444",
"/.well-known": "http://localhost:8444"
}
}
});