Skip to content

Commit 399c9fa

Browse files
MrMatthewLaytonMrMatthewLayton
committed
Added form controls and color picker
1 parent 9b43539 commit 399c9fa

26 files changed

+614
-200
lines changed

‎OnixLabs.Web/Areas/Tools/Components/Cryptography/HashGenerator.razor‎

Lines changed: 15 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,18 @@
1616
</Row>
1717
<Row Class="mt-3">
1818
<div class="col">
19-
<div class="form-floating">
20-
<InputSelect @bind-Value="algorithm.Value" class="form-select" id="algorithm">
21-
<option value="0" selected>SHA-1 (160 bits)</option>
22-
<option value="1">SHA-2 (256 bits)</option>
23-
<option value="2">SHA-2 (384 bits)</option>
24-
<option value="3">SHA-2 (512 bits)</option>
25-
<option value="4">SHA-3 (224 bits)</option>
26-
<option value="5">SHA-3 (256 bits)</option>
27-
<option value="6">SHA-3 (384 bits)</option>
28-
<option value="7">SHA-3 (512 bits)</option>
29-
<option value="8">SHA-3 SHAKE (128 bits)</option>
30-
<option value="9">SHA-3 SHAKE (256 bits)</option>
31-
</InputSelect>
32-
<label for="algorithm">Hash Algorithm</label>
33-
</div>
19+
<SelectInput @bind-Value="algorithm.Value" Label="Hash Algorithm">
20+
<option value="0" selected>SHA-1 (160 bits)</option>
21+
<option value="1">SHA-2 (256 bits)</option>
22+
<option value="2">SHA-2 (384 bits)</option>
23+
<option value="3">SHA-2 (512 bits)</option>
24+
<option value="4">SHA-3 (224 bits)</option>
25+
<option value="5">SHA-3 (256 bits)</option>
26+
<option value="6">SHA-3 (384 bits)</option>
27+
<option value="7">SHA-3 (512 bits)</option>
28+
<option value="8">SHA-3 SHAKE (128 bits)</option>
29+
<option value="9">SHA-3 SHAKE (256 bits)</option>
30+
</SelectInput>
3431
</div>
3532
@if (algorithm.Value is 8 or 9)
3633
{
@@ -56,28 +53,14 @@
5653
<div class="col">
5754
<div class="input-group">
5855
<div class="form-floating">
59-
<InputText @bind-Value="hashResult" class="form-control" id="hashResult" readonly/>
56+
<InputText @bind-Value="hashResult" class="form-control form-control-lg" id="hashResult" readonly/>
6057
<label for="hashResult">Hash Result</label>
6158
</div>
62-
<button @onclick="CopyToClipboard" class="btn btn-secondary" type="button" tabindex="-1">
59+
<button @onclick="CopyToClipboard" class="btn btn-secondary px-4" type="button" tabindex="-1">
6360
<Icon class="fa-regular fa-clipboard"/>
6461
</button>
6562
</div>
6663
</div>
6764
</Row>
6865
</CardFooter>
69-
</Card>
70-
@* *@
71-
@* @if (!string.IsNullOrEmpty(hashResult)) *@
72-
@* { *@
73-
@* <Card class="mt-3"> *@
74-
@* <CardBody> *@
75-
@* <div class="input-group"> *@
76-
@* <input class="form-control font-monospace" type="text" readonly value="@hashResult" /> *@
77-
@* <button class="btn btn-secondary" type="button" @onclick="CopyHash"> *@
78-
@* <i class="fa-regular fa-clipboard"></i> *@
79-
@* </button> *@
80-
@* </div> *@
81-
@* </CardBody> *@
82-
@* </Card> *@
83-
@* } *@
66+
</Card>

‎OnixLabs.Web/Areas/Tools/Components/Cryptography/HashGenerator.razor.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ protected override void OnInitialized()
2121
inputText.ValueChanged += (_, _) => Calculate();
2222
algorithm.ValueChanged += (_, _) => Calculate();
2323
shakeLength.ValueChanged += (_, _) => Calculate();
24+
25+
Calculate();
2426
}
2527

2628
private void IncrementLength()

‎OnixLabs.Web/Areas/Tools/Components/DataTables/AsciiTable.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@page "/Tools/Ascii-Table"
22
@layout ToolsLayout
33

4+
<PageTitle>ONIXLabs | ASCII Table</PageTitle>
5+
46
<Card>
57
<CardHeader Class="fw-semibold">
68
ASCII Character Reference

‎OnixLabs.Web/Areas/Tools/Components/Encoding/BaseEncoder.razor‎

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,26 @@
88
<CardBody>
99
<Row>
1010
<div class="col">
11-
<div class="form-floating">
12-
<InputSelect @bind-Value="inputFormat.Value" class="form-select">
13-
<option value="@Format.PlainText">Plain Text</option>
14-
<option value="@Format.Base16Rfc4648Invariant">Base-16 (RFC 4648, Invariant)</option>
15-
<option value="@Format.Base16Rfc4648Lowercase">Base-16 (RFC 4648, Lowercase)</option>
16-
<option value="@Format.Base16Rfc4648Uppercase">Base-16 (RFC 4648, Uppercase)</option>
17-
<option value="@Format.Base32Rfc4648">Base-32 (RFC 4648)</option>
18-
<option value="@Format.Base32ZBase32">Base-32 (ZBase 32)</option>
19-
<option value="@Format.Base32GeoHash">Base-32 (GeoHash)</option>
20-
<option value="@Format.Base32Crockford">Base-32 (Crockford)</option>
21-
<option value="@Format.Base32Hex">Base-32 (Base32Hex)</option>
22-
<option value="@Format.Base32Rfc4648Padded">Base-32 (RFC 4648, Padded)</option>
23-
<option value="@Format.Base32ZBase32Padded">Base-32 (ZBase 32, Padded)</option>
24-
<option value="@Format.Base32GeoHashPadded">Base-32 (GeoHash, Padded)</option>
25-
<option value="@Format.Base32CrockfordPadded">Base-32 (Crockford, Padded)</option>
26-
<option value="@Format.Base32HexPadded">Base-32 (Base32Hex, Padded)</option>
27-
<option value="@Format.Base58Bitcoin">Base-58 (Bitcoin)</option>
28-
<option value="@Format.Base58Flickr">Base-58 (Flickr)</option>
29-
<option value="@Format.Base58Ripple">Base-58 (Ripple)</option>
30-
<option value="@Format.Base64Rfc4648">Base-64 (RFC 4648)</option>
31-
</InputSelect>
32-
<label>Input Format</label>
33-
</div>
11+
<SelectInput @bind-Value="inputFormat.Value" Label="Input Format">
12+
<option value="@Format.PlainText">Plain Text</option>
13+
<option value="@Format.Base16Rfc4648Invariant">Base-16 (RFC 4648, Invariant)</option>
14+
<option value="@Format.Base16Rfc4648Lowercase">Base-16 (RFC 4648, Lowercase)</option>
15+
<option value="@Format.Base16Rfc4648Uppercase">Base-16 (RFC 4648, Uppercase)</option>
16+
<option value="@Format.Base32Rfc4648">Base-32 (RFC 4648)</option>
17+
<option value="@Format.Base32ZBase32">Base-32 (ZBase 32)</option>
18+
<option value="@Format.Base32GeoHash">Base-32 (GeoHash)</option>
19+
<option value="@Format.Base32Crockford">Base-32 (Crockford)</option>
20+
<option value="@Format.Base32Hex">Base-32 (Base32Hex)</option>
21+
<option value="@Format.Base32Rfc4648Padded">Base-32 (RFC 4648, Padded)</option>
22+
<option value="@Format.Base32ZBase32Padded">Base-32 (ZBase 32, Padded)</option>
23+
<option value="@Format.Base32GeoHashPadded">Base-32 (GeoHash, Padded)</option>
24+
<option value="@Format.Base32CrockfordPadded">Base-32 (Crockford, Padded)</option>
25+
<option value="@Format.Base32HexPadded">Base-32 (Base32Hex, Padded)</option>
26+
<option value="@Format.Base58Bitcoin">Base-58 (Bitcoin)</option>
27+
<option value="@Format.Base58Flickr">Base-58 (Flickr)</option>
28+
<option value="@Format.Base58Ripple">Base-58 (Ripple)</option>
29+
<option value="@Format.Base64Rfc4648">Base-64 (RFC 4648)</option>
30+
</SelectInput>
3431
</div>
3532
</Row>
3633
<Row Class="mt-3">
@@ -63,29 +60,26 @@
6360
</Row>
6461
<Row>
6562
<div class="col">
66-
<div class="form-floating">
67-
<InputSelect @bind-Value="outputFormat.Value" class="form-select">
68-
<option value="@Format.PlainText">Plain Text</option>
69-
<option value="@Format.Base16Rfc4648Invariant">Base-16 (RFC 4648, Invariant)</option>
70-
<option value="@Format.Base16Rfc4648Lowercase">Base-16 (RFC 4648, Lowercase)</option>
71-
<option value="@Format.Base16Rfc4648Uppercase">Base-16 (RFC 4648, Uppercase)</option>
72-
<option value="@Format.Base32Rfc4648">Base-32 (RFC 4648)</option>
73-
<option value="@Format.Base32ZBase32">Base-32 (ZBase 32)</option>
74-
<option value="@Format.Base32GeoHash">Base-32 (GeoHash)</option>
75-
<option value="@Format.Base32Crockford">Base-32 (Crockford)</option>
76-
<option value="@Format.Base32Hex">Base-32 (Base32Hex)</option>
77-
<option value="@Format.Base32Rfc4648Padded">Base-32 (RFC 4648, Padded)</option>
78-
<option value="@Format.Base32ZBase32Padded">Base-32 (ZBase 32, Padded)</option>
79-
<option value="@Format.Base32GeoHashPadded">Base-32 (GeoHash, Padded)</option>
80-
<option value="@Format.Base32CrockfordPadded">Base-32 (Crockford, Padded)</option>
81-
<option value="@Format.Base32HexPadded">Base-32 (Base32Hex, Padded)</option>
82-
<option value="@Format.Base58Bitcoin">Base-58 (Bitcoin)</option>
83-
<option value="@Format.Base58Flickr">Base-58 (Flickr)</option>
84-
<option value="@Format.Base58Ripple">Base-58 (Ripple)</option>
85-
<option value="@Format.Base64Rfc4648">Base-64 (RFC 4648)</option>
86-
</InputSelect>
87-
<label>Output Format</label>
88-
</div>
63+
<SelectInput @bind-Value="outputFormat.Value" Label="Output Format">
64+
<option value="@Format.PlainText">Plain Text</option>
65+
<option value="@Format.Base16Rfc4648Invariant">Base-16 (RFC 4648, Invariant)</option>
66+
<option value="@Format.Base16Rfc4648Lowercase">Base-16 (RFC 4648, Lowercase)</option>
67+
<option value="@Format.Base16Rfc4648Uppercase">Base-16 (RFC 4648, Uppercase)</option>
68+
<option value="@Format.Base32Rfc4648">Base-32 (RFC 4648)</option>
69+
<option value="@Format.Base32ZBase32">Base-32 (ZBase 32)</option>
70+
<option value="@Format.Base32GeoHash">Base-32 (GeoHash)</option>
71+
<option value="@Format.Base32Crockford">Base-32 (Crockford)</option>
72+
<option value="@Format.Base32Hex">Base-32 (Base32Hex)</option>
73+
<option value="@Format.Base32Rfc4648Padded">Base-32 (RFC 4648, Padded)</option>
74+
<option value="@Format.Base32ZBase32Padded">Base-32 (ZBase 32, Padded)</option>
75+
<option value="@Format.Base32GeoHashPadded">Base-32 (GeoHash, Padded)</option>
76+
<option value="@Format.Base32CrockfordPadded">Base-32 (Crockford, Padded)</option>
77+
<option value="@Format.Base32HexPadded">Base-32 (Base32Hex, Padded)</option>
78+
<option value="@Format.Base58Bitcoin">Base-58 (Bitcoin)</option>
79+
<option value="@Format.Base58Flickr">Base-58 (Flickr)</option>
80+
<option value="@Format.Base58Ripple">Base-58 (Ripple)</option>
81+
<option value="@Format.Base64Rfc4648">Base-64 (RFC 4648)</option>
82+
</SelectInput>
8983
</div>
9084
</Row>
9185
<Row Class="mt-3">

‎OnixLabs.Web/Areas/Tools/Components/Generators/GuidGenerator.razor‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,21 @@
22
@using OnixLabs.Core.Linq
33
@layout ToolsLayout
44

5-
<PageTitle>GUID Generator</PageTitle>
5+
<PageTitle>ONIXLabs | GUID Generator</PageTitle>
66

77
<Card>
88
<CardHeader Class="fw-semibold">GUID Generator</CardHeader>
99
<CardBody>
1010
<Row>
1111
<div class="col">
12-
<div class="form-floating">
13-
<InputSelect @bind-Value="version" class="form-select" id="version">
14-
<option value="0" selected disabled hidden></option>
15-
<option value="4">Version 4</option>
16-
<option value="7">Version 7</option>
17-
</InputSelect>
18-
<label for="version">Version</label>
19-
</div>
12+
<SelectInput @bind-Value="version" Label="Version">
13+
<option value="0" selected disabled hidden></option>
14+
<option value="4">Version 4</option>
15+
<option value="7">Version 7</option>
16+
</SelectInput>
2017
</div>
2118
<div class="col">
22-
<div class="input-group">
23-
<div class="form-floating">
24-
<InputNumber @bind-Value="amount" class="form-control no-spinner" id="amount"/>
25-
<label for="amount">Amount</label>
26-
</div>
27-
<button @onclick="IncrementAmount" class="btn btn-secondary" type="button" tabindex="-1">
28-
<i class="fa-solid fa-plus"></i>
29-
</button>
30-
<button @onclick="DecrementAmount" class="btn btn-secondary" type="button" tabindex="-1">
31-
<i class="fa-solid fa-minus"></i>
32-
</button>
33-
</div>
19+
<NumberInput @bind-Value="amount" OnIncrementClicked="IncrementAmount" OnDecrementClicked="DecrementAmount"/>
3420
</div>
3521
</Row>
3622
</CardBody>
@@ -72,8 +58,8 @@
7258
{
7359
<div class="col-12">
7460
<div class="input-group">
75-
<input class="form-control font-monospace" type="text" readonly value="@Format(guid)">
76-
<button @onclick="() => CopyToClipboard(index)" class="btn btn-secondary" type="button">
61+
<input class="form-control form-control-lg font-monospace" type="text" readonly value="@Format(guid)">
62+
<button @onclick="() => CopyToClipboard(index)" class="btn btn-secondary px-4" type="button">
7763
<Icon class="fa-regular fa-clipboard"/>
7864
</button>
7965
</div>

‎OnixLabs.Web/Areas/Tools/Components/Generators/TokenGenerator.razor‎

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,32 @@
33
@using OnixLabs.Security
44
@layout ToolsLayout
55

6-
<PageTitle>Token Generator</PageTitle>
6+
<PageTitle>ONIXLabs | Token Generator</PageTitle>
77

88
<Card>
99
<CardHeader Class="fw-semibold">Token Generator</CardHeader>
1010
<CardBody>
1111
<Row>
1212
<div class="col">
13-
<div class="form-floating">
14-
<InputSelect @bind-Value="generator" class="form-select" id="generator">
15-
<option value="0" selected disabled hidden></option>
16-
<option value="1">Pseudo-Random</option>
17-
<option value="2">Secure-Random</option>
18-
</InputSelect>
19-
<label for="generator">Random Number Generator</label>
20-
</div>
13+
<SelectInput @bind-Value="generator" Label="Random Number Generator">
14+
<option value="0" selected disabled hidden></option>
15+
<option value="1">Pseudo-Random</option>
16+
<option value="2">Secure-Random</option>
17+
</SelectInput>
2118
</div>
2219
@if (generator == 1)
2320
{
2421
<div class="col">
25-
<div class="input-group">
26-
<div class="form-floating">
27-
<InputNumber @bind-Value="seed" class="form-control no-spinner" id="seed"/>
28-
<label for="seed">Seed</label>
29-
</div>
30-
<button @onclick="RandomizeSeed" class="btn btn-secondary" type="button">
31-
<i class="fa-solid fa-dice"></i>
32-
</button>
33-
</div>
22+
<RandomNumberInput @bind-Value="seed" Label="Seed"/>
3423
</div>
3524
}
3625
</Row>
3726
<Row Class="mt-3">
3827
<div class="col">
39-
<div class="input-group">
40-
<div class="form-floating">
41-
<InputNumber @bind-Value="length" class="form-control no-spinner" id="length"/>
42-
<label for="length">Length</label>
43-
</div>
44-
<button @onclick="IncrementLength" class="btn btn-secondary" type="button">
45-
<i class="fa-solid fa-plus"></i>
46-
</button>
47-
<button @onclick="DecrementLength" class="btn btn-secondary" type="button">
48-
<i class="fa-solid fa-minus"></i>
49-
</button>
50-
</div>
28+
<NumberInput @bind-Value="length" Label="Length" OnIncrementClicked="IncrementLength" OnDecrementClicked="DecrementLength"/>
5129
</div>
5230
<div class="col">
53-
<div class="input-group">
54-
<div class="form-floating">
55-
<InputNumber @bind-Value="amount" class="form-control no-spinner" id="amount"/>
56-
<label for="amount">Amount</label>
57-
</div>
58-
<button @onclick="IncrementAmount" class="btn btn-secondary" type="button">
59-
<i class="fa-solid fa-plus"></i>
60-
</button>
61-
<button @onclick="DecrementAmount" class="btn btn-secondary" type="button">
62-
<i class="fa-solid fa-minus"></i>
63-
</button>
64-
</div>
31+
<NumberInput @bind-Value="amount" Label="Amount" OnIncrementClicked="IncrementAmount" OnDecrementClicked="DecrementAmount"/>
6532
</div>
6633
</Row>
6734
<Row Class="mt-3">
@@ -104,8 +71,8 @@
10471
{
10572
<div class="col-12">
10673
<div class="input-group">
107-
<input class="form-control font-monospace" type="text" readonly value="@token">
108-
<button @onclick="() => CopyToClipboard(index)" class="btn btn-secondary" type="button">
74+
<input class="form-control form-control-lg font-monospace" type="text" readonly value="@token">
75+
<button @onclick="() => CopyToClipboard(index)" class="btn btn-secondary px-4" type="button">
10976
<i class="fa-regular fa-clipboard"></i>
11077
</button>
11178
</div>

0 commit comments

Comments
 (0)