Skip to content

Commit

Permalink
Register Component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Sep 15, 2023
1 parent c99cb67 commit 560ccb3
Showing 1 changed file with 53 additions and 42 deletions.
95 changes: 53 additions & 42 deletions api/web/src/components/Register.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,30 @@
<div class="card card-md">
<TablerLoading v-if='loading.page' desc='Creating User'/>
<div v-else-if='success' class='card-body'>
<div class='text-center'>
<h3 class='txt-h4 py6'>Successfully Registered!</h3>
<div class='text-center' style='margin-bottom: 24px;'>
<img src='/logo.jpg' height='150'/>
</div>
<div class='col col--12 flex flex--center-main'>

<h2 class="h2 text-center mb-4">Successfully Registered!</h2>
<div class='text-center'>
<p class='txt-h4 py6'>Please check your email for a verification link!</p>
</div>
<div class='col col--12 flex flex--center-main'>
<button :disabled='loading.resend || resent' @click='resend' class='mt12 w-full color-gray color-green-on-hover btn btn--stroke round'>
<template v-if='!loading.resend'>
Resend Email
</template>
<template v-else-if='resent'>
Email Resent
</template>
<template v-else>
<div class='col col--12 flex flex--center-main'>
<div class='loading loading--s'></div>
</div>
</template>
</button>
</div>

<div class='col col--12 flex flex--center-main'>
<button @click='$router.push("/login")' class='mt12 w-full color-gray color-green-on-hover btn btn--stroke round'>Login</button>
</div>
<button :disabled='loading.resend || resent' @click='resend' class='mt12 w-full color-gray color-green-on-hover btn btn--stroke round'>
<template v-if='!loading.resend'>
Resend Email
</template>
<template v-else-if='resent'>
Email Resent
</template>
<template v-else>
<div class='col col--12 flex flex--center-main'>
<div class='loading loading--s'></div>
</div>
</template>
</button>

<button @click='$router.push("/login")' class='btn btn-primary w-full mt-4'>Login</button>
</div>
<div v-else class="card-body">
<div class='text-center' style='margin-bottom: 24px;'>
Expand All @@ -40,11 +39,11 @@

<h2 class="h2 text-center mb-4">Create An Account</h2>

<TablerInput label='Username' v-model='username' class='my-2'/>
<TablerInput label='Email' v-model='email' class='my-2'/>
<TablerInput type='password' label='Password' v-model='password' class='my-2'/>
<TablerInput label='Username' v-model='body.username' :error='errors.username' class='my-2'/>
<TablerInput label='Email' v-model='body.email' :error='errors.email' class='my-2'/>
<TablerInput type='password' label='Password' v-model='body.password' :error='errors.password' class='my-2'/>

<button @click='createLogin' type="submit" class="btn btn-primary w-100 mt-4">Sign In</button>
<button @click='register' type="submit" class="btn btn-primary w-100 mt-4">Register</button>
</div>
</div>
<div class="text-center text-muted mt-3">
Expand All @@ -59,6 +58,7 @@

<script>
import {
TablerLoading,
TablerInput
} from '@tak-ps/vue-tabler';
Expand All @@ -74,9 +74,16 @@ export default {
page: false,
resend: false
},
email: '',
username: '',
password: ''
body: {
email: '',
username: '',
password: ''
},
errors: {
email: '',
username: '',
password: ''
}
}
},
methods: {
Expand All @@ -85,14 +92,14 @@ export default {
},
resend: async function() {
if (!this.success) return;
if (!this.username.length) return;
if (!this.body.username.length) return;
this.loading.resend = true;
await window.std('/api/user', {
method: 'POST',
body: {
username: this.username,
username: this.body.username,
}
});
Expand All @@ -103,27 +110,31 @@ export default {
register: async function() {
this.attempted = true;
if (!this.username.length) return;
if (!this.password.length) return;
if (!this.email.length) return;
for (const field of ['username', 'email', 'password']) {
if (!this.body[field]) this.errors[field] = 'Cannot be empty';
else this.errors[field] = '';
}
for (const e in this.errors) if (this.errors[e]) return;
this.loading.page = true;
this.created = await window.std('/api/user', {
method: 'POST',
body: {
username: this.username,
email: this.email,
password: this.password
}
});
try {
this.created = await window.std('/api/user', {
method: 'POST', body: this.body
});
this.success = true;
this.success = true;
} catch (err) {
this.loading.page = false;
throw err;
}
this.loading.page = false;
}
},
components: {
TablerLoading,
TablerInput
}
}
Expand Down

0 comments on commit 560ccb3

Please sign in to comment.