enhances sign-up form with direct input binding; adds error and succe…

…ss toast styles for improved feedback
UmbraJS · Feb 26, 2025 · 96b741b · 96b741b
1 parent 2bb1ef6
commit 96b741b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/apps/hub/app/pages/signin.vue b/apps/hub/app/pages/signin.vue
@@ -34,11 +34,15 @@ async function signIn() {
 async function signUp() {
   if (loading.value) return
   loading.value = true
+
+  console.log('rex stuff: ', email.value, password.value, name.value)
+
   const { error } = await auth.signUp.email({
     email: email.value,
     password: password.value,
     name: name.value,
   })
+  console.log('rex: ', error)
   if (error) {
     toast.error(error.message || 'Error signing up')
   } else {
@@ -51,6 +55,10 @@ async function signUp() {
 
 <template>
   <div class="signin">
+    <p>email: {{ email }}</p>
+    <p>password: {{ password }}</p>
+    <p>name: {{ name }}</p>
+    <!-- 
     <form @submit.prevent="signIn">
       <Input v-model="email" type="email" label="Email" />
       <Input v-model="password" type="password" label="Password" />
@@ -62,11 +70,11 @@ async function signUp() {
         <Icon name="i-simple-icons-github" />
         <span>Sign In with Github</span>
       </Button>
-    </form>
+    </form> -->
     <form @submit.prevent="signUp">
-      <Input v-model="email" type="email" label="Email" />
-      <Input v-model="password" type="password" label="Password" />
-      <Input v-model="name" type="name" label="Name" />
+      <Input @input="(e) => (email = e.target.value)" type="email" label="Email" />
+      <Input @input="(e) => (password = e.target.value)" type="password" label="Password" />
+      <Input @input="(e) => (name = e.target.value)" type="name" label="Name" />
       <Button type="submit">Sign Up</Button>
     </form>
   </div>

diff --git a/packages/nobel/components/ui/Toaster.vue b/packages/nobel/components/ui/Toaster.vue
@@ -13,17 +13,54 @@ import { Toaster } from 'vue-sonner'
         actionButton: 'toast-action-button',
         cancelButton: 'toast-cancel-button',
         closeButton: 'toast-close-button',
+        error: 'toast-error',
+        success: 'toast-success',
+        info: 'toast-info',
       },
     }"
   />
 </template>
 
 <style lang="scss">
 .toast {
-  background-color: var(--base-20);
-  color: var(--base-contrast);
+  background-color: var(--color-80);
+  color: var(--color-contrast);
   border-radius: var(--radius);
   padding: var(--space-1);
-  border: solid var(--border-size) var(--accent-60);
+  border: solid var(--border-size) var(--color-80);
+}
+
+.toast-error {
+  --color: var(--warning);
+  --color-10: var(--warning-10);
+  --color-20: var(--warning-20);
+  --color-30: var(--warning-30);
+  --color-40: var(--warning-40);
+  --color-50: var(--warning-50);
+  --color-60: var(--warning-60);
+  --color-70: var(--warning-70);
+  --color-80: var(--warning-80);
+  --color-90: var(--warning-90);
+  --color-100: var(--warning-100);
+  --color-110: var(--warning-110);
+  --color-120: var(--warning-120);
+  --color-contrast: var(--warning-contrast);
+}
+
+.toast-success {
+  --color: var(--success);
+  --color-10: var(--success-10);
+  --color-20: var(--success-20);
+  --color-30: var(--success-30);
+  --color-40: var(--success-40);
+  --color-50: var(--success-50);
+  --color-60: var(--success-60);
+  --color-70: var(--success-70);
+  --color-80: var(--success-80);
+  --color-90: var(--success-90);
+  --color-100: var(--success-100);
+  --color-110: var(--success-110);
+  --color-120: var(--success-120);
+  --color-contrast: var(--success-contrast);
 }
 </style>