barhen
/
Biskilog_Accounting
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

new login page initial

pull/13/head
Benjamin Arhen 1 year ago
parent
d44a0bfed5
commit
e813f9717b
18 changed files with 872 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Client/Biskilog Accounting.Client.csproj
  2. 2
      Client/Layouts/AuthLayout.razor
  3. 24
      Client/Pages/Auth/Components/PhoneAuthTab.razor
  4. 214
      Client/Pages/Auth/Components/PhoneAuthTab.razor.css
  5. 24
      Client/Pages/Auth/Components/TabContainer.razor
  6. 153
      Client/Pages/Auth/Components/TabContainer.razor.css
  7. 38
      Client/Pages/Auth/Components/UsernameTab.razor
  8. 184
      Client/Pages/Auth/Components/UsernameTab.razor.css
  9. 166
      Client/Pages/Auth/Login.razor
  10. 196
      Client/Pages/Auth/Login.razor.css
  11. BIN
      Client/wwwroot/assets/img/google-image.png
  12. 1
      Client/wwwroot/css/signin.css
  13. BIN
      Client/wwwroot/fonts/AvenirLTStd-Black.otf
  14. BIN
      Client/wwwroot/fonts/AvenirLTStd-Book.otf
  15. BIN
      Client/wwwroot/fonts/AvenirLTStd-Roman.otf
  16. BIN
      Client/wwwroot/fonts/OstrichSans-Black.otf
  17. BIN
      Client/wwwroot/fonts/OstrichSans-Bold.otf
  18. BIN
      Client/wwwroot/fonts/Rockwill.otf

2
Client/Biskilog Accounting.Client.csproj
View File

@ -1,4 +1,4 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>

2
Client/Layouts/AuthLayout.razor
View File

@ -1,6 +1,6 @@
@namespace Biskilog_Accounting
@inherits LayoutComponentBase
<main style="background-color: #eee;height:100vh;">
<main style="background-color: #fff;height:100vh;">
@Body
</main>

24
Client/Pages/Auth/Components/PhoneAuthTab.razor
View File

@ -0,0 +1,24 @@
@page "/phoneauthtab"
<form>
<div class="input-div">
<input type="tel" id="phone" name="telphone" placeholder="888 888 8888" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" maxlength="12" class="input-box" /><br />
<span class="hidden">x</span>
</div>
<div class="input-div">
<input type="number" id="code" class="input-box" placeholder="Enter OTP" maxlength="6" /><br />
<span class="hidden">x</span>
</div>
</form>
<button type="button" class="sign-in-gbutton-colored" >
<div style="display: inline-flex;">
<i></i>
<span class="sign-in-gbutton-title">Submit</span>
</div>
</button>
@code {
}

214
Client/Pages/Auth/Components/PhoneAuthTab.razor.css
View File

