first version

README.md

@@ -1,27 +1,11 @@
 # HeadscaleUi
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.4.
+Only Use headscale http api,and save credit in localstorage.
 
-## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+## Depoly Method
+1. run in split server (need set cors)
+2. run with headscale same origin
 
-## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -2,6 +2,17 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
+  "schematics": {
+    "@schematics/angular:component": {
+      "skipTests": true
+    },
+    "@schematics/angular:service": {
+      "skipTests": true
+    },
+    "@schematics/angular:pipe": {
+      "skipTests": true
+    }
+  },
   "projects": {
     "HeadscaleUi": {
       "projectType": "application",
@@ -25,6 +36,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -34,13 +46,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "4mb"
                 }
               ],
               "outputHashing": "all"
@@ -87,6 +99,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "ng-zorro-antd": "^15.0.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
@@ -35,4 +36,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.9.4"
   }
-}
+}

src/app/api.service.ts

@@ -0,0 +1,119 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+
+  constructor(private http: HttpClient) {
+  }
+
+  ///Machine api start
+  machineList(user: string): Observable<any> {
+    return this.http.get(`/api/v1/machine?user=${user}`)
+  }
+
+  machineRegister(user: string, key: string): Observable<any> {
+    return this.http.post(`/api/v1/machine/register?user=${user}&key=${key}`, null);
+  }
+
+  machineDetail(machineId: string): Observable<any> {
+    return this.http.get(`/api/v1/machine/${machineId}`);
+  }
+
+  machineExpire(machineId: string): Observable<any> {
+    return this.http.post(`/api/v1/machine/${machineId}/expire`, null);
+  }
+
+  machineDelete(machineId: string): Observable<any> {
+    return this.http.delete(`/api/v1/machine/${machineId}`);
+  }
+
+  machineRename(machineId: string, name: string): Observable<any> {
+    return this.http.post(`/api/v1/machine/${machineId}/rename/${name}`, null);
+  }
+
+  machineRoutes(machineId: string): Observable<any> {
+    return this.http.get(`/api/v1/machine/${machineId}/routes`);
+  }
+
+  machineTag(machineId: string, tags: Array<string>): Observable<any> {
+    return this.http.post(`/api/v1/machine/${machineId}/tags`, {tags});
+  }
+
+  machineChangeUser(machineId: string, user: string): Observable<any> {
+    return this.http.post(`/api/v1/machine/${machineId}/user?user=${user}`, null);
+  }
+
+
+  ///User api start
+  userList(): Observable<any> {
+    return this.http.get('/api/v1/user')
+  }
+
+  userAdd(name: string): Observable<any> {
+    return this.http.post('/api/v1/user', {name});
+  }
+
+  userDetail(name: string): Observable<any> {
+    return this.http.get(`/api/v1/user/${name}`);
+  }
+
+  userDelete(name: string): Observable<any> {
+    return this.http.delete(`/api/v1/user/${name}`);
+  }
+
+  userRename(old: string, name: string): Observable<any> {
+    return this.http.post(`/api/v1/user/${old}/rename/${name}`, {});
+  }
+
+
+  ///route api start
+  routeList(): Observable<any> {
+    return this.http.get(`/api/v1/routes`);
+  }
+
+  routeDelete(id: string): Observable<any> {
+    return this.http.delete(`/api/v1/routes/${id}`);
+  }
+
+  routeEnable(id: string): Observable<any> {
+    return this.http.post(`/api/v1/routes/${id}/enable`, null);
+  }
+
+  routeDisable(id: string): Observable<any> {
+    return this.http.post(`/api/v1/routes/${id}/disable`, null);
+  }
+
+  ///preauth key start
+  preAuthKeyList(user: string): Observable<any> {
+    var url = `/api/v1/preauthkey`
+    if (user) {
+      url = `/api/v1/preauthkey?user=${user}`;
+    }
+    return this.http.get(url);
+  }
+
+  preAuthKeyAdd(user: string, expiration: string, aclTags: Array<string> = [], reusable = false, ephemeral = false): Observable<any> {
+    return this.http.post('/api/v1/preauthkey', {user, reusable, ephemeral, aclTags, expiration})
+  }
+
+  preAuthKeyExpire(user: string, key: string): Observable<any> {
+    return this.http.post('/api/v1/preauthkey/expire', {user, key});
+  }
+
+  ///api key start
+  apikeyList(): Observable<any> {
+    return this.http.get(`/api/v1/apikey`);
+  }
+
+  apikeyCreate(expiration: string): Observable<any> {
+    return this.http.post('/api/v1/apikey', {expiration});
+  }
+
+  apikeyExpire(prefix: string): Observable<any> {
+    return this.http.post('/api/v1/apikey/expire', {prefix});
+  }
+}

src/app/app-routing.module.ts

@@ -1,10 +1,33 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {LayoutComponent} from './views/layout/layout.component';
+import {UserManagerComponent} from './views/user-manager/user-manager.component';
+import {MachineManagerComponent} from './views/machine-manager/machine-manager.component';
+import {LoginComponent} from './views/login/login.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: '/machine'
+  },
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [
+      {path: 'user', component: UserManagerComponent},
+      {path: 'machine', component: MachineManagerComponent},
+    ]
+  },
+  {
+    path: 'login',
+    component: LoginComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}