mirror of
https://github.com/miawinter98/just-short-it.git
synced 2025-10-31 16:15:28 +00:00
added: tailwindcss&daisyui based style
This commit is contained in:
parent
ec999ba46c
commit
a7160dbd80
GPG key ID:
4B6F6A83178F595E
|
|
@ -4,8 +4,9 @@
|
|||
ViewData["Title"] = "Error";
|
||||
}
|
||||
|
||||
<h1 class="text-danger">Error.</h1>
|
||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-3xl lg:text-5xl text-error">Error.</h1>
|
||||
<h2 class="text-2xl lg:text-4xl text-secondary-content">An error occurred while processing your request.</h2>
|
||||
|
||||
@if (Model.ShowRequestId)
|
||||
{
|
||||
|
|
@ -13,14 +14,4 @@
|
|||
<strong>Request ID:</strong> <code>@Model.RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<h3>Development Mode</h3>
|
||||
<p>
|
||||
Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
ViewData["Title"] = "Startpage";
|
||||
}
|
||||
|
||||
<div class="has-text-centered my-6 px-4">
|
||||
<div class="text-center flex flex-col items-center gap-4">
|
||||
@if (Model.Id is null) {
|
||||
<h1 class="title is-1 is-spaced">Welcome to Just Short It!</h1>
|
||||
<h2 class="subtitle is-2">The KISS single-user URL shortener!</h2>
|
||||
<a class="button is-primary is-medium" asp-page="Urls">Start shorting URLs</a>
|
||||
<h1 class="text-3xl lg:text-5xl font-bold text-primary-content">Welcome to Just Short It!</h1>
|
||||
<h2 class="text-xl lg:text-3xl font-bold text-secondary-content">The KISS single-user URL shortener!</h2>
|
||||
<a class="btn btn-primary btn-lg min-h-0 h-12" asp-page="Urls">Start shorting URLs</a>
|
||||
} else {
|
||||
<p class="has-text-danger">@Model.ErrorMessage</p>
|
||||
<p class="text-error">@Model.ErrorMessage</p>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,36 +5,40 @@
|
|||
ViewData["Title"] = "Inspect";
|
||||
}
|
||||
|
||||
<div class="columns is-centered is-multiline my-6 px-4">
|
||||
<div class="grid place-items-center h-full">
|
||||
<div class="w-full md:max-w-lg flex flex-col gap-4">
|
||||
@if (Model.UrlRedirect is null) {
|
||||
@if (!string.IsNullOrEmpty(Model.Message)) {
|
||||
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile notification is-info">
|
||||
<button class="delete" onclick="this.parentElement.remove()"></button>
|
||||
<div class="alert alert-success rounded-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
<span>
|
||||
@Html.Raw(Model.Message)
|
||||
</span>
|
||||
<button class="btn btn-square btn-sm btn-ghost" onclick="this.parentElement.remove()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
} else {
|
||||
<div class="column is-full has-text-centered">
|
||||
<h1 class="title is-2 has-text-danger">URL not found</h1>
|
||||
<h2 class="subtitle is-4">The given ID does not exist, it may have expired or been deleted.</h2>
|
||||
</div>
|
||||
<h1 class="text-3xl lg:text-5xl text-error text-center">URL not found</h1>
|
||||
<h2 class="text-2xl lg:text-4xl text-secondary-content text-center">The given ID does not exist, it may have expired or been deleted.</h2>
|
||||
}
|
||||
} else {
|
||||
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile">
|
||||
<dl class="columns is-multiline mb-3">
|
||||
<dt class="column is-half">ID</dt>
|
||||
<dd class="column is-half">@Model.UrlRedirect.Id</dd>
|
||||
<dt class="column is-half">URL-Target</dt>
|
||||
<dd class="column is-half">@Model.UrlRedirect.Target</dd>
|
||||
<dl class="grid grid-cols-2 gap-y-2 text-primary-content">
|
||||
<dt>ID</dt>
|
||||
<dd>@Model.UrlRedirect.Id</dd>
|
||||
<dt>URL-Target</dt>
|
||||
<dd>@Model.UrlRedirect.Target</dd>
|
||||
</dl>
|
||||
|
||||
<form class="buttons" method="post">
|
||||
<form class="" method="post">
|
||||
<input type="hidden" asp-for="Id" />
|
||||
<button type="submit" class="button is-danger">Delete</button>
|
||||
<button type="submit" class="btn btn-error text-base-content">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
}
|
||||
<div class="column is-full has-text-centered">
|
||||
<a class="button is-primary is-medium" asp-page="Urls">Back to URLs</a>
|
||||
<a class="btn btn-primary btn-lg min-h-0 h-12 btn-wide self-center" asp-page="Urls">Back to URLs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,31 +4,31 @@
|
|||
ViewData["Title"] = "Login";
|
||||
}
|
||||
|
||||
<div class="columns is-centered my-6 px-4">
|
||||
<form class="column is-one-third-desktop is-half-tablet is-full-mobile" method="post">
|
||||
<h1 class="title is-2">Login</h1>
|
||||
<div class="grid place-items-center h-full">
|
||||
<form class="text-primary-content w-full md:max-w-md" method="post">
|
||||
<h1 class="text-2xl lg:text-4xl mb-6">Login</h1>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" asp-for="UserModel!.Username">Username</label>
|
||||
<div class="control">
|
||||
<input required class="input" type="text" asp-for="UserModel!.Username" autocomplete="username" />
|
||||
<div class="form-control w-full">
|
||||
<span class="label">
|
||||
<label class="label-text text-primary-content" asp-for="UserModel!.Username">Username</label>
|
||||
</span>
|
||||
<input required class="input input-bordered w-full" type="text" asp-for="UserModel!.Username" autocomplete="username" />
|
||||
<span class="label">
|
||||
<span class="label-text-alt text-error" asp-validation-for="UserModel!.Username"></span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="help is-danger" asp-validation-for="UserModel!.Username"></span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" asp-for="UserModel!.Password">Password</label>
|
||||
<div class="control">
|
||||
<input required class="input" type="password" asp-for="UserModel!.Password" autocomplete="current-password" />
|
||||
</div>
|
||||
<span class="help is-danger" asp-validation-for="UserModel!.Password"></span>
|
||||
<div class="form-control w-full">
|
||||
<span class="label">
|
||||
<label class="label-text text-primary-content" asp-for="UserModel!.Password">Password</label>
|
||||
</span>
|
||||
<input required class="input input-bordered w-full" type="password" asp-for="UserModel!.Password" autocomplete="current-password" />
|
||||
<span class="label">
|
||||
<span class="label-text-alt text-error" asp-validation-for="UserModel!.Password"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="has-text-danger" asp-validation-summary="ModelOnly" class="text-danger"></div>
|
||||
<div class="text-error pb-3" asp-validation-summary="ModelOnly" class="text-danger"></div>
|
||||
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary w-full" type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
ViewData["Title"] = "Logout";
|
||||
}
|
||||
|
||||
<p>How did you get here?</p>
|
||||
<p class="text-xl text-error">How did you get here?</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,35 +5,29 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@ViewData["Title"] - JustShortIt</title>
|
||||
|
||||
<link rel="stylesheet" href="/css/index.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/main.min.css" asp-append-version="true" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar is-primary has-shadow" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short It!</a>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<nav class="navbar bg-primary text-primary-content p-0 min-h-0" aria-label="main navigation">
|
||||
<div class="flex-1">
|
||||
<a class="btn btn-ghost rounded-none px-6" href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short It!</a>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="flex-none mr-6">
|
||||
<partial name="_LoginPartial"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main style="margin-bottom: 12rem" class="container">
|
||||
<main class="flex-1 container mx-auto px-8 py-8 grid">
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<footer style="position: fixed; bottom: 0; left: 0; right: 0" class="footer has-background-primary ">
|
||||
<div class="has-text-centered">
|
||||
<footer class="footer footer-center py-10 bg-primary text-secondary-content">
|
||||
<aside class="">
|
||||
<p>
|
||||
<a href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short it!</a>
|
||||
by <a href="https://miawinter.de/" target="_blank">Mia Winter</a>.
|
||||
Styled with <a href="https://bulma.io" target="_blank">Bulma</a>.
|
||||
<a class="hover:link" href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short it!</a>
|
||||
by <a class="hover:link" href="https://miawinter.de/" target="_blank">Mia Winter</a>.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</footer>
|
||||
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@if (User.Identity?.IsAuthenticated is true) {
|
||||
<span class="mx-3">@User.Identity.Name</span>
|
||||
<a class="button is-ghost" asp-page="Logout">Logout</a>
|
||||
<a class="btn btn-link text-secondary-content" asp-page="Logout">Logout</a>
|
||||
} else {
|
||||
<a class="button is-ghost" asp-page="Login">Login</a>
|
||||
<a class="hover:link text-secondary-content" asp-page="Login">Login</a>
|
||||
}
|
||||
|
|
@ -4,81 +4,92 @@
|
|||
ViewData["Title"] = "Urls";
|
||||
}
|
||||
|
||||
<div class="columns is-centered is-multiline my-6 px-4">
|
||||
<div class="grid place-items-center h-full text-primary-content">
|
||||
<div class="w-full md:max-w-lg">
|
||||
@if (!string.IsNullOrEmpty(Model.Message)) {
|
||||
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile notification is-info">
|
||||
<button class="delete" onclick="this.parentElement.remove()"></button>
|
||||
<!--
|
||||
btn-success
|
||||
/\
|
||||
this just tells tailwind to generate it, since new uses this class for the link copy button
|
||||
I know there is a safe-class thingie in the config, but this was just easier bc it's only needed here
|
||||
-->
|
||||
<div class="alert alert-info rounded-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
<span>
|
||||
@Html.Raw(Model.Message)
|
||||
</span>
|
||||
<button class="btn btn-square btn-sm btn-ghost" onclick="this.parentElement.remove()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="column is-full has-text-centered">
|
||||
<h1 class="title is-2">Urls Administration</h1>
|
||||
</div>
|
||||
<h1 class="text-2xl lg:text-4xl my-6 text-center">Urls Administration</h1>
|
||||
|
||||
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile">
|
||||
<form class="mb-6" method="post" asp-page="Urls" asp-page-handler="Inspect">
|
||||
<h2 class="title is-3">Inspect URL</h2>
|
||||
<h2 class="text-xl lg:text-2xl mb-3">Inspect URL</h2>
|
||||
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="button is-static">ID</label>
|
||||
<div class="join w-full">
|
||||
<label class="join-item btn btn-outline no-animation text-primary-content border-white">ID</label>
|
||||
<div class="join-item flex-1">
|
||||
<input required type="text" class="input input-bordered w-full border-white" name="Inspect_Id" autocomplete="off" />
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input required type="text" class="input" name="Inspect_Id" autocomplete="off" />
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit">Inspect</button>
|
||||
<div class="join-item">
|
||||
<button class="btn btn-primary border-1" type="submit">Inspect</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<span class="help is-danger">@ModelState["Inspect_Id"]?.Errors.FirstOrDefault()?.ErrorMessage</span>
|
||||
</div>
|
||||
<span class="text-error">@ModelState["Inspect_Id"]?.Errors.FirstOrDefault()?.ErrorMessage</span>
|
||||
</form>
|
||||
|
||||
<form method="post">
|
||||
<h2 class="title is-3">New URL</h2>
|
||||
<form method="post" asp-page-handler="New">
|
||||
<h2 class="text-xl lg:text-2xl mb-3">New URL</h2>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" asp-for="Model!.Id">ID</label>
|
||||
<div class="control">
|
||||
<input required class="input" type="text" asp-for="Model!.Id" autocomplete="off" />
|
||||
</div>
|
||||
<span class="help is-danger" asp-validation-for="Model!.Id"></span>
|
||||
<div class="form-control w-full">
|
||||
<span class="label">
|
||||
<label class="label-text text-primary-content" asp-for="Model!.Id">ID</label>
|
||||
</span>
|
||||
<input required class="input input-bordered w-full" type="text" asp-for="Model!.Id" autocomplete="off" />
|
||||
<span class="label">
|
||||
<span class="label-text-alt text-error" asp-validation-for="Model!.Id"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" asp-for="Model!.Target">Target</label>
|
||||
<div class="control">
|
||||
<input required class="input" type="url" asp-for="Model!.Target" autocomplete="off" />
|
||||
<div class="form-control w-full">
|
||||
<div class="label">
|
||||
<label class="label-text text-primary-content" asp-for="Model!.Target">Target</label>
|
||||
</div>
|
||||
<input required class="input input-bordered w-full" type="url" asp-for="Model!.Target" autocomplete="off" />
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-error" asp-validation-for="Model!.Target"></span>
|
||||
</div>
|
||||
<span class="help is-danger" asp-validation-for="Model!.Target"></span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" asp-for="Model!.ExpirationDate">Expiration</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<div class="form-control w-full">
|
||||
<span class="label">
|
||||
<label class="label-text text-primary-content" asp-for="Model!.ExpirationDate">Expiration</label>
|
||||
</span>
|
||||
@Html.DropDownListFor(m => m.Model!.ExpirationDate, new List<SelectListItem> {
|
||||
new("1 Day", DateTime.UtcNow.AddDays(1).ToBinary().ToString()),
|
||||
new("1 Week", DateTime.UtcNow.AddDays(7).ToBinary().ToString()),
|
||||
new("4 Weeks", DateTime.UtcNow.AddDays(4 * 7).ToBinary().ToString()),
|
||||
new("1 Year", DateTime.UtcNow.AddYears(1).ToBinary().ToString()),
|
||||
new("Never", DateTime.UtcNow.AddYears(1000).ToBinary().ToString())
|
||||
}, "Select Expiration")
|
||||
}, "Select Expiration", new {
|
||||
@class = "select select-bordered w-full"
|
||||
})
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-error" asp-validation-for="Model!.ExpirationDate"></span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help is-danger" asp-validation-for="Model!.ExpirationDate"></span>
|
||||
</div>
|
||||
|
||||
<div class="has-text-danger" asp-validation-summary="ModelOnly"></div>
|
||||
<div class="text-error pb-3" asp-validation-summary="ModelOnly"></div>
|
||||
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary w-full" type="submit">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ public class UrlsModel : PageModel {
|
|||
return RedirectToPage("Inspect", new { Id = id });
|
||||
}
|
||||
|
||||
public async Task<IActionResult> OnPostAsync() {
|
||||
public async Task<IActionResult> OnPostNewAsync() {
|
||||
if (!ModelState.IsValid) return Page();
|
||||
string id = HttpUtility.UrlEncode(Model.Id);
|
||||
|
||||
|
|
@ -66,8 +66,8 @@ public class UrlsModel : PageModel {
|
|||
ModelState.Clear();
|
||||
ModelState.SetModelValue(nameof(UrlRedirect.Id), GenerateNewId(), GenerateNewId());
|
||||
|
||||
Message = $"URL Generated! <a href='{link}'>{link}</a>. " +
|
||||
$"<button class='button is-link is-small' onclick='navigator.clipboard.writeText(\"{link}\")'>Copy</button>";
|
||||
Message = $"URL Generated! <a class=link href='{link}'>{link}</a>. " +
|
||||
$"<button class='btn btn-sm btn-success' onclick='navigator.clipboard.writeText(\"{link}\")'>Copy</button>";
|
||||
return OnGet(Message);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue