Last active
December 26, 2017 12:01
-
-
Save Auwalms/87b0c2cf18c1dd91f29c4709d3c6f4ad to your computer and use it in GitHub Desktop.
Signup screen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<div is="sui-container"> | |
<sui-grid> | |
<sui-grid-row> | |
<sui-grid-column :width="7" class="centered" > | |
<sui-segment centered class="signup-div"> | |
<sui-image :src="require('./../../assets/dummy-img.png')" size="tiny" shape="circular" class="centered" /> | |
<form is="sui-form" @submit="signupUser"> | |
<div is="sui-form-field"> | |
<input name="PCN ID" v-model="signupForm.pcn_id" v-validate="'required|alpha_num'" :class="{'input': true, 'has-error': errors.has('PCN ID') }" type="text" placeholder="PCN ID" required> | |
<span v-show="errors.has('PCN ID')" class="has-error">{{ errors.first('PCN ID') }}</span> | |
</div> | |
<div is="sui-form-field"> | |
<input name="First Name" v-model="signupForm.first_name" v-validate="'required|alpha'" :class="{'input': true, 'has-error': errors.has('First Name') }" type="text" placeholder="First Name" required> | |
<span v-show="errors.has('First Name')" class="has-error">{{errors.first('First Name') }}</span> | |
</div> | |
<div is="sui-form-field"> | |
<input name="Last Name" v-model="signupForm.last_name" v-validate="'required|alpha'" :class="{'input': true, 'has-error': errors.has('Last Name') }" type="text" placeholder="Last Name" required> | |
<span v-show="errors.has('Last Name')" class="has-error">{{ errors.first('Last Name') }}</span> | |
</div> | |
<div is="sui-form-field"> | |
<input type="email" v-model="signupForm.email" name='email' v-validate="'required|email'" :class="{'input': true, 'input-error': errors.has('email') }" placeholder="Email Address" required/> | |
<span v-show="errors.has('email')" class="has-error">{{ errors.first('email') }}</span> | |
</div> | |
<div is="sui-form-field"> | |
<input name="Phone Number" v-model="signupForm.phone" v-validate="'required|numeric'" :class="{'input': true, 'has-error': errors.has('Phone Number') }" type="tel" placeholder="Phone Number" required> | |
<span v-show="errors.has('Phone Number')" class="has-error">{{ errors.first('Phone Number') }}</span> | |
</div> | |
<div is="sui-form-field"> | |
<input name="password" v-model='signupForm.password' v-validate="'required|min:8'" :class="{'input': true, 'has-error': errors.has('password') }" type="password" placeholder="Password" required> | |
<span v-show="errors.has('password')" class="has-error">{{ errors.first('password') }}</span> | |
</div> | |
<div is="sui-form-field"> | |
<input name="Confirm Password" v-validate="'required|confirmed:password'" :class="{'input': true, 'has-error': errors.has('Confirm Password') }" type="password" placeholder="Confirm Password" required> | |
<span v-show="errors.has('Confirm password')" class="has-error">{{ errors.first('Confirm Password') }}</span> | |
</div> | |
<button is="sui-button" type="submit" role="submit" name="submit" fluid class="orange-button" v-bind:disabled="errors.any()">Sign Up</button> | |
<div is="sui-form-field" class="terms-wrap">Continuing means you accept | |
our Terms & Privacy Policy | |
</div> | |
</form> | |
</sui-segment> | |
</sui-grid-column> | |
</sui-grid-row> | |
</sui-grid> | |
</div> | |
</div> | |
</template> | |
<script> | |
// import axios from axios; | |
export default { | |
name: "sign-up", | |
data() { | |
return { | |
signupForm: {}, | |
loading: false | |
}; | |
}, | |
methods: { | |
signupUser(evt) { | |
evt.preventDefault(); | |
const userDetails = `pcn-id=${this.signupForm.pcn_id}&first-name=${this.signupForm.first_name}&last-name=${this.signupForm.last_name}&email=${this.signupForm.email}&phone=${this.signupForm.phone}&password=${this.signupForm.password}&role=super-admin`; | |
alert(userDetails) | |
// axios.post(`${BaseUrl}/signup?${userDetails}`) | |
// .then(response => { | |
// if(response.status){ | |
// alert('failed to signup') | |
// } | |
// //add credentials to cookies/localStorage | |
// }) | |
// .catch(error => { | |
// alert('Network Issue, Please try again later!') | |
// }) | |
} | |
} | |
}; | |
</script> | |
<style lang="scss" scoped> | |
.signup-div { | |
min-height: 500px; | |
padding: 40px 40px !important; | |
margin-top: 30px !important; | |
> .form { | |
padding: 50px 30px; | |
> .terms-wrap { | |
text-align: center; | |
} | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
remove the preventDefault code, comment out line 67 and alert just some string lets see