feat: add cloud account pages

src/assets/stylesheets/variables/_variables.sizes.scss

@@ -22,6 +22,10 @@ $page-header-height: 80px;
 $page-header-bar-height: 60px;
 $page-header-announcement-height: 44px;
 
+// Section
+
+$section-form-margin-top: 60px;
+
 // Screen
 
 $screen-large-width-breakpoint: $page-wrapper-max-width;

src/components/section/cloud/SectionCloudAccountContent.vue

@@ -0,0 +1,87 @@
+<!--
+ * This file is part of prose-web
+ *
+ * Copyright 2024, Prose Foundation
+ -->
+
+<!-- **********************************************************************
+     TEMPLATE
+     ********************************************************************** -->
+
+<template lang="pug">
+.c-section-cloud-account-content
+  .c-section-cloud-account-content__title
+    page-wrapper
+      base-title(
+        level="medium"
+        align="center"
+        tint="gradient"
+      )
+        | {{ title }}
+
+        span.c-section-cloud-account-content__title-emoji(
+          v-if="titleEmoji"
+        )
+          base-space(
+            :repeat="2"
+          )
+
+          | {{ titleEmoji }}
+
+  .c-section-cloud-account-content__form
+    page-wrapper
+      slot
+</template>
+
+<!-- **********************************************************************
+     SCRIPT
+     ********************************************************************** -->
+
+<script>
+export default {
+  name: "SectionCloudAccountContent",
+
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+
+    titleEmoji: {
+      type: String,
+      default: null
+    }
+  }
+};
+</script>
+
+<!-- **********************************************************************
+     STYLE
+     ********************************************************************** -->
+
+<style lang="scss">
+$c: ".c-section-cloud-account-content";
+
+#{$c} {
+  display: flex;
+  flex-direction: column;
+
+  #{$c}__title {
+    flex: 0 0 auto;
+
+    #{$c}__title-emoji {
+      user-select: none;
+
+      /* Hack: disable inherited text fill color so that emoji shows up. */
+      @include text-fill-color(currentcolor);
+    }
+  }
+
+  #{$c}__form {
+    background-color: rgba($color-background-secondary, 0.5);
+    border-top: 1px solid $color-border-tertiary;
+    margin-top: $section-form-margin-top;
+    flex: 1;
+  }
+}
+</style>

src/components/section/cloud/SectionCloudSigninAuthenticate.vue

@@ -0,0 +1,30 @@
+<!--
+ * This file is part of prose-web
+ *
+ * Copyright 2024, Prose Foundation
+ -->
+
+<!-- **********************************************************************
+     TEMPLATE
+     ********************************************************************** -->
+
+<template lang="pug">
+.c-section-cloud-signin-authenticate
+  page-wrapper
+    base-title(
+      level="medium"
+      align="center"
+      tint="gradient"
+    )
+      | Log in to your workspace
+</template>
+
+<!-- **********************************************************************
+     SCRIPT
+     ********************************************************************** -->
+
+<script>
+export default {
+  name: "SectionCloudSigninAuthenticate"
+};
+</script>

src/pages/cloud/account/settings.vue

@@ -0,0 +1,60 @@
+<!--
+ * This file is part of prose-web
+ *
+ * Copyright 2024, Prose Foundation
+ -->
+
+<!-- **********************************************************************
+     TEMPLATE
+     ********************************************************************** -->
+
+<template lang="pug">
+.p-cloud-account-settings
+  section-cloud-account-content(
+    title="Your account settings"
+    class="p-cloud-account-settings__content"
+  )
+</template>
+
+<!-- **********************************************************************
+     SCRIPT
+     ********************************************************************** -->
+
+<script setup>
+definePageMeta({
+  layout: "embedding"
+});
+
+// Disable indexing of page
+defineRouteRules({
+  robots: false
+});
+
+// Set page title
+useHead({
+  title: "Your Prose account settings"
+});
+</script>
+
+<script>
+export default {
+  name: "CloudAccountSettingsPage"
+};
+</script>
+
+<!-- **********************************************************************
+     STYLE
+     ********************************************************************** -->
+
+<style lang="scss">
+$c: ".p-cloud-account-settings";
+
+#{$c} {
+  display: flex;
+  flex-direction: column;
+
+  #{$c}__content {
+    flex: 1;
+  }
+}
+</style>

src/pages/cloud/account/workspaces.vue

@@ -0,0 +1,61 @@
+<!--
+ * This file is part of prose-web
+ *
+ * Copyright 2024, Prose Foundation
+ -->
+
+<!-- **********************************************************************
+     TEMPLATE
+     ********************************************************************** -->
+
+<template lang="pug">
+.p-cloud-account-workspaces
+  section-cloud-account-content(
+    title="Welcome back, Valerian"
+    title-emoji="👋"
+    class="p-cloud-account-workspaces__content"
+  )
+</template>
+
+<!-- **********************************************************************
+     SCRIPT
+     ********************************************************************** -->
+
+<script setup>
+definePageMeta({
+  layout: "embedding"
+});
+
+// Disable indexing of page
+defineRouteRules({
+  robots: false
+});
+
+// Set page title
+useHead({
+  title: "Your Prose workspaces"
+});
+</script>
+
+<script>
+export default {
+  name: "CloudAccountWorkspacesPage"
+};
+</script>
+
+<!-- **********************************************************************
+     STYLE
+     ********************************************************************** -->
+
+<style lang="scss">
+$c: ".p-cloud-account-workspaces";
+
+#{$c} {
+  display: flex;
+  flex-direction: column;
+
+  #{$c}__content {
+    flex: 1;
+  }
+}
+</style>

src/pages/cloud/signin.vue

@@ -0,0 +1,40 @@
+<!--
+ * This file is part of prose-web
+ *
+ * Copyright 2024, Prose Foundation
+ -->
+
+<!-- **********************************************************************
+     TEMPLATE
+     ********************************************************************** -->
+
+<template lang="pug">
+.p-cloud-signin
+  section-cloud-signin-authenticate
+</template>
+
+<!-- **********************************************************************
+     SCRIPT
+     ********************************************************************** -->
+
+<script setup>
+definePageMeta({
+  layout: "embedding"
+});
+
+// Disable indexing of page
+defineRouteRules({
+  robots: false
+});
+
+// Set page title
+useHead({
+  title: "Sign in to Prose Cloud"
+});
+</script>
+
+<script>
+export default {
+  name: "CloudSigninPage"
+};
+</script>

src/pages/cloud/signup.vue

@@ -127,7 +127,7 @@ $c: ".p-cloud-signup";
   }
 
   #{$c}__form {
-    margin-top: 60px;
+    margin-top: $section-form-margin-top;
     flex: 1;
   }