Skip to content

Commit

Permalink
Nicer Registration Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Sep 15, 2023
1 parent 1edfcab commit c99cb67
Showing 1 changed file with 80 additions and 86 deletions.
166 changes: 80 additions & 86 deletions api/web/src/components/Register.vue
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,67 @@
<template>
<div class='col col--12 grid pt12'>
<template v-if='loading.page'>
<div class='flex flex--center-main w-full py24'>
<div class='loading.page'></div>
</div>
</template>
<template v-else-if='success'>
<div class='col col--12 flex flex--center-main'>
<h3 class='txt-h4 py6'>Successfully Registered!</h3>
</div>
<div class='col col--12 flex flex--center-main'>
<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 class="page page-center">
<div class="container container-normal py-4">
<div class="row align-items-center g-4">
<div class="col-lg">
<div class="container-tight">
<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>
<div class='col col--12 flex flex--center-main'>
<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>
</div>
</template>
</button>
</div>

<div class='col col--12 flex flex--center-main'>
<button @click='login' class='mt12 w-full color-gray color-green-on-hover btn btn--stroke round'>Login</button>
</div>
</template>
<template v-else>
<div class='col col--12 flex flex--center-main'>
<h3 class='txt-h4 py6'>Register</h3>
</div>

<div class='col col--12 flex flex--center-main'>
<div class='w240 col col--12 grid grid--gut12'>
<label class='mt12'>Username:</label>
<input :class='{
"input--border-red": attempted && !username
}' v-model='username' type='text' class='input'/>
<div v-else class="card-body">
<div class='text-center' style='margin-bottom: 24px;'>
<img src='/logo.jpg' height='150'/>
</div>

<label class='mt12'>Email:</label>
<input :class='{
"input--border-red": attempted && !email
}' v-model='email' type='text' class='input'/>
<h2 class="h2 text-center mb-4">Create An Account</h2>

<label class='mt12'>Password:</label>
<input :class='{
"input--border-red": attempted && !password
}' v-model='password' type='password' class='input'/>
<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'/>

<button @click='register' class='mt12 w-full color-gray color-green-on-hover btn btn--stroke round'>Register</button>
<button @click='createLogin' type="submit" class="btn btn-primary w-100 mt-4">Sign In</button>
</div>
</div>
<div class="text-center text-muted mt-3">
Have an account already? <a @click='$router.push("/login")' class='cursor-pointer'>Login</a>
</div>
</div>
</div>

</template>
</div>
</div>
</div>
</template>

<script>
import {
TablerInput
} from '@tak-ps/vue-tabler';
export default {
name: 'Register',
props: [],
Expand All @@ -85,52 +84,47 @@ export default {
this.$router.push('/login');
},
resend: async function() {
try {
if (!this.success) return;
if (!this.username.length) return;
if (!this.success) return;
if (!this.username.length) return;
this.loading.resend = true;
this.loading.resend = true;
await window.std('/api/user', {
method: 'POST',
body: {
username: this.username,
}
});
await window.std('/api/user', {
method: 'POST',
body: {
username: this.username,
}
});
this.resent = true;
} catch (err) {
this.$emit('err', err);
}
this.resent = true;
this.loading.resend = false;
},
register: async function() {
try {
this.attempted = true;
this.attempted = true;
if (!this.username.length) return;
if (!this.password.length) return;
if (!this.email.length) return;
if (!this.username.length) return;
if (!this.password.length) return;
if (!this.email.length) return;
this.loading.page = true;
this.loading.page = true;
this.created = await window.std('/api/user', {
method: 'POST',
body: {
username: this.username,
email: this.email,
password: this.password
}
});
this.created = await window.std('/api/user', {
method: 'POST',
body: {
username: this.username,
email: this.email,
password: this.password
}
});
this.success = true;
} catch (err) {
this.$emit('err', err);
}
this.success = true;
this.loading.page = false;
}
},
components: {
TablerInput
}
}
</script>

0 comments on commit c99cb67

Please sign in to comment.