ott 1, 2013

Customizzare il design del nostro reCAPTCHA - Orchard

Dalla versione 7.0 di orchard è possibile inserire il captcha dove riteniate ce ne sia bisogno senza dover installare nessun widget.
Per default viene istanziato il thema red ma è possibile scegliere tra 4 themi o castomizzare interamente il controllo.
Una volta capito il funzionamento di come riscrivere le “part” di orchard, l’operazione risulta banale.
La documentazione ufficiale la trovate qui.

Mediante la convenzione di nomi che trovate sotto sarà possibile fare l'overridedi qualsiasi cosa espone orchard.

  • I Content vanno inseriti in views/items
  • Le Parts in views/part
  • I Fields in  views/fields
  • EditorTemplates in views/EditorTemplates/template

Il nostro reCATPCHA è inserito nel modulo Orchard.AntiSpam, più precisamente qui:

/Modules/Orchard.AntiSpam/Views/EditorTemplates

Ed è proprio questa “Part” che ci interessa per cambiare il nostro thema al controllo.

Il file presenta questo codice

@model Orchard.AntiSpam.ViewModels.ReCaptchaPartEditViewModel
<script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=@Model.PublicKey"></script>
<noscript>
     <iframe src="//www.google.com/recaptcha/api/noscript?k=@Model.PublicKey" height="300" width="500" frameborder="0"></iframe><br>
     <textarea name="recaptcha_challenge_field" rows="3" cols="40">
     </textarea>
     <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
  </noscript>

Quindi andiamo a creare il nostro file Parts.ReCaptcha.Fields.cshtml nel nostro thema in questa cartella:

/Themes/”cartella del mio thema”/Views/EditorTemplates

@model Orchard.AntiSpam.ViewModels.ReCaptchaPartEditViewModel
<script type="text/javascript">
var RecaptchaOptions = {
        custom_translations: {
            instructions_visual: "Scrivi le due parole:",
            instructions_audio: "Trascrivi ci\u00f2 che senti:",
            play_again: "Riascolta la traccia audio",
            cant_hear_this: "Scarica la traccia in formato MP3",
            visual_challenge: "Modalit\u00e0 visiva",
            audio_challenge: "Modalit\u00e0 auditiva",
            refresh_btn: "Chiedi due nuove parole",
            help_btn: "Aiuto",
            incorrect_try_again: "Scorretto. Riprova.",
        },
        lang: 'it', // Unavailable while writing this code (just for audio challenge)
        theme: 'clean' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
    };
</script>
<script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=@Model.PublicKey"></script>
<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=@Model.PublicKey" height="300" width="500" frameborder="0"></iframe>
    <br>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40">
     </textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

Per maggiori dettagli su come integrare reCAPTCHA potete fare riferimento qui

Tags: reCAPTCHA, Orchard

No Comments

Add a Comment

© 2017 Bunny's Attack