Attempt to improve public view layout

dashboard/src/components/PublicPageLayout.vue

@@ -11,6 +11,10 @@ defineProps({
     type: String,
     default: `${API_ORIGIN}/api/v1/cloudron/avatar`,
   },
+  cloudronName: {
+    type: String,
+    default: 'Cloudron',
+  }
 });
 
 </script>
@@ -20,11 +24,13 @@ defineProps({
     <div class="public-page-layout-root">
       <div class="public-page-layout-left pankow-no-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
         <img class="cloudron-avatar" width="128" height="128" :src="iconUrl"/>
+        <div>{{ cloudronName }}</div>
       </div>
 
       <div class="public-page-layout-right">
         <div class="public-page-layout-mobile-logo">
           <img class="cloudron-avatar" width="128" height="128" :src="iconUrl"/>
+          <div>{{ cloudronName }}</div>
         </div>
         <div class="public-page-layout-right-slot">
           <slot></slot>
@@ -94,8 +100,8 @@ defineProps({
   }
 }
 
-.public-page-layout-left img {
-  margin-bottom: 20%;
+.public-page-layout-left .cloudron-avatar {
+  margin-bottom: 20px;
   border-radius: 10px;
 }
 

dashboard/src/components/SetupAccount.vue

@@ -104,13 +104,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer">
+  <PublicPageLayout :footer-html="footer" :cloudron-name="cloudronName">
     <div>
       <div v-if="mode === MODE.SETUP">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
-        <br/>
-        <div>{{ $t('setupAccount.description') }}</div>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
+        <p style="margin-bottom: 8px">{{ $t('setupAccount.description') }}</p>
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
@@ -151,24 +149,21 @@ onMounted(async () => {
       </div>
 
       <div v-if="mode === MODE.NO_USERNAME">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
         <br/>
         <h3>{{ $t('setupAccount.noUsername.title') }}</h3>
         <div>{{ $t('setupAccount.noUsername.description') }}</div>
       </div>
 
       <div v-if="mode === MODE.INVALID_TOKEN">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
         <br/>
         <h3 class="error-label">{{ $t('setupAccount.invalidToken.title') }}</h3>
         <div>{{ $t('setupAccount.invalidToken.description') }}</div>
       </div>
 
       <div v-if="mode === MODE.DONE">
-        <small>{{ $t('setupAccount.welcomeTo') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('setupAccount.welcomeTo') }}</h2>
         <br/>
         <h3>{{ $t('setupAccount.success.title') }}</h3>
         <Button :href="dashboardUrl">{{ $t('setupAccount.success.openDashboardAction') }}</Button>

dashboard/src/style.css

@@ -53,8 +53,15 @@ h1, h2, h3, h4, h5 {
   font-weight: 400;
 }
 
+h1 {
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+
 h2 {
   font-size: 24px;
+  margin-top: 18px;
+  margin-bottom: 18px;
 }
 
 a {

dashboard/src/views/LoginView.vue

@@ -89,11 +89,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer" :icon-url="iconUrl" v-if="ready">
+  <PublicPageLayout v-if="ready" :footerHtml="footer" :icon-url="iconUrl" :cloudron-name="name">
     <div>
-      <small>{{ $t('login.loginTo') }}</small>
-      <h1>{{ name }}</h1>
-      <p v-html="note"></p>
+      <h2>{{ $t('login.loginTo') }}</h2>
+      <p v-html="note" style="margin-bottom: 8px"></p>
 
       <form @submit.prevent="onSubmit" v-if="!totpTokenRequired">
         <fieldset :disabled="busy">
@@ -116,7 +115,7 @@ onMounted(async () => {
 
         <div class="actions">
           <Button id="loginSubmitButton" @click="onSubmit" :disabled="busy || (!username || !password)" :loading="busy">{{ $t('login.signInAction') }}</Button>
-          <a class="forgot" href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
+          <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
         </div>
       </form>
 
@@ -143,14 +142,14 @@ onMounted(async () => {
 <style scoped>
 
 .actions {
-  margin-top: 1.5em;
+  margin-top: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.actions .forgot {
-  margin-top: 1em;
+.actions a {
+  margin-top: 12px;
   font-size: 0.9em;
 }
 

dashboard/src/views/OidcErrorView.vue

@@ -4,7 +4,7 @@ import { Button } from '@cloudron/pankow';
 import PublicPageLayout from '../components/PublicPageLayout.vue';
 
 // coming from oidc_error.html server-side rendered
-const name = window.cloudron.name;
+const cloudronName = window.cloudron.name;
 const iconUrl = window.cloudron.iconUrl;
 const errorMessage = window.cloudron.errorMessage;
 const footer = window.cloudron.footer;
@@ -12,7 +12,7 @@ const footer = window.cloudron.footer;
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer">
+  <PublicPageLayout :footer-html="footer" :icon-url="iconUrl" :cloudron-name="cloudronName">
     <div style="max-width: 300px;">
       <h2>{{ name }} OpenID Error</h2>
       <div>{{ errorMessage }}</div>

dashboard/src/views/OidcInteractionAbortView.vue

@@ -4,16 +4,16 @@ import { Button } from '@cloudron/pankow';
 import PublicPageLayout from '../components/PublicPageLayout.vue';
 
 // coming from oidc_error.html server-side rendered
-const name = window.cloudron.name;
+const cloudronName = window.cloudron.name;
 const submitUrl = window.cloudron.submitUrl;
 const footer = window.cloudron.footer;
 
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer">
+  <PublicPageLayout :footer-html="footer" :cloudron-name="cloudronName">
     <div>
-      <h2>You do not have access to {{ name }}</h2>
+      <h2>You do not have access</h2>
       <br/>
       <Button :href="submitUrl">Continue</Button>
     </div>

dashboard/src/views/PasswordResetView.vue

@@ -101,12 +101,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer">
+  <PublicPageLayout :footer-html="footer" :cloudron-name="cloudronName">
     <div v-if="ready">
 
       <div v-if="mode === MODE.RESET_PASSWORD">
-        <small>{{ $t('passwordReset.title') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('passwordReset.title') }}</h2>
 
         <form name="passwordResetForm" @submit.prevent="onPasswordReset()">
           <input type="submit" style="display: none;"/>
@@ -130,9 +129,7 @@ onMounted(async () => {
       </div>
 
       <div v-if="mode === MODE.NEW_PASSWORD">
-        <small>{{ $t('passwordReset.newPassword.title') }}</small>
-        <h1>{{ cloudronName }}</h1>
-        <br/>
+        <h2>{{ $t('passwordReset.newPassword.title') }}</h2>
 
         <p class="has-error" v-if="error.generic">{{ error.generic }}</p>
 
@@ -158,34 +155,37 @@ onMounted(async () => {
 
           <div class="actions">
             <Button @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
-            <a class="login" href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
+            <a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
           </div>
         </form>
       </div>
 
       <div v-if="mode === MODE.NEW_PASSWORD_DONE">
-        <small>{{ $t('passwordReset.success.title') }}</small>
-        <h1>{{ cloudronName }}</h1>
-        <br/>
+        <h2>{{ $t('passwordReset.success.title') }}</h2>
         <Button href="/">{{ $t('passwordReset.success.openDashboardAction') }}</Button>
       </div>
     </div>
   </PublicPageLayout>
 </template>
 
-
 <style scoped>
 
 .actions {
-  margin-top: 1.5em;
+  margin-top: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.actions .login {
-  margin-top: 1em;
+.actions a {
+  margin-top: 12px;
   font-size: 0.9em;
 }
 
+@media (max-width: 576px) {
+  .actions {
+    align-items: unset;
+  }
+}
+
 </style>