Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add sigup page...again

Browse source 
Had it previously, but broke it for the single-page app migration.
This commit is contained in:
Eli Ribble 2026-04-17 17:48:18 +00:00
parent b6e1bffd79
commit ba8c0016ac
No known key found for this signature in database
5 changed files with 257 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
html/template/sync/signup.html
View file

@ -41,7 +41,7 @@
<p class="text-muted">Join us today to get started</p>
</div>
<form method="POST" action="/signup">
<form method="POST" action="/api/signup">
<div class="mb-3">
<label for="name" class="form-label">Display Name</label>
<input type="text" class="form-control" name="name" required />

20
ts/AppSync.vue
View file

@ -2,22 +2,4 @@
<router-view />
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useSessionStore } from "@/store/session";
import { Session } from "@/type/api";
import { router } from "@/router";
const session = useSessionStore();
onMounted(() => {
session
.get()
.then((session: Session) => {
console.log("session loaded by AppSync", session);
})
.catch((e) => {
console.log("root session not loaded", e);
router.push("/signin");
});
});
</script>
<script setup lang="ts"></script>

8
ts/router.ts
View file

@ -30,6 +30,7 @@ import ReviewRoot from "@/view/review/Root.vue";
import ReviewSite from "@/view/review/Site.vue";
import Signin from "@/view/Signin.vue";
import Signout from "@/view/Signout.vue";
import Signup from "@/view/Signup.vue";
import Sudo from "@/view/Sudo.vue";
import { apiClient } from "@/client";
@ -182,6 +183,11 @@ const routes: RouteRecordRaw[] = [
name: "Signout",
path: "/signout",
},
{
component: Signup,
name: "Signup",
path: "/signup",
},
// Catch-all route - must be last
{
path: "/:pathMatch(.*)*",
@ -197,7 +203,7 @@ export const router = createRouter({
// Global navigation guard
router.beforeEach(async (to, from) => {
if (to.fullPath == "/signin") {
if (to.fullPath == "/signin" || to.fullPath == "/signup") {
return;
}
const storeSession = useSessionStore();

19
ts/view/Authenticated.vue
View file

@ -19,9 +19,24 @@
</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import Sidebar from "@/components/layout/Sidebar.vue";
import MainContent from "@/components/layout/MainContent.vue";
import { Session } from "@/type/api";
import { router } from "@/router";
import { useSessionStore } from "@/store/session";
const session = useSessionStore();
import Sidebar from "@/components/layout/Sidebar.vue";
import MainContent from "@/components/layout/MainContent.vue";
onMounted(() => {
session
.get()
.then((session: Session) => {
console.log("session loaded by Authenticated", session);
})
.catch((e) => {
console.log("root session not loaded", router);
router.push("/signin");
});
});
</script>

231
ts/view/Signup.vue Normal file
View file

@ -0,0 +1,231 @@
<style scoped>
.register-container {
max-width: 900px;
margin: 0 auto;
}
.register-box {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
.register-form-section {
padding: 40px;
}
.register-info-section {
padding: 40px;
background-color: #f8f9fa;
}
.register-header {
margin-bottom: 25px;
}
.logo-area {
text-align: center;
margin-bottom: 30px;
}
</style>
<template>
<div
class="container min-vh-100 d-flex align-items-center justify-content-center py-5"
>
<div class="register-container">
<div class="row register-box g-0">
<!-- Left side: Registration Form -->
<div class="col-md-6 register-form-section">
<div class="register-header">
<h2>Create an Account</h2>
<p class="text-muted">Join us today to get started</p>
</div>
<!-- Error message display -->
<div v-if="errorMessage" class="alert alert-danger" role="alert">
{{ errorMessage }}
</div>
<div class="mb-3">
<label for="name" class="form-label">Display Name</label>
<input
type="text"
class="form-control"
:disalbel="isLoading"
name="name"
required
v-model="formData.name"
/>
</div>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input
class="form-control"
:disabled="isLoading"
name="username"
required
type="username"
v-model="formData.username"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
type="password"
class="form-control"
name="password"
required
v-model="formData.password"
/>
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
:disabled="isLoading"
name="terms"
required
v-model="formData.terms"
/>
<label class="form-check-label" for="terms"
>I agree to the <a href="#">Terms of Service</a> and
<a href="#">Privacy Policy</a></label
>
</div>
<div class="d-grid gap-2">
<ButtonLoading
@click="handleRegister()"
text="Register"
variant="primary"
:loading="isLoading"
:disabled="
!(formData.name && formData.username && formData.password)
"
/>
</div>
<div class="mt-3 text-center">
<p>
Already have an account?
<RouterLink to="/signin">Sign in</RouterLink>
</p>
</div>
</div>
<!-- Right side: Account Information -->
<div class="col-md-6 register-info-section">
<div>
<div class="logo-area">
<img src="/static/img/nidus-logo-256-transparent.png" />
</div>
<div class="mb-4">
<h5>Who should register?</h5>
<p>
This platform is designed for professionals who need to manage
projects and collaborate with team members. Whether you're a
freelancer, small business owner, or part of a larger
organization, our tools can help streamline your workflow.
</p>
</div>
<div class="mb-4">
<h5>What happens after registration?</h5>
<p>
After you register with your email, you'll receive a
confirmation message with instructions to complete your account
setup. You'll then have access to all features and can customize
your workspace based on your specific needs.
</p>
</div>
<div class="mb-3">
<small class="text-muted"
>For any questions about account types or registration, please
contact our support team at support@yourproduct.com</small
>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import ButtonLoading from "@/components/common/ButtonLoading.vue";
const router = useRouter();
// Form data
const formData = ref({
name: "",
username: "",
password: "",
terms: false,
});
// UI state
const isLoading = ref(false);
const errorMessage = ref("");
// Handle form submission
const handleRegister = async () => {
console.log("registering", formData.value.terms);
// Clear previous errors
errorMessage.value = "";
// Client-side validation
if (
!formData.value.name ||
!formData.value.username ||
!formData.value.password
) {
errorMessage.value = "Please fill in all required fields";
return;
}
if (!formData.value.terms) {
errorMessage.value =
"You must agree to the Terms of Service and Privacy Policy";
return;
}
isLoading.value = true;
try {
const response = await fetch("/api/signup", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: formData.value.username,
name: formData.value.name,
password: formData.value.password,
terms: formData.value.terms,
}),
});
if (!response.ok) {
const errorData = await response
.json()
.catch(() => ({ error: "Registration failed" }));
throw new Error(
errorData.error || `HTTP error! status: ${response.status}`,
);
}
// Redirect to the path returned by the backend (default: "/")
router.push("/_/dash");
} catch (error) {
console.error("Registration error:", error);
errorMessage.value =
error instanceof Error
? error.message
: "An unexpected error occurred during registration";
} finally {
isLoading.value = false;
}
};
</script>