feat(access-control): Add Access Control functionalities

Author: kvviecien

src/app/account-app/account-app.component.html

@@ -148,11 +148,11 @@ <h3 class="settingsmenu">Settings Menu</h3>
                         <mat-icon mat-list-icon svgIcon="tools"></mat-icon> <span>Manage Services</span>
                     </p>
                 </mat-list-item>
-                <!-- <mat-list-item routerLink="/account/last_logins">
-                        <p mat-line>
-                            <mat-icon mat-list-icon svgIcon="login-variant"></mat-icon> <span>Last Logins</span>
-                        </p>
-                    </mat-list-item> -->
+                <mat-list-item routerLink="/account/access_control">
+                    <p mat-line>
+                        <mat-icon mat-list-icon svgIcon="login-variant"></mat-icon> <span>Access Control</span>
+                    </p>
+                </mat-list-item>
                 <mat-list-item routerLink="/account/sessions">
                     <p mat-line>
                         <mat-icon mat-list-icon svgIcon="history"></mat-icon> <span>Sessions</span>

src/app/account-app/account-app.module.ts

@@ -250,7 +250,7 @@ import { DomainRegisterComponent } from '../domainregister/domainregister.compon
                                 component: ManageServicesComponent,
                             },
                             {
-                                path: 'last_logins',
+                                path: 'access_control',
                                 component: LastLoginsComponent,
                             },
                             {

src/app/account-app/account-welcome.component.html

@@ -189,14 +189,14 @@ <h4>
           <p>Enable or disable the email services on your account, such as IMAP, POP, and SMTP.</p>
         </a>
       </mat-card>
-      <!-- <mat-card class="settingsItem">
-        <a routerLink="/account/last_logins">
+      <mat-card class="settingsItem">
+        <a routerLink="/account/access_control">
           <h4>
-            <mat-icon svgIcon="login-variant"></mat-icon> Last Logins
+            <mat-icon svgIcon="login-variant"></mat-icon> Access Control
           </h4>
-          <p>All successful and failed attempts to log in to your account from IP addresses that you have not blocked.</p>
+          <p>Review your last logins and manage IP addresses that should have access to your account.</p>
         </a>
-      </mat-card> -->
+      </mat-card>
       <mat-card class="settingsItem">
         <a routerLink="/account/sessions">
           <h4>

src/app/account-security/account.security.component.scss

@@ -215,3 +215,35 @@ h2.runbox-section-header {
         width: calc(100% - 20px);
     }
 }
+
+table {
+    width: 100%;
+    @media only screen and (max-width: 767px) {
+        th,
+        td {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
+
+table .cell-center-content {
+    text-align: center;
+}
+
+.container {
+    max-width: 1024px;
+    padding-top: 10px;
+    padding-bottom: 30px;
+}
+
+.textLink {
+    color: #01579b;
+    cursor: pointer;
+}
+
+.flex-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}

src/app/account-security/account.security.module.ts

@@ -52,6 +52,8 @@ import { AppPasswordsComponent } from './app-passwords.component';
 import { LastLoginsComponent } from './last-logins.component';
 import { SessionsComponent } from './sessions.component';
 import { AccountPasswordComponent } from './account-password.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 @NgModule({
     declarations: [
@@ -89,6 +91,8 @@ import { AccountPasswordComponent } from './account-password.component';
     MenuModule,
     QRCodeModule,
     RunboxComponentModule,
+    ReactiveFormsModule,
+    MatPaginatorModule,
     ],
     entryComponents: [
       ModalPasswordComponent,

src/app/account-security/last-logins.component.html

@@ -17,21 +17,24 @@
 // along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
 // ---------- END RUNBOX LICENSE ----------
 import { Component, Output, EventEmitter, ViewChild, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatDialog } from '@angular/material/dialog';
 import { MobileQueryService } from '../mobile-query.service';
 import { RMM } from '../rmm';
 import { ModalPasswordComponent } from './account.security.component';
+import { RunboxWebmailAPI } from '../rmmapi/rbwebmail';
 
 @Component({
     selector: 'app-last-logins',
     styleUrls: ['account.security.component.scss'],
     templateUrl: 'last-logins.component.html',
 })
-export class LastLoginsComponent implements OnInit  {
+export class LastLoginsComponent implements OnInit {
     panelOpenState = false;
-    @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
     @Output() Close: EventEmitter<string> = new EventEmitter();
     dialog_ref: any;
     acl_service = '';
@@ -41,13 +44,26 @@ export class LastLoginsComponent implements OnInit  {
     acl_ip = '';
     acl_overwrite_subaccount_rules = '0';
     is_acl_clear_enabled = false;
-    acl_manage_ip_rule = 'deny';
+    acl_manage_ip_rule = '';
     acl_manage_ip_range = '';
     acl_manage_ip_label = '';
     is_busy_list_logins = false;
+    is_overwrite_subaccount_ip_rules = '';
     modal_password_ref;
 
-    constructor(public snackBar: MatSnackBar, public dialog: MatDialog, public mobileQuery: MobileQueryService, public rmm: RMM) {
+    rulesColumns: string[] = ['rule', 'ip', 'label', 'action'];
+    blockedIpsColumns: string[] = ['service', 'ip', 'username', 'failed', 'action'];
+    lastLoginsColumns: string[] = ['service', 'login', 'ip', 'hostname', 'time', 'status', 'actions'];
+
+    addRuleForm;
+
+    constructor(
+        public snackBar: MatSnackBar,
+        public dialog: MatDialog,
+        public mobileQuery: MobileQueryService,
+        public rmm: RMM,
+        public rmmapi: RunboxWebmailAPI
+    ) {
         this.rmm.me.load();
     }
 
@@ -57,6 +73,15 @@ export class LastLoginsComponent implements OnInit  {
         this.rmm.account_security.acl.blocked_list();
         this.rmm.account_security.acl.accounts_affected();
         this.rmm.account_security.acl.list({});
+        this.rmm.account_security.tfa.get().subscribe(() => {
+            this.is_overwrite_subaccount_ip_rules = this.rmm.account_security.tfa.settings.is_overwrite_subaccount_ip_rules;
+        });
+
+        this.addRuleForm = new FormGroup({
+            rule: new FormControl(''),
+            ip: new FormControl(''),
+            label: new FormControl('')
+        });
 
         if (!this.rmm.account_security.user_password) {
             this.show_modal_password();
@@ -142,6 +167,8 @@ export class LastLoginsComponent implements OnInit  {
             .subscribe((res) => {
                 if (res.status === 'success') {
                     this.rmm.account_security.acl.list({});
+                    this.show_error('Rule added', 'Dismiss');
+                    this.addRuleForm.reset();
                 }
             });
     }
@@ -172,6 +199,7 @@ export class LastLoginsComponent implements OnInit  {
                 if (res.status === 'error') {
                     this.show_error(res.error || res.errors.join(''), 'Dismiss');
                 }
+                this.rmm.account_security.acl.blocked_list();
             });
     }
 
@@ -191,11 +219,27 @@ export class LastLoginsComponent implements OnInit  {
                 if (res.status === 'error') {
                     this.show_error(res.error || res.errors.join(''), 'Dismiss');
                 }
-                this.rmm.account_security.acl.logins_list({});
+                if (res.status === 'success') {
+                    this.show_error('IP ' + result.ip + ' blocked', 'Dismiss');
+                }
                 this.rmm.account_security.acl.blocked_list();
+                this.rmm.account_security.acl.list({});
             });
     }
 
+    update_overwride_subaccount_rules() {
+        if (!this.rmm.account_security.user_password) {
+            this.show_modal_password();
+            return;
+        }
+        const data = {
+            action: 'update_status',
+            is_overwrite_subaccount_ip_rules: this.is_overwrite_subaccount_ip_rules,
+            password: this.rmm.account_security.user_password,
+        };
+        this.rmm.account_security.tfa.update(data);
+    }
+
     ip_never_block(result) {
         if (!this.rmm.account_security.user_password) {
             this.show_modal_password();
@@ -204,16 +248,26 @@ export class LastLoginsComponent implements OnInit  {
         this.rmm.account_security.acl
             .update({
                 ip: result.ip,
+                label: 'Never Block',
                 rule: 'allow',
                 password: this.rmm.account_security.user_password,
             })
             .subscribe((res) => {
                 if (res.status === 'error') {
                     this.show_error(res.error || res.errors.join(''), 'Dismiss');
                 }
+                this.rmm.account_security.acl.blocked_list();
+                this.rmm.account_security.acl.list({});
             });
     }
 
+    submit_rule_form(data) {
+        this.acl_manage_ip_rule = data.rule;
+        this.acl_manage_ip_range = data.ip;
+        this.acl_manage_ip_label = data.label;
+        this.acl_create_rule();
+    }
+
     show_modal_password() {
         this.modal_password_ref = this.dialog.open(ModalPasswordComponent, {
             width: '600px',