✨ Sign up & Sign in

✨ New ticket ways
♻️ Refactor frontend
2024-04-20 22:50:09 +08:00 · 2024-04-20 19:07:17 +08:00 · 2024-04-20 14:05:50 +08:00
105 changed files with 6926 additions and 2842 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -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
--- a/.idea/.name
+++ b/.idea/.name
@ -1 +0,0 @@
-Identity
--- a/.idea/Passport.iml
+++ b/.idea/Passport.iml
@ -5,5 +5,6 @@
    <content url="file://$MODULE_DIR$" />
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="animate.css" level="application" />
  </component>
 </module>
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@ -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>
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>
--- a/.idea/dataSources.local.xml
+++ b/.idea/dataSources.local.xml
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="dataSourceStorageLocal" created-in="GO-241.14494.238">
+    <data-source name="hy_passport@localhost" uuid="74bcf3ef-a2b9-435b-b9e5-f32902a33b25">
+      <database-info product="PostgreSQL" version="16.2 (Homebrew)" jdbc-version="4.2" driver-name="PostgreSQL JDBC Driver" driver-version="42.6.0" dbms="POSTGRES" exact-version="16.2" exact-driver-version="42.6">
+        <identifier-quote-string>&quot;</identifier-quote-string>
+      </database-info>
+      <case-sensitivity plain-identifiers="lower" quoted-identifiers="exact" />
+      <secret-storage>master_key</secret-storage>
+      <user-name>postgres</user-name>
+      <schema-mapping>
+        <introspection-scope>
+          <node negative="1">
+            <node kind="database" qname="@">
+              <node kind="schema" qname="@" />
+            </node>
+            <node kind="database" qname="hy_passport" />
+          </node>
+        </introspection-scope>
+      </schema-mapping>
+    </data-source>
+  </component>
+</project>
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@ -1,18 +1,11 @@
 <?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">
+    <data-source source="LOCAL" name="hy_passport@localhost" uuid="74bcf3ef-a2b9-435b-b9e5-f32902a33b25">
      <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>
+      <jdbc-url>jdbc:postgresql://localhost:5432/hy_passport</jdbc-url>
      <working-dir>$ProjectFileDir$</working-dir>
    </data-source>
  </component>
