10 | Github Repo
11 |
12 |
13 | Current count: @currentCount
8 | 9 | 10 | 11 | @code { 12 | private int currentCount = 0; 13 | 14 | private void IncrementCount() 15 | { 16 | currentCount++; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /Samples/BlazorServer/BlazorCaptchaTest/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Authorization 3 | @using Microsoft.AspNetCore.Components.Authorization 4 | @using Microsoft.AspNetCore.Components.Forms 5 | @using Microsoft.AspNetCore.Components.Routing 6 | @using Microsoft.AspNetCore.Components.Web 7 | @using Microsoft.AspNetCore.Components.Web.Virtualization 8 | @using Microsoft.JSInterop 9 | @using BlazorCaptchaTest 10 | @using BlazorCaptchaTest.Shared 11 | -------------------------------------------------------------------------------- /BlazorCaptcha.WebAssembly/Captcha.razor: -------------------------------------------------------------------------------- 1 | @using SkiaSharp 2 | @using SkiaSharp.Views.Blazor 3 | 4 | @inherits CaptchaComponentBase 5 | 6 |Sorry, there's nothing at this address.
10 |Sorry, there's nothing at this address.
10 |@Captcha
9 | 10 | @code{ 11 | private string Captcha { get; set; } = ""; 12 | private int CaptchaLetters = 5; 13 | 14 | protected override Task OnInitializedAsync() 15 | { 16 | Captcha = BlazorCaptcha.Tools.GetCaptchaWord(CaptchaLetters); 17 | return base.OnInitializedAsync(); 18 | } 19 | } -------------------------------------------------------------------------------- /BlazorCaptcha.Commun/Tools.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorCaptcha; 2 | 3 | ///@Captcha
11 | 12 | @code{ 13 | private string Captcha { get; set; } = string.Empty; 14 | private int CaptchaLetters = 5; 15 | 16 | protected override Task OnInitializedAsync() 17 | { 18 | Captcha = BlazorCaptcha.Tools.GetCaptchaWord(CaptchaLetters); 19 | return base.OnInitializedAsync(); 20 | } 21 | 22 | } -------------------------------------------------------------------------------- /Samples/BlazorWebAssembly/Blazor-Wasm-Captcha-Test/Blazor-Wasm-Captcha-Test.csproj: -------------------------------------------------------------------------------- 1 |
24 | Request ID: @Model.RequestId
25 |
30 | Swapping to the Development environment displays detailed information about the error that occurred. 31 |
32 |33 | The Development environment shouldn't be enabled for deployed applications. 34 | It can result in displaying sensitive information from exceptions to end users. 35 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 36 | and restarting the app. 37 |
38 |@Captcha
48 | 49 | @code{ 50 | private string Captcha = ""; 51 | private int CaptchaLetters = 5; 52 | private bool valided = false; 53 | private FormModel formModel = new FormModel(); 54 | 55 | protected override Task OnInitializedAsync() 56 | { 57 | Captcha = BlazorCaptcha.Tools.GetCaptchaWord(CaptchaLetters); 58 | 59 | return base.OnInitializedAsync(); 60 | } 61 | 62 | private void HandleValidSubmit() 63 | { 64 | if (formModel.CaptchaVerif == Captcha) 65 | { 66 | valided = true; 67 | formModel = new FormModel(); 68 | } 69 | else 70 | { 71 | valided = false; 72 | } 73 | 74 | } 75 | 76 | public class FormModel 77 | { 78 | public string Name { get; set; } = ""; 79 | 80 | public string CaptchaVerif { get; set; } = ""; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /Samples/BlazorServer/BlazorCaptchaTest/wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | h1:focus { 8 | outline: none; 9 | } 10 | 11 | a, .btn-link { 12 | color: #0071c1; 13 | } 14 | 15 | .btn-primary { 16 | color: #fff; 17 | background-color: #1b6ec2; 18 | border-color: #1861ac; 19 | } 20 | 21 | .content { 22 | padding-top: 1.1rem; 23 | } 24 | 25 | .valid.modified:not([type=checkbox]) { 26 | outline: 1px solid #26b050; 27 | } 28 | 29 | .invalid { 30 | outline: 1px solid red; 31 | } 32 | 33 | .validation-message { 34 | color: red; 35 | } 36 | 37 | #blazor-error-ui { 38 | background: lightyellow; 39 | bottom: 0; 40 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 41 | display: none; 42 | left: 0; 43 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 44 | position: fixed; 45 | width: 100%; 46 | z-index: 1000; 47 | } 48 | 49 | #blazor-error-ui .dismiss { 50 | cursor: pointer; 51 | position: absolute; 52 | right: 0.75rem; 53 | top: 0.5rem; 54 | } 55 | 56 | .blazor-error-boundary { 57 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 58 | padding: 1rem 1rem 1rem 3.7rem; 59 | color: white; 60 | } 61 | 62 | .blazor-error-boundary::after { 63 | content: "An error has occurred." 64 | } 65 | -------------------------------------------------------------------------------- /BlazorCaptcha/BlazorCaptcha.csproj: -------------------------------------------------------------------------------- 1 |@Captcha
41 | 42 | @code{ 43 | private string Captcha = ""; 44 | private int CaptchaLetters = 5; 45 | 46 | protected override Task OnInitializedAsync() 47 | { 48 | Captcha = BlazorCaptcha.Commun.Tools.GetCaptchaWord(CaptchaLetters); 49 | 50 | return base.OnInitializedAsync(); 51 | } 52 | } 53 | ``` 54 | 55 | ## Release Notes 56 | 57 |
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `