diff --git a/.gitignore b/.gitignore index 66f00b6..c62c698 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ logs .env .env.* !.env.example + +db.sqlite-* \ No newline at end of file diff --git a/assets/common.css b/assets/common.css index 7922b2d..96583a8 100644 --- a/assets/common.css +++ b/assets/common.css @@ -192,13 +192,19 @@ html.light-mode .light-block { .input-form.input-form-wide { width: 600px; + min-height: 300px; + justify-content: center; + align-items: stretch; } .input-form { width: 400px; + min-height: 200px; + justify-content: center; + align-items: center; display: flex; flex-direction: column; - padding: 0 2em 2em 2em; + padding: 2em 2em 2em 2em; border: 1px solid var(--background-modifier-border); } @@ -209,6 +215,7 @@ html.light-mode .light-block { } .input-form h1 { + margin-top: 0px; font-size: x-large; } @@ -253,4 +260,14 @@ html.light-mode .light-block { .password-validation-item.validation-error { color: var(--text-error); +} + +.input-form .loading { + width: 24px; + height: 24px; + border: 4px solid var(--color-purple); + border-right-color: transparent; + border-radius: 50%; + box-sizing: content-box; + animation: rotate 1s linear infinite; } \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 996f702..04cd812 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/Input.vue b/components/Input.vue index b0eeeea..321d562 100644 --- a/components/Input.vue +++ b/components/Input.vue @@ -6,12 +6,15 @@ interface Prop } const props = defineProps(); const model = defineModel(); + +const err = ref(props.error); \ No newline at end of file diff --git a/composables/useAuth.ts b/composables/useAuth.ts index d2efa9d..a82456c 100644 --- a/composables/useAuth.ts +++ b/composables/useAuth.ts @@ -6,49 +6,91 @@ export interface Auth { id: Ref; data: Ref>; - token: Ref; - session_id: Ref; + sessionId: Ref; status: Ref; lastRefresh: Ref; - register: (username: string, email: string, password: string, data?: Record) => AuthStatus; - login: (usernameOrEmail: string, password: string) => AuthStatus; - logout: () => AuthStatus; + register: (username: string, email: string, password: string, data?: Record) => Promise; + login: (usernameOrEmail: string, password: string) => Promise; + logout: () => Promise; - refresh: () => AuthStatus; + refresh: () => Promise; } -const id = useState("auth:id", () => 0); -const data = useState("auth:data", () => {}); -const token = useState("auth:token", () => ''); -const session_id = useState("auth:session_id", () => 0); -const status = useState("auth:status", () => 0); -const lastRefresh = useState("auth:date", () => new Date()); +async function register(username: string, email: string, password: string, additionalData?: Record): Promise +{ + const id = useState("auth:id"); + const data = useState("auth:data"); + const sessionId = useState("auth:sessionId"); + const status = useState("auth:status"); + const lastRefresh = useState("auth:date"); + status.value = AuthStatus.loading; -function register(username: string, email: string, password: string, data?: Record): AuthStatus -{ - - return AuthStatus.disconnected; + try + { + const result = await $fetch("/api/auth/register", { + method: 'POST', + body: { username, email, password, additionalData }, + ignoreResponseError: true, + }); + + if(result.success) + { + id.value = result.id!; + data.value = { ...additionalData, username: username, email: email }; + sessionId.value = result.sessionId!; + status.value = AuthStatus.connected; + lastRefresh.value = new Date(); + + return; + } + else if(result.error) + { + status.value = AuthStatus.disconnected; + + return result.error; + } + else + { + status.value = AuthStatus.disconnected; + + return; + } + } + catch(e) { + console.log(JSON.stringify(e)); + status.value = AuthStatus.disconnected; + } } -function login(usernameOrEmail: string, password: string): AuthStatus +async function login(usernameOrEmail: string, password: string): Promise { - return AuthStatus.disconnected; + const status = useState("auth:status"); + status.value = AuthStatus.disconnected; } -function logout(): AuthStatus +async function logout(): Promise { - return AuthStatus.disconnected; + const status = useState("auth:status"); + status.value = AuthStatus.disconnected; } -function refresh(): AuthStatus +async function refresh(): Promise { - return AuthStatus.disconnected; + const status = useState("auth:status"); + status.value = AuthStatus.disconnected; } export default function useAuth(): Auth { + const id = useState("auth:id", () => 0); + const data = useState("auth:data", () => { }); + const sessionId = useState("auth:sessionId", () => ''); + const status = useState("auth:status", () => AuthStatus.disconnected); + + const lastRefresh = useState("auth:date", () => new Date()); + return { - id, data, token, session_id, status, lastRefresh, + id, data, sessionId, status, lastRefresh, register, login, logout, refresh }; } \ No newline at end of file diff --git a/db.sqlite b/db.sqlite index 3d36073..fee7ba9 100644 Binary files a/db.sqlite and b/db.sqlite differ diff --git a/middleware/auth.ts b/middleware/auth.ts index fde17fc..8ad1e51 100644 --- a/middleware/auth.ts +++ b/middleware/auth.ts @@ -1,5 +1,7 @@ export default defineNuxtRouteMiddleware((to) => { const meta = to.meta.auth; - //to. + //useSession(to.) + + return to; }) \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index 364e4ab..890aefb 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -5,7 +5,8 @@ export default defineNuxtConfig({ modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode"], css: ['~/assets/common.css', '~/assets/global.css'], runtimeConfig: { - dbFile: '' + dbFile: '', + sessionPassword: '699c46bd-9aaa-4364-ad01-510ee4fe7013' }, components: [ { diff --git a/pages/user/register.vue b/pages/user/register.vue index d58189a..3d7fb87 100644 --- a/pages/user/register.vue +++ b/pages/user/register.vue @@ -16,7 +16,7 @@ const state = reactive({ const confirmPassword = ref(""); -const { status, signUp } = useAuth(); +const { status, register } = useAuth(); const checkedLength = computed(() => state.password.length >= 8 && state.password.length <= 128); const checkedLowerUpper = computed(() => state.password.toLowerCase() !== state.password && state.password.toUpperCase() !== state.password); @@ -26,17 +26,23 @@ const checkedSymbol = computed(() => " !\"#$%&'()*+,-./:;<=>?@[]^_`{|}~".split(" const usernameError = ref(""); const emailError = ref(""); -function register(): void +async function submit() { const data = schema.safeParse(state); if(data.success && state.password !== "" && confirmPassword.value === state.password) { - try { - signUp({ ...data.data }, { redirect: true, callbackUrl: '/' }); - } catch(e) { - usernameError.value = e?.data?.find(e => e.path.includes("username"))?.message ?? ""; - emailError.value = e?.data?.find(e => e.path.includes("email"))?.message ?? ""; + let errors = await register(data.data.username, data.data.email, data.data.password, {}); + + if(status.value === AuthStatus.connected) + { + await navigateTo('/'); + } + else + { + errors = errors?.issues ?? errors; + usernameError.value = errors?.find((e: any) => e.path.includes("username"))?.message ?? ""; + emailError.value = errors?.find((e: any) => e.path.includes("email"))?.message ?? ""; } } else @@ -48,27 +54,41 @@ function register(): void