From 569485bc4c63d8529a021b4d676427149e635086 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 29 Apr 2025 10:21:14 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=98=F0=9F=8F=BC=20[Simulation]=20Brand?= =?UTF-8?q?=20reformer=20network=20first=20step=20=E2=80=93=20v2,=20Login?= =?UTF-8?q?=20etc.=20Branding=20(#8448)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Sebastian Stein Co-authored-by: Ulf Gebhardt --- backend/src/constants/registration.ts | 7 +- backend/src/constants/registrationBranded.ts | 12 ++ .../resolvers/helpers/generateInviteCode.ts | 4 +- .../schema/resolvers/helpers/generateNonce.ts | 4 +- .../src/schema/resolvers/inviteCodes.spec.ts | 6 +- .../schema/resolvers/passwordReset.spec.ts | 4 +- backend/src/schema/resolvers/passwordReset.ts | 4 +- webapp/assets/styles/imports/_branding.scss | 119 ++++++++++++++++++ .../Registration/RegistrationSlideInvite.vue | 8 +- .../Registration/RegistrationSlideNonce.vue | 8 +- webapp/constants/login.js | 3 + webapp/constants/loginBranded.js | 8 ++ webapp/constants/registration.js | 5 +- webapp/constants/registrationBranded.js | 12 ++ webapp/pages/login.vue | 18 ++- webapp/pages/password-reset.vue | 3 +- webapp/pages/registration.vue | 15 ++- .../RefNet-Hero_16x9_desktop_1920x1080.jpg | Bin 0 -> 280011 bytes .../img/RefNet-Hero_2x3_mobile_800x1200.jpg | Bin 0 -> 117928 bytes .../img/RefNet-Hero_3x4_mobile_900x1200.jpg | Bin 0 -> 129640 bytes 20 files changed, 202 insertions(+), 38 deletions(-) create mode 100644 backend/src/constants/registrationBranded.ts create mode 100644 webapp/constants/login.js create mode 100644 webapp/constants/loginBranded.js create mode 100644 webapp/constants/registrationBranded.js create mode 100644 webapp/static/img/RefNet-Hero_16x9_desktop_1920x1080.jpg create mode 100644 webapp/static/img/RefNet-Hero_2x3_mobile_800x1200.jpg create mode 100644 webapp/static/img/RefNet-Hero_3x4_mobile_900x1200.jpg diff --git a/backend/src/constants/registration.ts b/backend/src/constants/registration.ts index a08be3521..8ebb40573 100644 --- a/backend/src/constants/registration.ts +++ b/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 {} diff --git a/backend/src/constants/registrationBranded.ts b/backend/src/constants/registrationBranded.ts new file mode 100644 index 000000000..2ce1d6965 --- /dev/null +++ b/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) diff --git a/backend/src/schema/resolvers/helpers/generateInviteCode.ts b/backend/src/schema/resolvers/helpers/generateInviteCode.ts index 6e580fab9..980af4593 100644 --- a/backend/src/schema/resolvers/helpers/generateInviteCode.ts +++ b/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 diff --git a/backend/src/schema/resolvers/helpers/generateNonce.ts b/backend/src/schema/resolvers/helpers/generateNonce.ts index 7e0f7542c..b7585b24f 100644 --- a/backend/src/schema/resolvers/helpers/generateNonce.ts +++ b/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) }, diff --git a/backend/src/schema/resolvers/inviteCodes.spec.ts b/backend/src/schema/resolvers/inviteCodes.spec.ts index aac79210f..13512a86c 100644 --- a/backend/src/schema/resolvers/inviteCodes.spec.ts +++ b/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(), diff --git a/backend/src/schema/resolvers/passwordReset.spec.ts b/backend/src/schema/resolvers/passwordReset.spec.ts index 7a260d345..59cf1cf4a 100644 --- a/backend/src/schema/resolvers/passwordReset.spec.ts +++ b/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) }) }) }) diff --git a/backend/src/schema/resolvers/passwordReset.ts b/backend/src/schema/resolvers/passwordReset.ts index ab53d65fa..44f3f51bd 100644 --- a/backend/src/schema/resolvers/passwordReset.ts +++ b/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 }) => { diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss index 2c0bdb0a6..6886423be 100644 --- a/webapp/assets/styles/imports/_branding.scss +++ b/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; +} +// ^^^ diff --git a/webapp/components/Registration/RegistrationSlideInvite.vue b/webapp/components/Registration/RegistrationSlideInvite.vue index 723071510..9041fd345 100644 --- a/webapp/components/Registration/RegistrationSlideInvite.vue +++ b/webapp/components/Registration/RegistrationSlideInvite.vue @@ -23,7 +23,7 @@ + + diff --git a/webapp/pages/password-reset.vue b/webapp/pages/password-reset.vue index 6d67c4cae..fa3223f6d 100644 --- a/webapp/pages/password-reset.vue +++ b/webapp/pages/password-reset.vue @@ -17,6 +17,7 @@