Skip to content

Commit

Permalink
Merge 53abfea into 4a54ebf
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukaszjedrasik
lukaszjedrasik committed Apr 1, 2021
2 parents 4a54ebf + 53abfea commit 351e70c
Show file tree
Hide file tree
Showing 19 changed files with 946 additions and 329 deletions.
185 changes: 185 additions & 0 deletions packages/commercetools/theme/components/Auth/LoginForm.vue
View file
@@ -0,0 +1,185 @@
<template>
<div class='login-form form'>
<ValidationObserver v-slot="{ handleSubmit }" key="log-in">
<SfAlert
v-if="loginError && loginError.message && !loginError.field"
type="danger"
:message="$t(loginError.message)"
/>
<form class="form" @submit.prevent="handleSubmit(handleLogin)">
<ValidationProvider rules="required|email" v-slot="{ errors }">
<SfInput
data-cy="login-input_email"
v-model="form.username"
:valid="!errors[0]"
:errorMessage="errors[0]"
name="email"
:label="$t('Your email')"
class="form__element"
/>
</ValidationProvider>
<ValidationProvider rules="required" v-slot="{ errors }">
<SfInput
data-cy="login-input_password"
v-model="form.password"
:valid="!errors[0]"
:errorMessage="errors[0]"
name="password"
:label="$t('Password')"
type="password"
class="form__element"
/>
</ValidationProvider>
<SfCheckbox
data-cy="login-checkbox-remember-me"
v-model="rememberMe"
name="remember-me"
:label="$t('Remember me')"
class="form__element checkbox"
/>
<SfButton
data-cy="login-btn_submit"
type="submit"
class="sf-button--full-width form__button"
:disabled="loading"
>
<SfLoader :class="{ loader: loading }" :loading="loading">
<div>{{ $t('Login') }}</div>
</SfLoader>
</SfButton>
</form>
</ValidationObserver>
<div class="action">
<SfButton data-cy="login-btn_forgot-password" class="sf-button--text">
{{ $t('Forgotten password?') }}
</SfButton>
</div>
<div class="bottom">
<p class="bottom__paragraph">{{ $t('No account') }}</p>
<SfButton
data-cy="login-btn_sign-up"
class="sf-button--text"
@click="switchAuthModal('register')"
>
{{ $t('Register today') }}
</SfButton>
</div>
</div>
</template>
<script>
import { ref } from '@vue/composition-api';
import { SfInput, SfButton, SfCheckbox, SfLoader, SfAlert } from '@storefront-ui/vue';
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
import { useUser } from '@vue-storefront/commercetools';
import { useUiState, useUiNotification } from '~/composables';
extend('email', {
...email,
message: 'Invalid email'
});
extend('required', {
...required,
message: 'This field is required'
});
export default {
name: 'LoginForm',
components: {
SfInput,
SfButton,
SfCheckbox,
SfLoader,
SfAlert,
ValidationProvider,
ValidationObserver
},
setup(_, context) {
const { login, loading, error } = useUser();
const { toggleAuthModal, switchAuthModal } = useUiState();
const { send } = useUiNotification();
const form = ref({});
const rememberMe = ref(false);
const { $i18n } = context.root;
const loginError = ref(null);
const handleError = () => {
loginError.value = error.value.login;
if (!loginError.value) {
send({
type: 'success',
message: $i18n.t('Successfully logged in')
});
toggleAuthModal();
return;
}
send({
type: 'danger',
message: $i18n.t('Something went wrong!')
});
};
const handleForm = (fn) => async () => {
await fn({ user: form.value });
handleError();
};
const handleLogin = async () => handleForm(login)();
return {
form,
loginError,
loading,
rememberMe,
toggleAuthModal,
handleLogin,
switchAuthModal
};
}
};
</script>

