fixes
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 = '';
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = '';
|
||||
}
|
||||
|
||||
5
frontend/src/app/shared/utils/device-name.ts
Normal file
5
frontend/src/app/shared/utils/device-name.ts
Normal 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();
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user