Login page styles

OutOfSchool/OutOfSchool.IdentityServer/Views/Auth/Login.cshtml

@@ -8,10 +8,19 @@
     ViewData["Title"] = SharedLocalizer["Entrance to Extracurricular activities"];
     Layout = "_Layout";
 }
-
-<div class="login__wrapper">
-    <h1 class="login__text">@SharedLocalizer["Sign In With"]</h1>
-</div>
+    <div class="wrapper">
+        <div class="icon_wrapper">
+        <h3 class="icon_title">@SharedLocalizer["Увійти"].Value.ToUpper()</h3>
+        <div class="icon_social">
+            <button class="icon_button">
+                <img src="/icons/fb.png" alt="facebook">
+            </button>
+            <button class="button">
+                <img src="/icons/google.png" alt="google">
+            </button>
+        </div>
+      <div class="option">або заповніть форму</div>
+
 @* <form asp-controller="Auth" asp-action="ExternalLogin" *@
 @*       asp-route-returnUrl="@Model.ReturnUrl" method="post"> *@
 @*     @foreach (var provider in Model.ExternalProviders) *@
@@ -26,24 +35,34 @@
 
 <form class="login__wrapper" asp-controller="Auth" asp-action="Login" method="post">
     <input type="hidden" asp-for="ReturnUrl" />
-    <div>
-        <label class="login__label">@SharedLocalizer["Login"]</label>
-        <input class="login__input" asp-for="Username" />
-        <span asp-validation-for="Username"></span>
-    </div>
-    <div>
-        <label class="login__label">@SharedLocalizer["Password"]</label>
-        <input class="login__input" asp-for="Password" />
-        <span asp-validation-for="Password"></span>
-    </div>
     <div asp-validation-summary="ModelOnly"></div>
-    <div>
-        <button class="login__button" type="submit">@SharedLocalizer["Sign In"]</button>
-    </div>
-</form>
-<div class="login__wrapper">
-    <a class="login__link" asp-controller="Auth" asp-action="Register"
+     <ul class="registration_list">
+        <li class="registration_item">
+            <label class="registration_label">@SharedLocalizer["Емейл"]</label>
+            <input class="registration_input" asp-for="Username" />
+            <div>
+            <span asp-validation-for="Username"></span>
+            </div>
+        </li>
+          <li class="registration_item">
+            <label class="registration_label">@SharedLocalizer["Пароль"]</label>
+            <input class="registration_input" asp-for="Password" />
+            <div>
+            <span asp-validation-for="Password"></span>
+            </div>
+        </li>
+
+        <li class="registration_item">
+        <button class=" registration_submit"  type="submit">@SharedLocalizer["Увійти"]</button>
+   </li>
+    </ul>
+    <div class="registration_login">
+<span>Ще не зареєстровані?</span>
+    <a class="link" asp-controller="Auth" asp-action="Register"
        asp-route-returnUrl="@Model.ReturnUrl">
-        @SharedLocalizer["Register"]
+        @SharedLocalizer["Зареєструватися"]
     </a>
+</div>
+</form>
+</div>
 </div>

OutOfSchool/OutOfSchool.IdentityServer/Views/Auth/Register.cshtml

@@ -9,19 +9,19 @@
     ViewData["Title"] = SharedLocalizer["Registration for Extracurricular activities"];
     Layout = "_Layout";
 }
-<div class="registration">
-    <div class="registration_wrapper">
-        <h3 class="registration_title">@SharedLocalizer["Register"].Value.ToUpper()</h3>
-        <h5 class="registration_subtitle">@SharedLocalizer["To be able to apply to clubs or become a service provider"]</h5>
-        <div class="registration_social">
-            <button class="registration_button">
+<div class="wrapper">
+    <div class="icon_wrapper">
+        <h3 class="icon_title">@SharedLocalizer["Register"].Value.ToUpper()</h3>
+        <h5 class="icon_subtitle">@SharedLocalizer["To be able to apply to clubs or become a service provider"]</h5>
+        <div class="icon_social">
+            <button class="icon_button">
                 <img src="/icons/fb.png" alt="facebook">
             </button>
-            <button class="registration_button">
+            <button class="button">
                 <img src="/icons/google.png" alt="google">
             </button>
         </div>
