🧘🏼 [Simulation] Brand reformer network first step – v2, Login etc. Branding (#8448)

* Refine locals of some internal pages headlines

* Create page 'legacy information'

* Move filter button into menu

* Refine page 'legacy information'

* Create internal page 'code-of-conduct.html'

* Refine internal page 'code-of-conduct.html'

* Refine page 'legacy information'

* Create internal page 'imprint.html'

* Create internal page 'faq.html'

* Create internal page 'support.html'

* Refine internal page 'faq.html'

* Refine internal page 'imprint.html'

* Move parts of internal page 'data-privacy.html' to 'terms-and-conditions.html'

* Refine internal page 'data-privacy.html'

* Fix tool tip text

* Fix 'email' -> 'e-mail'

* Rename title of organization footer item

- Remove donation page from footer

* Change 'Reformer.Network' to 'Reformer.network'

* Create internal page 'organization.html'

* Refine internal pages

* Translate internal pages

* Change brandings $secondary-color from 'rgb(244, 142, 0)' to 'rgb(239, 123, 0)'

* Change branding $color-primary-active from 'rgb(95, 97, 92)' to 'rgb(135, 135, 135)'

* Move commented font commands in '_branding.scss'

* Set $color-tertiary-light and ribbon colors in '_branding.scss'

* Refactor branding of post ribbons

* Refactor Logos

* Change branding $secondary-color from 'rgb(239, 123, 0)' to 'rgb(239, 124, 0)'

* Refactor colors after the designer suggestions - first step

* Change diverse collorings

- Change border color
- Change plus button
- Change hashtag color
- Change footer link hover
- Change number count color
- Change input border color

* Add font Inter

* Use font Inter

* Make font branding work

* Hover effect for user teaser

* Syncronize 'metadata.ts' with webapp

* Refine e-mail notifications

* Adjust notification settings buttons

* Refine third party setting

* Fix post teaser counter icon tooltips translations

* Refine e-mail notifications

* Refine third party setting

* Add link hover to all internal pages

* Set font family to Inter

- Cleanup

* Set background, color, and font weight of user avatar

* Make login, registration, password-reset layout brandable

- Rename some variables related to this

* Set background images for Login etc.

* Set layout for Login etc. to be 'blank'

* Add login etc. background images

* - first fix for login, registration and password-reset

* - fixed background (including jumping)

* - removing quote block by css
- adding text block by css

* - set font weight

* - added approach also for registration page

* removed registration hack

---------

Co-authored-by: Maximilian Harz <maxharz@gmail.com>
Co-authored-by: Sebastian Stein <sebastian@codepassion.de>
Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>

backend/src/constants/registration.ts

@@ -1,5 +1,2 @@
-// this file is duplicated in `backend/src/config/metadata` and `webapp/constants/metadata.js`
-export default {
-  NONCE_LENGTH: 5,
-  INVITE_CODE_LENGTH: 6,
-}
+// this file is duplicated in `backend/src/config/registration.ts` and `webapp/constants/registration.js`
+export default {}

backend/src/constants/registrationBranded.ts

@@ -0,0 +1,12 @@
+// this file is duplicated in `backend/src/config/registrationBranded.ts` and `webapp/constants/registrationBranded.js`
+import { merge } from 'lodash'
+
+import registration from '@constants/registration'
+
+const defaultRegistration = {
+  NONCE_LENGTH: 5,
+  INVITE_CODE_LENGTH: 6,
+  LAYOUT: 'no-header',
+}
+
+export default merge(defaultRegistration, registration)

backend/src/schema/resolvers/helpers/generateInviteCode.ts

@@ -1,9 +1,9 @@
-import CONSTANTS_REGISTRATION from '@constants/registration'
+import registrationConstants from '@constants/registrationBranded'
 
 export default function generateInviteCode() {
   // 6 random numbers in [ 0, 35 ] are 36 possible numbers (10 [0-9] + 26 [A-Z])
   return Array.from(
-    { length: CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH },
+    { length: registrationConstants.INVITE_CODE_LENGTH },
     (n: number = Math.floor(Math.random() * 36)) => {
       // n > 9: it is a letter (ASCII 65 is A) -> 10 + 55 = 65
       // else: it is a number (ASCII 48 is 0) -> 0 + 48 = 48

backend/src/schema/resolvers/helpers/generateNonce.ts

@@ -1,9 +1,9 @@
-import CONSTANTS_REGISTRATION from '@constants/registration'
+import registrationConstants from '@constants/registrationBranded'
 
 // TODO: why this is not used in resolver 'requestPasswordReset'?
 export default function generateNonce() {
   return Array.from(
-    { length: CONSTANTS_REGISTRATION.NONCE_LENGTH },
+    { length: registrationConstants.NONCE_LENGTH },
     (n: number = Math.floor(Math.random() * 10)) => {
       return String.fromCharCode(n + 48)
     },

backend/src/schema/resolvers/inviteCodes.spec.ts

@@ -5,7 +5,7 @@
 import { createTestClient } from 'apollo-server-testing'
 import gql from 'graphql-tag'
 
-import CONSTANTS_REGISTRATION from '@constants/registration'
+import registrationConstants from '@constants/registrationBranded'
 import Factory, { cleanDatabase } from '@db/factories'
 import { getDriver } from '@db/neo4j'
 import createServer from '@src/server'
@@ -116,7 +116,7 @@ describe('inviteCodes', () => {
             GenerateInviteCode: {
               code: expect.stringMatching(
                 new RegExp(
-                  `^[0-9A-Z]{${CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH},${CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH}}$`,
+                  `^[0-9A-Z]{${registrationConstants.INVITE_CODE_LENGTH},${registrationConstants.INVITE_CODE_LENGTH}}$`,
                 ),
               ),
               expiresAt: null,
@@ -142,7 +142,7 @@ describe('inviteCodes', () => {
             GenerateInviteCode: {
               code: expect.stringMatching(
                 new RegExp(
-                  `^[0-9A-Z]{${CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH},${CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH}}$`,
+                  `^[0-9A-Z]{${registrationConstants.INVITE_CODE_LENGTH},${registrationConstants.INVITE_CODE_LENGTH}}$`,
                 ),
               ),
               expiresAt: nextWeek.toISOString(),

backend/src/schema/resolvers/passwordReset.spec.ts

@@ -5,7 +5,7 @@
 import { createTestClient } from 'apollo-server-testing'
 import gql from 'graphql-tag'
 
-import CONSTANTS_REGISTRATION from '@constants/registration'
+import registrationConstants from '@constants/registrationBranded'
 import Factory, { cleanDatabase } from '@db/factories'
 import { getNeode, getDriver } from '@db/neo4j'
 import createServer from '@src/server'
@@ -117,7 +117,7 @@ describe('passwordReset', () => {
           const resets = await getAllPasswordResets()
           const [reset] = resets
           const { nonce } = reset.properties
-          expect(nonce).toHaveLength(CONSTANTS_REGISTRATION.NONCE_LENGTH)
+          expect(nonce).toHaveLength(registrationConstants.NONCE_LENGTH)
         })
       })
     })

backend/src/schema/resolvers/passwordReset.ts

@@ -7,7 +7,7 @@
 import bcrypt from 'bcryptjs'
 import { v4 as uuid } from 'uuid'
 
-import CONSTANTS_REGISTRATION from '@constants/registration'
+import registrationConstants from '@constants/registrationBranded'
 
 import createPasswordReset from './helpers/createPasswordReset'
 
@@ -15,7 +15,7 @@ export default {
   Mutation: {
     requestPasswordReset: async (_parent, { email }, { driver }) => {
       // TODO: why this is generated differntly from 'backend/src/schema/resolvers/helpers/generateNonce.js'?
-      const nonce = uuid().substring(0, CONSTANTS_REGISTRATION.NONCE_LENGTH)
+      const nonce = uuid().substring(0, registrationConstants.NONCE_LENGTH)
       return createPasswordReset({ driver, nonce, email })
     },
     resetPassword: async (_parent, { email, nonce, newPassword }, { driver }) => {

webapp/assets/styles/imports/_branding.scss

@@ -208,3 +208,122 @@ div.ds-input-wrap > input:focus-within.ds-input {
 [type="checkbox"] {
   accent-color: $color-primary-light;
 }
+
+body.page-name-login,
+body.page-name-registration,
+body.page-name-password-reset-request {
+  background-image: url('~@/static/img/RefNet-Hero_16x9_desktop_1920x1080.jpg');
+  background-size: cover;
+  background-position: center;
+}
+
+@media only screen and (max-width: 900px) {
+  body.page-name-login,
+  body.page-name-registration,
+  body.page-name-password-reset-request {
+    background-image: url('~@/static/img/RefNet-Hero_3x4_mobile_900x1200.jpg');
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  body.page-name-login,
+  body.page-name-registration,
+  body.page-name-password-reset-request {
+    background-image: url('~@/static/img/RefNet-Hero_2x3_mobile_800x1200.jpg');
+  }
+}
+
+// CSS Hack for removing quote block
+.login-form blockquote {
+  display: none;
+}
+// ^^^
+
+// CSS Hack for adding text box
+$text-box-shift-x: 500px;
+$text-box-shift-y: 160px;
+$text-box-shift-padding: 24px;
+$text-box-width: 350px;
+
+@media only screen and (min-width: 1201px) {
+  .login-form
+  // .registration-slider{
+  {
+    width: unset;
+    max-width: unset;
+    padding-left: $text-box-shift-x;
+  }
+}
+
+.login-form article
+// .registration-slider article
+{
+  overflow: visible;
+}
+
+
+.login-page:before,
+.login-form article:before
+// .registration-page:before,
+// .registration-slider article:before
+{
+  color: #ffffff;
+  padding: 24px;
+  display: block;
+  width: $text-box-width;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.login-page:before
+// .registration-page:before {
+{
+  content: 'Mitdenken.\A Mitreden.\A Mitwirken.';
+  white-space: pre;
+  font-size: 48px;
+  position: relative;
+  padding-bottom: calc($text-box-shift-padding / 2);
+}
+.login-form article:before
+// .registration-slider article:before {
+{
+  content: 'Reformer.network - gemeinsam verändern wir die Gesellschaft.';
+  font-size: 24px;
+  position: absolute;
+  top: 0;
+  left: calc(-1 * $text-box-shift-x);
+  padding-top: calc($text-box-shift-padding / 2);
+}
+
+@media only screen and (max-width: 1200px) {
+  .login-page:before,
+  .login-form article:before
+  // .registration-page:before,
+  // .registration-slider article:before
+  {
+    margin: 0 auto;
+  }
+  .login-page:before
+  // .registration-page:before,
+  {
+    font-size: 36px;
+  }
+  .login-form article:before
+  // .registration-slider article:before
+  {
+    font-size: 18px;
+    top: calc(-1 * $text-box-shift-y);
+    left: 0;
+    right: 0;
+  }
+  .login-form
+  // .registration-slider
+  {
+    padding-top: $text-box-shift-y;
+  }
+}
+
+.login-page:before
+// .registration-page:before
+{
+  font-weight: bold;
+}
+// ^^^

webapp/components/Registration/RegistrationSlideInvite.vue

@@ -23,7 +23,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import CONSTANTS_REGISTRATION from './../../constants/registration'
+import registrationConstants from '~/constants/registration'
 
 export const isValidInviteCodeQuery = gql`
   query ($code: ID!) {
@@ -43,11 +43,11 @@ export default {
       formSchema: {
         inviteCode: {
           type: 'string',
-          min: CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH,
-          max: CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH,
+          min: registrationConstants.INVITE_CODE_LENGTH,
+          max: registrationConstants.INVITE_CODE_LENGTH,
           required: true,
           message: this.$t('components.registration.invite-code.form.validations.length', {
-            inviteCodeLength: CONSTANTS_REGISTRATION.INVITE_CODE_LENGTH,
+            inviteCodeLength: registrationConstants.INVITE_CODE_LENGTH,
           }),
         },
       },

webapp/components/Registration/RegistrationSlideNonce.vue

@@ -29,7 +29,7 @@
 <script>
 import gql from 'graphql-tag'
 import { isEmail } from 'validator'
-import CONSTANTS_REGISTRATION from './../../constants/registration'
+import registrationConstants from '~/constants/registration'
 
 import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 
@@ -54,11 +54,11 @@ export default {
       formSchema: {
         nonce: {
           type: 'string',
-          min: CONSTANTS_REGISTRATION.NONCE_LENGTH,
-          max: CONSTANTS_REGISTRATION.NONCE_LENGTH,
+          min: registrationConstants.NONCE_LENGTH,
+          max: registrationConstants.NONCE_LENGTH,
           required: true,
           message: this.$t('components.registration.email-nonce.form.validations.length', {
-            nonceLength: CONSTANTS_REGISTRATION.NONCE_LENGTH,
+            nonceLength: registrationConstants.NONCE_LENGTH,
           }),
         },
       },

webapp/constants/login.js

@@ -0,0 +1,3 @@
+export default {
+  LAYOUT: 'blank',
+}

webapp/constants/loginBranded.js

@@ -0,0 +1,8 @@
+import { merge } from 'lodash'
+import login from '~/constants/login.js'
+
+const defaultLogin = {
+  LAYOUT: 'no-header',
+}
+
+export default merge(defaultLogin, login)

webapp/constants/registration.js

@@ -1,5 +1,4 @@
-// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
+// this file is duplicated in `backend/src/config/registration.ts` and `webapp/constants/registration.js`
 export default {
-  NONCE_LENGTH: 5,
-  INVITE_CODE_LENGTH: 6,
+  LAYOUT: 'blank',
 }

webapp/constants/registrationBranded.js

@@ -0,0 +1,12 @@
+// this file is duplicated in `backend/src/config/registrationBranded.ts` and `webapp/constants/registrationBranded.js`
+import { merge } from 'lodash'
+
+import registration from '~/constants/registration.js'
+
+const defaultRegistration = {
+  NONCE_LENGTH: 5,
+  INVITE_CODE_LENGTH: 6,
+  LAYOUT: 'no-header',
+}
+
+export default merge(defaultRegistration, registration)

webapp/pages/login.vue

@@ -1,16 +1,19 @@
 <template>
-  <transition name="fade" appear>
-    <login-form @success="handleSuccess" />
-  </transition>
+  <div class="login-page">
+    <transition name="fade" appear>
+      <login-form @success="handleSuccess" />
+    </transition>
+  </div>
 </template>
 
 <script>
 import LoginForm from '~/components/LoginForm/LoginForm.vue'
+import loginConstants from '~/constants/loginBranded.js'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { mapGetters } from 'vuex'
 
 export default {
-  layout: 'no-header',
+  layout: loginConstants.LAYOUT,
   components: {
     LoginForm,
   },
@@ -38,3 +41,10 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.login-page {
+  width: auto;
+  height: auto;
+}
+</style>

webapp/pages/password-reset.vue

@@ -17,6 +17,7 @@
 <script>
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
+import loginConstants from '~/constants/loginBranded.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
@@ -27,7 +28,7 @@ export default {
     Logo,
     PageParamsLink,
   },
-  layout: 'no-header',
+  layout: loginConstants.LAYOUT,
   data() {
     return {
       metadata,

webapp/pages/registration.vue

@@ -1,16 +1,19 @@
 <template>
-  <registration-slider
-    :registrationType="registrationType.method"
-    :activePage="registrationType.activePage"
-    :overwriteSliderData="overwriteSliderData"
-  />
+  <div class="registration-page">
+    <registration-slider
+      :registrationType="registrationType.method"
+      :activePage="registrationType.activePage"
+      :overwriteSliderData="overwriteSliderData"
+    />
+  </div>
 </template>
 
 <script>
+import registrationConstants from '~/constants/registrationBranded.js'
 import RegistrationSlider from '~/components/Registration/RegistrationSlider'
 
 export default {
-  layout: 'no-header',
+  layout: registrationConstants.LAYOUT,
   name: 'Registration',
   components: {
     RegistrationSlider,