Login tabs now fill the entire component

Expanded widths of inputs on login page to 100%

angular.json

@@ -182,6 +182,7 @@
       }
     }
   },
+  "defaultProject": "youtube-dl-material",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

package.json

@@ -21,18 +21,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^14.0.4",
+    "@angular-devkit/core": "^13.3.3",
-    "@angular/animations": "^14.0.4",
+    "@angular/animations": "^13.3.4",
-    "@angular/cdk": "^14.0.4",
+    "@angular/cdk": "^13.3.4",
-    "@angular/common": "^14.0.4",
+    "@angular/common": "^13.3.4",
-    "@angular/compiler": "^14.0.4",
+    "@angular/compiler": "^13.3.4",
-    "@angular/core": "^14.0.4",
+    "@angular/core": "^13.3.4",
-    "@angular/forms": "^14.0.4",
+    "@angular/forms": "^13.3.4",
-    "@angular/localize": "^14.0.4",
+    "@angular/localize": "^13.3.4",
-    "@angular/material": "^14.0.4",
+    "@angular/material": "^13.3.4",
-    "@angular/platform-browser": "^14.0.4",
+    "@angular/platform-browser": "^13.3.4",
-    "@angular/platform-browser-dynamic": "^14.0.4",
+    "@angular/platform-browser-dynamic": "^13.3.4",
-    "@angular/router": "^14.0.4",
+    "@angular/router": "^13.3.4",
     "@fontsource/material-icons": "^4.5.4",
     "@ngneat/content-loader": "^5.0.0",
     "@videogular/ngx-videogular": "^5.0.1",
@@ -55,10 +55,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.4",
+    "@angular-devkit/build-angular": "^13.3.3",
-    "@angular/cli": "^14.0.4",
+    "@angular/cli": "^13.3.3",
-    "@angular/compiler-cli": "^14.0.4",
+    "@angular/compiler-cli": "^13.3.4",
-    "@angular/language-service": "^14.0.4",
+    "@angular/language-service": "^13.3.4",
     "@types/core-js": "^2.5.2",
     "@types/file-saver": "^2.0.1",
     "@types/jasmine": "~3.6.0",

src/app/components/login/login.component.html

@@ -1,30 +1,30 @@
 <mat-card class="login-card">
-    <mat-tab-group style="margin-bottom: 20px" [(selectedIndex)]="selectedTabIndex">
+    <mat-tab-group mat-stretch-tabs style="margin-bottom: 20px" [(selectedIndex)]="selectedTabIndex">
         <mat-tab label="Login" i18n-label="Login">
             <div style="margin-top: 10px;">
-                <mat-form-field>
+                <mat-form-field style="width: 100%">
                     <input [(ngModel)]="loginUsernameInput" matInput placeholder="User name" i18n-placeholder="User name">
                 </mat-form-field>
             </div>
             <div>
-                <mat-form-field>
+                <mat-form-field style="width: 100%">
                     <input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput placeholder="Password" i18n-placeholder="Password">
                 </mat-form-field>
             </div>
         </mat-tab>
         <mat-tab *ngIf="registrationEnabled" label="Register" i18n-label="Register">
             <div style="margin-top: 10px;">
-                <mat-form-field>
+                <mat-form-field style="width: 100%">
                     <input [(ngModel)]="registrationUsernameInput" matInput placeholder="User name" i18n-placeholder="User name">
                 </mat-form-field>
             </div>
             <div>
-                <mat-form-field>
+                <mat-form-field style="width: 100%">
                     <input [(ngModel)]="registrationPasswordInput" (click)="register()" type="password" matInput placeholder="Password" i18n-placeholder="Password">
                 </mat-form-field>
             </div>
             <div>
-                <mat-form-field>
+                <mat-form-field style="width: 100%">
                     <input [(ngModel)]="registrationPasswordConfirmationInput" (click)="register()" type="password" matInput placeholder="Confirm Password" i18n-placeholder="Confirm Password">
                 </mat-form-field>
             </div>

src/app/create-playlist/create-playlist.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { UntypedFormControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { PostsService } from 'app/posts.services';
 import { Playlist } from 'api-types';
 
@@ -14,7 +14,7 @@ export class CreatePlaylistComponent implements OnInit {
 
   filesToSelectFrom = null;
   type = null;
-  filesSelect = new UntypedFormControl();
+  filesSelect = new FormControl();
   audiosToSelectFrom = null;
   videosToSelectFrom = null;
   name = '';

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Inject, Pipe, PipeTransform, ViewChild, AfterViewIni
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { UntypedFormControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { args, args_info } from './youtubedl_args';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators/map';
@@ -30,13 +30,13 @@ export class HighlightPipe implements PipeTransform {
   styleUrls: ['./arg-modifier-dialog.component.scss'],
 })
 export class ArgModifierDialogComponent implements OnInit, AfterViewInit {
-  myGroup = new UntypedFormControl();
+  myGroup = new FormControl();
   firstArg = '';
   secondArg = '';
   secondArgEnabled = false;
   modified_args = '';
-  stateCtrl = new UntypedFormControl();
+  stateCtrl = new FormControl();
-  chipCtrl = new UntypedFormControl();
+  chipCtrl = new FormControl();
   availableArgs = null;
   argsByCategory = null;
   argsByKey = null;

src/app/main/main.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ElementRef, ViewChild, ViewChildren, QueryList } from '@angular/core';
 import {PostsService} from '../posts.services';
 import { Observable, Subject } from 'rxjs';
-import {UntypedFormControl, Validators} from '@angular/forms';
+import {FormControl, Validators} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { saveAs } from 'file-saver';
@@ -73,7 +73,7 @@ export class MainComponent implements OnInit {
   download_uids: string[] = [];
   current_download: Download = null;
 
-  urlForm = new UntypedFormControl('', [Validators.required]);
+  urlForm = new FormControl('', [Validators.required]);
 
   qualityOptions = {
     'video': [

tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2020",
+    "target": "es2019",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "typeRoots": [