Skip to content

feat(issue-103): add design UI for login page (o2-auth) #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
live-dev999 merged 4 commits into from
Dec 1, 2021
Merged

feat(issue-103): add design UI for login page (o2-auth) #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e899ce
design(issue-103): update logo o2nextgen
live-dev999 Nov 28, 2021
cf1437f
feat(issue-103): update UI for login page. set template
live-dev999 Nov 28, 2021
afcec7b
feat(issue-103): update html for login page
live-dev999 Nov 28, 2021
df7f57b
feat(issue-103): update login page
live-dev999 Nov 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added design/o2nextgen/logos/1x/Artboard 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7,104 changes: 3,629 additions & 3,475 deletions design/o2nextgen/logos/o2nextgen-logo.ai
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 19 additions & 22 deletions design/o2nextgen/logos/o2nextgen-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 82 additions & 30 deletions src/Services/auth/O2NextGen.Auth.Web/Pages/Account/Login.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,68 @@


<div class="row">

<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>@Localizer["LoginMainHeader"]</h4>
<hr />
<div class="space-y-4">
<a href="">
<img src="~/images/o2nextgen-logo.svg" class="w-40" alt="tailus logo">
</a>
<p class="font-medium text-lg text-gray-600">Welcome to O2 Nextgen! @Localizer["LoginMainHeader"]</p>
</div>
<div class="mt-12 grid gap-6 sm:grid-cols-2">
<button class="py-3 px-6 rounded-xl bg-blue-50 hover:bg-blue-100 focus:bg-blue-100 active:bg-blue-200">
<div class="flex gap-4 justify-center">
<img src="~/images/google.svg" class="w-5" alt="">
<span class="block w-max font-medium tracking-wide text-sm text-blue-700">with Google</span>
</div>
</button>
<button class="py-3 px-6 rounded-xl bg-gray-900 transition hover:bg-gray-800 active:bg-gray-600 focus:bg-gray-700">
<div class="flex gap-4 items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
<span class="block w-max font-medium tracking-wide text-sm text-white">with Github</span>
</div>
</button>
</div>

<div role="hidden" class="mt-12 border-t">
<span class="block w-max mx-auto -mt-3 px-4 text-center text-gray-500 bg-white">Or</span>
</div>
<form action="" class="space-y-6 py-6">
<div>
<input type="email" asp-for="Input.Email"
placeholder="@Localizer["Email"]"
class="w-full py-3 px-6 ring-1 ring-gray-300 rounded-xl placeholder-gray-600 bg-transparent transition disabled:ring-gray-200 disabled:bg-gray-100 disabled:placeholder-gray-400 invalid:ring-red-400 focus:invalid:outline-none">
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>

<div class="flex flex-col items-end">
<input type="password" asp-for="Input.Password"
placeholder="@Localizer["Password"]"
class="w-full py-3 px-6 ring-1 ring-gray-300 rounded-xl placeholder-gray-600 bg-transparent transition disabled:ring-gray-200 disabled:bg-gray-100 disabled:placeholder-gray-400 invalid:ring-red-400 focus:invalid:outline-none">
<span asp-validation-for="Input.Password" class="text-danger"></span>
<button type="reset" class="w-max p-3 -mr-3">
<span class="text-sm tracking-wide text-blue-600">@Localizer["ForgotYourPassword"]</span>
</button>
</div>

<div>
<button type="submit" class="w-full px-6 py-3 rounded-xl bg-sky-500 transition hover:bg-sky-600 focus:bg-sky-600 active:bg-sky-800">
<span class="font-semibold text-white text-lg">@Localizer["LogIn"]</span>
</button>
@*<a href="#" type="reset" class="w-max p-3 -ml-3">
<span class="text-sm tracking-wide text-blue-600">@Localizer["RegisterNewUser"]</span>
</a>*@
<button type="reset" class="w-max p-3 -mr-3">
<span class="text-sm tracking-wide text-blue-600">@Localizer["RegisterNewUser"]</span>
</button>
</div>
</form>
<!--<section>
<form id="account" method="post" class="space-y-6 py-6">-->
@*<h4>@Localizer["LoginMainHeader"]</h4>*@
<!--<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email">@Localizer["Email"]</label>
Expand Down Expand Up @@ -40,37 +97,32 @@
</p>
</div>
</form>
</section>
</section>-->
</div>
<div class="col-md-6 col-md-offset-2">
@*<div class="col-md-6 col-md-offset-2">
<section>
<h4>@Localizer["UseAnotherServiceLogIn"]</h4>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
@{ if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div> }
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>}
</p>
</div>
</form> } }
</section>
</div>*@
</div>

52 changes: 51 additions & 1 deletion src/Services/auth/O2NextGen.Auth.Web/Pages/Shared/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,58 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - O2NextGen.Auth.Web</title>
<link rel="stylesheet" href="~/css/styles.css" />
<link rel="stylesheet" href="~/build/app.css">
</head>
<body>
@RenderBody()
<div class="2xl:container h-screen m-auto">
<div hidden class="fixed inset-0 w-7/12 lg:block">
<span class="absolute left-6 bottom-6 text-sm">©2021 <a href="https://www.o2bionics.com/" target="blank" title="O2 Bionics LLC">O2 Bionics LLC</a></span>
<video class="w-full h-full object-cover" loop autoplay src="~/videos/video.mp4" poster="~/images/bg.jpg"></video>
</div>
<div hidden role="hidden" class="fixed inset-0 w-6/12 ml-auto bg-white bg-opacity-70 backdrop-blur-xl lg:block"></div>
<div class="relative h-full ml-auto lg:w-6/12">
<div class="m-auto py-12 px-6 sm:p-20 xl:w-10/12">




@RenderBody()
@*<form action="" class="space-y-6 py-6">
<div>
<input type="email"
placeholder="Your Email"
class="w-full py-3 px-6 ring-1 ring-gray-300 rounded-xl placeholder-gray-600 bg-transparent transition disabled:ring-gray-200 disabled:bg-gray-100 disabled:placeholder-gray-400 invalid:ring-red-400 focus:invalid:outline-none">
</div>

<div class="flex flex-col items-end">
<input type="password"
placeholder="What's the secret word ?"
class="w-full py-3 px-6 ring-1 ring-gray-300 rounded-xl placeholder-gray-600 bg-transparent transition disabled:ring-gray-200 disabled:bg-gray-100 disabled:placeholder-gray-400 invalid:ring-red-400 focus:invalid:outline-none">
<button type="reset" class="w-max p-3 -mr-3">
<span class="text-sm tracking-wide text-blue-600">Forgot password ?</span>
</button>
</div>

<div>
<button class="w-full px-6 py-3 rounded-xl bg-sky-500 transition hover:bg-sky-600 focus:bg-sky-600 active:bg-sky-800">
<span class="font-semibold text-white text-lg">Login</span>
</button>
<a href="#" type="reset" class="w-max p-3 -ml-3">
<span class="text-sm tracking-wide text-blue-600">Create new account</span>
</a>
</div>
</form>*@

<div class="border-t pt-12">
<div class="space-y-2 text-center">
<img src="~/images/pfr-logo.svg" class="w-40 m-auto" alt="">
<span class="block text-sm tracking-wide text-gray-500">Get universal access to top specialists.</span>
</div>
</div>

</div>
</div>
</div>

</body>
</html>
96 changes: 0 additions & 96 deletions src/Services/auth/O2NextGen.Auth.Web/Resources/Pages/Account/Login.en.Designer.cs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading