settings: Show the date when a user joined the realm in profile panel.

This will also help us to cover up some space when there are no custom
profile fields.

static/js/settings.js

@@ -1,3 +1,4 @@
+import {parseISO} from "date-fns";
 import Handlebars from "handlebars/runtime";
 import $ from "jquery";
 
@@ -86,11 +87,18 @@ function setup_settings_label() {
     };
 }
 
+function get_parsed_date_of_joining() {
+    const user_date_joined = people.get_by_user_id(page_params.user_id, false).date_joined;
+    const dateFormat = new Intl.DateTimeFormat("default", {dateStyle: "long"});
+    return dateFormat.format(parseISO(user_date_joined));
+}
+
 export function build_page() {
     setup_settings_label();
 
     const rendered_settings_tab = render_settings_tab({
         full_name: people.my_full_name(),
+        date_joined_text: get_parsed_date_of_joining(),
         page_params,
         enable_sound_select:
             page_params.enable_sounds || page_params.enable_stream_audible_notifications,

static/templates/settings/profile_settings.hbs

@@ -18,6 +18,11 @@
                         </div>
                     </div>
                 </form>
+
+                <div class="input-group grid">
+                    <span class="title">{{t "Joined" }}: {{date_joined_text}}</span>
+                </div>
+
                 <form class="form-horizontal timezone-setting-form">
                     <div class="input-group grid">
                         <label for="timezone" class="dropdown-title inline-block">{{t "Time zone" }}</label>