This commit is contained in:
Mateusz Gruszczyński
2026-04-15 13:03:38 +02:00
parent 9ddb203ec0
commit 05fc5bd6ff
11 changed files with 122 additions and 11 deletions

View File

@@ -296,6 +296,7 @@
<span class="form-field">
<label>{{ 'routers.name' | translate }}</label>
<input pInputText formControlName="name" />
<small class="form-field-error" *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched)">{{ 'routers.nameValidationHint' | translate }}</small>
</span>
<span class="form-field">
<label>{{ 'routers.deviceType' | translate }}</label>

View File

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
import { HttpResponse } from '@angular/common/http';
import { Component, OnInit, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { DEVICE_NAME_PATTERN, normalizeDeviceName } from '../../shared/utils/device-name';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { ButtonModule } from 'primeng/button';
@@ -137,7 +138,7 @@ export class RouterDetailPageComponent implements OnInit {
{ label: 'SwitchOS', value: 'switchos' }
];
readonly form = this.fb.nonNullable.group({
name: ['', Validators.required],
name: ['', [Validators.required, Validators.pattern(DEVICE_NAME_PATTERN)]],
device_type: ['routeros' as DeviceType, Validators.required],
host: ['', Validators.required],
port: [22, Validators.required],
@@ -237,8 +238,10 @@ export class RouterDetailPageComponent implements OnInit {
if (this.form.invalid || this.saving) {
return;
}
const normalizedName = normalizeDeviceName(this.form.controls.name.value);
this.form.controls.name.setValue(normalizedName, { emitEvent: false });
this.saving = true;
const payload = this.form.getRawValue();
const payload = { ...this.form.getRawValue(), name: normalizedName };
if (payload.device_type === 'switchos') {
payload.ssh_key = '';
}

View File

@@ -22,7 +22,7 @@
</div>
<app-section-card [title]="'routers.listTitle' | translate" [subtitle]="'routers.listSubtitle' | translate">
<p-table [value]="routers" responsiveLayout="scroll" styleClass="app-table">
<p-table [value]="routers" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
<ng-template pTemplate="header">
<tr><th>{{ 'routers.name' | translate }}</th><th>{{ 'routers.endpoint' | translate }}</th><th>{{ 'routers.access' | translate }}</th><th>{{ 'routers.backupPolicy' | translate }}</th><th>{{ 'routers.ping' | translate }}</th><th>{{ 'common.actions' | translate }}</th></tr>
</ng-template>
@@ -50,11 +50,20 @@
<small class="table-secondary">{{ pingLabel(routerItem) }}</small>
</td>
<td>
<div class="table-actions table-actions--labels">
<span class="p-column-title">{{ 'common.actions' | translate }}</span>
<div class="table-actions table-actions--labels table-actions--desktop-row">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" icon="pi pi-arrow-right" [label]="'common.open' | translate" (click)="open(routerItem.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-pencil" [label]="'common.edit' | translate" (click)="edit(routerItem)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(routerItem.id)"></button>
</div>
<details class="table-row-menu">
<summary><i class="pi pi-ellipsis-h"></i><span>{{ 'common.actions' | translate }}</span></summary>
<div class="table-row-menu__list">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" icon="pi pi-arrow-right" [label]="'common.open' | translate" (click)="open(routerItem.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-pencil" [label]="'common.edit' | translate" (click)="edit(routerItem)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(routerItem.id)"></button>
</div>
</details>
</td>
</tr>
</ng-template>
@@ -100,6 +109,7 @@
<span class="form-field">
<label>{{ 'routers.name' | translate }}</label>
<input pInputText formControlName="name" placeholder="core-router-waw" />
<small class="form-field-error" *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched)">{{ 'routers.nameValidationHint' | translate }}</small>
</span>
<span class="form-field">
<label>{{ 'routers.deviceType' | translate }}</label>

View File

@@ -1,6 +1,7 @@
import { CommonModule } from '@angular/common';
import { Component, OnInit, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { DEVICE_NAME_PATTERN, normalizeDeviceName } from '../../shared/utils/device-name';
import { Router } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { ButtonModule } from 'primeng/button';
@@ -79,7 +80,7 @@ export class RoutersPageComponent implements OnInit {
{ label: 'SwitchOS', value: 'switchos' }
];
readonly form = this.fb.nonNullable.group({
name: ['', Validators.required],
name: ['', [Validators.required, Validators.pattern(DEVICE_NAME_PATTERN)]],
device_type: ['routeros' as DeviceType, Validators.required],
host: ['', Validators.required],
port: [22, Validators.required],
@@ -159,7 +160,8 @@ export class RoutersPageComponent implements OnInit {
return;
}
this.saving = true;
const payload = this.form.getRawValue();
const payload = { ...this.form.getRawValue(), name: normalizeDeviceName(this.form.controls.name.value) };
this.form.controls.name.setValue(payload.name, { emitEvent: false });
if (payload.device_type === 'switchos') {
payload.ssh_key = '';
}

View File

@@ -0,0 +1,5 @@
export const DEVICE_NAME_PATTERN = /^[A-Za-z0-9_-]+$/;
export function normalizeDeviceName(value: string | null | undefined): string {
return (value ?? '').trim();
}

View File

@@ -165,6 +165,7 @@
"editDialogTitle": "Edit device",
"host": "Host",
"port": "Port",
"nameValidationHint": "Use only letters, digits, dashes, and underscores without spaces.",
"sshUser": "Username",
"sshPrivateKey": "SSH private key",
"optionalPassword": "Optional password",
@@ -539,7 +540,6 @@
"host": "Host / URL",
"hostPlaceholder": "for example 192.168.88.1 or http://192.168.88.1",
"port": "Port",
"username": "Username",
"password": "Password",
"passwordPlaceholder": "Leave empty when the device has no password",
"probeButton": "Check access",

View File

@@ -165,7 +165,8 @@
"editDialogTitle": "Rediger enhet",
"host": "Vert",
"port": "Port",
"sshUser": "Bruker",
"nameValidationHint": "Use only letters, digits, dashes, and underscores without spaces.",
"sshUser": "Brukernavn",
"sshPrivateKey": "SSH privat nøkkel",
"optionalPassword": "Valgfritt passord",
"optionalPrivateKey": "Valgfri privat nøkkel",
@@ -521,7 +522,6 @@
"host": "Vert / URL",
"hostPlaceholder": "for eksempel 192.168.88.1 eller http://192.168.88.1",
"port": "Port",
"username": "Brukernavn",
"password": "Passord",
"passwordPlaceholder": "La stå tomt hvis enheten ikke har passord",
"probeButton": "Sjekk tilgang",

View File

@@ -165,6 +165,7 @@
"editDialogTitle": "Edytuj urządzenie",
"host": "Host",
"port": "Port",
"nameValidationHint": "Użyj tylko liter, cyfr, myślnika i podkreślenia bez spacji.",
"sshUser": "Użytkownik",
"sshPrivateKey": "Klucz prywatny SSH",
"optionalPassword": "Opcjonalne hasło",
@@ -539,7 +540,6 @@
"host": "Host / URL",
"hostPlaceholder": "np. 192.168.88.1 albo http://192.168.88.1",
"port": "Port",
"username": "Użytkownik",
"password": "Hasło",
"passwordPlaceholder": "Puste, jeśli urządzenie nie ma hasła",
"probeButton": "Sprawdź dostęp",

View File

@@ -3758,3 +3758,22 @@ body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color
max-width: none;
}
}
.form-field-error{
display:block;
margin-top:0.35rem;
font-size:0.78rem;
line-height:1.35;
color:var(--red-400);
}
.repository-table .table-row-menu__list .p-button{justify-content:flex-start;}
@media (max-width: 960px){
.repository-table .table-row-menu{
display:inline-block !important;
}
.repository-table .table-row-menu__list{
min-width:min(220px,calc(100vw - 32px));
}
}