Add country input component

src/app/auth/sign-up/sign-up.component.html

@@ -129,7 +129,12 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
       </div>
     </div>
 
+    <!-- Country -->
+    <app-element-country [(country)]="data.country"></app-element-country>
+
     <app-element-pronouns [(pronouns)]="data.pronouns"></app-element-pronouns>
     <app-element-languages [(languages)]="data.languagesSpoken"></app-element-languages>
+
+    <!-- connections -->
   </form>
 </div>

src/app/auth/sign-up/sign-up.component.ts

@@ -22,7 +22,7 @@ export class SignUpComponent implements OnInit {
   passwordHidden = true;
   data: SignupDto = {
     connections: [],
-    country: '',
+    country: null,
     displayName: '',
     email: '',
     languagesSpoken: [],

src/app/elements/element-country/element-country.component.html

@@ -0,0 +1,9 @@
+<label class="label">Country</label>
+<div class="select is-fullwidth">
+  <select name="platform" [ngModel]="country" (ngModelChange)="countryChange.emit($event)">
+    <option [ngValue]="null" selected>{{ 'global.non_select' | translate }}</option>
+    <option [ngValue]="country" *ngFor="let country of countries">
+      {{'country.' + country | translate}}
+    </option>
+  </select>
+</div>

src/app/elements/element-country/element-country.component.scss

@@ -0,0 +1,4 @@
+:host {
+  box-sizing: border-box;
+  display: block;
+}

src/app/elements/element-country/element-country.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-element-country',
+  templateUrl: './element-country.component.html',
+  styleUrls: ['./element-country.component.scss'],
+  host: {
+    'class': 'field',
+  },
+})
+export class ElementCountryComponent {
+  @Input() country: string | null;
+  @Output() countryChange = new EventEmitter<string>();
+
+  public countries = [
+    'AF', 'AX', 'AL', 'DZ', 'AS', 'AD', 'AO', 'AI', 'AQ', 'AG', 'AR', 'AM', 'AW', 'AU', 'AT', 'AZ',
+    'BS', 'BH', 'BD', 'BB', 'BY', 'BE', 'BZ', 'BJ', 'BM', 'BT', 'BO', 'BQ', 'BA', 'BW', 'BV', 'BR',
+    'IO', 'BN', 'BG', 'BF', 'BI', 'CV', 'KH', 'CM', 'CA', 'KY', 'CF', 'TD', 'CL', 'CN', 'CX', 'CC',
+    'CO', 'KM', 'CG', 'CD', 'CK', 'CR', 'CI', 'HR', 'CU', 'CW', 'CY', 'CZ', 'DK', 'DJ', 'DM', 'DO',
+    'EC', 'EG', 'SV', 'GQ', 'ER', 'EE', 'SZ', 'ET', 'FK', 'FO', 'FJ', 'FI', 'FR', 'GF', 'PF', 'TF',
+    'GA', 'GM', 'GE', 'DE', 'GH', 'GI', 'GR', 'GL', 'GD', 'GP', 'GU', 'GT', 'GG', 'GN', 'GW', 'GY',
+    'HT', 'HM', 'VA', 'HN', 'HK', 'HU', 'IS', 'IN', 'ID', 'IR', 'IQ', 'IE', 'IM', 'IL', 'IT', 'JM',
+    'JP', 'JE', 'JO', 'KZ', 'KE', 'KI', 'KP', 'KR', 'KW', 'KG', 'LA', 'LV', 'LB', 'LS', 'LR', 'LY',
+    'LI', 'LT', 'LU', 'MO', 'MG', 'MW', 'MY', 'MV', 'ML', 'MT', 'MH', 'MQ', 'MR', 'MU', 'YT', 'MX',
+    'FM', 'MD', 'MC', 'MN', 'ME', 'MS', 'MA', 'MZ', 'MM', 'NA', 'NR', 'NP', 'NL', 'NC', 'NZ', 'NI',
+    'NE', 'NG', 'NU', 'NF', 'MK', 'MP', 'NO', 'OM', 'PK', 'PW', 'PS', 'PA', 'PG', 'PY', 'PE', 'PH',
+    'PN', 'PL', 'PT', 'PR', 'QA', 'RE', 'RO', 'RU', 'RW', 'BL', 'SH', 'KN', 'LC', 'MF', 'PM', 'VC',
+    'WS', 'SM', 'ST', 'SA', 'SN', 'RS', 'SC', 'SL', 'SG', 'SX', 'SK', 'SI', 'SB', 'SO', 'ZA', 'GS',
+    'SS', 'ES', 'LK', 'SD', 'SR', 'SJ', 'SE', 'CH', 'SY', 'TW', 'TJ', 'TZ', 'TH', 'TL', 'TG', 'TK',
+    'TO', 'TT', 'TN', 'TR', 'TM', 'TC', 'TV', 'UG', 'UA', 'AE', 'GB', 'US', 'UM', 'UY', 'UZ', 'VU',
+    'VE', 'VN', 'VG', 'VI', 'WF', 'EH', 'YE', 'ZM', 'ZW',
+  ];
+
+  constructor() { }
+}

src/app/elements/elements.module.ts

@@ -26,6 +26,7 @@ import { ElementShareMastodonComponent } from './element-share-mastodon/element-
 import { ElementPronounsComponent } from './element-pronouns/element-pronouns.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ElementLanguagesComponent } from './element-languages/element-languages.component';
+import { ElementCountryComponent } from './element-country/element-country.component';
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { ElementLanguagesComponent } from './element-languages/element-languages
     ElementShareMastodonComponent,
     ElementPronounsComponent,
     ElementLanguagesComponent,
