From e600e1fea275c12f4420e23624804617e61a082c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Dec 2017 15:22:57 +0100 Subject: Design follow admin page --- .../followers-list/followers-list.component.html | 2 - .../followers-list/followers-list.component.scss | 3 - .../following-add/following-add.component.html | 32 +++----- .../following-add/following-add.component.scss | 10 ++- .../following-add/following-add.component.ts | 94 +++++++--------------- .../following-list/following-list.component.html | 4 +- .../src/app/+admin/follows/follows.component.html | 6 +- .../src/app/+admin/follows/follows.component.scss | 5 +- client/src/app/+admin/follows/follows.component.ts | 2 +- .../users/user-edit/user-edit.component.html | 2 +- .../users/user-list/user-list.component.html | 2 +- .../shared/forms/form-validators/host.validator.ts | 10 +-- 12 files changed, 63 insertions(+), 109 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html index ea5380ff7..a24039fc6 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.html +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html @@ -1,5 +1,3 @@ -

Followers list

- Add following -
{{ error }}
-
-
- + +
+ -
- - - - - -
+ -
- It should be a valid host. +
+ {{ hostsError }}
-
- It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers. +
+ It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
- + diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss index 5fde51636..2cb3efe28 100644 --- a/client/src/app/+admin/follows/following-add/following-add.component.scss +++ b/client/src/app/+admin/follows/following-add/following-add.component.scss @@ -1,7 +1,9 @@ -table { - margin-bottom: 40px; +textarea { + height: 250px; } -.input-group-btn button { - width: 35px; +input[type=submit] { + @include peertube-button; + @include orange-button; } + diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts index 814c6f1a1..bf842129d 100644 --- a/client/src/app/+admin/follows/following-add/following-add.component.ts +++ b/client/src/app/+admin/follows/following-add/following-add.component.ts @@ -1,9 +1,6 @@ -import { Component, OnInit } from '@angular/core' -import { FormControl, FormGroup } from '@angular/forms' +import { Component } from '@angular/core' import { Router } from '@angular/router' - import { NotificationsService } from 'angular2-notifications' - import { ConfirmService } from '../../../core' import { validateHost } from '../../../shared' import { FollowService } from '../shared' @@ -13,9 +10,9 @@ import { FollowService } from '../shared' templateUrl: './following-add.component.html', styleUrls: [ './following-add.component.scss' ] }) -export class FollowingAddComponent implements OnInit { - form: FormGroup - hosts: string[] = [ ] +export class FollowingAddComponent { + hostsString = '' + hostsError: string = null error: string = null constructor ( @@ -25,76 +22,50 @@ export class FollowingAddComponent implements OnInit { private followService: FollowService ) {} - ngOnInit () { - this.form = new FormGroup({}) - this.addField() - } - - addField () { - this.form.addControl(`host-${this.hosts.length}`, new FormControl('', [ validateHost ])) - this.hosts.push('') - } - - canMakeFriends () { + httpEnabled () { return window.location.protocol === 'https:' } - customTrackBy (index: number, obj: any): any { - return index - } - - displayAddField (index: number) { - return index === (this.hosts.length - 1) - } + onHostsChanged () { + this.hostsError = null - displayRemoveField (index: number) { - return (index !== 0 || this.hosts.length > 1) && index !== (this.hosts.length - 1) - } + const newHostsErrors = [] + const hosts = this.getNotEmptyHosts() - isFormValid () { - // Do not check the last input - for (let i = 0; i < this.hosts.length - 1; i++) { - if (!this.form.controls[`host-${i}`].valid) return false + for (const host of hosts) { + if (validateHost(host) === false) { + newHostsErrors.push(`${host} is not valid`) + } } - const lastIndex = this.hosts.length - 1 - // If the last input (which is not the first) is empty, it's ok - if (this.hosts[lastIndex] === '' && lastIndex !== 0) { - return true - } else { - return this.form.controls[`host-${lastIndex}`].valid + if (newHostsErrors.length !== 0) { + this.hostsError = newHostsErrors.join('. ') } } - removeField (index: number) { - // Remove the last control - this.form.removeControl(`host-${this.hosts.length - 1}`) - this.hosts.splice(index, 1) - } - addFollowing () { this.error = '' - const notEmptyHosts = this.getNotEmptyHosts() - if (notEmptyHosts.length === 0) { - this.error = 'You need to specify at least 1 host.' - return + const hosts = this.getNotEmptyHosts() + if (hosts.length === 0) { + this.error = 'You need to specify hosts to follow.' } - if (!this.isHostsUnique(notEmptyHosts)) { + if (!this.isHostsUnique(hosts)) { this.error = 'Hosts need to be unique.' return } - const confirmMessage = 'Are you sure to make friends with:
- ' + notEmptyHosts.join('
- ') + const confirmMessage = 'If you confirm, you will send a follow request to:
- ' + hosts.join('
- ') this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe( res => { if (res === false) return - this.followService.follow(notEmptyHosts).subscribe( + this.followService.follow(hosts).subscribe( status => { this.notificationsService.success('Success', 'Follow request(s) sent!') - this.router.navigate([ '/admin/follows/following-list' ]) + + setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500) }, err => this.notificationsService.error('Error', err.message) @@ -103,18 +74,15 @@ export class FollowingAddComponent implements OnInit { ) } - private getNotEmptyHosts () { - const notEmptyHosts = [] - - Object.keys(this.form.value).forEach((hostKey) => { - const host = this.form.value[hostKey] - if (host !== '') notEmptyHosts.push(host) - }) - - return notEmptyHosts - } - private isHostsUnique (hosts: string[]) { return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host)) } + + private getNotEmptyHosts () { + const hosts = this.hostsString + .split('\n') + .filter(host => host && host.length !== 0) // Eject empty hosts + + return hosts + } } diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html index 85c7c3af1..3e70b418c 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.html +++ b/client/src/app/+admin/follows/following-list/following-list.component.html @@ -1,5 +1,3 @@ -

Following list

- - + diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html index b67bc9736..1baba5a4d 100644 --- a/client/src/app/+admin/follows/follows.component.html +++ b/client/src/app/+admin/follows/follows.component.html @@ -1,4 +1,6 @@ -
+
+
Manage follows
+ @@ -8,4 +10,6 @@
+ + diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index 242effd85..835fa3b78 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -1,3 +1,4 @@ -.follows-menu { - margin-top: 20px; +.admin-sub-title { + flex-grow: 0; + margin-right: 30px; } diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts index a1be82585..f29ad384f 100644 --- a/client/src/app/+admin/follows/follows.component.ts +++ b/client/src/app/+admin/follows/follows.component.ts @@ -47,7 +47,7 @@ export class FollowsComponent implements OnInit, AfterViewInit { for (let i = 0; i < this.links.length; i++) { const path = this.links[i].path - if (url.endsWith(path) === true) { + if (url.endsWith(path) === true && this.followsMenuTabs.tabs[i]) { this.followsMenuTabs.tabs[i].active = true return } diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index ed27ea745..963e2f39a 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -64,5 +64,5 @@
- + diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 5a19edfde..b3d90ba1e 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -18,7 +18,7 @@ - + diff --git a/client/src/app/shared/forms/form-validators/host.validator.ts b/client/src/app/shared/forms/form-validators/host.validator.ts index 03e810fdb..c18a35f9b 100644 --- a/client/src/app/shared/forms/form-validators/host.validator.ts +++ b/client/src/app/shared/forms/form-validators/host.validator.ts @@ -1,14 +1,8 @@ -import { FormControl } from '@angular/forms' - -export function validateHost (c: FormControl) { +export function validateHost (value: string) { // Thanks to http://stackoverflow.com/a/106223 const HOST_REGEXP = new RegExp( '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$' ) - return HOST_REGEXP.test(c.value) ? null : { - validateHost: { - valid: false - } - } + return HOST_REGEXP.test(value) } -- cgit v1.2.3