Rework the public views to work better on mobile

dashboard/src/components/SetupAccount.vue

@@ -4,6 +4,7 @@ import { ref, onMounted } from 'vue';
 import { marked } from 'marked';
 import { Button, PasswordInput, FormGroup, TextInput, fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
+import PublicPageLayout from '../components/PublicPageLayout.vue';
 import ProfileModel from '../models/ProfileModel.js';
 
 const profileModel = ProfileModel.create();
@@ -103,14 +104,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <!-- TODO mobile layout -->
-  <div class="layout-root" v-if="ready">
-    <div class="layout-left" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
-      <img width="128" height="128" class="icon" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
-    </div>
-
-    <div class="layout-right">
-
+  <PublicPageLayout :footerHtml="footer">
+    <div>
       <div v-if="mode === MODE.SETUP">
         <small>{{ $t('setupAccount.welcomeTo') }}</small>
         <h1>{{ cloudronName }}</h1>
@@ -185,9 +180,7 @@ onMounted(async () => {
         <Button :href="dashboardUrl">{{ $t('setupAccount.success.openDashboardAction') }}</Button>
       </div>
     </div>
-  </div>
-
-  <footer v-show="footer" v-html="footer"></footer>
+  </PublicPageLayout>
 </template>
 
 <style>