@ -0,0 +1,214 @@
@font-face {
font-family: "titleFont";
src: url("../fonts/Rockwill.otf");
font-weight: bold;
}
.form-section {
border: rgb(186, 190, 197) 0.5px solid;
min-height: 690px;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 400px;
position: relative;
}
.form-section h2 {
font-size: 24pt;
font-weight: 800;
line-height: 32px;
margin-bottom: 17px;
margin-top: 20px;
color: rgb(57, 58, 61);
}
.title-section {
display: flex;
flex-direction: column;
align-items: center;
font-size: medium;
font-family: "titleFont";
color: rgb(186, 190, 197);
}
.title-section a {
font-size: 30pt;
text-decoration: none;
color: rgb(7, 7, 154);
}
.title-section a img {
margin: auto !important;
height: 80px !important;
max-width: 80px !important;
display: flex;
justify-content: space-between;
text-decoration: none;
}
.sign-in-gbutton {
padding: 0px 10px;
background: rgb(255, 255, 255);
border: 2px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
width: 100%;
max-width: 310px;
height: inherit;
margin: 20px;
max-height: 45px;
cursor: pointer;
color: rgb(57, 58, 61);
}
.sign-in-gbutton-colored {
padding: 0px 10px;
background: rgb(7, 7, 154);
border: 1px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
color: white;
width: 50%;
max-width: 310px;
height: 40px;
margin: 20px;
max-height: 45px;
cursor: pointer;
transition: width 1.5s ease;
}
.sign-in-gbutton-colored div > i {
width: 20px;
margin: 5px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOCAwYzIuNzk2IDAgNC44OTMgMi4xODQgNC45OTYgNS4yNjJMMTMgNS41VjdoMWEyIDIgMCAwIDEgMiAydjlhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWOWEyIDIgMCAwIDEgMi0yaDFWNS41QzMgMi4yOTggNS4xMzMgMCA4IDBabTYgOUgydjloMTJWOVptLTYgMmEyIDIgMCAwIDEgMS4wMDEgMy43MzJMOSAxNS4yYzAgLjQ0Mi0uNDQ4LjgtMSAuOC0uNTEzIDAtLjkzNi0uMzA5LS45OTMtLjcwN0w3IDE1LjJ2LS40NjhBMiAyIDAgMCAxIDggMTFabTAtOUM2LjMzMiAyIDUuMDg4IDMuMjc3IDUuMDA1IDUuMjgyTDUgNS41VjdoNlY1LjVDMTEgMy4zNyA5LjcyOCAyIDggMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}
.sign-in-gbutton-colored:hover {
width: 100%;
}
.sign-in-gbutton-title {
font-size: 15px;
margin: 7px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sign-in-gbutton-image {
height: 35px;
}
.line-styled-div ::before,
.line-styled-div ::after {
content: "";
position: absolute;
border-bottom: 2px solid rgb(186, 190, 197);
width: 150px;
}
.line-styled-div ::before {
margin: 7px 40px;
}
.line-styled-div ::after {
margin: 7px -190px;
}
.line-styled-div span {
position: relative;
display: inline-block;
color: rgb(186, 190, 197);
font: 1em sans-serif;
}
.tab button {
font-size: 13px;
font-weight: bold;
color: rgb(132, 134, 139);
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
min-width: 180px;
}
.tab button :hover {
border-bottom: 1px solid rgb(7, 7, 154);
}
.tab button.active {
border-bottom: 3px solid rgb(7, 7, 154);
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.input-box {
font-size: 15px;
width: 280px;
border: 0px;
outline: none;
background: transparent;
}
.input-box :active {
border: 0px;
}
.input-div {
margin-top: 28px;
border: 1.9px solid rgb(132, 134, 139);
min-height: 20px;
padding: 9px;
border-radius: 8px;
display: flex;
}
.input-div span {
width: 20px;
height: 20px;
border-radius: 30px;
color: #d52b1f;
border: 1px solid #d52b1f;
text-align: center;
font: 1rem sans-serif;
}
.input-div.error {
border: 1.9px solid #d52b1f;
background-color: #fbeceb;
}
.input-div.error input {
background-color: #fbeceb;
}
.input-div-check {
margin-top: 15px;
font-size: 18px;
display: flex;
text-align: center;
}
.input-div-check input {
width: 30px;
height: 25px;
display: flex;
margin-right: 25px;
}
.input-div-check label {
margin-top: 4.5px;
color: rgb(132, 134, 139);
text-align: center;
}

24
Client/Pages/Auth/Components/TabContainer.razor
View File

@ -0,0 +1,24 @@

<div class="tab">
<button class="@(GetTabClass(0))">Email or User ID</button>
<button class="@(GetTabClass(1))">Phone</button>
</div>
@if (activeTab == 0)
{
<UsernameTab />
}
else if (activeTab == 1)
{
<PhoneAuthTab />
}
@code {
private int activeTab = 0;
private string GetTabClass(int tabId) => tabId == activeTab ? "tablinks active" : "tablinks";
private void SwitchTabs(int tabId)
{
activeTab = tabId;
}
}

153
Client/Pages/Auth/Components/TabContainer.razor.css
View File

@ -0,0 +1,153 @@
@font-face {
font-family: "titleFont";
src: url("../fonts/Rockwill.otf");
font-weight: bold;
}
.form-section {
border: rgb(186, 190, 197) 0.5px solid;
min-height: 690px;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 400px;
position: relative;
}
.form-section h2 {
font-size: 24pt;
font-weight: 800;
line-height: 32px;
margin-bottom: 17px;
margin-top: 20px;
color: rgb(57, 58, 61);
}
.title-section {
display: flex;
flex-direction: column;
align-items: center;
font-size: medium;
font-family: "titleFont";
color: rgb(186, 190, 197);
}
.title-section a {
font-size: 30pt;
text-decoration: none;
color: rgb(7, 7, 154);
}
.title-section a img {
margin: auto !important;
height: 80px !important;
max-width: 80px !important;
display: flex;
justify-content: space-between;
text-decoration: none;
}
.sign-in-gbutton {
padding: 0px 10px;
background: rgb(255, 255, 255);
border: 2px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
width: 100%;
max-width: 310px;
height: inherit;
margin: 20px;
max-height: 45px;
cursor: pointer;
color: rgb(57, 58, 61);
}
.sign-in-gbutton-colored {
padding: 0px 10px;
background: rgb(7, 7, 154);
border: 1px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
color: white;
width: 50%;
max-width: 310px;
height: 40px;
margin: 20px;
max-height: 45px;
cursor: pointer;
transition: width 1.5s ease;
}
.sign-in-gbutton-colored div > i {
width: 20px;
margin: 5px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOCAwYzIuNzk2IDAgNC44OTMgMi4xODQgNC45OTYgNS4yNjJMMTMgNS41VjdoMWEyIDIgMCAwIDEgMiAydjlhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWOWEyIDIgMCAwIDEgMi0yaDFWNS41QzMgMi4yOTggNS4xMzMgMCA4IDBabTYgOUgydjloMTJWOVptLTYgMmEyIDIgMCAwIDEgMS4wMDEgMy43MzJMOSAxNS4yYzAgLjQ0Mi0uNDQ4LjgtMSAuOC0uNTEzIDAtLjkzNi0uMzA5LS45OTMtLjcwN0w3IDE1LjJ2LS40NjhBMiAyIDAgMCAxIDggMTFabTAtOUM2LjMzMiAyIDUuMDg4IDMuMjc3IDUuMDA1IDUuMjgyTDUgNS41VjdoNlY1LjVDMTEgMy4zNyA5LjcyOCAyIDggMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}
.sign-in-gbutton-colored:hover {
width: 100%;
}
.sign-in-gbutton-title {
font-size: 15px;
margin: 7px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sign-in-gbutton-image {
height: 35px;
}
.line-styled-div ::before,
.line-styled-div ::after {
content: "";
position: absolute;
border-bottom: 2px solid rgb(186, 190, 197);
width: 150px;
}
.line-styled-div ::before {
margin: 7px 40px;
}
.line-styled-div ::after {
margin: 7px -190px;
}
.line-styled-div span {
position: relative;
display: inline-block;
color: rgb(186, 190, 197);
font: 1em sans-serif;
}
.tab button {
font-size: 13px;
font-weight: bold;
color: rgb(132, 134, 139);
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
min-width: 180px;
}
.tab button :hover {
border-bottom: 1px solid rgb(7, 7, 154);
}
.tab button.active {
border-bottom: 3px solid rgb(7, 7, 154);
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

38
Client/Pages/Auth/Components/UsernameTab.razor
View File

@ -0,0 +1,38 @@
@page "/emailusernametab"
<form>
<div class="input-div">
<input type="text" id="emailId" class="input-box" placeholder="Email or User ID" autocomplete="username email" /><br />
<span class="hidden">x</span>
</div>
<div class="input-div">
<input type="password" id="password" class="input-box" placeholder="Password" autocomplete="current-password" /><br />
<span class="hidden">x</span>
</div>
<div class="input-div-check">
<input type="checkbox" id="rememberme-checkbox" name="rememberme-checkbox" class="input-box" /><br />
<label for="rememberme-checkbox">Remember me</label>
</div>
</form>
<button type="button" class="sign-in-gbutton-colored" @onclick="Authenticate">
<div style="display: inline-flex;">
<i></i>
<span class="sign-in-gbutton-title">Sign In</span>
</div>
</button>
<a class="reset-link" @onclick="SwitchToSignUp">Sign Up</a>
@code {
private void Authenticate()
{
}
private void SwitchToSignUp()
{
// You can use navigation logic to switch to the sign-up page.
}
}

184
Client/Pages/Auth/Components/UsernameTab.razor.css
View File

@ -0,0 +1,184 @@
@font-face {
font-family: "titleFont";
src: url("../fonts/Rockwill.otf");
font-weight: bold;
}
.form-section {
border: rgb(186, 190, 197) 0.5px solid;
min-height: 690px;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 400px;
position: relative;
}
.form-section h2 {
font-size: 24pt;
font-weight: 800;
line-height: 32px;
margin-bottom: 17px;
margin-top: 20px;
color: rgb(57, 58, 61);
}
.title-section {
display: flex;
flex-direction: column;
align-items: center;
font-size: medium;
font-family: "titleFont";
color: rgb(186, 190, 197);
}
.title-section a {
font-size: 30pt;
text-decoration: none;
color: rgb(7, 7, 154);
}
.title-section a img {
margin: auto !important;
height: 80px !important;
max-width: 80px !important;
display: flex;
justify-content: space-between;
text-decoration: none;
}
.sign-in-gbutton {
padding: 0px 10px;
background: rgb(255, 255, 255);
border: 2px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
width: 100%;
max-width: 310px;
height: inherit;
margin: 20px;
max-height: 45px;
cursor: pointer;
color: rgb(57, 58, 61);
}
.sign-in-gbutton-colored {
padding: 0px 10px;
background: rgb(7, 7, 154);
border: 1px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
color: white;
width: 50%;
max-width: 310px;
height: 40px;
margin: 20px;
max-height: 45px;
cursor: pointer;
transition: width 1.5s ease;
}
.sign-in-gbutton-colored div > i {
width: 20px;
margin: 5px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOCAwYzIuNzk2IDAgNC44OTMgMi4xODQgNC45OTYgNS4yNjJMMTMgNS41VjdoMWEyIDIgMCAwIDEgMiAydjlhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWOWEyIDIgMCAwIDEgMi0yaDFWNS41QzMgMi4yOTggNS4xMzMgMCA4IDBabTYgOUgydjloMTJWOVptLTYgMmEyIDIgMCAwIDEgMS4wMDEgMy43MzJMOSAxNS4yYzAgLjQ0Mi0uNDQ4LjgtMSAuOC0uNTEzIDAtLjkzNi0uMzA5LS45OTMtLjcwN0w3IDE1LjJ2LS40NjhBMiAyIDAgMCAxIDggMTFabTAtOUM2LjMzMiAyIDUuMDg4IDMuMjc3IDUuMDA1IDUuMjgyTDUgNS41VjdoNlY1LjVDMTEgMy4zNyA5LjcyOCAyIDggMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}
.sign-in-gbutton-colored:hover {
width: 100%;
}
.sign-in-gbutton-title {
font-size: 15px;
margin: 7px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sign-in-gbutton-image {
height: 35px;
}
.line-styled-div ::before,
.line-styled-div ::after {
content: "";
position: absolute;
border-bottom: 2px solid rgb(186, 190, 197);
width: 150px;
}
.line-styled-div ::before {
margin: 7px 40px;
}
.line-styled-div ::after {
margin: 7px -190px;
}
.line-styled-div span {
position: relative;
display: inline-block;
color: rgb(186, 190, 197);
font: 1em sans-serif;
}
.input-box {
font-size: 15px;
width: 280px;
border: 0px;
outline: none;
background: transparent;
}
.input-box :active {
border: 0px;
}
.input-div {
margin-top: 28px;
border: 1.9px solid rgb(132, 134, 139);
min-height: 20px;
padding: 9px;
border-radius: 8px;
display: flex;
}
.input-div span {
width: 20px;
height: 20px;
border-radius: 30px;
color: #d52b1f;
border: 1px solid #d52b1f;
text-align: center;
font: 1rem sans-serif;
}
.input-div.error {
border: 1.9px solid #d52b1f;
background-color: #fbeceb;
}
.input-div.error input {
background-color: #fbeceb;
}
.input-div-check {
margin-top: 15px;
font-size: 18px;
display: flex;
text-align: center;
}
.input-div-check input {
width: 30px;
height: 25px;
display: flex;
margin-right: 25px;
}
.input-div-check label {
margin-top: 4.5px;
color: rgb(132, 134, 139);
text-align: center;
}

166
Client/Pages/Auth/Login.razor
View File

@ -1,139 +1,45 @@
@using Biskilog_Accounting.Shared.Interfaces
@using Biskilog_Accounting.Client.Pages.Auth.Components
@inject NavigationManager m_navigationManager
@layout AuthLayout
@inject HttpClient m_http
@inject ITokenService m_tokenService
@page "/login"
<style>
.gradient-custom-2 {
/* fallback for old browsers */
background: #fccb90;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgb(20 158 132 / 76%), rgb(10 10 56/100%));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgb(20 158 132 / 76%), rgb(10 10 56/100%));
}
.login-buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.facebook-button, .twitter-button, .google-button, .apple-button, .microsoft-button {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
text-decoration: none;
color: #fff;
}
.facebook-button {
background-color: #3B5998;
}
.twitter-button {
background-color: #1DA1F2;
}
.google-button {
background-color: #DB4437;
}
.apple-button {
background-color: #000;
}
.microsoft-button {
background-color: #00A4EF;
}
</style>
<section class="h-100 gradient-form" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="col-lg-6">
<div class="card-body p-md-5 mx-md-4">
<div class="text-center">
<img src="icon-512.png"
style="width: 185px;" alt="logo">
<h4 class="mt-1 mb-5 pb-1">Biskilog Accounting</h4>
</div>
<form>
<p>Please login to your account</p>
<div class="form-outline mb-4">
<input type="email" id="form2Example11" class="form-control"
placeholder="Phone number or email address" @oninput="@(args => usernameInput(args.Value.ToString()))" @onkeydown="@Enter" />
<label class="form-label" for="form2Example11">Username</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form2Example22" class="form-control" @oninput="@(args => passwordInput(args.Value.ToString()))" @onkeydown="@Enter" />
<label class="form-label" for="form2Example22">Password</label>
</div>
<div class="text-center pt-1 mb-5 pb-1">
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="button" @onclick="pagaAuth">
Log
in
</button>
<a class="text-muted" href="#!">Forgot password?</a>
</div>
<div class="d-flex align-items-center justify-content-center pb-4">
<div class="login-buttons">
<div class="button-row">
<a href="#" class="facebook-button"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter-button"><i class="fab fa-twitter"></i></a>
<a href="#" class="google-button"><i class="fab fa-google"></i></a>
</div>
<div class="button-row">
<a href="#" class="apple-button"><i class="fab fa-apple"></i></a>
<a href="#" class="microsoft-button"><i class="fab fa-windows"></i></a>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center gradient-custom-2">
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
<h4 class="mb-4">Simplify Your Business Management with Biskilog's Suite of Tools</h4>
<p class="small mb-0">
Stay on top of your business operations from anywhere with Biskilog - now a user-friendly web application
that not only provides a comprehensive operational summary of all records from the BISKILOG POS software
but also allows you to make sales and access new features. Monitor operations, make informed decisions and simplify
your business management with Biskilog's powerful and convenient web app. Say goodbye to manual record-keeping
and hello to streamlined efficiency with Biskilog.
</p>
</div>
</div>
</div>
</div>
</div>
<section class="title-section">
<a href="index.html">
<img class="logo-image" src="@iconImage" alt="The logo of Biskilog pos" />
<span>BISKILOG</span>
</a>
</section>
<section class="form-section">
<h2>Sign in</h2>
<span style="font-family: sans-serif; color: rgb(141, 144, 150);">
Enter your credentials to use <a href="index.html">Biskilog</a> accounting
</span>
<button type="button" class="sign-in-gbutton">
<div style="display: inline-flex;">
<img src="@googleIcon" class="sign-in-gbutton-image" alt="Google logo" />
<span class="sign-in-gbutton-title">Sign in with Google</span>
</div>
</button>
<div class="line-styled-div">
<span>OR</span>
</div>
<TabContainer />
<hr style="margin-top: 15px; width: 320px; margin-bottom: 15px; color: #babec5; border-style: solid;" />
<label class="policy-statement">
By selecting Sign In or Sign in with Google, you agree to our <a href="#">Terms</a> and acknowledge our <a href="#">Privacy Statement</a>.
</label>
<div class="RecaptchaSignIn">
Invisible reCAPTCHA by Google <a href="https://www.google.com/intl/en/policies/privacy/">Privacy Policy</a> and <a href="https://www.google.com/intl/en/policies/terms/">Terms of Use</a>.
</div>
</section>
</section>
@code {
private string iconImage = "../icon-512.png";
private string googleIcon = "../assets/img/google-image.png";
// Add any other necessary code or logic here
}

196
Client/Pages/Auth/Login.razor.css
View File

@ -0,0 +1,196 @@
@font-face {
font-family: "titleFont";
src: url("../../fonts/Rockwill.otf");
font-weight: bold;
}
.form-section {
border: rgb(186, 190, 197) 0.5px solid;
min-height: 690px;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 400px;
position: relative;
}
.form-section h2 {
font-size: 24pt;
font-weight: 800;
line-height: 32px;
margin-bottom: 17px;
margin-top: 20px;
color: rgb(57, 58, 61);
}
.title-section {
display: flex;
flex-direction: column;
align-items: center;
font-size: medium;
font-family: "titleFont";
color: rgb(186, 190, 197);
}
.title-section a {
font-size: 30pt;
text-decoration: none;
color: rgb(7, 7, 154);
}
.title-section a img {
margin: auto !important;
height: 80px !important;
max-width: 80px !important;
display: flex;
justify-content: space-between;
text-decoration: none;
}
.sign-in-gbutton {
padding: 0px 10px;
background: rgb(255, 255, 255);
border: 2px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
width: 100%;
max-width: 310px;
height: inherit;
margin: 20px;
max-height: 45px;
cursor: pointer;
color: rgb(57, 58, 61);
}
.sign-in-gbutton-colored {
padding: 0px 10px;
background: rgb(7, 7, 154);
border: 1px solid rgb(186, 190, 197);
border-radius: 2px;
white-space: nowrap;
color: white;
width: 50%;
max-width: 310px;
height: 40px;
margin: 20px;
max-height: 45px;
cursor: pointer;
transition: width 1.5s ease;
}
.sign-in-gbutton-colored div > i {
width: 20px;
margin: 5px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOCAwYzIuNzk2IDAgNC44OTMgMi4xODQgNC45OTYgNS4yNjJMMTMgNS41VjdoMWEyIDIgMCAwIDEgMiAydjlhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWOWEyIDIgMCAwIDEgMi0yaDFWNS41QzMgMi4yOTggNS4xMzMgMCA4IDBabTYgOUgydjloMTJWOVptLTYgMmEyIDIgMCAwIDEgMS4wMDEgMy43MzJMOSAxNS4yYzAgLjQ0Mi0uNDQ4LjgtMSAuOC0uNTEzIDAtLjkzNi0uMzA5LS45OTMtLjcwN0w3IDE1LjJ2LS40NjhBMiAyIDAgMCAxIDggMTFabTAtOUM2LjMzMiAyIDUuMDg4IDMuMjc3IDUuMDA1IDUuMjgyTDUgNS41VjdoNlY1LjVDMTEgMy4zNyA5LjcyOCAyIDggMloiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}
.sign-in-gbutton-colored:hover {
width: 100%;
}
.sign-in-gbutton-title {
font-size: 15px;
margin: 7px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sign-in-gbutton-image {
height: 35px;
}
.line-styled-div ::before,
.line-styled-div ::after {
content: "";
position: absolute;
border-bottom: 2px solid rgb(186, 190, 197);
width: 150px;
}
.line-styled-div ::before {
margin: 7px 40px;
}
.line-styled-div ::after {
margin: 7px -190px;
}
.line-styled-div span {
position: relative;
display: inline-block;
color: rgb(186, 190, 197);
font: 1em sans-serif;
}
.tab button {
font-size: 13px;
font-weight: bold;
color: rgb(132, 134, 139);
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
min-width: 180px;
}
.tab button :hover {
border-bottom: 1px solid rgb(7, 7, 154);
}
.tab button.active {
border-bottom: 3px solid rgb(7, 7, 154);
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.RecaptchaSignIn {
width: 100%;
background-color: rgb(236, 238, 241);
font-size: 14px;
color: rgb(141, 144, 150);
padding: 16px;
text-align: center;
position: absolute;
bottom: 0px;
font: 0.8em sans-serif;
}
.policy-statement {
margin-left: 40px;
margin-right: 40px;
font: 0.9em sans-serif;
color: rgb(141, 144, 150);
}
.RecaptchaSignIn > a,
label > a,
.reset-link,
span > a {
color: royalblue;
cursor: pointer;
text-decoration: none;
}
.reset-link {
font: 0.9em sans-serif;
}
.auth-success {
color: green;
}
.auth-failure {
color: red;
}
.hidden {
display: none;
}

BIN
Client/wwwroot/assets/img/google-image.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 588 B

1
Client/wwwroot/css/signin.css
View File

@ -0,0 +1 @@


BIN
Client/wwwroot/fonts/AvenirLTStd-Black.otf
View File

Binary file not shown.

BIN
Client/wwwroot/fonts/AvenirLTStd-Book.otf
View File

Binary file not shown.

BIN
Client/wwwroot/fonts/AvenirLTStd-Roman.otf
View File

Binary file not shown.

BIN
Client/wwwroot/fonts/OstrichSans-Black.otf
View File

Binary file not shown.

BIN
Client/wwwroot/fonts/OstrichSans-Bold.otf
View File

Binary file not shown.

BIN
Client/wwwroot/fonts/Rockwill.otf
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save