<style lang="scss" scoped>
.modal {
--modal-index: 3;
--overlay-z-index: 3;
}
.form {
margin-top: var(--spacer-sm);
&__element {
margin: 0 0 var(--spacer-xl) 0;
}
}
.action {
display: flex;
align-items: center;
justify-content: center;
margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
font: var(--font-weight--light) var(--font-size--base) / 1.6 var(--font-family--secondary);
& > * {
margin: 0 0 0 var(--spacer-xs);
}
}
.action {
margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
}
.checkbox {
margin-bottom: var(--spacer-2xl);
}
.bottom {
text-align: center;
margin-bottom: var(--spacer-lg);
font-size: var(--h3-font-size);
font-weight: var(--font-weight--semibold);
font-family: var(--font-family--secondary);
&__paragraph {
color: var(--c-primary);
margin: 0 0 var(--spacer-base) 0;
@include for-desktop {
margin: 0;
}
}
}
</style>
205 changes: 205 additions & 0 deletions packages/commercetools/theme/components/Auth/RegisterForm.vue
View file
@@ -0,0 +1,205 @@
<template>
<div class="register-form form">
<ValidationObserver v-slot="{ handleSubmit }" key="sign-up">
<SfAlert
v-if="registerError && registerError.message && !registerError.field"
type="danger"
:message="$t(registerError.message)"
/>
<form class="form" @submit.prevent="handleSubmit(handleRegister)" autocomplete="off">
<ValidationProvider rules="required|email" v-slot="{ errors }">
<SfInput
data-cy="login-input_email"
v-model="form.email"
:valid="registerError && registerError.field && registerError.field === 'email' ? false : !errors[0]"
:errorMessage="registerError && registerError.field && registerError.field === 'email' ? $t(registerError.message) : errors[0]"
name="email"
:label="$t('Your email')"
class="form__element"
/>
</ValidationProvider>
<ValidationProvider rules="required" v-slot="{ errors }">
<SfInput
data-cy="login-input_firstName"
v-model="form.firstName"
:valid="!errors[0]"
:errorMessage="errors[0]"
name="first-name"
:label="$t('First Name')"
class="form__element"
/>
</ValidationProvider>
<ValidationProvider rules="required" v-slot="{ errors }">
<SfInput
data-cy="login-input_lastName"
v-model="form.lastName"
:valid="!errors[0]"
:errorMessage="errors[0]"
name="last-name"
:label="$t('Last Name')"
class="form__element"
/>
</ValidationProvider>
<ValidationProvider rules="required" v-slot="{ errors }">
<SfInput
data-cy="login-input_password"
v-model="form.password"
:valid="!errors[0]"
:errorMessage="errors[0]"
name="password"
:label="$t('Password')"
type="password"
class="form__element"
/>
</ValidationProvider>
<ValidationProvider :rules="{ required: { allowFalse: false } }" v-slot="{ errors }">
<SfCheckbox
v-model="createAccount"
:valid="!errors[0]"
:errorMessage="errors[0]"
name="create-account"
:label="$t('I want to create an account')"
class="form__element"
/>
</ValidationProvider>
<SfButton
data-cy="login-btn_submit"
type="submit"
class="sf-button--full-width form__button"
:disabled="loading"
>
<SfLoader :class="{ loader: loading }" :loading="loading">
<div>{{ $t('Create an account') }}</div>
</SfLoader>
</SfButton>
</form>
</ValidationObserver>
<div class="action">
{{ $t('or') }}
<SfButton data-cy="login-btn_login-into-account" class="sf-button--text" @click="switchAuthModal('login')">
{{ $t('login in to your account') }}
</SfButton>
</div>
</div>
</template>

<script>
import { extend, ValidationObserver, ValidationProvider } from 'vee-validate';
import { SfButton, SfCheckbox, SfInput, SfLoader, SfAlert } from '@storefront-ui/vue';
import { email, required } from 'vee-validate/dist/rules';
import { ref } from '@vue/composition-api';
import { useUser } from '@vue-storefront/commercetools';
import { useUiState, useUiNotification } from '~/composables';
extend('email', {
...email,
message: 'Invalid email'
});
extend('required', {
...required,
message: 'This field is required'
});
export default {
name: 'RegisterForm',
components: {
ValidationProvider,
ValidationObserver,
SfButton,
SfCheckbox,
SfInput,
SfLoader,
SfAlert
},
setup(_, context) {
const { register, loading, error } = useUser();
const { toggleAuthModal, switchAuthModal } = useUiState();
const { send } = useUiNotification();
const form = ref({});
const createAccount = ref(false);
const { $i18n } = context.root;
const registerError = ref(null);
const handleError = () => {
registerError.value = error.value.register;
if (!registerError.value) {
send({
type: 'success',
message: $i18n.t('Successfully created a new account')
});
toggleAuthModal();
return;
}
if (registerError.value && registerError.value.code === 'DuplicateField' && registerError.value.message.search(form.value.email) !== -1) {
registerError.value.message = $i18n.t('There is already an existing customer with this email {EMAIL}', { EMAIL: form.value.email });
}
send({
type: 'danger',
message: $i18n.t('Something went wrong!')
});
};
const handleForm = (fn) => async () => {
await fn({ user: form.value });
handleError();
};
const handleRegister = async () => handleForm(register)();
return {
loading,
registerError,
form,
createAccount,
switchAuthModal,
handleRegister
};
}
};
</script>

<style lang="scss" scoped>
.modal {
--modal-index: 3;
--overlay-z-index: 3;
}
.form {
margin-top: var(--spacer-sm);
&__element {
margin: 0 0 var(--spacer-xl) 0;
}
}
.action {
display: flex;
align-items: center;
justify-content: center;
margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
font: var(--font-weight--light) var(--font-size--base) / 1.6 var(--font-family--secondary);
& > * {
margin: 0 0 0 var(--spacer-xs);
}
}
.action {
margin: var(--spacer-xl) 0 var(--spacer-xl) 0;
}
.checkbox {
margin-bottom: var(--spacer-2xl);
}
.bottom {
text-align: center;
margin-bottom: var(--spacer-lg);
font-size: var(--h3-font-size);
font-weight: var(--font-weight--semibold);
font-family: var(--font-family--secondary);
&__paragraph {
color: var(--c-primary);
margin: 0 0 var(--spacer-base) 0;
@include for-desktop {
margin: 0;
}
}
}
</style>

0 comments on commit 351e70c

Please sign in to comment.