+    ElementCountryComponent,
   ],
   exports: [
     ElementTableComponent,
@@ -71,6 +73,7 @@ import { ElementLanguagesComponent } from './element-languages/element-languages
     ElementShareMastodonComponent,
     ElementPronounsComponent,
     ElementLanguagesComponent,
+    ElementCountryComponent,
   ],
   imports: [
     CommonModule,

src/app/user/settings/settings.component.html

@@ -151,18 +151,10 @@ <h4 class="title is-4">{{'user.settings.general' | translate}}</h4>
     </div>
     <!-- pronouns -->
     <app-element-pronouns [(pronouns)]="tmpPronouns" ></app-element-pronouns>
+
     <!-- country -->
-    <div class="field">
-      <label class="label">Country</label>
-      <div class="select is-fullwidth">
-        <select name="platform" [(ngModel)]="user.country">
-          <option [ngValue]="null" selected>{{ 'global.non_select' | translate }}</option>
-          <option [ngValue]="country" *ngFor="let country of countries">
-            {{'country.' + country | translate}}
-          </option>
-        </select>
-      </div>
-    </div>
+    <app-element-country [(country)]="user.country"></app-element-country>
+
     <!-- languages -->
     <app-element-languages [(languages)]="tmpLanguages"></app-element-languages>
 

src/app/user/settings/settings.component.ts

@@ -1,12 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { User } from '../../../model/user';
 import { UserService } from '../../../services/user.service';
-import { faSyncAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NwbAlertConfig, NwbAlertService } from '@wizishop/ng-wizi-bulma';
 import { TranslateService } from '@ngx-translate/core';
 import { SocialAccount } from '../../../model/social-account';
-import { MiscService } from '../../../services/misc.service';
 import { SocialPlatform } from '../../../model/social-platform';
 import { PatreonStatusDto, RelationShip } from '../../../model/annoying-patreon-shit';
 import DOMPurify from 'dompurify';
@@ -37,28 +36,9 @@ export class SettingsComponent implements OnInit {
   public deactivateConfirm = false;
   public deleteConfirm = false;
   public deleteUsername: string;
-  public countries = [
-    'AF', 'AX', 'AL', 'DZ', 'AS', 'AD', 'AO', 'AI', 'AQ', 'AG', 'AR', 'AM', 'AW', 'AU', 'AT', 'AZ',
-    'BS', 'BH', 'BD', 'BB', 'BY', 'BE', 'BZ', 'BJ', 'BM', 'BT', 'BO', 'BQ', 'BA', 'BW', 'BV', 'BR',
-    'IO', 'BN', 'BG', 'BF', 'BI', 'CV', 'KH', 'CM', 'CA', 'KY', 'CF', 'TD', 'CL', 'CN', 'CX', 'CC',
-    'CO', 'KM', 'CG', 'CD', 'CK', 'CR', 'CI', 'HR', 'CU', 'CW', 'CY', 'CZ', 'DK', 'DJ', 'DM', 'DO',
-    'EC', 'EG', 'SV', 'GQ', 'ER', 'EE', 'SZ', 'ET', 'FK', 'FO', 'FJ', 'FI', 'FR', 'GF', 'PF', 'TF',
-    'GA', 'GM', 'GE', 'DE', 'GH', 'GI', 'GR', 'GL', 'GD', 'GP', 'GU', 'GT', 'GG', 'GN', 'GW', 'GY',
-    'HT', 'HM', 'VA', 'HN', 'HK', 'HU', 'IS', 'IN', 'ID', 'IR', 'IQ', 'IE', 'IM', 'IL', 'IT', 'JM',
-    'JP', 'JE', 'JO', 'KZ', 'KE', 'KI', 'KP', 'KR', 'KW', 'KG', 'LA', 'LV', 'LB', 'LS', 'LR', 'LY',
-    'LI', 'LT', 'LU', 'MO', 'MG', 'MW', 'MY', 'MV', 'ML', 'MT', 'MH', 'MQ', 'MR', 'MU', 'YT', 'MX',
-    'FM', 'MD', 'MC', 'MN', 'ME', 'MS', 'MA', 'MZ', 'MM', 'NA', 'NR', 'NP', 'NL', 'NC', 'NZ', 'NI',
-    'NE', 'NG', 'NU', 'NF', 'MK', 'MP', 'NO', 'OM', 'PK', 'PW', 'PS', 'PA', 'PG', 'PY', 'PE', 'PH',
-    'PN', 'PL', 'PT', 'PR', 'QA', 'RE', 'RO', 'RU', 'RW', 'BL', 'SH', 'KN', 'LC', 'MF', 'PM', 'VC',
-    'WS', 'SM', 'ST', 'SA', 'SN', 'RS', 'SC', 'SL', 'SG', 'SX', 'SK', 'SI', 'SB', 'SO', 'ZA', 'GS',
-    'SS', 'ES', 'LK', 'SD', 'SR', 'SJ', 'SE', 'CH', 'SY', 'TW', 'TJ', 'TZ', 'TH', 'TL', 'TG', 'TK',
-    'TO', 'TT', 'TN', 'TR', 'TM', 'TC', 'TV', 'UG', 'UA', 'AE', 'GB', 'US', 'UM', 'UY', 'UZ', 'VU',
-    'VE', 'VN', 'VG', 'VI', 'WF', 'EH', 'YE', 'ZM', 'ZW',
-  ];
 
   constructor(private userService: UserService,
               private authService: AuthService,
-              private miscService: MiscService,
               private route: ActivatedRoute,
               private router: Router,
               private toastr: NwbAlertService,