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 @@