{
+ this.oidcConfig = success.body;
+ },
+ error => {
+ console.log("Failed to load OIDC config:", error);
+ this.oidcConfig = { enabled: false };
+ }
+ );
+ },
+ checkOIDCError() {
+ // Check URL parameters for OIDC errors
+ const urlParams = new URLSearchParams(window.location.search);
+ const error = urlParams.get('error');
+ if (error) {
+ this.oidcError = error;
+ // Clean URL after showing error
+ const url = new URL(window.location);
+ url.searchParams.delete('error');
+ window.history.replaceState({}, document.title, url.pathname + url.hash);
+ }
+ },
+ getOIDCErrorMessage() {
+ switch (this.oidcError) {
+ case 'unauthorized_role':
+ return this.$t('login.unauthorized_role_message');
+ case 'missing_code':
+ return this.$t('login.missing_code_message');
+ case 'invalid_state':
+ return this.$t('login.invalid_state_message');
+ case 'token_exchange_failed':
+ return this.$t('login.token_exchange_failed_message');
+ case 'account_creation_failed':
+ return this.$t('login.account_creation_failed_message');
+ case 'no_admin_account_found':
+ return this.$t('login.no_admin_account_found_message');
+ case 'exchange_failed':
+ return this.$t('login.exchange_failed_message');
+ default:
+ return this.$t('login.generic_oidc_error_message');
+ }
+ },
currentYear() {
return new Date().getFullYear();
},
@@ -549,6 +622,9 @@ export default {
}
);
},
+ doOIDCLogin() {
+ this.execOIDCLogin();
+ },
initGraphics() {
$("body").addClass("logged");
$("body").removeClass("not-logged");
diff --git a/sun/sun-ui/src/i18n/locale-en.json b/sun/sun-ui/src/i18n/locale-en.json
index 177566ec4..485481430 100644
--- a/sun/sun-ui/src/i18n/locale-en.json
+++ b/sun/sun-ui/src/i18n/locale-en.json
@@ -2,10 +2,22 @@
"en": {
"login": {
"welcome": "Welcome to",
- "insert_username": "Insert you username",
+ "insert_username": "Insert your username",
"insert_password": "Insert your password",
"user_error": "Invalid username",
- "password_error": "Invalid password"
+ "password_error": "Invalid password",
+ "or": "or",
+ "login_with": "Login with",
+ "copyright": "Copyright",
+ "access_denied": "Access Denied",
+ "unauthorized_role_message": "Your role does not have permission to access this system.",
+ "missing_code_message": "Authentication failed: missing authorization code.",
+ "invalid_state_message": "Authentication failed: invalid security token.",
+ "token_exchange_failed_message": "Authentication failed: unable to exchange tokens.",
+ "account_creation_failed_message": "Authentication failed: unable to create account.",
+ "no_admin_account_found_message": "Authentication failed: admin account not found.",
+ "exchange_failed_message": "Authentication failed: secure token exchange failed.",
+ "generic_oidc_error_message": "Authentication failed: please try again or contact support."
},
"dashboard": {
"preferences": "Preferences",
diff --git a/sun/sun-ui/src/i18n/locale-it.json b/sun/sun-ui/src/i18n/locale-it.json
index 26f4e85a8..2124b2d1f 100644
--- a/sun/sun-ui/src/i18n/locale-it.json
+++ b/sun/sun-ui/src/i18n/locale-it.json
@@ -5,7 +5,19 @@
"insert_username": "Inserire il tuo utente",
"insert_password": "Inserisci la tua password",
"user_error": "Utente non valido",
- "password_error": "Password non valida"
+ "password_error": "Password non valida",
+ "or": "oppure",
+ "login_with": "Accedi con",
+ "copyright": "Copyright",
+ "access_denied": "Accesso Negato",
+ "unauthorized_role_message": "Il tuo ruolo non ha i permessi per accedere a questo sistema.",
+ "missing_code_message": "Autenticazione fallita: codice di autorizzazione mancante.",
+ "invalid_state_message": "Autenticazione fallita: token di sicurezza non valido.",
+ "token_exchange_failed_message": "Autenticazione fallita: impossibile scambiare i token.",
+ "account_creation_failed_message": "Autenticazione fallita: impossibile creare l'account.",
+ "no_admin_account_found_message": "Autenticazione fallita: account amministratore non trovato.",
+ "exchange_failed_message": "Autenticazione fallita: scambio sicuro del token fallito.",
+ "generic_oidc_error_message": "Autenticazione fallita: riprova o contatta il supporto."
},
"dashboard": {
"preferences": "Preferenze",
diff --git a/sun/sun-ui/src/routes/router.js b/sun/sun-ui/src/routes/router.js
index 82c47da7b..2ece774c3 100644
--- a/sun/sun-ui/src/routes/router.js
+++ b/sun/sun-ui/src/routes/router.js
@@ -20,6 +20,12 @@ import Devices from "../components/Devices.vue";
Vue.use(Router);
+// Error redirect constants
+const ERROR_ROUTES = {
+ EXCHANGE_FAILED: '/?error=exchange_failed',
+ MISSING_CODE: '/?error=missing_code'
+};
+
const router = new Router({
routes: [{
path: "/",
@@ -29,6 +35,58 @@ const router = new Router({
roles: ["admin", "reseller", "customer", "desk"]
}
},
+ {
+ path: '/login/callback',
+ name: 'LoginCallback',
+ component: {
+ template: '
Processing login...
',
+ async created() {
+ // Handle OIDC callback with secure code exchange
+ const code = this.$route.query.code;
+
+ if (code) {
+ try {
+ // Exchange the temporary code for token
+ const response = await this.$http.post(
+ this.$root.$options.api_scheme +
+ this.$root.$options.api_host +
+ "/api/auth/oidc/exchange",
+ { code: code }
+ );
+
+ if (response.status === 200) {
+ const data = response.data;
+
+ // Create user object similar to regular login
+ const loggedUser = {
+ token: data.token,
+ expires: new Date(parseInt(data.expires) * 1000).toString(),
+ id: parseInt(data.id),
+ account_type: data.account_type
+ };
+
+ // Save to localStorage
+ localStorage.setItem('loggedUser', JSON.stringify(loggedUser));
+
+ // For successful OIDC login, we need a full page reload to reinitialize the app
+ // This is safe because we're redirecting to our own root path after successful auth
+ window.location.href = '/';
+ } else {
+ // Exchange failed, redirect to login with error
+ this.$router.push(ERROR_ROUTES.EXCHANGE_FAILED);
+ }
+ } catch (error) {
+ console.error('OIDC code exchange failed:', error);
+ // Exchange failed, redirect to login with error
+ this.$router.push(ERROR_ROUTES.EXCHANGE_FAILED);
+ }
+ } else {
+ // No code provided, something went wrong
+ this.$router.push(ERROR_ROUTES.MISSING_CODE);
+ }
+ }
+ }
+ },
{
path: "/hotspots",
name: "Hotspots",
@@ -161,6 +219,12 @@ const router = new Router({
});
router.beforeEach((to, from, next) => {
+ // Always allow OIDC callback route
+ if (to.name === 'LoginCallback') {
+ next();
+ return;
+ }
+
var user = JSON.parse(localStorage.getItem("loggedUser"));
if (user && to.meta.roles && to.meta.roles.indexOf(user.account_type) >= 0) {
next();
diff --git a/sun/sun-ui/src/services/login.js b/sun/sun-ui/src/services/login.js
index 9b88f5b3f..345e7dc0b 100644
--- a/sun/sun-ui/src/services/login.js
+++ b/sun/sun-ui/src/services/login.js
@@ -60,6 +60,16 @@ var LoginService = {
}
)
.then(success, error);
+ },
+ execOIDCLogin() {
+ window.location.href = this.$root.$options.api_scheme +
+ this.$root.$options.api_host +
+ "/api/auth/oidc/login";
+ },
+ getOIDCConfig(success, error) {
+ this.$http
+ .get(this.$root.$options.api_scheme + this.$root.$options.api_host + "/api/auth/oidc/config")
+ .then(success, error);
}
}
};
diff --git a/sun/sun-ui/src/styles/main.css b/sun/sun-ui/src/styles/main.css
index ede04516b..4708ebff0 100644
--- a/sun/sun-ui/src/styles/main.css
+++ b/sun/sun-ui/src/styles/main.css
@@ -488,4 +488,72 @@ a {
float: right;
margin-right: 170px;
margin-top: -56px;
+}
+
+/* OIDC Login Styles */
+.login-button {
+ margin-bottom: 30px;
+}
+
+@media screen and (max-width: 767px) {
+ .oidc-login-section .col-sm-offset-2 {
+ display: flow-root;
+ }
+}
+
+.oidc-login-section {
+ margin-top: 15px;
+}
+
+.login-separator {
+ text-align: center;
+ margin: 0px 0 15px 0;
+ position: relative;
+}
+
+.login-separator:before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.login-separator span {
+ background: rgba(0, 0, 0, 0.8);
+ color: rgba(255, 255, 255, 0.7);
+ padding: 0 15px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ position: relative;
+ z-index: 1;
+}
+
+.btn-nethesis {
+ background: #0087db !important;
+ border: none !important;
+ color: white !important;
+ transition: all 0.3s ease !important;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+ border-radius: 4px !important;
+}
+
+.btn-nethesis:hover,
+.btn-nethesis:focus {
+ background: #0fa3ff !important;
+ color: white;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ transform: translateY(-1px);
+}
+
+.btn-nethesis:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.btn-nethesis i {
+ margin-right: 8px;
}
\ No newline at end of file
