Skip to content

Instantly share code, notes, and snippets.

@elioair

elioair/register.blade.php

Created November 1, 2015 23:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elioair/c9a18b084f666b3ae7a5 to your computer and use it in GitHub Desktop.
Save elioair/c9a18b084f666b3ae7a5 to your computer and use it in GitHub Desktop.
Download ZIP
Chesscaptcha and Laravel registration form view.
Raw
register.blade.php
<?php
////////////////////////////////////////////////////////////////////
// Read the full tutorial on Chesscaptcha and Laravel here: //
// http://dev.emar.gr/blog/laravel-5-chess-captcha-authentication //
////////////////////////////////////////////////////////////////////
// The array that contains the configuration for the php side
$config = [
'divId'=>'chesscaptcha',
'whitesquare'=>'#f0d9b5',
'blacksquare'=>'#b58863',
'matemode'=>'no', // yes or no
'nojsfallback'=>'no', // yes or no; activate the fallback in case js is disabled
'titleoverride'=>'Copy the position below', // text override
'titlemateoverride'=>'Mate-In-One', // text override
'helpoverride'=>'Drag the pieces into the board to copy the given position. To remove a piece drag it out of the board.', // text override
'startoverride'=>'Start', // text override
'clearoverride'=>'Clear', // text override
'pieceStyle'=>'wikipedia', // the name of the piece style to use or 'random', default is 'wikipedia'
];
$chesscaptcha = new \Elioair\ChessCaptcha\ChessCaptcha($config['whitesquare'], $config['blacksquare'], $config['matemode'], $config['nojsfallback'], $config['pieceStyle']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Laravel Sandbox</title>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Laravel Sandbox</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 well">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<h1>Register</h1>
<form method="POST" action="/auth/register">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="password_conf">Confirm Password</label>
<input type="password" class="form-control" id="password_conf" name="password_confirmation" placeholder="Retype Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> I accept the terms
</label>
</div>
<!-- The #chesscaptcha div where the captcha will be rendered. If needed you can change the # in the $config array -->
<div id="chesscaptcha"><?php if($config['nojsfallback'] == 'yes'){ echo $chesscaptcha->noJsHtml($config['pieceImages']);}?></div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button type="submit" id="submitform" class="btn btn-default">Register</button>
</form>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript">
// The object containing the configuration for the js side
var chessCaptchaParams = {
cc_divId: '<?php echo $config['divId'];?>',
cc_mateMode: '<?php echo $config['matemode']?>' === 'no' ? false : true,
cc_whiteSquare: '<?php echo $config['whitesquare'];?>',
cc_blackSquare: '<?php echo $config['blacksquare'];?>',
cc_titleOverride: '<?php echo $config['titleoverride'];?>',
cc_mateTitleOverride: '<?php echo $config['titlemateoverride'];?>',
cc_helpOverride: '<?php echo $config['helpoverride'];?>',
cc_startOverride: '<?php echo $config['startoverride'];?>',
cc_clearOverride: '<?php echo $config['clearoverride'];?>',
cc_sideToPlay: '<?php echo $chesscaptcha->chessCaptchaFenCode[2]; ?>',
cc_challenge: '<?php echo $chesscaptcha->chessCaptchaChallenge; ?>', // The image of the position
cc_matechallenge: '<?php echo $chesscaptcha->chessCaptchaFenCode[0];?>', // The fen code of matemode position
cc_pathtoimg: '/img/pieces',
cc_piecestyle: '<?php echo $chesscaptcha->chessCaptchaPieceStyle;?>',
};
</script>
<script type="text/javascript" src="/js/chesscaptcha.js"></script>
<!-- Optional Ajax Validation
<script type="text/javascript" src="/js/chesscaptcha-ajax-validation.js"></script>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment