The settings page now boasts your profile picture

ref #103

src/components/settings/Settings.svelte

@@ -1,6 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
-  import FormLayout from "../base/FormLayout.svelte";
+  import { MeService } from "@odit/lfk-client-js";
+  $: original_data = {};
+  $: editable = {};
+  const user_promise = MeService.meControllerGetPermissions().then((data) => {
+    original_data = Object.assign(original_data, data);
+    editable = Object.assign(editable, original_data);
+  });
 </script>
 
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
@@ -9,27 +15,57 @@
       class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
       🔨<br />{$_('settings')}
     </h1>
-    <p
-      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
-      <span class="text-lg">{$_('settings-for-your-profile')}</span>
-    </p>
   </div>
 </div>
 
 <div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    <!-- <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
+    <div>
-      General
+      <div class="md:grid md:grid-cols-3 md:gap-6">
-    </h2> -->
+        <div class="md:col-span-1">
-    <div
+          <div class="px-4 sm:px-0">
-      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mb-16">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
-      <p class="text-center">
+              {$_('profile')}
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus et
+            </h3>
-        amet voluptate nulla accusantium vero blanditiis nobis facere veritatis.
+            <p class="mt-1 text-sm text-gray-600">
-        Impedit deserunt saepe aliquid unde consequuntur officia consequatur
+              {$_('everything-concerning-your-profile')}
-        fugit iusto dolorem?
             </p>
           </div>
-    <FormLayout />
+        </div>
+        <div class="mt-5 md:mt-0 md:col-span-2">
+          <div class="shadow sm:rounded-md sm:overflow-hidden">
+            <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+              <div>
+                <!-- svelte-ignore a11y-label-has-associated-control -->
+                <label class="block text-sm font-medium text-gray-700">
+                  {$_('profile-picture')}
+                </label>
+                <div class="mt-2 flex items-center">
+                  <span
+                    class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100">
+                    <img
+                      alt={$_('profile-picture')}
+                      class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+                      src={editable.profilePic} />
+                  </span>
+                  <button
+                    type="button"
+                    class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Change
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+              <button
+                type="submit"
+                class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

src/locales/de.json

@@ -351,5 +351,7 @@
   "you-can-now-use-your-new-password-to-log-in-to-your-account": "Du kannst dich jetzt mit deinem neuen Passwort anmelden! 🎉",
   "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
   "zip-postal-code": "Postleitzahl",
-  "settings-for-your-profile": "Die Einstellungen deines Accounts"
+  "settings-for-your-profile": "Die Einstellungen deines Accounts",
+  "profile": "Profil",
+  "everything-concerning-your-profile": "Alles zu deinem Profil"
 }

src/locales/en.json

@@ -351,5 +351,7 @@
   "you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
   "you-have-to-provide-an-organization": "You have to provide an organization",
   "zip-postal-code": "ZIP/ postal code",
-  "settings-for-your-profile": "Settings for your profile"
+  "settings-for-your-profile": "Settings for your profile",
+  "profile": "Profile",
+  "everything-concerning-your-profile": "Everything concerning your profile"
 }