--- a/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25.xml
+++ b/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25.xml
--- a/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25/storage_v2/_src_/database/hy_passport.gNOKQQ.meta
+++ b/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25/storage_v2/_src_/database/hy_passport.gNOKQQ.meta
@ -0,0 +1 @@
+#n:hy_passport
--- a/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25/storage_v2/_src_/database/hy_passport.gNOKQQ/schema/public.abK9xQ.meta
+++ b/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25/storage_v2/_src_/database/hy_passport.gNOKQQ/schema/public.abK9xQ.meta
@ -0,0 +1,2 @@
+#n:public
+!<md> [6267, 0, null, null, -2147483648, -2147483648]
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -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>
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{animate.css}" />
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -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>
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@ -0,0 +1,145 @@
+<?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=":sparkles: New ticket ways">
+      <change afterPath="$PROJECT_DIR$/pkg/server/ui/signin.go" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/pkg/server/ui/signup.go" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/pkg/views/signup.gohtml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/Passport.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/Passport.iml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/dataSources.local.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dataSources.local.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25/storage_v2/_src_/database/hy_passport.gNOKQQ/schema/public.abK9xQ.meta" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/dataSources/74bcf3ef-a2b9-435b-b9e5-f32902a33b25/storage_v2/_src_/database/hy_passport.gNOKQQ/schema/public.abK9xQ.meta" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.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/i18n/locale.en.json" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/i18n/locale.en.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/i18n/locale.zh.json" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/i18n/locale.zh.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/accounts_api.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/accounts_api.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/auth_api.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/auth_api.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/friendships_api.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/friendships_api.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/notifications_api.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/notifications_api.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/notify_api.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/notify_api.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/page_api.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/page_api.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/ui/auth.go" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/ui/index.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/server/ui/index.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/server/utils.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/utils/request.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/services/ticket.go" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/services/ticket.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/views/layouts/auth.gohtml" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/views/layouts/auth.gohtml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/views/partials/header.gohtml" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/views/partials/header.gohtml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pkg/views/signin.gohtml" beforeDir="false" afterPath="$PROJECT_DIR$/pkg/views/signin.gohtml" afterDir="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="ProblemsViewState">
+    <option name="selectedTabId" value="ProjectErrors" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;customColor&quot;: &quot;&quot;,
+  &quot;associatedIndex&quot;: 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/views",
+    "node.js.detected.package.eslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "run.code.analysis.last.selected.profile": "pProject Default",
+    "settings.editor.selected.configurable": "preferences.lookFeel",
+    "vue.rearranger.settings.migration": "true"
+  },
+  "keyToStringList": {
+    "DatabaseDriversLRU": [
+      "postgresql"
+    ]
+  }
+}]]></component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/pkg/views" />
+      <recent name="$PROJECT_DIR$/pkg" />
+    </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/pkg/utils" />
+      <recent name="$PROJECT_DIR$/pkg/services" />
+    </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="VcsManagerConfiguration">
+    <MESSAGE value=":recycle: Refactor frontend" />
+    <MESSAGE value=":sparkles: New ticket ways" />
+    <option name="LAST_COMMIT_MESSAGE" value=":sparkles: New ticket ways" />
+  </component>
+  <component name="VgoProject">
+    <settings-migrated>true</settings-migrated>
+  </component>
+</project>
--- a/go.mod
+++ b/go.mod
@ -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
@ -52,7 +55,7 @@ require (
 	github.com/jackc/puddle/v2 v2.2.1 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
-	github.com/klauspost/compress v1.17.7 // indirect
+	github.com/klauspost/compress v1.17.8 // indirect
 	github.com/leodido/go-urn v1.2.4 // indirect
 	github.com/magiconair/properties v1.8.7 // indirect
 	github.com/mattn/go-colorable v0.1.13 // 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
@ -72,6 +76,7 @@ require (
 	github.com/spf13/cast v1.6.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
+	github.com/sujit-baniya/flash v0.1.8 // indirect
 	github.com/tinylib/msgp v1.1.8 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.52.0 // indirect
@ -82,7 +87,7 @@ require (
 	golang.org/x/net v0.22.0 // indirect
 	golang.org/x/oauth2 v0.15.0 // indirect
 	golang.org/x/sync v0.5.0 // indirect
-	golang.org/x/sys v0.18.0 // indirect
+	golang.org/x/sys v0.19.0 // indirect
 	golang.org/x/text v0.14.0 // indirect
 	golang.org/x/time v0.5.0 // indirect
 	golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2 // indirect
--- a/go.sum
+++ b/go.sum
@ -16,6 +16,7 @@ cloud.google.com/go/storage v1.35.1/go.mod h1:M6M/3V/D3KpzMTJyPOR/HU6n2Si5QdaXYE
 firebase.google.com/go v3.13.0+incompatible h1:3TdYC3DDi6aHn20qoRkxwGqNgdjtblwVAyRLQwGn/+4=
 firebase.google.com/go v3.13.0+incompatible/go.mod h1:xlah6XbEyW6tbfSklcfe5FHJIwjt8toICdV5Wh9ptHs=
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
+github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
 github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
 github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
@ -52,8 +53,15 @@ github.com/go-sql-driver/mysql v1.7.1/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9
 github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
 github.com/gofiber/contrib/websocket v1.3.0 h1:XADFAGorer1VJ1bqC4UkCjqS37kwRTV0415+050NrMk=
 github.com/gofiber/contrib/websocket v1.3.0/go.mod h1:xguaOzn2ZZ759LavtosEP+rcxIgBEE/rdumPINhR+Xo=
+github.com/gofiber/fiber/v2 v2.36.0/go.mod h1:tgCr+lierLwLoVHHO/jn3Niannv34WRkQETU8wiL9fQ=
 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=
@ -117,8 +125,12 @@ github.com/jordan-wright/email v4.0.1-0.20210109023952-943e75fe5223+incompatible
 github.com/jordan-wright/email v4.0.1-0.20210109023952-943e75fe5223+incompatible/go.mod h1:1c7szIrayyPPB/987hsnvNzLushdWf4o/79s3P08L8A=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
+github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
+github.com/klauspost/compress v1.15.9/go.mod h1:PhcZ0MbTNciWF3rruxRgKxI5NkcHHrHUDtV4Yw2GlzU=
 github.com/klauspost/compress v1.17.7 h1:ehO88t2UGzQK66LMdE8tibEd1ErmzZjNEqWkjLAKQQg=
 github.com/klauspost/compress v1.17.7/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
+github.com/klauspost/compress v1.17.8 h1:YcnTYrq7MikUT7k0Yb5eceMmALQPYBW/Xltxn0NAMnU=
+github.com/klauspost/compress v1.17.8/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
 github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
 github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
 github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
@ -146,6 +158,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=
@ -196,10 +210,13 @@ github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcU
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
 github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
+github.com/sujit-baniya/flash v0.1.8 h1:BwcrybCatPU30VMA9IBA5q3ZE0VSr5c7qTqwZrSvyRI=
+github.com/sujit-baniya/flash v0.1.8/go.mod h1:kmlAIkLDMlLshEeeE6fETEW8kSOopKN5WA3KXLmS/U0=
 github.com/tinylib/msgp v1.1.8 h1:FCXC1xanKO4I8plpHGH2P7koL/RzZs12l/+r7vakfm0=
 github.com/tinylib/msgp v1.1.8/go.mod h1:qkpG+2ldGg4xRFmx+jfTvZPxfGFhi64BcnL9vkCm/Tw=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.38.0/go.mod h1:t/G+3rLek+CyY9bnIE+YlMRddxVAAGjhxndDB4i4C0I=
 github.com/valyala/fasthttp v1.52.0 h1:wqBQpxH71XW0e2g+Og4dzQM8pk34aFYlA1Ga8db7gU0=
 github.com/valyala/fasthttp v1.52.0/go.mod h1:hf5C4QnVMkNXMspnsUlfM3WitlgYflyhHYoKol/szxQ=
 github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
@ -214,6 +231,7 @@ go.uber.org/multierr v1.11.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN8
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/crypto v0.0.0-20220214200702-86341886e292/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.21.0 h1:X31++rzVUdKhX5sWmSOFZxx8UW/ldWx55cbf08iNAMA=
 golang.org/x/crypto v0.21.0/go.mod h1:0BP7YvVV9gBbVKyeTG0Gyn+gZm94bibOW5BjDEYAOMs=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
@ -233,6 +251,8 @@ golang.org/x/net v0.0.0-20190603091049-60506f45cf65/go.mod h1:HSz+uSET+XFnRR8LxR
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20201110031124-69a78807bb2b/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20220225172249-27dd8689420f/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
 golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
 golang.org/x/net v0.22.0 h1:9sGLhx7iRIHEiX0oAJ3MRZMUCElJgy7Br1nO+AMN3Tc=
@ -252,7 +272,10 @@ golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5h
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@ -261,12 +284,15 @@ golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
 golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
+golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.3.0/go.mod h1:q750SLmJuPmVoN1blW3UFBPREJfb1KmY3vwxfr+nFDA=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
--- a/pkg/cmd/main.go
+++ b/pkg/cmd/main.go
@ -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()

--- a/pkg/database/migrator.go
+++ b/pkg/database/migrator.go
@ -12,8 +12,7 @@ var DatabaseAutoActionRange = []any{
 	&models.AccountPage{},
 	&models.AccountContact{},
 	&models.AccountFriendship{},
-	&models.AuthSession{},
-	&models.AuthChallenge{},
+	&models.AuthTicket{},
 	&models.MagicToken{},
 	&models.ThirdClient{},
 	&models.ActionEvent{},
--- a/pkg/embed.go
+++ b/pkg/embed.go
@ -0,0 +1,6 @@
+package pkg
+
+import "embed"
+
+//go:embed views/*
+var FS embed.FS
--- a/pkg/i18n/bundle.go
+++ b/pkg/i18n/bundle.go
@ -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")
+}
--- a/pkg/i18n/embed.go
+++ b/pkg/i18n/embed.go
@ -0,0 +1,6 @@
+package i18n
+
+import "embed"
+
+//go:embed locale.*.json
+var FS embed.FS
--- a/pkg/i18n/locale.en.json
+++ b/pkg/i18n/locale.en.json
@ -0,0 +1,12 @@
+{
+  "next": "Next",
+  "email": "Email",
+  "username": "Username",
+  "nickname": "Nickname",
+  "password": "Password",
+  "magicToken": "Magic Token",
+  "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!",
+  "signupTitle": "Sign Up",
+  "signupCaption": "Sign up to create an account on Solarpass, then you can explore the entire Solar Network! Enjoy the next-generation Internet Ecosystem!"
+}
--- a/pkg/i18n/locale.zh.json
+++ b/pkg/i18n/locale.zh.json
@ -0,0 +1,12 @@
+{
+  "next": "下一步",
+  "email": "邮件地址",
+  "username": "用户名",
+  "nickname": "昵称",
+  "password": "密码",
+  "magicToken": "魔法令牌",
+  "signinTitle": "登陆",
+  "signinCaption": "登陆 Solarpass 以探索整个 Solar Network，浏览帖子、探索社区、和你的好朋友聊八卦，一切尽在 Solar Network!",
+  "signupTitle": "注册",
+  "signupCaption": "注册以在 Solarpass 创建一个账号，之后你就可以探索整个 Solar Network，享受下一代互联网生态系统！"
+}
--- a/pkg/i18n/middleware.go
+++ b/pkg/i18n/middleware.go
@ -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()
+}
--- a/pkg/meta.go
+++ b/pkg/meta.go
@ -1,4 +1,4 @@
-package passport
+package pkg

 const (
 	AppVersion = "1.0.0"
--- a/pkg/models/accounts.go
+++ b/pkg/models/accounts.go
@ -23,9 +23,8 @@ type Account struct {
 	PersonalPage AccountPage      `json:"personal_page"`
 	Contacts     []AccountContact `json:"contacts"`

-	Sessions   []AuthSession   `json:"sessions"`
-	Challenges []AuthChallenge `json:"challenges"`
-	Factors    []AuthFactor    `json:"factors"`
+	Sessions []AuthTicket `json:"sessions"`
+	Factors  []AuthFactor `json:"factors"`

 	Events      []ActionEvent `json:"events"`
 	MagicTokens []MagicToken  `json:"-" gorm:"foreignKey:AssignTo"`
--- a/pkg/models/auth.go
+++ b/pkg/models/auth.go
@ -23,23 +23,30 @@ type AuthFactor struct {
 	AccountID uint    `json:"account_id"`
 }

-type AuthSession struct {
+type AuthTicket struct {
 	BaseModel

-	Claims       datatypes.JSONSlice[string] `json:"claims"`
-	Audiences    datatypes.JSONSlice[string] `json:"audiences"`
-	Challenge    AuthChallenge               `json:"challenge" gorm:"foreignKey:SessionID"`
-	GrantToken   string                      `json:"grant_token"`
-	AccessToken  string                      `json:"access_token"`
-	RefreshToken string                      `json:"refresh_token"`
-	ExpiredAt    *time.Time                  `json:"expired_at"`
-	AvailableAt  *time.Time                  `json:"available_at"`
-	LastGrantAt  *time.Time                  `json:"last_grant_at"`
-	ClientID     *uint                       `json:"client_id"`
-	AccountID    uint                        `json:"account_id"`
+	Location            string                      `json:"location"`
+	IpAddress           string                      `json:"ip_address"`
+	UserAgent           string                      `json:"user_agent"`
+	RequireMFA          bool                        `json:"require_mfa"`
+	RequireAuthenticate bool                        `json:"require_authenticate"`
+	Claims              datatypes.JSONSlice[string] `json:"claims"`
+	Audiences           datatypes.JSONSlice[string] `json:"audiences"`
+	GrantToken          *string                     `json:"grant_token"`
+	AccessToken         *string                     `json:"access_token"`
+	RefreshToken        *string                     `json:"refresh_token"`
+	ExpiredAt           *time.Time                  `json:"expired_at"`
+	AvailableAt         *time.Time                  `json:"available_at"`
+	LastGrantAt         *time.Time                  `json:"last_grant_at"`
+	ClientID            *uint                       `json:"client_id"`
+	AccountID           uint                        `json:"account_id"`
 }

-func (v AuthSession) IsAvailable() error {
+func (v AuthTicket) IsAvailable() error {
+	if v.RequireMFA || v.RequireAuthenticate {
+		return fmt.Errorf("session isn't authenticated yet")
+	}
 	if v.AvailableAt != nil && time.Now().Unix() < v.AvailableAt.Unix() {
 		return fmt.Errorf("session isn't available yet")
 	}
@ -50,40 +57,8 @@ func (v AuthSession) IsAvailable() error {
 	return nil
 }

-type AuthChallengeState = int8
-
-const (
-	ActiveChallengeState = AuthChallengeState(iota)
-	ExpiredChallengeState
-	FinishChallengeState
-)
-
-type AuthChallenge struct {
-	BaseModel
-
-	Location         string                     `json:"location"`
-	IpAddress        string                     `json:"ip_address"`
-	UserAgent        string                     `json:"user_agent"`
-	RiskLevel        int                        `json:"risk_level"`
-	Progress         int                        `json:"progress"`
-	Requirements     int                        `json:"requirements"`
-	BlacklistFactors datatypes.JSONType[[]uint] `json:"blacklist_factors"`
-	State            int8                       `json:"state"`
-	ExpiredAt        time.Time                  `json:"expired_at"`
-	SessionID        *uint                      `json:"session_id"`
-	AccountID        uint                       `json:"account_id"`
-}
-
-func (v AuthChallenge) IsAvailable() error {
-	if time.Now().Unix() > v.ExpiredAt.Unix() {
-		return fmt.Errorf("challenge expired")
-	}
-
-	return nil
-}
-
 type AuthContext struct {
-	Session   AuthSession `json:"session"`
-	Account   Account     `json:"account"`
-	ExpiredAt time.Time   `json:"expired_at"`
+	Ticket    AuthTicket `json:"session"`
+	Account   Account    `json:"account"`
+	ExpiredAt time.Time  `json:"expired_at"`
 }
--- a/pkg/models/clients.go
+++ b/pkg/models/clients.go
@ -11,7 +11,7 @@ type ThirdClient struct {
 	Secret        string                      `json:"secret"`
 	Urls          datatypes.JSONSlice[string] `json:"urls"`
 	Callbacks     datatypes.JSONSlice[string] `json:"callbacks"`
-	Sessions      []AuthSession               `json:"sessions" gorm:"foreignKey:ClientID"`
+	Sessions      []AuthTicket                `json:"sessions" gorm:"foreignKey:ClientID"`
 	Notifications []Notification              `json:"notifications" gorm:"foreignKey:SenderID"`
 	IsDraft       bool                        `json:"is_draft"`
 	AccountID     *uint                       `json:"account_id"`
--- a/pkg/security/challanges.go
+++ b/pkg/security/challanges.go
@ -1,96 +0,0 @@
-package security
-
-import (
-	"fmt"
-	"strings"
-	"time"
-
-	"github.com/google/uuid"
-
-	"git.solsynth.dev/hydrogen/passport/pkg/database"
-	"git.solsynth.dev/hydrogen/passport/pkg/models"
-	"github.com/samber/lo"
-	"gorm.io/datatypes"
-)
-
-func CalcRisk(user models.Account, ip, ua string) int {
-	risk := 3
-	var secureFactor int64
-	if err := database.C.Where(models.AuthChallenge{
-		AccountID: user.ID,
-		IpAddress: ip,
-	}).Model(models.AuthChallenge{}).Count(&secureFactor).Error; err == nil {
-		if secureFactor >= 3 {
-			risk -= 3
-		} else if secureFactor >= 1 {
-			risk -= 2
-		}
-	}
-
-	return risk
-}
-
-func NewChallenge(user models.Account, factors []models.AuthFactor, ip, ua string) (models.AuthChallenge, error) {
-	var challenge models.AuthChallenge
-	// Pickup any challenge if possible
-	if err := database.C.Where(models.AuthChallenge{
-		AccountID: user.ID,
-	}).Where("state = ?", models.ActiveChallengeState).First(&challenge).Error; err == nil {
-		return challenge, nil
-	}
-
-	// Calculate the risk level
-	risk := CalcRisk(user, ip, ua)
-
-	// Clamp risk in the exists requirements factor count
-	requirements := lo.Clamp(risk, 1, len(factors))
-
-	challenge = models.AuthChallenge{
-		IpAddress:        ip,
-		UserAgent:        ua,
-		RiskLevel:        risk,
-		Requirements:     requirements,
-		BlacklistFactors: datatypes.NewJSONType([]uint{}),
-		State:            models.ActiveChallengeState,
-		ExpiredAt:        time.Now().Add(2 * time.Hour),
-		AccountID:        user.ID,
-	}
-
-	err := database.C.Save(&challenge).Error
-
-	return challenge, err
-}
-
-func DoChallenge(challenge models.AuthChallenge, factor models.AuthFactor, code string) error {
-	if err := challenge.IsAvailable(); err != nil {
-		challenge.State = models.ExpiredChallengeState
-		database.C.Save(&challenge)
-		return err
-	}
-	if challenge.Progress >= challenge.Requirements {
-		return fmt.Errorf("challenge already passed")
-	}
-
-	blacklist := challenge.BlacklistFactors.Data()
-	if lo.Contains(blacklist, factor.ID) {
-		return fmt.Errorf("factor in blacklist, please change another factor to challenge")
-	}
-	if err := VerifyFactor(factor, code); err != nil {
-		return err
-	}
-
-	challenge.Progress++
-	challenge.BlacklistFactors = datatypes.NewJSONType(append(blacklist, factor.ID))
-
-	if err := database.C.Save(&challenge).Error; err != nil {
-		return err
-	}
-
-	// Revoke some factor passwords
-	if factor.Type == models.EmailPasswordFactor {
-		factor.Secret = strings.ReplaceAll(uuid.NewString(), "-", "")
-		database.C.Save(&factor)
-	}
-
-	return nil
-}
--- a/pkg/security/factors.go
+++ b/pkg/security/factors.go
@ -1,27 +0,0 @@
-package security
-
-import (
-	"fmt"
-
-	"git.solsynth.dev/hydrogen/passport/pkg/models"
-	"github.com/samber/lo"
-)
-
-func VerifyFactor(factor models.AuthFactor, code string) error {
-	switch factor.Type {
-	case models.PasswordAuthFactor:
-		return lo.Ternary(
-			VerifyPassword(code, factor.Secret),
-			nil,
-			fmt.Errorf("invalid password"),
-		)
-	case models.EmailPasswordFactor:
-		return lo.Ternary(
-			code == factor.Secret,
-			nil,
-			fmt.Errorf("invalid verification code"),
-		)
-	}
-
-	return nil
-}
--- a/pkg/security/sessions.go
+++ b/pkg/security/sessions.go
@ -1,165 +0,0 @@
-package security
-
-import (
-	"fmt"
-	"strconv"
-	"time"
-
-	"github.com/spf13/viper"
-
-	"git.solsynth.dev/hydrogen/passport/pkg/database"
-	"git.solsynth.dev/hydrogen/passport/pkg/models"
-	"github.com/google/uuid"
-	"github.com/samber/lo"
-)
-
-func GrantSession(challenge models.AuthChallenge, claims, audiences []string, expired, available *time.Time) (models.AuthSession, error) {
-	var session models.AuthSession
-	if err := challenge.IsAvailable(); err != nil {
-		return session, err
-	}
-	if challenge.Progress < challenge.Requirements {
-		return session, fmt.Errorf("challenge haven't passed")
-	}
-
-	challenge.State = models.FinishChallengeState
-
-	session = models.AuthSession{
-		Claims:       claims,
-		Audiences:    audiences,
-		Challenge:    challenge,
-		GrantToken:   uuid.NewString(),
-		AccessToken:  uuid.NewString(),
-		RefreshToken: uuid.NewString(),
-		ExpiredAt:    expired,
-		AvailableAt:  available,
-		AccountID:    challenge.AccountID,
-	}
-
-	if err := database.C.Save(&challenge).Error; err != nil {
-		return session, err
-	} else if err := database.C.Save(&session).Error; err != nil {
-		return session, err
-	}
-
-	return session, nil
-}
-
-func GrantOauthSession(user models.Account, client models.ThirdClient, claims, audiences []string, expired, available *time.Time, ip, ua string) (models.AuthSession, error) {
-	session := models.AuthSession{
-		Claims:    claims,
-		Audiences: audiences,
-		Challenge: models.AuthChallenge{
-			IpAddress: ip,
-			UserAgent: ua,
-			RiskLevel: CalcRisk(user, ip, ua),
-			State:     models.FinishChallengeState,
-			AccountID: user.ID,
-		},
-		GrantToken:   uuid.NewString(),
-		AccessToken:  uuid.NewString(),
-		RefreshToken: uuid.NewString(),
-		ExpiredAt:    expired,
-		AvailableAt:  available,
-		ClientID:     &client.ID,
-		AccountID:    user.ID,
-	}
-
-	if err := database.C.Save(&session).Error; err != nil {
-		return session, err
-	}
-
-	return session, nil
-}
-
-func RegenSession(session models.AuthSession) (models.AuthSession, error) {
-	session.GrantToken = uuid.NewString()
-	session.AccessToken = uuid.NewString()
-	session.RefreshToken = uuid.NewString()
-	err := database.C.Save(&session).Error
-	return session, err
-}
-
-func GetToken(session models.AuthSession) (string, string, error) {
-	var refresh, access string
-	if err := session.IsAvailable(); err != nil {
-		return refresh, access, err
-	}
-
-	accessDuration := time.Duration(viper.GetInt64("security.access_token_duration")) * time.Second
-	refreshDuration := time.Duration(viper.GetInt64("security.refresh_token_duration")) * time.Second
-
-	var err error
-	sub := strconv.Itoa(int(session.AccountID))
-	sed := strconv.Itoa(int(session.ID))
-	access, err = EncodeJwt(session.AccessToken, JwtAccessType, sub, sed, session.Audiences, time.Now().Add(accessDuration))
-	if err != nil {
-		return refresh, access, err
-	}
-	refresh, err = EncodeJwt(session.RefreshToken, JwtRefreshType, sub, sed, session.Audiences, time.Now().Add(refreshDuration))
-	if err != nil {
-		return refresh, access, err
-	}
-
-	session.LastGrantAt = lo.ToPtr(time.Now())
-	database.C.Save(&session)
-
-	return access, refresh, nil
-}
-
-func ExchangeToken(token string) (string, string, error) {
-	var session models.AuthSession
-	if err := database.C.Where(models.AuthSession{GrantToken: token}).First(&session).Error; err != nil {
-		return "404", "403", err
-	} else if session.LastGrantAt != nil {
-		return "404", "403", fmt.Errorf("session was granted the first token, use refresh token instead")
-	} else if len(session.Audiences) > 1 {
-		return "404", "403", fmt.Errorf("should use authorization code grant type")
-	}
-
-	return GetToken(session)
-}
-
-func ExchangeOauthToken(clientId, clientSecret, redirectUri, token string) (string, string, error) {
-	var client models.ThirdClient
-	if err := database.C.Where(models.ThirdClient{Alias: clientId}).First(&client).Error; err != nil {
-		return "404", "403", err
-	} else if client.Secret != clientSecret {
-		return "404", "403", fmt.Errorf("invalid client secret")
-	} else if !client.IsDraft && !lo.Contains(client.Callbacks, redirectUri) {
-		return "404", "403", fmt.Errorf("invalid redirect uri")
-	}
-
-	var session models.AuthSession
-	if err := database.C.Where(models.AuthSession{GrantToken: token}).First(&session).Error; err != nil {
-		return "404", "403", err
-	} else if session.LastGrantAt != nil {
-		return "404", "403", fmt.Errorf("session was granted the first token, use refresh token instead")
-	}
-
-	return GetToken(session)
-}
-
-func RefreshToken(token string) (string, string, error) {
-	parseInt := func(str string) int {
-		val, _ := strconv.Atoi(str)
-		return val
-	}
-
-	var session models.AuthSession
-	if claims, err := DecodeJwt(token); err != nil {
-		return "404", "403", err
-	} else if claims.Type != JwtRefreshType {
-		return "404", "403", fmt.Errorf("invalid token type, expected refresh token")
-	} else if err := database.C.Where(models.AuthSession{
-		BaseModel: models.BaseModel{ID: uint(parseInt(claims.SessionID))},
-	}).First(&session).Error; err != nil {
-		return "404", "403", err
-	}
-
-	if session, err := RegenSession(session); err != nil {
-		return "404", "403", err
-	} else {
-		return GetToken(session)
-	}
-}
--- a/pkg/server/accounts_api.go
+++ b/pkg/server/accounts_api.go
@ -2,6 +2,7 @@ package server

 import (
 	"fmt"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
 	"strconv"
 	"time"

@ -83,7 +84,7 @@ func editUserinfo(c *fiber.Ctx) error {
 		Birthday    time.Time `json:"birthday"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return err
 	}

@ -114,7 +115,7 @@ func killSession(c *fiber.Ctx) error {
 	user := c.Locals("principal").(models.Account)
 	id, _ := c.ParamsInt("sessionId", 0)

-	if err := database.C.Delete(&models.AuthSession{}, &models.AuthSession{
+	if err := database.C.Delete(&models.AuthTicket{}, &models.AuthTicket{
 		BaseModel: models.BaseModel{ID: uint(id)},
 		AccountID: user.ID,
 	}).Error; err != nil {
@ -133,7 +134,7 @@ func doRegister(c *fiber.Ctx) error {
 		MagicToken string `json:"magic_token"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return err
 	} else if viper.GetBool("use_registration_magic_token") && len(data.MagicToken) <= 0 {
 		return fmt.Errorf("missing magic token in request")
@ -162,7 +163,7 @@ func doRegisterConfirm(c *fiber.Ctx) error {
 		Code string `json:"code" validate:"required"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return err
 	}

--- a/pkg/server/auth_api.go
+++ b/pkg/server/auth_api.go
@ -0,0 +1,146 @@
+package server
+
+import (
+	"fmt"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
+	"time"
+
+	"github.com/gofiber/fiber/v2"
+
+	"git.solsynth.dev/hydrogen/passport/pkg/services"
+)
+
+func doAuthenticate(c *fiber.Ctx) error {
+	var data struct {
+		Username string `json:"username"`
+		Password string `json:"password" validate:"required"`
+	}
+
+	if err := utils.BindAndValidate(c, &data); err != nil {
+		return err
+	}
+
+	user, err := services.LookupAccount(data.Username)
+	if err != nil {
+		return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("account was not found: %v", err.Error()))
+	}
+
+	ticket, err := services.NewTicket(user, c.IP(), c.Get(fiber.HeaderUserAgent))
+	if err != nil {
+		return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("unable setup ticket: %v", err.Error()))
+	}
+
+	ticket, err = services.ActiveTicketWithPassword(ticket, data.Password)
+	if err != nil {
+		return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("invalid password: %v", err.Error()))
+	}
+
+	return c.JSON(fiber.Map{
+		"is_finished": ticket.IsAvailable(),
+		"ticket":      ticket,
+	})
+}
+
+func doMultiFactorAuthenticate(c *fiber.Ctx) error {
+	var data struct {
+		TicketID uint   `json:"ticket_id" validate:"required"`
+		FactorID uint   `json:"factor_id" validate:"required"`
+		Code     string `json:"code" validate:"required"`
+	}
+
+	if err := utils.BindAndValidate(c, &data); err != nil {
+		return err
+	}
+
+	ticket, err := services.GetTicket(data.TicketID)
+	if err != nil {
+		return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("ticket was not found: %v", err.Error()))
+	}
+
+	factor, err := services.GetFactor(data.FactorID)
+	if err != nil {
+		return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("factor was not found: %v", err.Error()))
+	}
+
+	ticket, err = services.ActiveTicketWithMFA(ticket, factor, data.Code)
+	if err != nil {
+		return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("invalid code: %v", err.Error()))
+	}
+
+	return c.JSON(fiber.Map{
+		"is_finished": ticket.IsAvailable(),
+		"ticket":      ticket,
+	})
+}
+
+func getToken(c *fiber.Ctx) error {
+	var data struct {
+		Code         string `json:"code" form:"code"`
+		RefreshToken string `json:"refresh_token" form:"refresh_token"`
+		ClientID     string `json:"client_id" form:"client_id"`
+		ClientSecret string `json:"client_secret" form:"client_secret"`
+		Username     string `json:"username" form:"username"`
+		Password     string `json:"password" form:"password"`
+		RedirectUri  string `json:"redirect_uri" form:"redirect_uri"`
+		GrantType    string `json:"grant_type" form:"grant_type"`
+	}
+
+	if err := utils.BindAndValidate(c, &data); err != nil {
+		return err
+	}
+
+	var err error
+	var access, refresh string
+	switch data.GrantType {
+	case "refresh_token":
+		// Refresh Token
+		access, refresh, err = services.RefreshToken(data.RefreshToken)
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, err.Error())
+		}
+	case "authorization_code":
+		// Authorization Code Mode
+		access, refresh, err = services.ExchangeOauthToken(data.ClientID, data.ClientSecret, data.RedirectUri, data.Code)
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, err.Error())
+		}
+	case "password":
+		// Password Mode
+		user, err := services.LookupAccount(data.Username)
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("account was not found: %v", err.Error()))
+		}
+		ticket, err := services.NewTicket(user, c.IP(), c.Get(fiber.HeaderUserAgent))
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("unable setup ticket: %v", err.Error()))
+		}
+		ticket, err = services.ActiveTicketWithPassword(ticket, data.Password)
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("invalid password: %v", err.Error()))
+		} else if ticket.GrantToken == nil {
+			return fiber.NewError(fiber.StatusBadRequest, fmt.Sprintf("unable to get grant token to get token"))
+		}
+		access, refresh, err = services.ExchangeOauthToken(data.ClientID, data.ClientSecret, data.RedirectUri, *ticket.GrantToken)
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, err.Error())
+		}
+	case "grant_token":
+		// Internal Usage
+		access, refresh, err = services.ExchangeToken(data.Code)
+		if err != nil {
+			return fiber.NewError(fiber.StatusBadRequest, err.Error())
+		}
+	default:
+		return fiber.NewError(fiber.StatusBadRequest, "unsupported exchange token type")
+	}
+
+	services.SetJwtCookieSet(c, access, refresh)
+
+	return c.JSON(fiber.Map{
+		"id_token":      access,
+		"access_token":  access,
+		"refresh_token": refresh,
+		"token_type":    "Bearer",
+		"expires_in":    (30 * time.Minute).Seconds(),
+	})
+}
--- a/pkg/server/auth_middleware.go
+++ b/pkg/server/auth_middleware.go
@ -3,14 +3,13 @@ package server
 import (
 	"strings"

-	"git.solsynth.dev/hydrogen/passport/pkg/security"
 	"git.solsynth.dev/hydrogen/passport/pkg/services"
 	"github.com/gofiber/fiber/v2"
 )

 func authMiddleware(c *fiber.Ctx) error {
 	var token string
-	if cookie := c.Cookies(security.CookieAccessKey); len(cookie) > 0 {
+	if cookie := c.Cookies(services.CookieAccessKey); len(cookie) > 0 {
 		token = cookie
 	}
 	if header := c.Get(fiber.HeaderAuthorization); len(header) > 0 {
@ -42,10 +41,10 @@ func authFunc(c *fiber.Ctx, overrides ...string) error {
 		}
 	}

-	rtk := c.Cookies(security.CookieRefreshKey)
+	rtk := c.Cookies(services.CookieRefreshKey)
 	if user, atk, rtk, err := services.Authenticate(token, rtk, 0); err == nil {
 		if atk != token {
-			security.SetJwtCookieSet(c, atk, rtk)
+			services.SetJwtCookieSet(c, atk, rtk)
 		}
 		c.Locals("principal", user)
 		return nil
--- a/pkg/server/challanges_api.go
+++ b/pkg/server/challanges_api.go
@ -1,140 +0,0 @@
-package server
-
-import (
-	"time"
-
-	"github.com/gofiber/fiber/v2"
-
-	"git.solsynth.dev/hydrogen/passport/pkg/security"
-	"git.solsynth.dev/hydrogen/passport/pkg/services"
-	"github.com/samber/lo"
-)
-
-func startChallenge(c *fiber.Ctx) error {
-	var data struct {
-		ID string `json:"id" validate:"required"`
-	}
-
-	if err := BindAndValidate(c, &data); err != nil {
-		return err
-	}
-
-	user, err := services.LookupAccount(data.ID)
-	if err != nil {
-		return fiber.NewError(fiber.StatusNotFound, err.Error())
-	}
-	factors, err := services.LookupFactorsByUser(user.ID)
-	if err != nil {
-		return fiber.NewError(fiber.StatusNotFound, err.Error())
-	}
-
-	challenge, err := security.NewChallenge(user, factors, c.IP(), c.Get(fiber.HeaderUserAgent))
-	if err != nil {
-		return fiber.NewError(fiber.StatusNotFound, err.Error())
-	}
-
-	services.AddEvent(user, "challenges.start", data.ID, c.IP(), c.Get(fiber.HeaderUserAgent))
-	return c.JSON(fiber.Map{
-		"display_name": user.Nick,
-		"challenge":    challenge,
-		"factors":      factors,
-	})
-}
-
-func doChallenge(c *fiber.Ctx) error {
-	var data struct {
-		ChallengeID uint   `json:"challenge_id" validate:"required"`
-		FactorID    uint   `json:"factor_id" validate:"required"`
-		Secret      string `json:"secret" validate:"required"`
-	}
-
-	if err := BindAndValidate(c, &data); err != nil {
-		return err
-	}
-
-	challenge, err := services.LookupChallengeWithFingerprint(data.ChallengeID, c.IP(), c.Get(fiber.HeaderUserAgent))
-	if err != nil {
-		return fiber.NewError(fiber.StatusNotFound, err.Error())
-	}
-
-	factor, err := services.LookupFactor(data.FactorID)
-	if err != nil {
-		return fiber.NewError(fiber.StatusNotFound, err.Error())
-	}
-
-	if err := security.DoChallenge(challenge, factor, data.Secret); err != nil {
-		return fiber.NewError(fiber.StatusBadRequest, err.Error())
-	}
-
-	challenge, err = services.LookupChallenge(data.ChallengeID)
-	if err != nil {
-		return fiber.NewError(fiber.StatusBadRequest, err.Error())
-	} else if challenge.Progress >= challenge.Requirements {
-		session, err := security.GrantSession(challenge, []string{"*"}, []string{"passport"}, nil, lo.ToPtr(time.Now()))
-		if err != nil {
-			return fiber.NewError(fiber.StatusBadRequest, err.Error())
-		}
-
-		return c.JSON(fiber.Map{
-			"is_finished": true,
-			"challenge":   challenge,
-			"session":     session,
-		})
-	}
-
-	return c.JSON(fiber.Map{
-		"is_finished": false,
-		"challenge":   challenge,
-		"session":     nil,
-	})
-}
-
-func exchangeToken(c *fiber.Ctx) error {
-	var data struct {
-		Code         string `json:"code" form:"code"`
-		RefreshToken string `json:"refresh_token" form:"refresh_token"`
-		ClientID     string `json:"client_id" form:"client_id"`
-		ClientSecret string `json:"client_secret" form:"client_secret"`
-		RedirectUri  string `json:"redirect_uri" form:"redirect_uri"`
-		GrantType    string `json:"grant_type" form:"grant_type"`
-	}
-
-	if err := BindAndValidate(c, &data); err != nil {
-		return err
-	}
-
-	var err error
-	var access, refresh string
-	switch data.GrantType {
-	case "authorization_code":
-		// Authorization Code Mode
-		access, refresh, err = security.ExchangeOauthToken(data.ClientID, data.ClientSecret, data.RedirectUri, data.Code)
-		if err != nil {
-			return fiber.NewError(fiber.StatusBadRequest, err.Error())
-		}
-	case "grant_token":
-		// Internal Usage
-		access, refresh, err = security.ExchangeToken(data.Code)
-		if err != nil {
-			return fiber.NewError(fiber.StatusBadRequest, err.Error())
-		}
-	case "refresh_token":
-		// Refresh Token
-		access, refresh, err = security.RefreshToken(data.RefreshToken)
-		if err != nil {
-			return fiber.NewError(fiber.StatusBadRequest, err.Error())
-		}
-	default:
-		return fiber.NewError(fiber.StatusBadRequest, "unsupported exchange token type")
-	}
-
-	security.SetJwtCookieSet(c, access, refresh)
-
-	return c.JSON(fiber.Map{
-		"id_token":      access,
-		"access_token":  access,
-		"refresh_token": refresh,
-		"token_type":    "Bearer",
-		"expires_in":    (30 * time.Minute).Seconds(),
-	})
-}
--- a/pkg/server/factors_api.go
+++ b/pkg/server/factors_api.go
@ -8,7 +8,7 @@ import (
 func requestFactorToken(c *fiber.Ctx) error {
 	id, _ := c.ParamsInt("factorId", 0)

-	factor, err := services.LookupFactor(uint(id))
+	factor, err := services.GetFactor(uint(id))
 	if err != nil {
 		return fiber.NewError(fiber.StatusNotFound, err.Error())
 	}
--- a/pkg/server/friendships_api.go
+++ b/pkg/server/friendships_api.go
@ -3,6 +3,7 @@ package server
 import (
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
 	"git.solsynth.dev/hydrogen/passport/pkg/services"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
 	"github.com/gofiber/fiber/v2"
 )

@ -70,7 +71,7 @@ func editFriendship(c *fiber.Ctx) error {
 		Status uint8 `json:"status"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return fiber.NewError(fiber.StatusBadRequest, err.Error())
 	}

--- a/pkg/server/notifications_api.go
+++ b/pkg/server/notifications_api.go
@ -1,6 +1,7 @@
 package server

 import (
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
 	"time"

 	"git.solsynth.dev/hydrogen/passport/pkg/database"
@ -72,7 +73,7 @@ func addNotifySubscriber(c *fiber.Ctx) error {
 		DeviceID string `json:"device_id" validate:"required"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return err
 	}

--- a/pkg/server/notify_api.go
+++ b/pkg/server/notify_api.go
@ -3,6 +3,7 @@ package server
 import (
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
 	"git.solsynth.dev/hydrogen/passport/pkg/services"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
 	"github.com/gofiber/fiber/v2"
 )

@ -18,7 +19,7 @@ func notifyUser(c *fiber.Ctx) error {
 		UserID       uint                      `json:"user_id" validate:"required"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return err
 	}

--- a/pkg/server/oauth_api.go
+++ b/pkg/server/oauth_api.go
@ -6,7 +6,6 @@ import (

 	"git.solsynth.dev/hydrogen/passport/pkg/database"
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
-	"git.solsynth.dev/hydrogen/passport/pkg/security"
 	"git.solsynth.dev/hydrogen/passport/pkg/services"
 	"github.com/gofiber/fiber/v2"
 	"github.com/samber/lo"
@ -29,8 +28,8 @@ func preConnect(c *fiber.Ctx) error {

 	user := c.Locals("principal").(models.Account)

-	var session models.AuthSession
-	if err := database.C.Where(&models.AuthSession{
+	var session models.AuthTicket
+	if err := database.C.Where(&models.AuthTicket{
 		AccountID: user.ID,
 		ClientID:  &client.ID,
 	}).Where("last_grant_at IS NULL").First(&session).Error; err == nil {
@ -40,7 +39,7 @@ func preConnect(c *fiber.Ctx) error {
 				"session": nil,
 			})
 		} else {
-			session, err = security.RegenSession(session)
+			session, err = services.RegenSession(session)
 		}

 		return c.JSON(fiber.Map{
@ -73,13 +72,11 @@ func doConnect(c *fiber.Ctx) error {
 	switch response {
 	case "code":
 		// OAuth Authorization Mode
-		session, err := security.GrantOauthSession(
+		ticket, err := services.NewOauthTicket(
 			user,
 			client,
 			strings.Split(scope, " "),
 			[]string{"passport", client.Alias},
-			nil,
-			lo.ToPtr(time.Now()),
 			c.IP(),
 			c.Get(fiber.HeaderUserAgent),
 		)
@ -89,26 +86,24 @@ func doConnect(c *fiber.Ctx) error {
 		} else {
 			services.AddEvent(user, "oauth.connect", client.Alias, c.IP(), c.Get(fiber.HeaderUserAgent))
 			return c.JSON(fiber.Map{
-				"session":      session,
+				"session":      ticket,
 				"redirect_uri": redirect,
 			})
 		}
 	case "token":
 		// OAuth Implicit Mode
-		session, err := security.GrantOauthSession(
+		ticket, err := services.NewOauthTicket(
 			user,
 			client,
 			strings.Split(scope, " "),
 			[]string{"passport", client.Alias},
-			nil,
-			lo.ToPtr(time.Now()),
 			c.IP(),
 			c.Get(fiber.HeaderUserAgent),
 		)

 		if err != nil {
 			return fiber.NewError(fiber.StatusInternalServerError, err.Error())
-		} else if access, refresh, err := security.GetToken(session); err != nil {
+		} else if access, refresh, err := services.GetToken(ticket); err != nil {
 			return fiber.NewError(fiber.StatusInternalServerError, err.Error())
 		} else {
 			services.AddEvent(user, "oauth.connect", client.Alias, c.IP(), c.Get(fiber.HeaderUserAgent))
@ -116,7 +111,7 @@ func doConnect(c *fiber.Ctx) error {
 				"access_token":  access,
 				"refresh_token": refresh,
 				"redirect_uri":  redirect,
-				"session":       session,
+				"ticket":        ticket,
 			})
 		}
 	default:
--- a/pkg/server/page_api.go
+++ b/pkg/server/page_api.go
@ -3,6 +3,7 @@ package server
 import (
 	"git.solsynth.dev/hydrogen/passport/pkg/database"
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
 	"github.com/gofiber/fiber/v2"
 )

@ -47,7 +48,7 @@ func editPersonalPage(c *fiber.Ctx) error {
 		Links   []models.AccountPageLinks `json:"links"`
 	}

-	if err := BindAndValidate(c, &data); err != nil {
+	if err := utils.BindAndValidate(c, &data); err != nil {
 		return err
 	}

--- a/pkg/server/security_api.go
+++ b/pkg/server/security_api.go
@ -6,52 +6,23 @@ import (
 	"github.com/gofiber/fiber/v2"
 )

-func getChallenges(c *fiber.Ctx) error {
+func getTickets(c *fiber.Ctx) error {
 	user := c.Locals("principal").(models.Account)
 	take := c.QueryInt("take", 0)
 	offset := c.QueryInt("offset", 0)

 	var count int64
-	var challenges []models.AuthChallenge
+	var sessions []models.AuthTicket
 	if err := database.C.
-		Where(&models.AuthChallenge{AccountID: user.ID}).
-		Model(&models.AuthChallenge{}).
+		Where(&models.AuthTicket{AccountID: user.ID}).
+		Model(&models.AuthTicket{}).
 		Count(&count).Error; err != nil {
 		return fiber.NewError(fiber.StatusInternalServerError, err.Error())
 	}

 	if err := database.C.
 		Order("created_at desc").
-		Where(&models.AuthChallenge{AccountID: user.ID}).
-		Limit(take).
-		Offset(offset).
-		Find(&challenges).Error; err != nil {
-		return fiber.NewError(fiber.StatusInternalServerError, err.Error())
-	}
-
-	return c.JSON(fiber.Map{
-		"count": count,
-		"data":  challenges,
-	})
-}
-
-func getSessions(c *fiber.Ctx) error {
-	user := c.Locals("principal").(models.Account)
-	take := c.QueryInt("take", 0)
-	offset := c.QueryInt("offset", 0)
-
-	var count int64
-	var sessions []models.AuthSession
-	if err := database.C.
-		Where(&models.AuthSession{AccountID: user.ID}).
-		Model(&models.AuthSession{}).
-		Count(&count).Error; err != nil {
-		return fiber.NewError(fiber.StatusInternalServerError, err.Error())
-	}
-
-	if err := database.C.
-		Order("created_at desc").
-		Where(&models.AuthSession{AccountID: user.ID}).
+		Where(&models.AuthTicket{AccountID: user.ID}).
 		Limit(take).
 		Offset(offset).
 		Find(&sessions).Error; err != nil {
--- a/pkg/server/startup.go
+++ b/pkg/server/startup.go
@ -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)

@ -81,8 +87,7 @@ func NewServer() {
 			me.Put("/", authMiddleware, editUserinfo)
 			me.Put("/page", authMiddleware, editPersonalPage)
 			me.Get("/events", authMiddleware, getEvents)
-			me.Get("/challenges", authMiddleware, getChallenges)
-			me.Get("/sessions", authMiddleware, getSessions)
+			me.Get("/tickets", authMiddleware, getTickets)
 			me.Delete("/sessions/:sessionId", authMiddleware, killSession)

 			me.Post("/confirm", doRegisterConfirm)
@ -106,9 +111,8 @@ func NewServer() {

 		api.Post("/users", doRegister)

-		api.Put("/auth", startChallenge)
-		api.Post("/auth", doChallenge)
-		api.Post("/auth/token", exchangeToken)
+		api.Post("/auth", doAuthenticate)
+		api.Post("/auth/token", getToken)
 		api.Post("/auth/factors/:factorId", requestFactorToken)

 		api.Get("/auth/o/connect", authMiddleware, preConnect)
@ -120,15 +124,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() {
--- a/pkg/server/ui/index.go
+++ b/pkg/server/ui/index.go
@ -0,0 +1,13 @@
+package ui
+
+import "github.com/gofiber/fiber/v2"
+
+func MapUserInterface(A *fiber.App) {
+	pages := A.Group("/").Name("Pages")
+
+	pages.Get("/sign-up", signupPage)
+	pages.Get("/sign-in", signinPage)
+
+	pages.Post("/sign-up", signupAction)
+	pages.Post("/sign-in", signinAction)
+}
--- a/pkg/server/ui/signin.go
+++ b/pkg/server/ui/signin.go
@ -0,0 +1,77 @@
+package ui
+
+import (
+	"fmt"
+	"git.solsynth.dev/hydrogen/passport/pkg/services"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
+	"github.com/gofiber/fiber/v2"
+	"github.com/nicksnyder/go-i18n/v2/i18n"
+	"github.com/sujit-baniya/flash"
+)
+
+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"})
+	signup, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signupTitle"})
+	title, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signinTitle"})
+	caption, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signinCaption"})
+
+	return c.Render("views/signin", fiber.Map{
+		"info": flash.Get(c)["message"],
+		"i18n": fiber.Map{
+			"next":     next,
+			"username": username,
+			"password": password,
+			"signup":   signup,
+			"title":    title,
+			"caption":  caption,
+		},
+	}, "views/layouts/auth")
+}
+
+func signinAction(c *fiber.Ctx) error {
+	var data struct {
+		Username string `form:"username" validate:"required"`
+		Password string `form:"password" validate:"required"`
+	}
+
+	if err := utils.BindAndValidate(c, &data); err != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": err.Error(),
+		}).Redirect("/sign-in")
+	}
+
+	user, err := services.LookupAccount(data.Username)
+	if err != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": fmt.Sprintf("account was not found: %v", err.Error()),
+		}).Redirect("/sign-in")
+	}
+
+	ticket, err := services.NewTicket(user, c.IP(), c.Get(fiber.HeaderUserAgent))
+	if err != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": fmt.Sprintf("unable setup ticket: %v", err.Error()),
+		}).Redirect("/sign-in")
+	}
+
+	ticket, err = services.ActiveTicketWithPassword(ticket, data.Password)
+	if err != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": fmt.Sprintf("invalid password: %v", err.Error()),
+		}).Redirect("/sign-in")
+	}
+
+	if ticket.IsAvailable() != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": "multi factor authenticate required",
+		}).Redirect("/sign-in")
+	} else {
+		return flash.WithInfo(c, fiber.Map{
+			"message": "done",
+		}).Redirect("/sign-in")
+	}
+}
--- a/pkg/server/ui/signup.go
+++ b/pkg/server/ui/signup.go
@ -0,0 +1,86 @@
+package ui
+
+import (
+	"fmt"
+	"git.solsynth.dev/hydrogen/passport/pkg/database"
+	"git.solsynth.dev/hydrogen/passport/pkg/models"
+	"git.solsynth.dev/hydrogen/passport/pkg/services"
+	"git.solsynth.dev/hydrogen/passport/pkg/utils"
+	"github.com/gofiber/fiber/v2"
+	"github.com/nicksnyder/go-i18n/v2/i18n"
+	"github.com/spf13/viper"
+	"github.com/sujit-baniya/flash"
+)
+
+func signupPage(c *fiber.Ctx) error {
+	localizer := c.Locals("localizer").(*i18n.Localizer)
+
+	next, _ := localizer.LocalizeMessage(&i18n.Message{ID: "next"})
+	email, _ := localizer.LocalizeMessage(&i18n.Message{ID: "email"})
+	nickname, _ := localizer.LocalizeMessage(&i18n.Message{ID: "nickname"})
+	username, _ := localizer.LocalizeMessage(&i18n.Message{ID: "username"})
+	password, _ := localizer.LocalizeMessage(&i18n.Message{ID: "password"})
+	magicToken, _ := localizer.LocalizeMessage(&i18n.Message{ID: "magicToken"})
+	signin, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signinTitle"})
+	title, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signupTitle"})
+	caption, _ := localizer.LocalizeMessage(&i18n.Message{ID: "signupCaption"})
+
+	return c.Render("views/signup", fiber.Map{
+		"info":            flash.Get(c)["message"],
+		"use_magic_token": viper.GetBool("use_registration_magic_token"),
+		"i18n": fiber.Map{
+			"next":        next,
+			"email":       email,
+			"username":    username,
+			"nickname":    nickname,
+			"password":    password,
+			"magic_token": magicToken,
+			"signin":      signin,
+			"title":       title,
+			"caption":     caption,
+		},
+	}, "views/layouts/auth")
+}
+
+func signupAction(c *fiber.Ctx) error {
+	var data struct {
+		Name       string `form:"name" validate:"required,lowercase,alphanum,min=4,max=16"`
+		Nick       string `form:"nick" validate:"required,min=4,max=24"`
+		Email      string `form:"email" validate:"required,email"`
+		Password   string `form:"password" validate:"required,min=4,max=32"`
+		MagicToken string `form:"magic_token"`
+	}
+
+	if err := utils.BindAndValidate(c, &data); err != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": err.Error(),
+		}).Redirect("/sign-up")
+	} else if viper.GetBool("use_registration_magic_token") && len(data.MagicToken) <= 0 {
+		return flash.WithInfo(c, fiber.Map{
+			"message": "magic token was required",
+		}).Redirect("/sign-up")
+	} else if viper.GetBool("use_registration_magic_token") {
+		if tk, err := services.ValidateMagicToken(data.MagicToken, models.RegistrationMagicToken); err != nil {
+			return flash.WithInfo(c, fiber.Map{
+				"message": fmt.Sprintf("magic token was invalid: %v", err.Error()),
+			}).Redirect("/sign-up")
+		} else {
+			database.C.Delete(&tk)
+		}
+	}
+
+	if _, err := services.CreateAccount(
+		data.Name,
+		data.Nick,
+		data.Email,
+		data.Password,
+	); err != nil {
+		return flash.WithInfo(c, fiber.Map{
+			"message": err.Error(),
+		}).Redirect("/sign-up")
+	} else {
+		return flash.WithInfo(c, fiber.Map{
+			"message": "account has been created. now you can sign in!",
+		}).Redirect("/sign-in")
+	}
+}
--- a/pkg/server/userinfo_api.go
+++ b/pkg/server/userinfo_api.go
--- a/pkg/services/accounts.go
+++ b/pkg/services/accounts.go
@ -6,7 +6,6 @@ import (

 	"git.solsynth.dev/hydrogen/passport/pkg/database"
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
-	"git.solsynth.dev/hydrogen/passport/pkg/security"
 	"github.com/google/uuid"
 	"github.com/samber/lo"
 	"gorm.io/gorm"
@ -23,14 +22,14 @@ func GetAccount(id uint) (models.Account, error) {
 	return account, nil
 }

-func LookupAccount(id string) (models.Account, error) {
+func LookupAccount(probe string) (models.Account, error) {
 	var account models.Account
-	if err := database.C.Where(models.Account{Name: id}).First(&account).Error; err == nil {
+	if err := database.C.Where(models.Account{Name: probe}).First(&account).Error; err == nil {
 		return account, nil
 	}

 	var contact models.AccountContact
-	if err := database.C.Where(models.AccountContact{Content: id}).First(&contact).Error; err == nil {
+	if err := database.C.Where(models.AccountContact{Content: probe}).First(&contact).Error; err == nil {
 		if err := database.C.
 			Where(models.Account{
 				BaseModel: models.BaseModel{ID: contact.AccountID},
@ -52,7 +51,7 @@ func CreateAccount(name, nick, email, password string) (models.Account, error) {
 		Factors: []models.AuthFactor{
 			{
 				Type:   models.PasswordAuthFactor,
-				Secret: security.HashPassword(password),
+				Secret: HashPassword(password),
 			},
 			{
 				Type:   models.EmailPasswordFactor,
--- a/pkg/services/auth.go
+++ b/pkg/services/auth.go
@ -6,7 +6,6 @@ import (

 	"git.solsynth.dev/hydrogen/passport/pkg/database"
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
-	"git.solsynth.dev/hydrogen/passport/pkg/security"
 	"github.com/gofiber/fiber/v2"
 	jsoniter "github.com/json-iterator/go"
 	"github.com/rs/zerolog/log"
@ -16,12 +15,12 @@ import (
 const authContextBucket = "AuthContext"

 func Authenticate(access, refresh string, depth int) (user models.Account, newAccess, newRefresh string, err error) {
-	var claims security.PayloadClaims
-	claims, err = security.DecodeJwt(access)
+	var claims PayloadClaims
+	claims, err = DecodeJwt(access)
 	if err != nil {
 		if len(refresh) > 0 && depth < 1 {
 			// Auto refresh and retry
-			newAccess, newRefresh, err = security.RefreshToken(refresh)
+			newAccess, newRefresh, err = RefreshToken(refresh)
 			if err == nil {
 				return Authenticate(newAccess, newRefresh, depth+1)
 			}
@ -74,7 +73,7 @@ func GetAuthContext(jti string) (models.AuthContext, error) {
 	})

 	if err == nil && time.Now().Unix() >= ctx.ExpiredAt.Unix() {
-		RevokeAuthContext(jti)
+		_ = RevokeAuthContext(jti)

 		return ctx, fmt.Errorf("auth context has been expired")
 	}
@ -86,7 +85,7 @@ func GrantAuthContext(jti string) (models.AuthContext, error) {
 	var ctx models.AuthContext

 	// Query data from primary database
-	session, err := LookupSessionWithToken(jti)
+	session, err := GetTicketWithToken(jti)
 	if err != nil {
 		return ctx, fmt.Errorf("invalid auth session: %v", err)
 	} else if err := session.IsAvailable(); err != nil {
@ -101,7 +100,7 @@ func GrantAuthContext(jti string) (models.AuthContext, error) {
 	// Every context should expires in some while
 	// Once user update their account info, this will have delay to update
 	ctx = models.AuthContext{
-		Session:   session,
+		Ticket:    session,
 		Account:   user,
 		ExpiredAt: time.Now().Add(5 * time.Minute),
 	}
--- a/pkg/services/challanges.go
+++ b/pkg/services/challanges.go
@ -1,26 +0,0 @@
-package services
-
-import (
-	"git.solsynth.dev/hydrogen/passport/pkg/database"
-	"git.solsynth.dev/hydrogen/passport/pkg/models"
-)
-
-func LookupChallenge(id uint) (models.AuthChallenge, error) {
-	var challenge models.AuthChallenge
-	err := database.C.Where(models.AuthChallenge{
-		BaseModel: models.BaseModel{ID: id},
-	}).First(&challenge).Error
-
-	return challenge, err
-}
-
-func LookupChallengeWithFingerprint(id uint, ip string, ua string) (models.AuthChallenge, error) {
-	var challenge models.AuthChallenge
-	err := database.C.Where(models.AuthChallenge{
-		BaseModel: models.BaseModel{ID: id},
-		IpAddress: ip,
-		UserAgent: ua,
-	}).First(&challenge).Error
-
-	return challenge, err
-}
--- a/pkg/services/encryptor.go
+++ b/pkg/services/encryptor.go
@ -1,4 +1,4 @@
-package security
+package services

 import "golang.org/x/crypto/bcrypt"

--- a/pkg/services/factors.go
+++ b/pkg/services/factors.go
@ -2,6 +2,7 @@ package services

 import (
 	"fmt"
+	"github.com/samber/lo"

 	"git.solsynth.dev/hydrogen/passport/pkg/database"
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
@ -24,7 +25,17 @@ Thank you for your cooperation in helping us maintain the security of your accou
 Best regards,
 %s`

-func LookupFactor(id uint) (models.AuthFactor, error) {
+func GetPasswordFactor(userId uint) (models.AuthFactor, error) {
+	var factor models.AuthFactor
+	err := database.C.Where(models.AuthFactor{
+		Type:      models.PasswordAuthFactor,
+		AccountID: userId,
+	}).First(&factor).Error
+
+	return factor, err
+}
+
+func GetFactor(id uint) (models.AuthFactor, error) {
 	var factor models.AuthFactor
 	err := database.C.Where(models.AuthFactor{
 		BaseModel: models.BaseModel{ID: id},
@ -33,10 +44,10 @@ func LookupFactor(id uint) (models.AuthFactor, error) {
 	return factor, err
 }

-func LookupFactorsByUser(uid uint) ([]models.AuthFactor, error) {
+func ListUserFactor(userId uint) ([]models.AuthFactor, error) {
 	var factors []models.AuthFactor
 	err := database.C.Where(models.AuthFactor{
-		AccountID: uid,
+		AccountID: userId,
 	}).Find(&factors).Error

 	return factors, err
@ -68,3 +79,22 @@ func GetFactorCode(factor models.AuthFactor) (bool, error) {
 		return false, nil
 	}
 }
+
+func CheckFactor(factor models.AuthFactor, code string) error {
+	switch factor.Type {
+	case models.PasswordAuthFactor:
+		return lo.Ternary(
+			VerifyPassword(code, factor.Secret),
+			nil,
+			fmt.Errorf("invalid password"),
+		)
+	case models.EmailPasswordFactor:
+		return lo.Ternary(
+			code == factor.Secret,
+			nil,
+			fmt.Errorf("invalid verification code"),
+		)
+	}
+
+	return nil
+}
--- a/pkg/services/jwt.go
+++ b/pkg/services/jwt.go
@ -1,4 +1,4 @@
-package security
+package services

 import (
 	"fmt"
--- a/pkg/services/ticker_maintainer.go
+++ b/pkg/services/ticker_maintainer.go
@ -1,28 +1,15 @@
 package services

 import (
-	"time"
-
 	"git.solsynth.dev/hydrogen/passport/pkg/database"
 	"git.solsynth.dev/hydrogen/passport/pkg/models"
 	jsoniter "github.com/json-iterator/go"
 	"github.com/rs/zerolog/log"
 	"github.com/spf13/viper"
 	"go.etcd.io/bbolt"
+	"time"
 )

-func LookupSessionWithToken(tokenId string) (models.AuthSession, error) {
-	var session models.AuthSession
-	if err := database.C.
-		Where(models.AuthSession{AccessToken: tokenId}).
-		Or(models.AuthSession{RefreshToken: tokenId}).
-		First(&session).Error; err != nil {
-		return session, err
-	}
-
-	return session, nil
-}
-
 func DoAutoSignoff() {
 	duration := time.Duration(viper.GetInt64("security.auto_signoff_duration")) * time.Second
 	divider := time.Now().Add(-duration)
@ -31,7 +18,7 @@ func DoAutoSignoff() {

 	if tx := database.C.
 		Where("last_grant_at < ?", divider).
-		Delete(&models.AuthSession{}); tx.Error != nil {
+		Delete(&models.AuthTicket{}); tx.Error != nil {
 		log.Error().Err(tx.Error).Msg("An error occurred when running auto sign off...")
 	} else {
 		log.Debug().Int64("affected", tx.RowsAffected).Msg("Auto sign off accomplished.")
--- a/pkg/services/ticket.go
+++ b/pkg/services/ticket.go
@ -0,0 +1,137 @@
+package services
+
+import (
+	"fmt"
+	"time"
+
+	"github.com/google/uuid"
+
+	"git.solsynth.dev/hydrogen/passport/pkg/database"
+	"git.solsynth.dev/hydrogen/passport/pkg/models"
+	"github.com/samber/lo"
+)
+
+func DetectRisk(user models.Account, ip, ua string) bool {
+	var secureFactor int64
+	if err := database.C.Where(models.AuthTicket{
+		AccountID: user.ID,
+		IpAddress: ip,
+	}).Model(models.AuthTicket{}).Count(&secureFactor).Error; err == nil {
+		if secureFactor >= 1 {
+			return false
+		}
+	}
+
+	return true
+}
+
+func NewTicket(user models.Account, ip, ua string) (models.AuthTicket, error) {
+	var ticket models.AuthTicket
+	if err := database.C.Where(models.AuthTicket{
+		AccountID: user.ID,
+	}).First(&ticket).Error; err == nil {
+		return ticket, nil
+	}
+
+	ticket = models.AuthTicket{
+		Claims:              []string{"*"},
+		Audiences:           []string{"passport"},
+		IpAddress:           ip,
+		UserAgent:           ua,
+		RequireMFA:          DetectRisk(user, ip, ua),
+		RequireAuthenticate: true,
+		ExpiredAt:           lo.ToPtr(time.Now().Add(2 * time.Hour)),
+		AvailableAt:         nil,
+		AccountID:           user.ID,
+	}
+
+	err := database.C.Save(&ticket).Error
+
+	return ticket, err
+}
+
+func NewOauthTicket(
+	user models.Account,
+	client models.ThirdClient,
+	claims, audiences []string,
+	ip, ua string,
+) (models.AuthTicket, error) {
+	ticket := models.AuthTicket{
+		Claims:       claims,
+		Audiences:    audiences,
+		IpAddress:    ip,
+		UserAgent:    ua,
+		RequireMFA:   DetectRisk(user, ip, ua),
+		GrantToken:   lo.ToPtr(uuid.NewString()),
+		AccessToken:  lo.ToPtr(uuid.NewString()),
+		RefreshToken: lo.ToPtr(uuid.NewString()),
+		AvailableAt:  lo.ToPtr(time.Now()),
+		ExpiredAt:    lo.ToPtr(time.Now()),
+		ClientID:     &client.ID,
+		AccountID:    user.ID,
+	}
+
+	if err := database.C.Save(&ticket).Error; err != nil {
+		return ticket, err
+	}
+
+	return ticket, nil
+}
+
+func ActiveTicketWithPassword(ticket models.AuthTicket, password string) (models.AuthTicket, error) {
+	if ticket.AvailableAt != nil {
+		return ticket, nil
+	} else if !ticket.RequireAuthenticate {
+		return ticket, nil
+	}
+
+	if factor, err := GetPasswordFactor(ticket.AccountID); err != nil {
+		return ticket, fmt.Errorf("unable to active ticket: %v", err)
+	} else if err = CheckFactor(factor, password); err != nil {
+		return ticket, err
+	}
+
+	ticket.AvailableAt = lo.ToPtr(time.Now())
+
+	if !ticket.RequireAuthenticate && !ticket.RequireMFA {
+		ticket.AvailableAt = lo.ToPtr(time.Now())
+	}
+
+	if err := database.C.Save(&ticket).Error; err != nil {
+		return ticket, err
+	}
+
+	return ticket, nil
+}
+
+func ActiveTicketWithMFA(ticket models.AuthTicket, factor models.AuthFactor, code string) (models.AuthTicket, error) {
+	if ticket.AvailableAt != nil {
+		return ticket, nil
+	} else if !ticket.RequireMFA {
+		return ticket, nil
+	}
+
+	if err := CheckFactor(factor, code); err != nil {
+		return ticket, fmt.Errorf("invalid code: %v", err)
+	}
+
+	ticket.RequireMFA = false
+
+	if !ticket.RequireAuthenticate && !ticket.RequireMFA {
+		ticket.AvailableAt = lo.ToPtr(time.Now())
+	}
+
+	if err := database.C.Save(&ticket).Error; err != nil {
+		return ticket, err
+	}
+
+	return ticket, nil
+}
+
+func RegenSession(session models.AuthTicket) (models.AuthTicket, error) {
+	session.GrantToken = lo.ToPtr(uuid.NewString())
+	session.AccessToken = lo.ToPtr(uuid.NewString())
+	session.RefreshToken = lo.ToPtr(uuid.NewString())
+	err := database.C.Save(&session).Error
+	return session, err
+}
--- a/pkg/services/ticket_queries.go
+++ b/pkg/services/ticket_queries.go
@ -0,0 +1,29 @@
+package services
+
+import (
+	"git.solsynth.dev/hydrogen/passport/pkg/database"
+	"git.solsynth.dev/hydrogen/passport/pkg/models"
+)
+
+func GetTicket(id uint) (models.AuthTicket, error) {
+	var ticket models.AuthTicket
+	if err := database.C.
+		Where(&models.AuthTicket{BaseModel: models.BaseModel{ID: id}}).
+		First(&ticket).Error; err != nil {
+		return ticket, err
+	}
+
+	return ticket, nil
+}
+
+func GetTicketWithToken(tokenId string) (models.AuthTicket, error) {
+	var ticket models.AuthTicket
+	if err := database.C.
+		Where(models.AuthTicket{AccessToken: &tokenId}).
+		Or(models.AuthTicket{RefreshToken: &tokenId}).
+		First(&ticket).Error; err != nil {
+		return ticket, err
+	}
+
+	return ticket, nil
+}
--- a/pkg/services/ticket_token.go
+++ b/pkg/services/ticket_token.go
@ -0,0 +1,98 @@
+package services
+
+import (
+	"fmt"
+	"git.solsynth.dev/hydrogen/passport/pkg/database"
+	"git.solsynth.dev/hydrogen/passport/pkg/models"
+	"github.com/samber/lo"
+	"github.com/spf13/viper"
+	"strconv"
+	"time"
+)
+
+func GetToken(ticket models.AuthTicket) (string, string, error) {
+	var refresh, access string
+	if err := ticket.IsAvailable(); err != nil {
+		return refresh, access, err
+	}
+	if ticket.AccessToken == nil || ticket.RefreshToken == nil {
+		return refresh, access, fmt.Errorf("unable to encode token, access or refresh token id missing")
+	}
+
+	accessDuration := time.Duration(viper.GetInt64("access_token_duration")) * time.Second
+	refreshDuration := time.Duration(viper.GetInt64("refresh_token_duration")) * time.Second
+
+	var err error
+	sub := strconv.Itoa(int(ticket.AccountID))
+	sed := strconv.Itoa(int(ticket.ID))
+	access, err = EncodeJwt(*ticket.AccessToken, JwtAccessType, sub, sed, ticket.Audiences, time.Now().Add(accessDuration))
+	if err != nil {
+		return refresh, access, err
+	}
+	refresh, err = EncodeJwt(*ticket.RefreshToken, JwtRefreshType, sub, sed, ticket.Audiences, time.Now().Add(refreshDuration))
+	if err != nil {
+		return refresh, access, err
+	}
+
+	ticket.LastGrantAt = lo.ToPtr(time.Now())
+	database.C.Save(&ticket)
+
+	return access, refresh, nil
+}
+
+func ExchangeToken(token string) (string, string, error) {
+	var ticket models.AuthTicket
+	if err := database.C.Where(models.AuthTicket{GrantToken: &token}).First(&ticket).Error; err != nil {
+		return "", "", err
+	} else if ticket.LastGrantAt != nil {
+		return "", "", fmt.Errorf("ticket was granted the first token, use refresh token instead")
+	} else if len(ticket.Audiences) > 1 {
+		return "", "", fmt.Errorf("should use authorization code grant type")
+	}
+
+	return GetToken(ticket)
+}
+
+func ExchangeOauthToken(clientId, clientSecret, redirectUri, token string) (string, string, error) {
+	var client models.ThirdClient
+	if err := database.C.Where(models.ThirdClient{Alias: clientId}).First(&client).Error; err != nil {
+		return "", "", err
+	} else if client.Secret != clientSecret {
+		return "", "", fmt.Errorf("invalid client secret")
+	} else if !client.IsDraft && !lo.Contains(client.Callbacks, redirectUri) {
+		return "", "", fmt.Errorf("invalid redirect uri")
+	}
+
+	var ticket models.AuthTicket
+	if err := database.C.Where(models.AuthTicket{GrantToken: &token}).First(&ticket).Error; err != nil {
+		return "", "", err
+	} else if ticket.LastGrantAt != nil {
+		return "", "", fmt.Errorf("ticket was granted the first token, use refresh token instead")
+	}
+
+	return GetToken(ticket)
+}
+
+func RefreshToken(token string) (string, string, error) {
+	parseInt := func(str string) int {
+		val, _ := strconv.Atoi(str)
+		return val
+	}
+
+	var ticket models.AuthTicket
+	if claims, err := DecodeJwt(token); err != nil {
+		return "404", "403", err
+	} else if claims.Type != JwtRefreshType {
+		return "404", "403", fmt.Errorf("invalid token type, expected refresh token")
+	} else if err := database.C.Where(models.AuthTicket{
+		BaseModel: models.BaseModel{ID: uint(parseInt(claims.SessionID))},
+	}).First(&ticket).Error; err != nil {
+		return "404", "403", err
+	}
+
+	if ticket, err := RegenSession(ticket); err != nil {
+		return "404", "403", err
+	} else {
+		return GetToken(ticket)
+	}
+}
--- a/pkg/utils/request.go
+++ b/pkg/utils/request.go
@ -1,4 +1,4 @@
-package server
+package utils

 import (
 	"github.com/go-playground/validator/v10"
--- a/pkg/views/.eslintrc.cjs
+++ b/pkg/views/.eslintrc.cjs
@ -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",
-  },
-}
--- a/pkg/views/.eslintrc.js
+++ b/pkg/views/.eslintrc.js
@ -1,6 +0,0 @@
-module.exports = {
-  extends: ["plugin:vue/vue3-recommended"],
-  rules: {
-    "vue/multi-word-component-names": "off",
-  },
-}
--- a/pkg/views/.gitignore
+++ b/pkg/views/.gitignore
@ -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
--- a/pkg/views/.prettierrc.json
+++ b/pkg/views/.prettierrc.json
@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "tabWidth": 2,
-  "singleQuote": false,
-  "printWidth": 120,
-  "trailingComma": "all"
-}
--- a/pkg/views/.vscode/extensions.json
+++ b/pkg/views/.vscode/extensions.json
@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-}
--- a/pkg/views/README.md
+++ b/pkg/views/README.md
@ -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
-```
--- a/pkg/views/embed.go
+++ b/pkg/views/embed.go
@ -1,6 +0,0 @@
-package views
-
-import "embed"
-
-//go:embed all:dist
-var FS embed.FS
--- a/pkg/views/env.d.ts
+++ b/pkg/views/env.d.ts
@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/pkg/views/favicon.png
+++ b/pkg/views/favicon.png
--- a/pkg/views/index.gohtml
+++ b/pkg/views/index.gohtml
@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+
+{{template "views/partials/header"}}
+
+<body>
+{{embed}}
+</body>
+
+</html>
--- a/pkg/views/index.html
+++ b/pkg/views/index.html
@ -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>
--- a/pkg/views/layouts/auth.gohtml
+++ b/pkg/views/layouts/auth.gohtml
@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+
+{{template "views/partials/header"}}
+
+<body>
+<div class="wrapper-container">
+    <div class="wrapper-middleware">
+        {{if ne .info nil}}
+            <div class="animate__animated animate__fadeInDown alert">
+                <div class="content">{{.info}}</div>
+            </div>
+        {{end}}
+
+        <div class="wrapper-card">
+            {{embed}}
+        </div>
+    </div>
+</div>
+</body>
+
+<style>
+    .wrapper-container {
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .wrapper-middleware {
+        width: 100%;
+        min-width: 0;
+        max-width: min(800px, 100dvw);
+
+        margin: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .wrapper-card {
+        transition: all .3s;
+        height: auto;
+        overflow: auto;
+        display: grid;
+        grid-template-columns: 1fr;
+        justify-content: center;
+        border-radius: 28px;
+        padding: 56px;
+        gap: 0 2rem;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface)
+    }
+
+    .alert {
+        width: 100%;
+        max-width: 800px;
+        padding: 16px;
+        border-radius: 16px;
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        display: flex;
+        gap: 8px;
+    }
+
+    .alert .content {
+        flex-grow: 1;
+        text-transform: capitalize;
+    }
+
+    .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>
--- a/pkg/views/package.json
+++ b/pkg/views/package.json
@ -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"
-  }
-}
--- a/pkg/views/partials/header.gohtml
+++ b/pkg/views/partials/header.gohtml
@ -0,0 +1,81 @@
+<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">
+
+    <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+
+    <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>
+        :root, :host {
+            --md-sys-color-background: #fbf8ff;
+            --md-sys-color-on-background: #1b1b20;
+            --md-sys-color-surface: #fbf8ff;
+            --md-sys-color-surface-dim: #dcd9df;
+            --md-sys-color-surface-bright: #fbf8ff;
+            --md-sys-color-surface-container-lowest: #ffffff;
+            --md-sys-color-surface-container-low: #f6f2f9;
+            --md-sys-color-surface-container: #f0edf3;
+            --md-sys-color-surface-container-high: #eae7ed;
+            --md-sys-color-surface-container-highest: #e4e1e8;
+            --md-sys-color-on-surface: #1b1b20;
+            --md-sys-color-surface-variant: #e3e1ee;
+            --md-sys-color-on-surface-variant: #464650;
+            --md-sys-color-inverse-surface: #303035;
+            --md-sys-color-inverse-on-surface: #f3eff6;
+            --md-sys-color-outline: #777681;
+            --md-sys-color-outline-variant: #c7c5d2;
+            --md-sys-color-shadow: #000000;
+            --md-sys-color-scrim: #000000;
+            --md-sys-color-surface-tint: #53589d;
+            --md-sys-color-primary: #373c7e;
+            --md-sys-color-on-primary: #ffffff;
+            --md-sys-color-primary-container: #5b60a5;
+            --md-sys-color-on-primary-container: #ffffff;
+            --md-sys-color-inverse-primary: #bec2ff;
+            --md-sys-color-secondary: #5b5c79;
+            --md-sys-color-on-secondary: #ffffff;
+            --md-sys-color-secondary-container: #e2e1ff;
+            --md-sys-color-on-secondary-container: #454662;
+            --md-sys-color-tertiary: #662d5e;
+            --md-sys-color-on-tertiary: #ffffff;
+            --md-sys-color-tertiary-container: #8e5084;
+            --md-sys-color-on-tertiary-container: #ffffff;
+            --md-sys-color-error: #ba1a1a;
+            --md-sys-color-on-error: #ffffff;
+            --md-sys-color-error-container: #ffdad6;
+            --md-sys-color-on-error-container: #410002;
+        }
+
+        html, body {
+            padding: 0;
+            margin: 0;
+        }
+    </style>
+</head>
--- a/pkg/views/public/favicon.png
+++ b/pkg/views/public/favicon.png
--- a/pkg/views/signin.gohtml
+++ b/pkg/views/signin.gohtml
@ -0,0 +1,35 @@
+<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" action="/sign-in" method="POST">
+        <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-text-button type="button" href="/sign-up">{{.i18n.signup}}</md-text-button>
+            <md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
+        </div>
+    </form>
+</div>
--- a/pkg/views/signup.gohtml
+++ b/pkg/views/signup.gohtml
@ -0,0 +1,75 @@
+<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" action="/sign-up" method="POST">
+        <div class="columns-two">
+            <md-outlined-text-field
+                    class="block-field"
+                    name="name"
+                    type="text"
+                    autocomplete="username"
+                    label={{.i18n.username}}
+            >
+            </md-outlined-text-field>
+
+            <md-outlined-text-field
+                    class="block-field"
+                    name="nick"
+                    type="text"
+                    autocomplete="nickname"
+                    label={{.i18n.nickname}}
+            >
+            </md-outlined-text-field>
+        </div>
+
+
+        <md-outlined-text-field
+                class="block-field"
+                name="email"
+                type="email"
+                autocomplete="email"
+                label={{.i18n.email}}
+        >
+        </md-outlined-text-field>
+
+        <md-outlined-text-field
+                class="block-field"
+                name="password"
+                type="password"
+                autocomplete="new-password"
+                label={{.i18n.password}}
+        >
+        </md-outlined-text-field>
+
+        {{if eq .use_magic_token true}}
+            <md-outlined-text-field
+                    class="block-field"
+                    name="magic_token"
+                    type="password"
+                    autocomplete="off"
+                    label={{.i18n.magic_token}}
+            >
+            </md-outlined-text-field>
+        {{end}}
+
+        <div class="action-form-buttons">
+            <md-text-button type="button" href="/sign-in">{{.i18n.signin}}</md-text-button>
+            <md-filled-button type="submit">{{.i18n.next}}</md-filled-button>
+        </div>
+    </form>
+</div>
+
+<style>
+    .columns-two {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    }
+</style>
--- a/pkg/views/src/assets/utils.css
+++ b/pkg/views/src/assets/utils.css
@ -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;
-}
--- a/pkg/views/src/components/Copyright.vue
+++ b/pkg/views/src/components/Copyright.vue
@ -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>
--- a/pkg/views/src/components/NotificationList.vue
+++ b/pkg/views/src/components/NotificationList.vue
@ -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>
--- a/pkg/views/src/components/UserMenu.vue
+++ b/pkg/views/src/components/UserMenu.vue
@ -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>
--- a/pkg/views/src/components/auth/AccountLocator.vue
+++ b/pkg/views/src/components/auth/AccountLocator.vue
@ -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>
--- a/pkg/views/src/components/auth/CallbackNotify.vue
+++ b/pkg/views/src/components/auth/CallbackNotify.vue
@ -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>
--- a/pkg/views/src/components/auth/FactorApplicator.vue
+++ b/pkg/views/src/components/auth/FactorApplicator.vue
@ -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>
--- a/pkg/views/src/components/auth/FactorPicker.vue
+++ b/pkg/views/src/components/auth/FactorPicker.vue
@ -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>
--- a/pkg/views/src/index.vue
+++ b/pkg/views/src/index.vue
@ -1,5 +0,0 @@
-<template>
-  <v-app>
-    <router-view />
-  </v-app>
-</template>
--- a/pkg/views/src/layouts/master.vue
+++ b/pkg/views/src/layouts/master.vue
@ -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>
--- a/pkg/views/src/layouts/user-center.vue
+++ b/pkg/views/src/layouts/user-center.vue
@ -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>
--- a/pkg/views/src/main.ts
+++ b/pkg/views/src/main.ts
@ -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")
--- a/pkg/views/src/router/index.ts
+++ b/pkg/views/src/router/index.ts
@ -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
--- a/pkg/views/src/scripts/request.ts
+++ b/pkg/views/src/scripts/request.ts
@ -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)
-}
--- a/pkg/views/src/stores/notifications.ts
+++ b/pkg/views/src/stores/notifications.ts
@ -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 };
-});
--- a/pkg/views/src/stores/userinfo.ts
+++ b/pkg/views/src/stores/userinfo.ts
@ -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 }
-})
--- a/pkg/views/src/views/auth/claims.ts
+++ b/pkg/views/src/views/auth/claims.ts
@ -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.",
-  },
-}
--- a/pkg/views/src/views/auth/connect.vue
+++ b/pkg/views/src/views/auth/connect.vue
@ -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>
--- a/pkg/views/src/views/auth/sign-in.vue
+++ b/pkg/views/src/views/auth/sign-in.vue
@ -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>
--- a/pkg/views/src/views/auth/sign-up.vue
+++ b/pkg/views/src/views/auth/sign-up.vue
@ -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>
--- a/pkg/views/src/views/confirm.vue
+++ b/pkg/views/src/views/confirm.vue
@ -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>
--- a/pkg/views/src/views/dashboard.vue
+++ b/pkg/views/src/views/dashboard.vue
@ -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>
--- a/pkg/views/src/views/personal-page.vue
+++ b/pkg/views/src/views/personal-page.vue
@ -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>
--- a/pkg/views/src/views/personalize.vue
+++ b/pkg/views/src/views/personalize.vue
@ -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>
--- a/pkg/views/src/views/security.vue
+++ b/pkg/views/src/views/security.vue
@ -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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
LittleSheep	e79441dbc5	✨ Sign up & Sign in	2024-04-20 22:50:09 +08:00
LittleSheep	87cccefddb	✨ New ticket ways	2024-04-20 19:07:17 +08:00
LittleSheep	0d78f34535	♻️ Refactor frontend	2024-04-20 14:05:50 +08:00