mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
feat: add page component for public registration
This commit is contained in:
roschaefer
mattwr18
parent
6955323f51
commit
71e94d88c6
@ -10,9 +10,6 @@
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<ds-space margin="small">
|
||||
<ds-text size="small" align="left">{{ $t('login.copy') }}</ds-text>
|
||||
</ds-space>
|
||||
<ds-form
|
||||
v-if="!submitted"
|
||||
@input="handleInput"
|
||||
@ -21,14 +18,16 @@
|
||||
:schema="formSchema"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<ds-input
|
||||
:placeholder="$t('login.email')"
|
||||
type="email"
|
||||
id="email"
|
||||
model="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
<ds-space margin="small">
|
||||
<ds-input
|
||||
:placeholder="$t('login.email')"
|
||||
type="email"
|
||||
id="email"
|
||||
model="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
</ds-space>
|
||||
<ds-space margin-botton="large">
|
||||
<ds-text align="left">{{ $t('password-reset.form.description') }}</ds-text>
|
||||
</ds-space>
|
||||
|
||||
@ -1,59 +1,57 @@
|
||||
<template>
|
||||
<ds-card class="signup">
|
||||
<ds-space margin="large">
|
||||
<ds-form
|
||||
v-if="!success && !error"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@submit="handleSubmit"
|
||||
<ds-space margin="large">
|
||||
<ds-form
|
||||
v-if="!success && !error"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<h1>{{ invitation ? $t('profile.invites.title') : $t('registration.signup.title') }}</h1>
|
||||
<ds-space v-if="token" margin-botton="large">
|
||||
<ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
|
||||
</ds-space>
|
||||
<ds-space margin-botton="large">
|
||||
<ds-text>
|
||||
{{
|
||||
invitation
|
||||
? $t('profile.invites.description')
|
||||
: $t('registration.signup.form.description')
|
||||
}}
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
<ds-input
|
||||
:placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
|
||||
type="email"
|
||||
id="email"
|
||||
model="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
<ds-button
|
||||
:disabled="disabled"
|
||||
:loading="$apollo.loading"
|
||||
primary
|
||||
fullwidth
|
||||
name="submit"
|
||||
type="submit"
|
||||
icon="envelope"
|
||||
>
|
||||
<h1>{{ invitation ? $t('profile.invites.title') : $t('registration.signup.title') }}</h1>
|
||||
<ds-space v-if="token" margin-botton="large">
|
||||
<ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
|
||||
</ds-space>
|
||||
<ds-space margin-botton="large">
|
||||
<ds-text>
|
||||
{{
|
||||
invitation
|
||||
? $t('profile.invites.description')
|
||||
: $t('registration.signup.form.description')
|
||||
}}
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
<ds-input
|
||||
:placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
|
||||
type="email"
|
||||
id="email"
|
||||
model="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
<ds-button
|
||||
:disabled="disabled"
|
||||
:loading="$apollo.loading"
|
||||
primary
|
||||
fullwidth
|
||||
name="submit"
|
||||
type="submit"
|
||||
icon="envelope"
|
||||
>
|
||||
{{ $t('registration.signup.form.submit') }}
|
||||
</ds-button>
|
||||
</ds-form>
|
||||
<div v-else>
|
||||
<template v-if="!error">
|
||||
<sweetalert-icon icon="info" />
|
||||
<ds-text align="center" v-html="submitMessage" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<sweetalert-icon icon="error" />
|
||||
<ds-text align="center">{{ error.message }}</ds-text>
|
||||
</template>
|
||||
</div>
|
||||
</ds-space>
|
||||
</ds-card>
|
||||
{{ $t('registration.signup.form.submit') }}
|
||||
</ds-button>
|
||||
</ds-form>
|
||||
<div v-else>
|
||||
<template v-if="!error">
|
||||
<sweetalert-icon icon="info" />
|
||||
<ds-text align="center" v-html="submitMessage" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<sweetalert-icon icon="error" />
|
||||
<ds-text align="center">{{ error.message }}</ds-text>
|
||||
</template>
|
||||
</div>
|
||||
</ds-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -55,6 +55,8 @@
|
||||
"email": "Deine E-Mail",
|
||||
"password": "Dein Passwort",
|
||||
"forgotPassword": "Passwort vergessen?",
|
||||
"no-account": "Du hast noch keinen Benutzerkonto?",
|
||||
"register": "Benutzerkonto erstellen",
|
||||
"moreInfo": "Was ist Human Connection?",
|
||||
"moreInfoURL": "https://human-connection.org",
|
||||
"moreInfoHint": "zur Präsentationsseite",
|
||||
|
||||
@ -55,6 +55,8 @@
|
||||
"email": "Your Email",
|
||||
"password": "Your Password",
|
||||
"forgotPassword": "Forgot Password?",
|
||||
"no-account": "Don't have an account?",
|
||||
"register": "Sign up",
|
||||
"moreInfo": "What is Human Connection?",
|
||||
"moreInfoURL": "https://human-connection.org/en/",
|
||||
"moreInfoHint": "to the presentation page",
|
||||
|
||||
@ -38,9 +38,8 @@ export default {
|
||||
'password-reset-request',
|
||||
'password-reset-verify-nonce',
|
||||
'password-reset-change-password',
|
||||
// 'registration-signup', TODO: implement to open public registration
|
||||
// 'registration-signup-by-invitation-code',
|
||||
// 'registration-verify-nonce',
|
||||
'registration-signup',
|
||||
'registration-enter-nonce',
|
||||
'registration-create-user-account',
|
||||
'pages-slug',
|
||||
'terms-and-conditions',
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
<ds-heading size="h3">{{ $t('admin.invites.title') }}</ds-heading>
|
||||
<ds-text>{{ $t('admin.invites.description') }}</ds-text>
|
||||
</ds-space>
|
||||
<signup :invitation="true" />
|
||||
<ds-card class="signup">
|
||||
<signup :invitation="true" />
|
||||
</ds-card>
|
||||
</ds-section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -22,6 +22,11 @@
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<ds-space margin="small">
|
||||
<a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfoHint')" target="_blank">
|
||||
{{ $t('login.moreInfo') }}
|
||||
</a>
|
||||
</ds-space>
|
||||
<ds-space margin="small">
|
||||
<ds-text size="small">{{ $t('login.copy') }}</ds-text>
|
||||
</ds-space>
|
||||
@ -43,7 +48,7 @@
|
||||
name="password"
|
||||
type="password"
|
||||
/>
|
||||
<ds-space class="password-reset-link" margin-bottom="large">
|
||||
<ds-space margin-bottom="large">
|
||||
<nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
|
||||
</ds-space>
|
||||
<ds-button
|
||||
@ -56,14 +61,9 @@
|
||||
>
|
||||
{{ $t('login.login') }}
|
||||
</ds-button>
|
||||
<ds-space margin="x-small">
|
||||
<a
|
||||
:href="$t('login.moreInfoURL')"
|
||||
:title="$t('login.moreInfoHint')"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('login.moreInfo') }}
|
||||
</a>
|
||||
<ds-space margin-top="large" margin-bottom="x-small">
|
||||
{{ $t('login.no-account') }}
|
||||
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</form>
|
||||
</ds-flex-item>
|
||||
|
||||
7
webapp/pages/registration/enter-nonce.vue
Normal file
7
webapp/pages/registration/enter-nonce.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h1>Enter nonce</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
42
webapp/pages/registration/signup.vue
Normal file
42
webapp/pages/registration/signup.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<ds-container width="medium">
|
||||
<ds-card>
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<client-only>
|
||||
<locale-switch class="login-locale-switch" offset="5" />
|
||||
</client-only>
|
||||
<ds-space margin-top="small" margin-bottom="xxx-small" centered>
|
||||
<img class="signup-image" alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
|
||||
<signup :invitation="false" />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-card>
|
||||
</ds-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Signup from '~/components/Registration/Signup'
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
|
||||
export default {
|
||||
layout: 'no-header',
|
||||
components: {
|
||||
Signup,
|
||||
LocaleSwitch,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.signup-image {
|
||||
width: 90%;
|
||||
max-width: 200px;
|
||||
}
|
||||
.login-card {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user