index2.html Identity

RouterOS General
1

Hi everyone, i created a login page for my company. Now the desire came to display the identity on the website, so that the end user knows which device they are on.
Can this function be implemented? And if so, how?

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<link rel="icon" href="/favicon.png">
<link rel="icon" href="/favicon.svg">
<title>WebFig Mikrotik</title>
<style>
body {
       font-family: Arial, sans-serif;
            font-size: 14px;
            background-color: #282828;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
}
img {border: none}
img:hover {opacity: 0.8;}
h1 {
    font-size: 1.7em;
    display: inline;
    margin-bottom: 10px;
}
fieldset {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    border: 1px solid #c1c1c1;
}
#container {
     background: #fff;
            border: 1px solid #ccc;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 80%;
            max-width: 500px;
            text-align: center;
}
        }
#branding {
            background-color: rgba(255, 0, 0, 0.5);
            color: #fff;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
#box {
    background: linear-gradient(#ffffff,#f3f3f3);
    border: 1px solid #009640;
    padding: 30px;
}
.floater {float: left; margin-right: 10px;}
.floater label {display: block; text-align: center;}

#login {margin: 2em 0 2em 0;}
#login h2 {
    font-weight: normal;
    font-size: 14px;
    margin: 0 0 0.5em 1em;
}
#login td {padding: 0 4px 0 0;}
#login td.label {text-align: right;}

#login input {
    margin: 2px;
    padding: 2px;
    border: 1px solid #888;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
#error {
    color:red;
    padding: 1em 0 0 0;
}
#login input[type=submit] {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background-color:#ededed;
    border-radius:3px;
    border:1px solid #dcdcdc;
    cursor:pointer;
    color:#000;
    font-size:12px;
    padding:4px 24px;
}
#login input[type=submit]:hover {
    background-color:#dfdfdf;
}
#login input[type=submit]:active {
    position:relative;
    top:1px;
}
</style>
<script src="script.js"></script>

<div id="container">
<div id="box">
<a href="xxxx"><img src="xxxx" style="float: center;" alt="xxxx"></a><br style="clear: both;">
<br>
<h1>IDENTITY</h1>
<div class="branding">
  xxxxx
</div>
<form id="login">
<table>
    <tr><td colspan="3"><h2>WebFig Login:</h2>
    <tr><td class="label"><label for="name">Login:</label>
        <td><input id="name" autocomplete="username" type="text" data-defaultuser="" tabindex="1">
        <td><input type="submit" value="Login" tabindex="3">
    <tr><td class="label"><label for="password">Password:</label>
        <td><input id="password" type="password" tabindex="2">
        <td>
    <tr><td colspan="3">
    <div id="error"></div>
</table>
</form>
<br style="clear: both">
<div style="float: right">&copy; <a href="xxxx">xxxxx</a></div>
</div>
</div>

Thanks for all answer!

2

If it’s too complicated to implement, let me know.

3

Do you have many such routers? You can just make a different branding package for each device

4

Yeah, we currently have +80 mikrotiks in use, and the number is growing. The number only affects my department.

We are installing a default configuration with branding. So that the router logs into our system (even when it is reset) and then the correct configuration is pushed via CLI. Also the Identity.