mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-12-29 05:19:31 +00:00
MikroWizard Initial commit | MikroFront Welcome to the world :)
This commit is contained in:
sepehr
commit
b97aec6b97
203 changed files with 41097 additions and 0 deletions
21
src/app/views/auth_log/auth-routing.module.ts
Normal file
21
src/app/views/auth_log/auth-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { AuthComponent } from './auth.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: AuthComponent,
|
||||
data: {
|
||||
title: $localize`Authentication Logs`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AuthRoutingModule {
|
||||
}
|
||||
142
src/app/views/auth_log/auth.component.html
Normal file
142
src/app/views/auth_log/auth.component.html
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<c-row>
|
||||
<c-col xs>
|
||||
<c-card class="mb-4">
|
||||
<c-card-header>
|
||||
<c-row>
|
||||
<c-col xs [lg]="11">
|
||||
Authentication Logs
|
||||
</c-col>
|
||||
<c-col xs [lg]="1">
|
||||
<button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
|
||||
class="fa-solid fa-filter mr-1"></i>Filter</button>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</c-card-header>
|
||||
<c-card-body>
|
||||
<c-row>
|
||||
<div [visible]="filters_visible" cCollapse>
|
||||
<c-col xs [lg]="12" class="example-form">
|
||||
<mat-form-field>
|
||||
<mat-label>Start date</mat-label>
|
||||
<input matInput [matDatepicker]="picker1" (dateChange)="reinitgrid('start',$event)"
|
||||
[(ngModel)]="filters['start_time']" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker1></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>End date</mat-label>
|
||||
<input matInput [matDatepicker]="picker2" (dateChange)="reinitgrid('end',$event)"
|
||||
[(ngModel)]="filters['end_time']" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker2></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Connection Type</mat-label>
|
||||
<mat-select placeholder="Connection Type" (ngModelChange)="reinitgrid('connection_type',$event)"
|
||||
[(ngModel)]="filters['connection_type']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option *ngFor="let con of connection_types " [value]="con">
|
||||
{{con}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Select action</mat-label>
|
||||
<mat-select placeholder="State" (ngModelChange)="reinitgrid('state',$event)"
|
||||
[(ngModel)]="filters['state']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option *ngFor="let ac of ['Logged In','Logged Out','Failed']" [value]="ac">
|
||||
{{ac}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field >
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Server</mat-label>
|
||||
<mat-select placeholder="Server" (ngModelChange)="reinitgrid('server',$event)"
|
||||
[(ngModel)]="filters['server']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option *ngFor="let ac of ['Local','Mikrowizard']" [value]="ac">
|
||||
{{ac}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field >
|
||||
<mat-form-field>
|
||||
<mat-label>Device IP</mat-label>
|
||||
<input (ngModelChange)="reinitgrid('devip',$event)" [(ngModel)]="filters['devip']" matInput>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>IP/MAC</mat-label>
|
||||
<input (ngModelChange)="reinitgrid('ip',$event)" [(ngModel)]="filters['ip']" matInput>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Username</mat-label>
|
||||
<input (ngModelChange)="reinitgrid('user',$event)" [(ngModel)]="filters['user']" matInput>
|
||||
</mat-form-field>
|
||||
</c-col>
|
||||
|
||||
</div>
|
||||
|
||||
</c-row>
|
||||
<gui-grid [source]="source" [paging]="paging" [columnMenu]="columnMenu" [sorting]="sorting"
|
||||
[infoPanel]="infoPanel" [autoResizeWidth]=true>
|
||||
<gui-grid-column header="#No" type="NUMBER" field="index" width=25 align="CENTER">
|
||||
<ng-template let-value="item.index" let-item="item" let-index="index">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Device Name" field="name">
|
||||
<ng-template let-value="item.name" let-item="item" let-index="index">
|
||||
<i *ngIf="item.stype=='local'" cTooltip="local user"
|
||||
style="color: rgb(255, 42, 0); margin-right: 3px;font-size: .7em;" class="fa-solid fa-user-tie"></i>
|
||||
<i *ngIf="item.stype=='radius'" cTooltip="Update failed"
|
||||
style="color: rgb(9, 97, 20); margin-right: 3px;font-size: .7em;" class="fa-solid fa-server"></i>
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Device IP" field="devip">
|
||||
<ng-template let-value="item.devip" let-item="item" let-index="index">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Username" field="username">
|
||||
<ng-template let-value="item.username" let-item="item" let-index="index">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="With" field="by">
|
||||
<ng-template let-value="item.by" let-item="item" let-index="index">
|
||||
<div>{{value}}</div>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="IP Address" field="ip">
|
||||
<ng-template let-value="item.ip" let-item="item" let-index="index">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
|
||||
<gui-grid-column header="Time/Msg" field="duration">
|
||||
<ng-template let-value="item.duration" let-item="item" let-index="index">
|
||||
<span *ngIf="item.ltype!='failed'">{{value}}</span>
|
||||
<span *ngIf="item.ltype=='failed'">{{item.message}}</span>
|
||||
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
|
||||
<gui-grid-column header="State" field="ltype" [width]="110">
|
||||
<ng-template let-value="item.ltype" let-item="item.id" let-index="index">
|
||||
<c-badge color="success" *ngIf="value=='loggedin'"> Logged In</c-badge>
|
||||
<c-badge color="warning" *ngIf="value=='loggedout'"> Logged Out</c-badge>
|
||||
<c-badge color="danger" *ngIf="value=='failed'"> Failed</c-badge>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Date" field="created">
|
||||
<ng-template let-value="item.created" let-item="item" let-index="index">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
</gui-grid>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
</c-row>
|
||||
36
src/app/views/auth_log/auth.component.scss
Normal file
36
src/app/views/auth_log/auth.component.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
|
||||
@use '@angular/material' as mat;
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// Include the common styles for Angular Material. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
// Be sure that you only ever include this mixin once!
|
||||
|
||||
// Include theme styles for core and each component used in your app.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
.example-form {
|
||||
@include mat.button-density(-5);
|
||||
|
||||
@include mat.form-field-density(-5);
|
||||
@include mat.button-toggle-density(-5);
|
||||
@include mat.datepicker-density(-5);
|
||||
@include mat.all-component-densities(-5);
|
||||
@include mat.icon-button-density(-5);
|
||||
@include mat.icon-density(-5);
|
||||
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label { display: inline; }
|
||||
mat-form-field *{
|
||||
font-size:13px!important;
|
||||
}
|
||||
.mat-mdc-form-field-infix{
|
||||
width:150px;
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
.legend {
|
||||
small {
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
222
src/app/views/auth_log/auth.component.ts
Normal file
222
src/app/views/auth_log/auth.component.ts
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
import { Component, OnInit, ViewEncapsulation } from "@angular/core";
|
||||
import { dataProvider } from "../../providers/mikrowizard/data";
|
||||
import { Router, ActivatedRoute } from "@angular/router";
|
||||
import { loginChecker } from "../../providers/login_checker";
|
||||
import {
|
||||
GuiSelectedRow,
|
||||
GuiInfoPanel,
|
||||
GuiColumn,
|
||||
GuiColumnMenu,
|
||||
GuiPaging,
|
||||
GuiPagingDisplay,
|
||||
GuiRowSelectionMode,
|
||||
GuiRowSelection,
|
||||
GuiRowSelectionType,
|
||||
} from "@generic-ui/ngx-grid";
|
||||
import { formatInTimeZone } from "date-fns-tz";
|
||||
|
||||
interface IUser {
|
||||
name: string;
|
||||
state: string;
|
||||
registered: string;
|
||||
country: string;
|
||||
usage: number;
|
||||
period: string;
|
||||
payment: string;
|
||||
activity: string;
|
||||
avatar: string;
|
||||
status: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
templateUrl: "auth.component.html",
|
||||
styleUrls: ["auth.component.scss"],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class AuthComponent implements OnInit {
|
||||
public uid: number;
|
||||
public uname: string;
|
||||
public tz: string = "UTC";
|
||||
public filterText: string;
|
||||
public devid: number = 0;
|
||||
public filters: any = {
|
||||
devid: false,
|
||||
ip: "",
|
||||
devip: "",
|
||||
user: "",
|
||||
state: "All",
|
||||
server: "All",
|
||||
connection_type: "All",
|
||||
start_time: false,
|
||||
end_time: false,
|
||||
};
|
||||
public filters_visible: boolean = false;
|
||||
public connection_types: any = [];
|
||||
|
||||
constructor(
|
||||
private data_provider: dataProvider,
|
||||
private router: Router,
|
||||
private login_checker: loginChecker,
|
||||
private route: ActivatedRoute
|
||||
) {
|
||||
var _self = this;
|
||||
if (!this.login_checker.isLoggedIn()) {
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["login"]);
|
||||
}, 100);
|
||||
}
|
||||
this.data_provider.getSessionInfo().then((res) => {
|
||||
_self.uid = res.uid;
|
||||
_self.uname = res.name;
|
||||
_self.tz = res.tz;
|
||||
const userId = _self.uid;
|
||||
|
||||
if (res.role != "admin") {
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["/user/dashboard"]);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
//get datagrid data
|
||||
function isNotEmpty(value: any): boolean {
|
||||
return value !== undefined && value !== null && value !== "";
|
||||
}
|
||||
}
|
||||
public source: Array<any> = [];
|
||||
public columns: Array<GuiColumn> = [];
|
||||
public loading: boolean = true;
|
||||
public rows: any = [];
|
||||
public Selectedrows: any;
|
||||
|
||||
public sorting = {
|
||||
enabled: true,
|
||||
multiSorting: true,
|
||||
};
|
||||
|
||||
public paging: GuiPaging = {
|
||||
enabled: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [5, 10, 25, 50],
|
||||
display: GuiPagingDisplay.ADVANCED,
|
||||
};
|
||||
|
||||
public columnMenu: GuiColumnMenu = {
|
||||
enabled: true,
|
||||
sort: true,
|
||||
columnsManager: true,
|
||||
};
|
||||
|
||||
public infoPanel: GuiInfoPanel = {
|
||||
enabled: true,
|
||||
infoDialog: false,
|
||||
columnsManager: true,
|
||||
schemaManager: true,
|
||||
};
|
||||
|
||||
public rowSelection: boolean | GuiRowSelection = {
|
||||
enabled: true,
|
||||
type: GuiRowSelectionType.CHECKBOX,
|
||||
mode: GuiRowSelectionMode.MULTIPLE,
|
||||
};
|
||||
|
||||
reinitgrid(field: string, $event: any) {
|
||||
if (field == "start") this.filters["start_time"] = $event.target.value;
|
||||
else if (field == "end") this.filters["end_time"] = $event.target.value;
|
||||
else if (field == "ip") this.filters["ip"] = $event;
|
||||
else if (field == "devip") this.filters["devip"] = $event;
|
||||
else if (field == "user") this.filters["user"] = $event;
|
||||
else if (field == "connection_type")
|
||||
this.filters["connection_type"] = $event;
|
||||
else if (field == "state") this.filters["state"] = $event;
|
||||
else if (field == "server") this.filters["server"] = $event;
|
||||
this.initGridTable();
|
||||
}
|
||||
secondsToString(seconds: number) {
|
||||
var years = Math.floor(seconds / 31536000);
|
||||
var max = 2;
|
||||
var current = 0;
|
||||
var str = "";
|
||||
if (years && current < max) {
|
||||
str += years + "y ";
|
||||
current++;
|
||||
}
|
||||
var days = Math.floor((seconds %= 31536000) / 86400);
|
||||
if (days && current < max) {
|
||||
str += days + "d ";
|
||||
current++;
|
||||
}
|
||||
var hours = Math.floor((seconds %= 86400) / 3600);
|
||||
if (hours && current < max) {
|
||||
str += hours + "h ";
|
||||
current++;
|
||||
}
|
||||
var minutes = Math.floor((seconds %= 3600) / 60);
|
||||
if (minutes && current < max) {
|
||||
str += minutes + "m ";
|
||||
current++;
|
||||
}
|
||||
var seconds = seconds % 60;
|
||||
if (seconds && current < max) {
|
||||
str += seconds + "s ";
|
||||
current++;
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.devid = Number(this.route.snapshot.paramMap.get("devid"));
|
||||
if (this.devid > 0) {
|
||||
this.filters["devid"] = this.devid;
|
||||
}
|
||||
this.initGridTable();
|
||||
}
|
||||
onSelectedRows(rows: Array<GuiSelectedRow>): void {
|
||||
this.rows = rows;
|
||||
this.Selectedrows = rows.map((m: GuiSelectedRow) => m.source.id);
|
||||
}
|
||||
|
||||
removefilter(filter: any) {
|
||||
delete this.filters[filter];
|
||||
this.initGridTable();
|
||||
}
|
||||
toggleCollapse(): void {
|
||||
this.filters_visible = !this.filters_visible;
|
||||
}
|
||||
logger(item: any) {
|
||||
console.dir(item);
|
||||
}
|
||||
|
||||
initGridTable(): void {
|
||||
var _self = this;
|
||||
this.data_provider.get_auth_logs(this.filters).then((res) => {
|
||||
let index = 1;
|
||||
this.source = res.map((d: any) => {
|
||||
d.index = index;
|
||||
if (!_self.connection_types.includes(d.by))
|
||||
_self.connection_types.push(d.by);
|
||||
|
||||
if (!d.sessionid) {
|
||||
d.stype = "local";
|
||||
d.duration = "Local Access";
|
||||
} else {
|
||||
d.stype = "radius";
|
||||
if (d.ended != 0) {
|
||||
d.duration = _self.secondsToString(d.ended - d.started);
|
||||
} else {
|
||||
d.duration = "live";
|
||||
}
|
||||
}
|
||||
d.created = formatInTimeZone(
|
||||
d.created.split(".")[0] + ".000Z",
|
||||
_self.tz,
|
||||
"yyyy-MM-dd HH:mm:ss XXX"
|
||||
);
|
||||
index += 1;
|
||||
return d;
|
||||
});
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
41
src/app/views/auth_log/auth.module.ts
Normal file
41
src/app/views/auth_log/auth.module.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import {
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
GridModule,
|
||||
CollapseModule,
|
||||
BadgeModule,
|
||||
} from '@coreui/angular';
|
||||
import { AuthRoutingModule } from './auth-routing.module';
|
||||
import { AuthComponent } from './auth.component';
|
||||
import { GuiGridModule } from '@generic-ui/ngx-grid';
|
||||
|
||||
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import {MatDatepickerModule} from '@angular/material/datepicker';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
@NgModule({
|
||||
imports: [
|
||||
AuthRoutingModule,
|
||||
CardModule,
|
||||
CommonModule,
|
||||
GridModule,
|
||||
FormsModule,
|
||||
ButtonModule,
|
||||
GuiGridModule,
|
||||
CollapseModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatDatepickerModule,
|
||||
MatSelectModule,
|
||||
BadgeModule
|
||||
],
|
||||
declarations: [AuthComponent]
|
||||
})
|
||||
export class AuthModule {
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue