Implement a custom, redesigned login page UI and add CORS support for authentication and generic API calls.

This commit is contained in:
Alaguraj0361 2026-01-19 23:11:02 +05:30
parent 45699efd13
commit 6e35513c15
6 changed files with 102 additions and 23 deletions

View File

@ -1,2 +1,3 @@
# home_dashboard/controllers/__init__.py
from . import main
from . import cors

View File

@ -0,0 +1,15 @@
from odoo import http
from odoo.http import request
import json
class CorsHandler(http.Controller):
# This specifically targets the authentication endpoint for CORS
@http.route('/web/session/authenticate', type='json', auth="none", cors="*")
def authenticate_cors(self, db, login, password, base_location=None):
request.session.authenticate(db, login, password)
return request.env['ir.http'].session_info()
# Generic search_read for the dashboard apps
@http.route('/web/dataset/call_kw', type='json', auth="user", cors="*")
def call_kw_cors(self, model, method, args, kwargs, path=None):
return request.env[model].with_user(request.uid).call_kw(method, args, kwargs)

View File

@ -11,7 +11,7 @@
/* Left Side: Background Image and Branding */
.o_login_left_side {
flex: 1.2 !important;
flex: 1.5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
@ -43,7 +43,7 @@
/* Right Side: Form Section */
.o_login_right_side {
flex: 1.2 !important;
flex: 1 !important;
/* background: #ffffff !important; */
display: flex !important;
justify-content: center !important;
@ -56,15 +56,17 @@
width: 60%
}
/* Floating Card UI */
/* Glassmorphism Card UI */
.o_login_card {
width: 100% !important;
max-width: 600px !important;
max-width: 450px !important;
padding: 40px !important;
background: #ffffff !important;
border-radius: 25px !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #f1f1f1 !important;
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border-radius: 20px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
z-index: 2;
}
@ -74,6 +76,7 @@
font-weight: 800 !important;
margin-bottom: 10px;
background: -webkit-linear-gradient(#2bb1a5, #fecd4f);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@ -85,22 +88,36 @@
}
.o_login_logo_container img {
max-height: 80px;
max-height: 120px;
/* Larger logo */
width: auto;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}
/* Form Inputs */
.form-control:focus {
border-color: #2bb1a5 !important;
box-shadow: 0 0 0 3px rgba(43, 177, 165, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
}
.o_login_form_container label {
color: rgba(255, 255, 255, 0.8) !important;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
background: #f9f9f9 !important;
border: 1px solid #edeef0 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 12px 15px !important;
height: auto !important;
color: white !important;
}
.form-control:focus {
border-color: #2bb1a5 !important;
box-shadow: 0 0 0 3px rgba(43, 177, 165, 0.1) !important;
.form-control::placeholder {
color: rgba(255, 255, 255, 0.3) !important;
}
/* Login Button with Gradient */
@ -134,16 +151,32 @@
}
.o_login_right_side {
background: linear-gradient(135deg, #fecd4f 0%, #2bb1a5 100%) !important;
background: #0f172a !important;
/* Keep dark background on mobile */
}
}
/* Hide Website Header/Footer to ensure standard "Backend-Style" Login UI */
/* Hide Website Header/Footer ONLY on Login, Signup, Reset Password */
body.o_custom_login_body header,
body.o_custom_login_body footer,
body.o_custom_login_body .o_footer_copyright,
body.o_custom_login_body #o_main_nav {
body.o_custom_login_body #o_main_nav,
body.o_custom_login_body .o_header_standard,
body.o_custom_login_body #wrapwrap>header,
body.o_custom_login_body #wrapwrap>footer {
display: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
pointer-events: none !important;
}
/* Ensure wrapwrap doesn't have padding/margin from header on these pages */
body.o_custom_login_body #wrapwrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Ensure the wrapper covers the entire screen, ignoring website container constraints */
@ -190,4 +223,37 @@ body.o_custom_login_body .o_login_main_wrapper {
.o_login_footer_custom a:hover {
color: #fecd4f;
}
/* website login screen */
.oe_website_login_container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100vh !important;
/* width: 100vw !important; */
overflow: hidden !important;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('/home_dashboard/static/src/img/login_bg.png') no-repeat center center !important;
background-size: cover !important;
color: white !important;
}
.oe_website_login_container .oe_login_form,
.oe_website_login_container .oe_signup_form,
.oe_website_login_container .oe_reset_password_form {
width: 60% !important;
padding: 40px !important;
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border-radius: 20px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
z-index: 2;
max-width: 400px;
}

View File

@ -12,10 +12,7 @@
<xpath expr="//div[hasclass('container')]" position="replace">
<div class="o_login_main_wrapper">
<div class="o_login_left_side">
<div class="o_login_content">
<h1>Chennora Restaurant</h1>
<p>Bringing Authentic South Indian Cuisine to Brampton</p>
</div>
<!-- Space for right alignment -->
</div>
<div class="o_login_right_side">
@ -26,7 +23,7 @@
<div class="o_login_header_text text-center">
<h3>Login</h3>
<p class="text-muted">Welcome back! Please enter your details.</p>
<p style="color: rgba(255, 255, 255, 0.6) !important;">Welcome back! Please enter your details.</p>
</div>
<div class="o_login_form_container">
@ -34,7 +31,7 @@
</div>
<div class="o_login_footer text-center mt-4">
<a href="/web/database/selector" t-if="not disable_database_manager" class="small text-decoration-none">Manage Databases</a>
<a href="/web/database/selector" t-if="not disable_database_manager" class="small text-decoration-none" style="color: rgba(255, 255, 255, 0.5) !important;">Manage Databases</a>
</div>
</div>
</div>