JSFiddle - React, Tailwind, and code Playground
CSS
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<style>
JavaScript
login = (email, password, callback) ->
setTimeout ->
if email is '[email protected]' and password is 'test'
callback 'success'
else
callback 'An error occurred logging in. Try email `[email protected]` and password `test`.'
vex.dialog.prompt
className: 'vex-theme-default'
message: 'Log in with your email and password'
input: '''
<input name="email" type="email" class="vex-dialog-prompt-input" placeholder="[email protected]" value="" required>
<input name="password" type="password" class="vex-dialog-prompt-input" placeholder="password" value="" required>
'''
onSubmit: (event) ->
event.preventDefault()
event.stopPropagation()
$vexContent = $(@).parent()
login @email.value, @password.value, (message) ->
if message is 'success'
vex.close $vexContent.data().vex.id
else
console.error message