-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🔀 Merge pull request #359 from COS301-SE-2024/dev/feat/final_ui_fixes
💄 UI Update: Updated login and register page and improved some text readability in app UI
- Loading branch information
Showing
5 changed files
with
257 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,70 +6,157 @@ ViewData["Title"] = "Log in"; | |
| @* Model.ReturnUrl = Request.Query["ReturnUrl"]; *@ | ||
| } | ||
|
|
||
| <h1>@ViewData["Title"]</h1> | ||
| <style> | ||
| body { | ||
| background-color: #f3f1eD; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } | ||
| h1, h2, h3 { | ||
| color: #033a30; | ||
| text-align: center; | ||
| } | ||
| .login-container { | ||
| background-color: #f3f1eD; | ||
| padding: 30px; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); | ||
| margin-top: 50px; | ||
| margin-left: 20px; | ||
| margin-right: 20px; | ||
| } | ||
| .form-floating label { | ||
| font-weight: 600; | ||
| color: #1d695b; | ||
| } | ||
| .btn-primary { | ||
| background-color: #033a30; | ||
| border: none; | ||
| padding: 10px; | ||
| font-size: 1.2em; | ||
| border-radius: 30px; | ||
| box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); | ||
| } | ||
| .btn-primary:hover { | ||
| background-color: #1d695b; | ||
| } | ||
| .external-login-button { | ||
| margin: auto; | ||
| display: block; | ||
| width: 80%; | ||
| border-radius: 30px; | ||
| box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); | ||
| border: 1px solid #033a30; | ||
| color: #033a30; | ||
| padding: 10px; | ||
| } | ||
| .external-login-button .btn { | ||
| width: 100%; | ||
| } | ||
| .login-section { | ||
| padding: 10px; | ||
| background-color: #f3f1eD; | ||
| } | ||
| .form-check-label { | ||
| font-weight: 500; | ||
| } | ||
| .form-check-input { | ||
| margin-right: 10px; | ||
| } | ||
| #forgot-password, a { | ||
| color: #1d695b; | ||
| text-decoration: none; | ||
| } | ||
| #forgot-password:hover, a:hover { | ||
| text-decoration: underline; | ||
| } | ||
| .row { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .form-control { | ||
| border-radius: 15px; | ||
| box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <section> | ||
| <div class="col-md-4 login-container"> | ||
| <section class="login-section"> | ||
| <form id="account" method="post"> | ||
| <h2>Use a local account to log in.</h2> | ||
| <h2>Log in to Your Account</h2> | ||
| <hr /> | ||
| <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div> | ||
|
|
||
| @* Email field *@ | ||
| <div class="form-floating mb-3"> | ||
| <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" | ||
| placeholder="[email protected]" /> | ||
| <label asp-for="Input.Email" class="form-label">Email / Username</label> | ||
| <span asp-validation-for="Input.Email" class="text-danger"></span> | ||
| </div> | ||
|
|
||
| @* Password field *@ | ||
| <div class="form-floating mb-3"> | ||
| <input asp-for="Input.Password" class="form-control" autocomplete="current-password" | ||
| aria-required="true" placeholder="password" /> | ||
| aria-required="true" placeholder="password" type="password" id="Input_Password" /> | ||
| <label asp-for="Input.Password" class="form-label">Password</label> | ||
| <span asp-validation-for="Input.Password" class="text-danger"></span> | ||
| </div> | ||
|
|
||
| @* Show password checkbox *@ | ||
| <div class="checkbox mb-3"> | ||
| <label class="form-label"> | ||
| <label class="form-check-label"> | ||
| <input type="checkbox" name="showPassword" id="ckShowPass" onclick="myshowp(this)" | ||
| class="form-check-input" /> | ||
| Show Password | ||
| </label> | ||
| </div> | ||
|
|
||
| @* Remember me checkbox *@ | ||
| <div class="checkbox mb-3"> | ||
| <label asp-for="Input.RememberMe" class="form-label"> | ||
| <label asp-for="Input.RememberMe" class="form-check-label"> | ||
| <input class="form-check-input" asp-for="Input.RememberMe" /> | ||
| @Html.DisplayNameFor(m => m.Input.RememberMe) | ||
| </label> | ||
| </div> | ||
|
|
||
| @* Log in button *@ | ||
| <div> | ||
| <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button> | ||
| </div> | ||
|
|
||
|
|
||
| <div> | ||
| @* Register new user *@ | ||
| <br /> | ||
| <p> | ||
| <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a> | ||
| </p> | ||
|
|
||
| <br /> | ||
| <p> | ||
| <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a> | ||
| </p> | ||
|
|
||
| <br /> | ||
| @* <p> | ||
| <a asp-area="Identity" asp-page="/Account/Register">Register</a> | ||
| </p> *@ | ||
| @* <p> | ||
| <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a> | ||
| </p> *@ | ||
| </div> | ||
| </form> | ||
| </section> | ||
| </div> | ||
| <div class="col-md-6 col-md-offset-2"> | ||
| <section> | ||
|
|
||
| <div class="col-md-6"> | ||
| <section class="login-section"> | ||
| <br> | ||
| <h3>Use another service to log in.</h3> | ||
| <hr /> | ||
| <br> | ||
| @{ | ||
| if ((Model.ExternalLogins?.Count ?? 0) == 0) | ||
| { | ||
|
|
@@ -89,8 +176,10 @@ ViewData["Title"] = "Log in"; | |
| <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> | ||
| <button type="submit" class="btn btn-outline-primary external-login-button" name="provider" value="@provider.Name" | ||
| title="Log in using your @provider.DisplayName account"> | ||
| Log in with @provider.DisplayName | ||
| </button> | ||
| } | ||
| </p> | ||
| </div> | ||
|
|
||
Oops, something went wrong.