-        <div class="registration_option">@SharedLocalizer["or fill out the form"]</div>
+        <div class="option">@SharedLocalizer["or fill out the form"]</div>
         <form onsubmit="return validateForm(this)" asp-controller="Auth" asp-action="Register" method="post" class="registration_form">
             <input type="hidden" asp-for="ReturnUrl" />
             <div asp-validation-summary="ModelOnly"></div>
@@ -78,7 +78,7 @@
                     <label class="registration_label" asp-for="PhoneNumber">@SharedLocalizer["Phone"]<span class="registration_star">*</span></label>
                     <div class="registration_phone">
                         <div class="registration_phone-code">+38</div>
-                        <input class="registration_input" type="text" asp-for="PhoneNumber" id="phone_number">
+                        <input class="registration_input" maxlength="10" type="text" asp-for="PhoneNumber" id="phone_number">
                     </div>
                     <div>
                         <span asp-validation-for="PhoneNumber"></span>
@@ -129,7 +129,7 @@
                 </li>
                 <li class="registration_item registration_item-accept">
                     @SharedLocalizer["By registering I agree with"]
-                    <a href="#" class="registration_link">@SharedLocalizer["Terms of use"]</a>
+                    <a href="#" class="link">@SharedLocalizer["Terms of use"]</a>
                     @SharedLocalizer["and consent to the processing of personal data"]
                 </li>
 
@@ -140,7 +140,7 @@
         </form>
         <div class="registration_login">
             @SharedLocalizer["Already registered?"]
-            <a href="Login" class="registration_link">@SharedLocalizer["Sign In"]</a>
+            <a href="Login" class="link">@SharedLocalizer["Sign In"]</a>
         </div>
     </div>
 </div>

OutOfSchool/OutOfSchool.IdentityServer/Views/Shared/_Layout.cshtml

@@ -7,8 +7,8 @@
     <link rel="stylesheet" href="~/css/site.css" />
 </head>
 <body>
-    <div>
-        @RenderBody()
-    </div>
+<div>
+    @RenderBody()
+</div>
 </body>
 </html>

OutOfSchool/OutOfSchool.IdentityServer/wwwroot/css/site.css

@@ -1,4 +1,4 @@
-html,
+html,
 body {
   height: 100%;
 }
@@ -53,14 +53,6 @@ a {
   text-decoration: none;
   color: inherit;
 }
-
-.login__wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0;
-  padding: 10px;
-}
 .login__text,
 .login__label,
 .login__link {
@@ -117,13 +109,13 @@ a {
   color: #4158d0;
 }
 
-.registration {
+.wrapper {
   display: flex;
   justify-content: center;
   margin-top: 50px;
 }
 
-.registration_wrapper {
+.icon_wrapper {
   background: #ffffff;
   box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
   border-radius: 5px;
@@ -134,37 +126,37 @@ a {
   flex-direction: column;
   width: 640px;
 }
-.registration_title {
+.icon_title {
   line-height: 20px;
   text-align: center;
   color: #444444;
   margin: 0;
 }
-.registration_subtitle {
+.icon_subtitle {
   line-height: 18px;
   text-align: center;
   color: #aaaaaa;
   margin: 16px 0 0 0;
 }
-.registration_social {
+.icon_social {
   margin-top: 24px;
 }
-.registration_button {
+.icon_button {
   border: none;
   outline: none;
   background: inherit;
   margin: 0 0.3rem;
   cursor: pointer;
 }
-.registration_option {
+.option {
   font-size: 0.8125rem;
   line-height: 18px;
   text-align: center;
   color: #333333;
   position: relative;
   margin-top: 24px;
 }
-.registration_option:after {
+.option:after {
   content: "";
   display: block;
   position: absolute;
@@ -175,7 +167,7 @@ a {
   top: 50%;
   transform: translate(-120%, -50%);
 }
-.registration_option:before {
+.option:before {
   content: "";
   display: block;
   position: absolute;
@@ -243,7 +235,7 @@ a {
 .registration_item-password {
   margin-bottom: 8px;
 }
-.registration_link {
+.link {
   color: #3849f9;
   font-weight: bold;
   text-decoration: underline;
@@ -436,4 +428,4 @@ a {
   .registration_form {
     width: 95%;
   }
-}
+}