Remake locale saving with Vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>

11 files changed, 326 insertions, 125 deletions

diff --git a/apps/settings/css/settings.css b/apps/settings/css/settings.css
index 7be5f9b30f6..1351d25a277 100644
--- a/apps/settings/css/settings.css
+++ b/apps/settings/css/settings.css
@@ -105,11 +105,6 @@ input#openid, input#webdav {
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 1fr 1fr 2fr;
 }
-.profile-settings-container #locale h3 {
-  height: 44px;
-  display: flex;
-  align-items: center;
-}
 
 .personal-show-container {
   width: 100%;
@@ -125,7 +120,7 @@ input#openid, input#webdav {
   width: 100%;
 }
 
-select#timezone, select#languageinput, select#localeinput {
+select#timezone {
   width: 100%;
 }
 
diff --git a/apps/settings/css/settings.css.map b/apps/settings/css/settings.css.map
index 7edafa1db73..87160fe8ef0 100644
--- a/apps/settings/css/settings.css.map
+++ b/apps/settings/css/settings.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","settings.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD3CC;EACC;;;AAIF;AACA;EACC;;;AAGD;AACA;AC6CC;EAEA;;;AD3CD;ACyCC;EAEA;;;ADvCD;ACqCC;EAEA;;;ADnCD;ACiCC;EAEA;;;AD/BD;AC6BC;EAEA;;;AD3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAGC;EACC;EACA;EACA;;;AAKH;EACC;;;AAIA;EACC;;AAEA;EACC;;AAIA;EACC;;;AAOH;EAGC;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMF;EACC;;AACA;EACC;;AACA;EACC;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;EACA;;AAGD;EACC;EACA;;;AAMF;EACC;IACC;IACA;;EAEA;IACC;IACA;;EAGD;IACC;IACA;;EAGD;IACC;IACA;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAIF;AACA;AACA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAIF;EACC;;AAGC;EAEC;EACA;;AAEA;EACC;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;EAEA;;AAEA;EACC;;;AAQN;EACC;;;AAIA;EACC;;AAGD;EACC;;;AAIF;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMD;EACC;;AAGD;EACC;;;AAKD;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;;AAKA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAGC;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAIF;AAGC;EACC;EACA;EACA;EACA;;AAGD;EACC;;;AAKD;AAAA;EAEC;;;AAKD;AAAA;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EAEC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AAGD;AACA;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACC;;AACA;EACC;EACA;EACA;;AAGD;EACC;;AAIA;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAIA;EACC;;;AAMD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAEA;AAAA;EAEC;;AAGD;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;AAIF;EACC;IACC;;;AAIF;AACA;EAEE;IACC;;;AAKH;EACC;IACC;;;AAIF;EACC;AACA;AAKA;;AAJA;EACC;;AAID;EACC;;AAEA;EACC;EACA;EACA;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EAyGC;EACA;EACA;AAkDA;;AAzJA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC,QAfgB;EAgBhB,SAjBiB;EAmBjB,cAlBgB;EAmBhB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAQC;;AAPA;EACC;EACA;EACA;EACA,YAjCe;;AAsChB;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAKF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAKH;EACC;EACA;AACA;EACA;EACA;EACA;;AAOD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AAKD;EACC;;AAKD;EACC;;AAMH;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;;AAQF;EACC;;;AAKH;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAOA;AAAA;AAAA;AAAA;EACC;;AAEA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;;AAMF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;;;AAIA;EACC;EACA;EACA;;AAGD;AAAA;EAEC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AAKF;AACA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKD;EACC;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;;;AAID;AAKC;EACC;EACA;EACA;;AAEA;EAGC;EACA;EACA,YAbgB;EAchB;EACA;EACA;AACA;AAAA;EAEA,uBACE;EAOF;AAMA;AA0DA;;AA9DA;EACC;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC,WAxCkB;;AA0ClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAID;EAMC;;AAIF;AAAA;AAAA;EAGC,WA9DkB;;AAgElB;AAAA;AAAA;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAID;EACC;EACA;EACA;EACA;AAAc;EACd;;AAEA;EACC;;AAIF;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUC;EACA;EACA;EACA;EACA;;AAKD;EACC;;AAGD;EACC;;AAIF;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;AAaA;AA2GA;;AAtHA;AAAA;AAAA;EACC;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAKF;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;EACC;;AAKA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAEC;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAKH;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;;AAMH;AAAA;AAAA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;AAKH;EACI;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE","file":"settings.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","settings.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD3CC;EACC;;;AAIF;AACA;EACC;;;AAGD;AACA;AC6CC;EAEA;;;AD3CD;ACyCC;EAEA;;;ADvCD;ACqCC;EAEA;;;ADnCD;ACiCC;EAEA;;;AD/BD;AC6BC;EAEA;;;AD3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;;AAEA;EACC;;AAIA;EACC;;;AAOH;EACC;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMF;EACC;;AACA;EACC;;AACA;EACC;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;EACA;;AAGD;EACC;EACA;;;AAMF;EACC;IACC;IACA;;EAEA;IACC;IACA;;EAGD;IACC;IACA;;EAGD;IACC;IACA;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAIF;AACA;AACA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAIF;EACC;;AAGC;EAEC;EACA;;AAEA;EACC;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;EAEA;;AAEA;EACC;;;AAQN;EACC;;;AAIA;EACC;;AAGD;EACC;;;AAIF;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMD;EACC;;AAGD;EACC;;;AAKD;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;;AAKA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAGC;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAIF;AAGC;EACC;EACA;EACA;EACA;;AAGD;EACC;;;AAKD;AAAA;EAEC;;;AAKD;AAAA;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EAEC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AAGD;AACA;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACC;;AACA;EACC;EACA;EACA;;AAGD;EACC;;AAIA;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAIA;EACC;;;AAMD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAEA;AAAA;EAEC;;AAGD;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;AAIF;EACC;IACC;;;AAIF;AACA;EAEE;IACC;;;AAKH;EACC;IACC;;;AAIF;EACC;AACA;AAKA;;AAJA;EACC;;AAID;EACC;;AAEA;EACC;EACA;EACA;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EAyGC;EACA;EACA;AAkDA;;AAzJA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC,QAfgB;EAgBhB,SAjBiB;EAmBjB,cAlBgB;EAmBhB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAQC;;AAPA;EACC;EACA;EACA;EACA,YAjCe;;AAsChB;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAKF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAKH;EACC;EACA;AACA;EACA;EACA;EACA;;AAOD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AAKD;EACC;;AAKD;EACC;;AAMH;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;;AAQF;EACC;;;AAKH;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAOA;AAAA;AAAA;AAAA;EACC;;AAEA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;;AAMF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;;;AAIA;EACC;EACA;EACA;;AAGD;AAAA;EAEC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AAKF;AACA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKD;EACC;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;;;AAID;AAKC;EACC;EACA;EACA;;AAEA;EAGC;EACA;EACA,YAbgB;EAchB;EACA;EACA;AACA;AAAA;EAEA,uBACE;EAOF;AAMA;AA0DA;;AA9DA;EACC;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC,WAxCkB;;AA0ClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAID;EAMC;;AAIF;AAAA;AAAA;EAGC,WA9DkB;;AAgElB;AAAA;AAAA;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAID;EACC;EACA;EACA;EACA;AAAc;EACd;;AAEA;EACC;;AAIF;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUC;EACA;EACA;EACA;EACA;;AAKD;EACC;;AAGD;EACC;;AAIF;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;AAaA;AA2GA;;AAtHA;AAAA;AAAA;EACC;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAKF;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;EACC;;AAKA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAEC;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAKH;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;;AAMH;AAAA;AAAA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;AAKH;EACI;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE","file":"settings.css"}
\ No newline at end of file
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 02638a793e3..31cf3521f1a 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -47,14 +47,6 @@ input {
 	display: inline-grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr 1fr 1fr 2fr;
-
-	#locale {
-		h3 {
-			height: 44px;
-			display: flex;
-			align-items: center;
-		}
-	}
 }
 
 .personal-show-container {
@@ -78,9 +70,7 @@ input {
 }
 
 select {
-	&#timezone,
-	&#languageinput,
-	&#localeinput {
+	&#timezone {
 		width: 100%;
 	}
 }
diff --git a/apps/settings/js/settings/personalInfo.js b/apps/settings/js/settings/personalInfo.js
index 4309b462e47..fa4b39ce1b9 100644
--- a/apps/settings/js/settings/personalInfo.js
+++ b/apps/settings/js/settings/personalInfo.js
@@ -108,62 +108,4 @@ window.addEventListener('DOMContentLoaded', function () {
 	});
 
 	federationSettingsView.render();
-
-	var updateLanguage = function () {
-		if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
-			OC.PasswordConfirmation.requirePasswordConfirmation(updateLanguage);
-			return;
-		}
-
-		var selectedLang = $("#languageinput").val(),
-			user = OC.getCurrentUser();
-
-		$.ajax({
-			url: OC.linkToOCS('cloud/users', 2) + user['uid'],
-			method: 'PUT',
-			data: {
-				key: 'language',
-				value: selectedLang
-			},
-			success: function() {
-				location.reload();
-			},
-			fail: function() {
-				OC.Notification.showTemporary(t('settings', 'An error occurred while changing your language. Please reload the page and try again.'));
-			}
-		});
-	};
-	$("#languageinput").change(updateLanguage);
-
-	var updateLocale = function () {
-		if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
-			OC.PasswordConfirmation.requirePasswordConfirmation(updateLocale);
-			return;
-		}
-
-		var selectedLocale = $("#localeinput").val(),
-			user = OC.getCurrentUser();
-
-		$.ajax({
-			url: OC.linkToOCS('cloud/users', 2) + user.uid,
-			method: 'PUT',
-			data: {
-				key: 'locale',
-				value: selectedLocale
-			},
-			success: function() {
-				moment.locale(selectedLocale);
-			},
-			fail: function() {
-				OC.Notification.showTemporary(t('settings', 'An error occurred while changing your locale. Please reload the page and try again.'));
-			}
-		});
-	};
-	$("#localeinput").change(updateLocale);
 });
