Skip to content

Instantly share code, notes, and snippets.

@sellomkantjwa

sellomkantjwa/index.html

Last active February 25, 2018 20:08
Show Gist options
  • Save sellomkantjwa/14da94687ba8759152ac807d8a4b837c to your computer and use it in GitHub Desktop.
Save sellomkantjwa/14da94687ba8759152ac807d8a4b837c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
<title>Vue Recaptcha Demo </title>
</head>
<body>
<div id="app">
<div>
<h1 style="text-align: center">Vue Recaptcha Demo</h1>
<div class="content">
<div v-show="!sucessfulServerResponse" class="auth-form-wrapper">
<form class="auth-form" @submit.prevent="submit">
<div class="header">
<h1>
Sign up
</h1>
</div>
<div class="input-group">
<label for="email">email
</label>
<input v-model="email" required placeholder="name@domain.com" class="" name="email"
id="email"/>
</div>
<div class="input-group">
<label for="password">password</label>
<input required v-model="password" type="password" placeholder="password" class=""
name="password" id="password"/>
</div>
<div class="input-group">
<label for="password-confirmation">confirm password
</label>
<input required type="password" placeholder="confirm password" class=""
name="password confirmation"
id="password-confirmation"/>
</div>
<div class="input-group">
<vue-recaptcha
ref="recaptcha"
@verify="onCaptchaVerified"
@expired="onCaptchaExpired"
size="invisible"
sitekey="6LfJA0gUAAAAAA4YDXBubWMll55x5xLpyzu6n60G">
</vue-recaptcha>
<button :disabled="status==='submitting'" type="submit" class="button">sign up</button>
</div>
<div v-cloak class="">
<div v-show="serverError">
{{serverError}}
</div>
</div>
</form>
</div>
<div class="successful-server-response-wrapper" v-cloak>
<div v-show="sucessfulServerResponse" class="successful-server-response">
{{sucessfulServerResponse}}
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@latest/dist/vue.js" defer></script>
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>
<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js" defer></script>
<script type="text/javascript" src="index.js" defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment