feat(user/config): name validation

src/app/@dataflow/extra/users-config.spec.ts

@@ -0,0 +1,7 @@
+import { UsersConfig } from './users-config';
+
+describe('UsersConfig', () => {
+  it('should create an instance', () => {
+    expect(new UsersConfig()).toBeTruthy();
+  });
+});

src/app/@dataflow/extra/users-config.ts

@@ -0,0 +1,35 @@
+import { DataFlowNode, Generic } from '../generic';
+import { Observable, Subject, of } from 'rxjs';
+import { AjaxRequest } from 'rxjs/ajax';
+import { map, switchMap, withLatestFrom } from 'rxjs/operators';
+import { IRcloneServer } from '../rclone/noop-auth';
+
+export interface IUserConfig extends IRcloneServer {
+	name: string;
+}
+
+export class UsersConfig extends Generic {
+	protected cacheSupport: boolean = false;
+	protected cachePath?: string = '';
+	public emitter = new Subject<number>();
+	protected prerequest(): Observable<DataFlowNode> {
+		return this.emitter.pipe(map(() => [{}, []]));
+	}
+	protected request(x: DataFlowNode): AjaxRequest {
+		throw new Error('Method not implemented.');
+	}
+	protected _request(x: DataFlowNode): Observable<object> {
+		const dataRaw = localStorage.getItem('users');
+		if (dataRaw) return of({ users: JSON.parse(dataRaw) });
+		const defaultUser = [{ name: 'local', url: 'http://localhost:5572' }];
+		localStorage.setItem('users', JSON.stringify(defaultUser));
+		return of({ users: defaultUser });
+	}
+	protected generateSuperset(current: DataFlowNode, previous: DataFlowNode): DataFlowNode {
+		return current;
+	}
+	public set(data: IUserConfig[]) {
+		localStorage.setItem('users', JSON.stringify(data));
+		this.emitter.next(1);
+	}
+}

src/app/@dataflow/generic.ts

@@ -39,7 +39,7 @@ export abstract class Generic {
 
 	protected abstract prerequest(): Observable<DataFlowNode>;
 	protected abstract request(x: DataFlowNode): AjaxRequest;
-	protected _request(x: DataFlowNode): Observable<AjaxResponse> {
+	protected _request(x: DataFlowNode): Observable<object> {
 		return ajax(this.request(x));
 	}
 

src/app/@dataflow/rclone/noop-auth.ts

@@ -3,6 +3,12 @@ import { Observable, interval, Subject } from 'rxjs';
 import { AjaxRequest, AjaxResponse } from 'rxjs/ajax';
 import { map } from 'rxjs/operators';
 
+export interface IRcloneServer {
+  url: string;
+  user?: string;
+  password?: string;
+}
+
 export abstract class NoopAuth extends RcloneAuth {
 	protected cmd: string = 'rc/noopauth';
 	protected params: object = {};
@@ -13,7 +19,7 @@ export abstract class NoopAuth extends RcloneAuth {
 	}
 }
 
-export class NoopAuthTimer extends NoopAuth {
+export class NoopAuthTimer extends NoopAuth implements IRcloneServer{
 	public url: string = 'http://localhost:5572';
 	public user: string = '';
 	public password: string = '';

src/app/pages/user/config/config.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { UsersConfig, IUserConfig } from '../../../@dataflow/extra/users-config';
+import { Observable, Subject, of } from 'rxjs';
+import { withLatestFrom, map, switchMap, tap, catchError } from 'rxjs/operators';
+import { IRcloneServer, NoopAuthEmitter } from 'src/app/@dataflow/rclone/noop-auth';
 
 @Component({
 	selector: 'user-config',
@@ -8,50 +12,56 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 				<span>Name:</span>
 				<nb-form-field>
 					<nb-icon nbPrefix icon="pricetags-outline"></nb-icon>
-					<input type="text" nbInput fullWidth placeholder="Enter Name" />
+					<input [(ngModel)]="name" type="text" nbInput fullWidth placeholder="Enter Name" />
 					<nb-icon nbSuffix icon="checkmark-outline" status="success"></nb-icon>
 					<nb-icon nbSuffix icon="close-outline" status="danger"></nb-icon>
 				</nb-form-field>
-				<span style="color: grey;">wrong message</span>
+				<span style="color: grey;">wrong message{{ nameErr }}</span>
 				<br /><br />
 				<span>Server Url:</span>
 				<nb-form-field>
 					<nb-icon nbPrefix icon="monitor-outline"></nb-icon>
 					<input
+						[(ngModel)]="url"
 						type="text"
 						nbInput
 						fullWidth
 						placeholder="http://localhost:5572"
-						value="http://localhost:5572"
 					/>
 				</nb-form-field>
 				<br />
 				<span>User:</span>
 				<nb-form-field>
 					<nb-icon nbPrefix icon="person-outline"></nb-icon>
-					<input type="text" nbInput fullWidth placeholder="Enter Rclone User" />
+					<input [(ngModel)]="user" type="text" nbInput fullWidth placeholder="Enter Rclone User" />
 				</nb-form-field>
 				<br />
 				<span>Password:</span>
 				<nb-form-field>
 					<nb-icon nbPrefix icon="lock-outline"></nb-icon>
-					<input type="text" nbInput fullWidth placeholder="Enter Rclone Password" />
+					<input
+						[(ngModel)]="password"
+						type="text"
+						nbInput
+						fullWidth
+						placeholder="Enter Rclone Password"
+					/>
 				</nb-form-field>
 			</nb-card-body>
 			<nb-card-footer>
 				<nb-actions>
-				<nb-action>
-					<button nbButton outline status="danger">Cancel</button>
-				</nb-action>
-				<nb-action>
-					<button nbButton outline status="info">
-						Connect
-						<nb-icon icon="refresh" status="info"></nb-icon>
-					</button>
-				</nb-action>
-				<nb-action>
-					<button nbButton outline status="primary">save</button>
-				</nb-action>
+					<nb-action>
+						<button nbButton outline status="danger">Cancel</button>
+					</nb-action>
+					<nb-action>
+						<button nbButton outline status="info">
+							Connect
+							<nb-icon icon="refresh" status="info"></nb-icon>
+						</button>
+					</nb-action>
+					<nb-action>
+						<button nbButton outline status="primary">save</button>
+					</nb-action>
 				</nb-actions>
 			</nb-card-footer>
 		</nb-card>
@@ -65,8 +75,67 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ConfigComponent implements OnInit {
+export class ConfigComponent implements OnInit, IUserConfig {
+	name: string = '';
+	nameErr = '';
+	url: string = 'http://localhost:5572';
+	user = '';
+	password = '';
+
+	users$ = new UsersConfig();
+	auth$ = new NoopAuthEmitter();
+
 	constructor() {}
 
-	ngOnInit(): void {}
+	nameValidation$ = new Subject();
+	AuthValidation$ = new Subject();
+
+	isNameValid$: Observable<boolean>;
+	isAuthPass: Observable<boolean>;
+
+	testConnect() {}
+
+	ngOnInit(): void {
+		this.users$.deploy();
+		this.auth$.deploy();
+
+		this.isNameValid$ = this.nameValidation$.pipe(
+			map(() => this.name),
+			withLatestFrom(this.users$.getSupersetOutput()),
+			switchMap((x) => {
+				return of(x).pipe(
+					tap(([name]) => {
+						if (name === '') throw new Error('You must enter a value');
+					}),
+					tap(([name, storage]) => {
+						const users = storage[0]['users'] as IUserConfig[];
+						for (const it of users) {
+							if (it.name === name) throw new Error('This name already exists');
+						}
+					}),
+					tap(() => (this.nameErr = '')),
+					map(() => true),
+					catchError((err) => {
+						this.nameErr = err;
+						return of(false);
+					})
+				);
+			})
+		);
+		this.isAuthPass = this.AuthValidation$.pipe(
+			map(() => this as IRcloneServer),
+			map(() => true)
+			// switchMap()
+		);
+
+		// this.isNameValid$.subscribe((x) => console.log(x));
+		this.isAuthPass.subscribe((x) => console.log(x));
+    this.users$.emitter.next(1);
+
+    this.AuthValidation$.next(1);
+		// this.name = '';
+		// this.nameValidation$.next();
+		// this.name = '123';
+		// this.nameValidation$.next();
+	}
 }

src/app/pages/user/user.module.ts

@@ -5,6 +5,7 @@ import { UserRoutingModule } from './user-routing.module';
 import { UserComponent } from './user.component';
 import { ConfigComponent } from './config/config.component';
 import { NbFormFieldModule, NbCardModule, NbIconModule, NbInputModule, NbActionsModule, NbButtonModule } from '@nebular/theme';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
 	declarations: [UserComponent, ConfigComponent],
@@ -17,6 +18,7 @@ import { NbFormFieldModule, NbCardModule, NbIconModule, NbInputModule, NbActions
     NbInputModule,
     NbActionsModule,
     NbButtonModule,
+    FormsModule
 	],
 })
 export class UserModule {}