-
-window.setInterval(function() {
-	$('#localeexample-time').text(moment().format('LTS'))
-	$('#localeexample-date').text(moment().format('L'))
-	$('#localeexample-fdow').text(t('settings', 'Week starts on {fdow}', { fdow: dayNames[firstDay] }))
-}, 1000)
diff --git a/apps/settings/lib/Settings/Personal/PersonalInfo.php b/apps/settings/lib/Settings/Personal/PersonalInfo.php
index c5e40914ecf..56291cd3d35 100644
--- a/apps/settings/lib/Settings/Personal/PersonalInfo.php
+++ b/apps/settings/lib/Settings/Personal/PersonalInfo.php
@@ -135,7 +135,6 @@ class PersonalInfo implements ISettings {
 			$totalSpace = \OC_Helper::humanFileSize($storageInfo['total']);
 		}
 
-		$localeParameters = $this->getLocales($user);
 		$messageParameters = $this->getMessageParameters($account);
 
 		$parameters = [
@@ -143,7 +142,7 @@ class PersonalInfo implements ISettings {
 			'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
 			'isFairUseOfFreePushService' => $this->isFairUseOfFreePushService(),
 			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
-		] + $messageParameters + $localeParameters;
+		] + $messageParameters;
 
 		$personalInfoParameters = [
 			'userId' => $uid,
@@ -160,6 +159,7 @@ class PersonalInfo implements ISettings {
 			'website' => $this->getProperty($account, IAccountManager::PROPERTY_WEBSITE),
 			'twitter' => $this->getProperty($account, IAccountManager::PROPERTY_TWITTER),
 			'languageMap' => $this->getLanguageMap($user),
+			'localeMap' => $this->getLocaleMap($user),
 			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
 			'profileEnabled' => $this->profileManager->isProfileEnabled($user),
 			'organisation' => $this->getProperty($account, IAccountManager::PROPERTY_ORGANISATION),
@@ -315,31 +315,24 @@ class PersonalInfo implements ISettings {
 		);
 	}
 
-	private function getLocales(IUser $user): array {
+	private function getLocaleMap(IUser $user): array {
 		$forceLanguage = $this->config->getSystemValue('force_locale', false);
 		if ($forceLanguage !== false) {
 			return [];
 		}
 
 		$uid = $user->getUID();
-
 		$userLocaleString = $this->config->getUserValue($uid, 'core', 'locale', $this->l10nFactory->findLocale());
-
 		$userLang = $this->config->getUserValue($uid, 'core', 'lang', $this->l10nFactory->findLanguage());
-
 		$localeCodes = $this->l10nFactory->findAvailableLocales();
-
-		$userLocale = array_filter($localeCodes, function ($value) use ($userLocaleString) {
-			return $userLocaleString === $value['code'];
-		});
+		$userLocale = array_filter($localeCodes, fn ($value) => $userLocaleString === $value['code']);
 
 		if (!empty($userLocale)) {
 			$userLocale = reset($userLocale);
 		}
 
-		$localesForLanguage = array_filter($localeCodes, function ($localeCode) use ($userLang) {
-			return 0 === strpos($localeCode['code'], $userLang);
-		});
+		$localesForLanguage = array_values(array_filter($localeCodes, fn ($localeCode) => strpos($localeCode['code'], $userLang) === 0));
+		$otherLocales = array_values(array_filter($localeCodes, fn ($localeCode) => strpos($localeCode['code'], $userLang) !== 0));
 
 		if (!$userLocale) {
 			$userLocale = [
@@ -349,10 +342,10 @@ class PersonalInfo implements ISettings {
 		}
 
 		return [
-			'activelocaleLang' => $userLocaleString,
-			'activelocale' => $userLocale,
-			'locales' => $localeCodes,
+			'activeLocaleLang' => $userLocaleString,
+			'activeLocale' => $userLocale,
 			'localesForLanguage' => $localesForLanguage,
+			'otherLocales' => $otherLocales,
 		];
 	}
 
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
new file mode 100644
index 00000000000..2e3ad64e769
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
@@ -0,0 +1,208 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+	-
+-->
+
+<template>
+	<div class="locale">
+		<select :id="inputId"
+			:placeholder="t('settings', 'Locale')"
+			@change="onLocaleChange">
+			<option v-for="currentLocale in localesForLanguage"
+				:key="currentLocale.code"
+				:selected="locale.code === currentLocale.code"
+				:value="currentLocale.code">
+				{{ currentLocale.name }}
+			</option>
+			<option disabled>
+				──────────
+			</option>
+			<option v-for="currentLocale in otherLocales"
+				:key="currentLocale.code"
+				:selected="locale.code === currentLocale.code"
+				:value="currentLocale.code">
+				{{ currentLocale.name }}
+			</option>
+		</select>
+
+		<div class="example">
+			<Web :size="20" />
+			<div class="example__text">
+				<p>
+					<span>{{ example.date }}</span>
+					<span>{{ example.time }}</span>
+				</p>
+				<p>
+					{{ t('settings', 'Week starts on {firstDayOfWeek}', { firstDayOfWeek: this.example.firstDayOfWeek }) }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import moment from '@nextcloud/moment'
+import Web from 'vue-material-design-icons/Web'
+
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { validateLocale } from '../../../utils/validate.js'
+import logger from '../../../logger.js'
+
+export default {
+	name: 'Locale',
+
+	components: {
+		Web,
+	},
+
+	props: {
+		inputId: {
+			type: String,
+			default: null,
+		},
+		locale: {
+			type: Object,
+			required: true,
+		},
+		localesForLanguage: {
+			type: Array,
+			required: true,
+		},
+		otherLocales: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			initialLocale: this.locale,
+			example: {
+				date: moment().format('L'),
+				time: moment().format('LTS'),
+				firstDayOfWeek: window.dayNames[window.firstDay],
+			},
+		}
+	},
+
+	computed: {
+		allLocales() {
+			return Object.freeze(
+				[...this.localesForLanguage, ...this.otherLocales]
+					.reduce((acc, { code, name }) => ({ ...acc, [code]: name }), {})
+			)
+		},
+	},
+
+	created() {
+		setInterval(this.refreshExample, 1000)
+	},
+
+	methods: {
+		async onLocaleChange(e) {
+			const locale = this.constructLocale(e.target.value)
+			this.$emit('update:locale', locale)
+
+			if (validateLocale(locale)) {
+				await this.updateLocale(locale)
+			}
+		},
+
+		async updateLocale(locale) {
+			try {
+				const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, locale.code)
+				this.handleResponse({
+					locale,
+					status: responseData.ocs?.meta?.status,
+				})
+				this.reloadPage()
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('settings', 'Unable to update locale'),
+					error: e,
+				})
+			}
+		},
+
+		constructLocale(localeCode) {
+			return {
+				code: localeCode,
+				name: this.allLocales[localeCode],
+			}
+		},
+
+		handleResponse({ locale, status, errorMessage, error }) {
+			if (status === 'ok') {
+				this.initialLocale = locale
+			} else {
+				this.$emit('update:locale', this.initialLocale)
+				showError(errorMessage)
+				logger.error(errorMessage, error)
+			}
+		},
+
+		refreshExample() {
+			this.example = {
+				date: moment().format('L'),
+				time: moment().format('LTS'),
+				firstDayOfWeek: window.dayNames[window.firstDay],
+			}
+		},
+
+		reloadPage() {
+			location.reload()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.locale {
+	display: grid;
+
+	select {
+		width: 100%;
+		height: 34px;
+		margin: 3px 3px 3px 0;
+		padding: 6px 16px;
+		color: var(--color-main-text);
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+		background: var(--icon-triangle-s-dark) no-repeat right 4px center;
+		font-family: var(--font-face);
+		appearance: none;
+		cursor: pointer;
+	}
+}
+
+.example {
+	margin: 10px 0;
+	display: flex;
+	gap: 0 10px;
+	color: var(--color-text-lighter);
+
+	&::v-deep .material-design-icon {
+		align-self: flex-start;
+		margin-top: 2px;
+	}
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
new file mode 100644
index 00000000000..61c98f3a27a
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
@@ -0,0 +1,88 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+	-
+-->
+
+<template>
+	<section>
+		<HeaderBar :input-id="inputId"
+			:readable="propertyReadable" />
+
+		<template v-if="isEditable">
+			<Locale :input-id="inputId"
+				:locales-for-language="localesForLanguage"
+				:other-locales="otherLocales"
+				:locale.sync="locale" />
+		</template>
+
+		<span v-else>
+			{{ t('settings', 'No locale set') }}
+		</span>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import Locale from './Locale.vue'
+import HeaderBar from '../shared/HeaderBar.vue'
+
+import { ACCOUNT_SETTING_PROPERTY_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js'
+
+const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'LocaleSection',
+
+	components: {
+		Locale,
+		HeaderBar,
+	},
+
+	data() {
+		return {
+			propertyReadable: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LOCALE,
+			localesForLanguage,
+			otherLocales,
+			locale: activeLocale,
+		}
+	},
+
+	computed: {
+		inputId() {
+			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
+		},
+
+		isEditable() {
+			return Boolean(this.locale)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+	padding: 10px 10px;
+
+	&::v-deep button:disabled {
+		cursor: default;
+	}
+}
+</style>
diff --git a/apps/settings/src/constants/AccountPropertyConstants.js b/apps/settings/src/constants/AccountPropertyConstants.js
index 41dd7e023bd..17166d1305f 100644
--- a/apps/settings/src/constants/AccountPropertyConstants.js
+++ b/apps/settings/src/constants/AccountPropertyConstants.js
@@ -106,11 +106,13 @@ export const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({
  */
 export const ACCOUNT_SETTING_PROPERTY_ENUM = Object.freeze({
 	LANGUAGE: 'language',
+	LOCALE: 'locale',
 })
 
 /** Enum of account setting properties to human readable setting properties */
 export const ACCOUNT_SETTING_PROPERTY_READABLE_ENUM = Object.freeze({
 	LANGUAGE: t('settings', 'Language'),
+	LOCALE: t('settings', 'Locale'),
 })
 
 /** Enum of scopes */
diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js
index 077bad3b5f7..8342015c560 100644
--- a/apps/settings/src/main-personal-info.js
+++ b/apps/settings/src/main-personal-info.js
@@ -35,6 +35,7 @@ import LocationSection from './components/PersonalInfo/LocationSection.vue'
 import WebsiteSection from './components/PersonalInfo/WebsiteSection.vue'
 import TwitterSection from './components/PersonalInfo/TwitterSection.vue'
 import LanguageSection from './components/PersonalInfo/LanguageSection/LanguageSection.vue'
+import LocaleSection from './components/PersonalInfo/LocaleSection/LocaleSection.vue'
 import ProfileSection from './components/PersonalInfo/ProfileSection/ProfileSection.vue'
 import OrganisationSection from './components/PersonalInfo/OrganisationSection.vue'
 import RoleSection from './components/PersonalInfo/RoleSection.vue'
@@ -61,6 +62,7 @@ const LocationView = Vue.extend(LocationSection)
 const WebsiteView = Vue.extend(WebsiteSection)
 const TwitterView = Vue.extend(TwitterSection)
 const LanguageView = Vue.extend(LanguageSection)
+const LocaleView = Vue.extend(LocaleSection)
 
 new AvatarView().$mount('#vue-avatar-section')
 new DetailsView().$mount('#vue-details-section')
@@ -71,6 +73,7 @@ new LocationView().$mount('#vue-location-section')
 new WebsiteView().$mount('#vue-website-section')
 new TwitterView().$mount('#vue-twitter-section')
 new LanguageView().$mount('#vue-language-section')
+new LocaleView().$mount('#vue-locale-section')
 
 if (profileEnabledGlobally) {
 	const ProfileView = Vue.extend(ProfileSection)
diff --git a/apps/settings/src/utils/validate.js b/apps/settings/src/utils/validate.js
index 7d0cf1d9e33..4ea95593fbc 100644
--- a/apps/settings/src/utils/validate.js
+++ b/apps/settings/src/utils/validate.js
@@ -75,6 +75,18 @@ export function validateLanguage(input) {
 }
 
 /**
+ * Validate the locale input
+ *
+ * @param {object} input the input
+ * @return {boolean}
+ */
+export function validateLocale(input) {
+	return input.code !== ''
+		&& input.name !== ''
+		&& input.name !== undefined
+}
+
+/**
  * Validate boolean input
  *
  * @param {boolean} input the input
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index 085eb1bc0f5..3426cf4ebeb 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -98,39 +98,7 @@ script('settings', [
 			<div id="vue-language-section"></div>
 		</div>
 		<div class="personal-settings-setting-box personal-settings-locale-box">
-			<?php if (isset($_['activelocale'])) { ?>
-				<form id="locale" class="section">
-					<h3>
-						<label for="localeinput"><?php p($l->t('Locale')); ?></label>
-					</h3>
-					<select id="localeinput" name="lang" data-placeholder="<?php p($l->t('Locale')); ?>">
-						<option value="<?php p($_['activelocale']['code']); ?>">
-							<?php p($l->t($_['activelocale']['name'])); ?>
-						</option>
-						<optgroup label="––––––––––"></optgroup>
-						<?php foreach ($_['localesForLanguage'] as $locale) : ?>
-							<option value="<?php p($locale['code']); ?>">
-								<?php p($l->t($locale['name'])); ?>
-							</option>
-						<?php endforeach; ?>
-						<optgroup label="––––––––––"></optgroup>
-						<option value="<?php p($_['activelocale']['code']); ?>">
-							<?php p($l->t($_['activelocale']['name'])); ?>
-						</option>
-						<?php foreach ($_['locales'] as $locale) : ?>
-							<option value="<?php p($locale['code']); ?>">
-								<?php p($l->t($locale['name'])); ?>
-							</option>
-						<?php endforeach; ?>
-					</select>
-					<div id="localeexample" class="personal-info icon-timezone">
-						<p>
-							<span id="localeexample-date"></span> <span id="localeexample-time"></span>
-						</p>
-						<p id="localeexample-fdow"></p>
-					</div>
-				</form>
-			<?php } ?>
+			<div id="vue-locale-section"></div>
 		</div>
 		<span class="msg"></span>
 	</div>