com.woltlab.wcf/templates/recaptcha.tpl

   1 {if $recaptchaLegacyMode|empty}
   2         {include file='captcha'}
   3 {else}
   4         {* No explicit keys were set, use legacy V1 API and WoltLab's OEM keys *}
   5         {if RECAPTCHA_PUBLICKEY === '' || RECAPTCHA_PRIVATEKEY === ''}
   6         <section class="section">
   7                 <header class="sectionHeader">
   8                         <h2 class="sectionTitle">{lang}wcf.recaptcha.title{/lang}</h2>
   9                         <small class="sectionDescription">{lang}wcf.recaptcha.description{/lang}</small>
  10                 </header>
  11
  12                 <dl class="wide reCaptcha{if $errorField|isset && $errorField == 'recaptchaString'} formError{/if}">
  13                         {if !$ajaxCaptcha|isset || !$ajaxCaptcha}
  14                                 <script data-relocate="true">
  15                                         //<![CDATA[
  16                                         var RecaptchaOptions = {
  17                                                 lang: '{@$recaptchaLanguageCode}',
  18                                                 theme : 'custom'
  19                                         }
  20                                         //]]>
  21                                 </script>
  22                         {/if}
  23                         <dt class="jsOnly">
  24                                 <label for="recaptcha_response_field">reCAPTCHA</label>
  25                         </dt>
  26                         <dd class="jsOnly">
  27                                 <div id="recaptcha_image"></div>
  28                                 <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="medium" />
  29                                 {if (($errorType|isset && $errorType|is_array && $errorType[recaptchaString]|isset) || ($errorField|isset && $errorField == 'recaptchaString'))}
  30                                         {if $errorType|is_array && $errorType[recaptchaString]|isset}
  31                                                 {assign var='__errorType' value=$errorType[recaptchaString]}
  32                                         {else}
  33                                                 {assign var='__errorType' value=$errorType}
  34                                         {/if}
  35                                         <small class="innerError">
  36                                                 {if $__errorType == 'empty'}
  37                                                         {lang}wcf.global.form.error.empty{/lang}
  38                                                 {else}
  39                                                         {lang}wcf.recaptcha.error.recaptchaString.{$__errorType}{/lang}
  40                                                 {/if}
  41                                         </small>
  42                                 {/if}
  43                         </dd>
  44
  45                         {event name='fields'}
  46
  47                         <dd class="jsOnly">
  48                                 <ul class="buttonList smallButtons">
  49                                         <li><a href="javascript:Recaptcha.reload()" class="button small"><span class="icon icon16 fa-repeat"></span> <span>{lang}wcf.recaptcha.reload{/lang}</span></a></li>
  50                                         <li class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')" class="button small"><span class="icon icon16 fa-volume-up"></span> <span>{lang}wcf.recaptcha.audio{/lang}</span></a></li>
  51                                         <li class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')" class="button small"><span class="icon icon16 fa-eye"></span> <span>{lang}wcf.recaptcha.image{/lang}</span></a></li>
  52                                         <li><a href="javascript:Recaptcha.showhelp()" class="button small"><span class="icon icon16 fa-question"></span> <span>{lang}wcf.recaptcha.help{/lang}</span></a></li>
  53                                         {event name='buttons'}
  54                                 </ul>
  55                         </dd>
  56
  57                         {if !$ajaxCaptcha|isset || !$ajaxCaptcha}
  58                                 <script data-relocate="true" src="//www.google.com/recaptcha/api/challenge?k={$recaptchaPublicKey}"></script>
  59                                 <noscript>
  60                                         <dd>
  61                                                 <iframe src="//www.google.com/recaptcha/api/noscript?k={$recaptchaPublicKey}" height="300" width="500" seamless="seamless"></iframe><br />
  62                                                 <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  63                                                 <input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
  64                                         </dd>
  65                                         {if (($errorType|isset && $errorType|is_array && $errorType[recaptchaString]|isset) || ($errorField|isset && $errorField == 'recaptchaString'))}
  66                                                 {if $errorType|is_array && $errorType[recaptchaString]|isset}
  67                                                         {assign var='__errorType' value=$errorType[recaptchaString]}
  68                                                 {else}
  69                                                         {assign var='__errorType' value=$errorType}
  70                                                 {/if}
  71                                                 <small class="innerError">
  72                                                         {if $errorType == 'empty'}
  73                                                                 {lang}wcf.global.form.error.empty{/lang}
  74                                                         {else}
  75                                                                 {lang}wcf.recaptcha.error.recaptchaString.{$__errorType}{/lang}
  76                                                         {/if}
  77                                                 </small>
  78                                         {/if}
  79                                 </noscript>
  80                         {else}
  81                                 <script data-relocate="true">
  82                                         //<![CDATA[
  83                                         $.getScript('//www.google.com/recaptcha/api/js/recaptcha_ajax.js', function() {
  84                                                 Recaptcha.create("{$recaptchaPublicKey}", "recaptcha_image", {
  85                                                         lang: '{@$recaptchaLanguageCode}',
  86                                                         theme : 'custom'
  87                                                 });
  88
  89                                                 WCF.System.Captcha.addCallback('{$captchaID}', function() {
  90                                                         return {
  91                                                                 recaptcha_challenge_field: Recaptcha.get_challenge(),
  92                                                                 recaptcha_response_field: Recaptcha.get_response()
  93                                                         };
  94                                                 });
  95                                         });
  96                                         //]]>
  97                                 </script>
  98                         {/if}
  99                 </dl>
 100         </section>
 101         {else}
 102         <section class="section">
 103                 <h2 class="sectionTitle">{lang}wcf.recaptcha.title{/lang}</h2>
 104                 {assign var="recaptchaBucketID" value=true|microtime|sha1}
 105                 <dl class="{if $errorField|isset && $errorField == 'recaptchaString'}formError{/if}">
 106                         <dt></dt>
 107                         <dd>
 108                                 <div id="recaptchaBucket{$recaptchaBucketID}"></div>
 109                                 <noscript>
 110                                         <div style="width: 302px; height: 473px;">
 111                                                 <div style="width: 302px; height: 422px; position: relative;">
 112                                                         <div style="width: 302px; height: 422px; position: relative;">
 113                                                                 <iframe src="https://www.google.com/recaptcha/api/fallback?k={RECAPTCHA_PUBLICKEY|encodeJS}" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
 114                                                         </div>
 115                                                         <div style="width: 300px; height: 60px; position: relative; border-style: none; bottom: 12px; left: 0; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
 116                                                                 <textarea name="g-recaptcha-response" class="g-recaptcha-response" style="width: 290px; height: 50px; border: 1px solid #c1c1c1; margin: 5px; padding: 0px; resize: none;"></textarea>
 117                                                         </div>
 118                                                 </div>
 119                                         </div>
 120                                 </noscript>
 121                                 {if (($errorType|isset && $errorType|is_array && $errorType[recaptchaString]|isset) || ($errorField|isset && $errorField == 'recaptchaString'))}
 122                                         {if $errorType|is_array && $errorType[recaptchaString]|isset}
 123                                                 {assign var='__errorType' value=$errorType[recaptchaString]}
 124                                         {else}
 125                                                 {assign var='__errorType' value=$errorType}
 126                                         {/if}
 127                                         <small class="innerError">
 128                                                 {if $__errorType == 'empty'}
 129                                                         {lang}wcf.global.form.error.empty{/lang}
 130                                                 {else}
 131                                                         {lang}wcf.captcha.recaptchaV2.error.recaptchaString.{$__errorType}{/lang}
 132                                                 {/if}
 133                                         </small>
 134                                 {/if}
 135                         </dd>
 136                 </dl>
 137                 <script data-relocate="true">
 138                 //<![CDATA[
 139                 if (!WCF.recaptcha) {
 140                         WCF.recaptcha = {
 141                                 queue: [],
 142                                 callbackCalled: false,
 143                                 mapping: { }
 144                         };
 145
 146                         // this needs to be in global scope
 147                         function recaptchaCallback() {
 148                                 var bucket;
 149                                 WCF.recaptcha.callbackCalled = true;
 150
 151                                 // clear queue
 152                                 while (bucket = WCF.recaptcha.queue.shift()) {
 153                                         WCF.recaptcha.mapping[bucket] = grecaptcha.render(bucket, {
 154                                                 'sitekey' : '{RECAPTCHA_PUBLICKEY|encodeJS}'
 155                                         });
 156                                 }
 157                         }
 158                 }
 159
 160                 // add captcha to queue
 161                 WCF.recaptcha.queue.push('recaptchaBucket{$recaptchaBucketID}');
 162
 163                 // trigger callback immediately, if API already is available
 164                 if (WCF.recaptcha.callbackCalled) setTimeout(recaptchaCallback, 1);
 165
 166                 {if $ajaxCaptcha|isset && $ajaxCaptcha}
 167                 WCF.System.Captcha.addCallback('{$captchaID}', function() {
 168                         return {
 169                                 'g-recaptcha-response': grecaptcha.getResponse(WCF.recaptcha.mapping['recaptchaBucket{$recaptchaBucketID}'])
 170                         };
 171                 });
 172                 {/if}
 173
 174                 // ensure recaptcha API is loaded at most once
 175                 if (!window.grecaptcha) $.getScript('https://www.google.com/recaptcha/api.js?render=explicit&onload=recaptchaCallback');
 176                 //]]>
 177                 </script>
 178         </section>
 179         {/if}
 180 {/if}