Page MenuHomePhorge
Files F117753702

No OneTemporary
Actions

Authored By
Unknown
Size
5 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/resources/vue/components/Register.vue b/src/resources/vue/components/Register.vue
index 0f3800ca..4a9efed9 100644
--- a/src/resources/vue/components/Register.vue
+++ b/src/resources/vue/components/Register.vue
@@ -1,79 +1,99 @@
<template>
<div class="container">
- <div class="card">
+ <div class="card" id="step1">
<div class="card-body">
<h4 class="card-title">Step 1/3</h4>
<p class="card-text">
Sign up to start your free month.
</p>
- <form id="step1">
+ <form v-on:submit.prevent="submitStep1">
<div class="form-group">
<label for="register_name" class="sr-only">Your Name</label>
<input type="text" class="form-control" id="register_name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="register_email" class="sr-only">Existing Email or Phone Number</label>
<input type="text" class="form-control" id="register_email" placeholder="Existing Email or Phone Number" required>
</div>
- <button class="btn btn-primary" type="button">Continue</button>
+ <button class="btn btn-primary" type="submit">Continue</button>
</form>
</div>
</div>
- <div class="card">
+ <div class="card d-none" id="step2">
<div class="card-body">
<h4 class="card-title">Step 2/3</h4>
<p class="card-text">
We sent out a confirmation code to PHONE/EMAIL.
Enter the code we sent you, or click the link in the message.
</p>
- <form id="step2">
+ <form v-on:submit.prevent="submitStep2">
<div class="form-group">
<label for="register_code" class="sr-only">Confirmation Code</label>
<input type="text" class="form-control" id="register_code" placeholder="Confirmation Code" required>
</div>
- <button class="btn btn-secondary" type="button">Back</button>
- <button class="btn btn-primary" type="button">Continue</button>
+ <button class="btn btn-secondary" type="button" v-on:click="stepBack">Back</button>
+ <button class="btn btn-primary" type="submit">Continue</button>
</form>
</div>
</div>
- <div class="card">
+ <div class="card d-none" id="step3">
<div class="card-body">
<h4 class="card-title">Step 3/3</h4>
<p class="card-text">
Create your Kolab identity (you can choose additional addresses later).
</p>
- <form id="step3">
+ <form v-on:submit.prevent="submitStep3">
<div class="form-group">
<label for="register_login" class="sr-only"></label>
- <input type="text" class="form-control" id="register_login" required>
+ <div class="input-group">
+ <input type="text" class="form-control" id="register_login" required>
+ <span class="input-group-text border-left-0 border-right-0 rounded-0">@</span>
+ <select class="custom-select" id="register_domain">
+ <option value="kolabnow.com">kolabnow.com</option>
+ </select>
+ </div>
</div>
<div class="form-group">
<label for="register_password" class="sr-only">Password</label>
<input type="password" class="form-control" id="register_password" placeholder="Password" required>
</div>
<div class="form-group">
<label for="register_confirm" class="sr-only">Confirm Password</label>
<input type="password" class="form-control" id="register_confirm" placeholder="Confirm Password" required>
</div>
- <button class="btn btn-secondary" type="button">Back</button>
- <button class="btn btn-primary" type="button">Submit</button>
+ <button class="btn btn-secondary" type="button" v-on:click="stepBack">Back</button>
+ <button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
- data() {
- return {
- data: 'nothing'
+ methods: {
+ submitStep1() {
+ // TODO: submit data to the API, validate and get verification code
+ $('#step1').addClass('d-none')
+ $('#step2').removeClass('d-none').find('input').first().focus()
+ },
+ submitStep2() {
+ // TODO: submit the code to API for verification
+ $('#step2').addClass('d-none')
+ $('#step3').removeClass('d-none').find('input').first().focus()
+ },
+ submitStep3() {
+ // TODO: submit the data to API to create the user account
+ },
+ stepBack(e) {
+ var card = $(e.target).closest('.card')
+
+ card.prev().removeClass('d-none')
+ card.addClass('d-none').find('form')[0].reset()
}
- },
- mounted() {
}
}
</script>

File Metadata

Mime Type
text/x-diff
Expires
Sat, Apr 4, 5:57 AM (1 w, 2 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
18822773
Default Alt Text
(5 KB)

Event Timeline