KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: New design for authentication pages

Browse source
This commit is contained in:
iamsivin 2022-03-17 17:25:51 +05:30
parent 4a3ddad02f
commit d862e27716
17 changed files with 647 additions and 308 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
app/javascript/dashboard/assets/scss/widgets/_login.scss
View file

@ -1,68 +1,97 @@
.auth-wrap {
width: 100%;
.auth--wrap {
display: flex;
justify-content: center;
}
// Outside login wrapper
.login {
@include full-height;
overflow-y: auto;
padding-top: $space-larger * 1.2;
.flex-divided-view {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.login__hero {
margin-bottom: $space-larger;
.form--wrap {
padding: 0 var(--space-mega);
}
.hero__logo {
width: 180px;
}
.auth--footer {
margin-top: var(--space-three);
margin-bottom: var(--space-two);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
}
.hero__title {
font-weight: $font-weight-light;
margin-top: $space-larger;
}
.hero__sub {
color: $medium-gray;
font-size: $font-size-medium;
}
@media screen and (max-width: 1200px) {
.flex-divided-view {
display: flex;
justify-content: center;
flex: 0.9;
}
// Login box
.login-box {
@include background-white;
@include border-normal;
@include border-top-radius($space-smaller);
@include border-right-radius($space-smaller);
@include border-bottom-radius($space-smaller);
@include border-left-radius($space-smaller);
@include elegant-card;
padding: $space-large;
label {
color: $color-gray;
font-size: $font-size-default;
input {
font-size: $font-size-default;
height: $space-larger;
padding: $space-slab;
}
.error {
font-size: $font-size-small;
}
}
.button {
height: $space-larger;
}
}
.sigin__footer {
font-size: $font-size-default;
padding: $space-medium;
>a {
font-weight: $font-weight-bold;
}
.form--wrap {
padding: 0 var(--space-two);
}
}
// .login {
// @include full-height;
// overflow-y: auto;
// padding-top: $space-larger * 1.2;
// .login__hero {
// margin-bottom: $space-larger;
// .hero__logo {
// width: 180px;
// }
// .hero__title {
// font-weight: $font-weight-light;
// margin-top: $space-larger;
// }
// .hero__sub {
// color: $medium-gray;
// font-size: $font-size-medium;
// }
// }
// Login box
// .login-box {
// // @include background-white;
// // @include border-normal;
// // @include border-top-radius($space-smaller);
// // @include border-right-radius($space-smaller);
// // @include border-bottom-radius($space-smaller);
// // @include border-left-radius($space-smaller);
// // @include elegant-card;
// // padding: $space-large;
// label {
// color: $color-gray;
// font-size: $font-size-default;
// input {
// font-size: $font-size-default;
// height: $space-larger;
// padding: $space-slab;
// }
// .error {
// font-size: $font-size-small;
// }
// }
// .button {
// height: $space-larger;
// }
// }
// .sigin__footer {
// font-size: $font-size-default;
// padding: $space-medium;
// > a {
// font-weight: $font-weight-bold;
// }
// }
// }

1
app/javascript/dashboard/i18n/locale/en/login.json
View file

@ -1,6 +1,7 @@
{
"LOGIN": {
"TITLE": "Login to Chatwoot",
"DESCRIPTION": "login to your chatwoot account",
"EMAIL": {
"LABEL": "Email",
"PLACEHOLDER": "Email eg: someone@example.com"

1
app/javascript/dashboard/i18n/locale/en/resetPassword.json
View file

@ -1,6 +1,7 @@
{
"RESET_PASSWORD": {
"TITLE": "Reset Password",
"DESCRIPTION": "Enter your email address",
"EMAIL": {
"LABEL": "Email",
"PLACEHOLDER": "Please enter your email",

1
app/javascript/dashboard/i18n/locale/en/setNewPassword.json
View file

@ -1,6 +1,7 @@
{
"SET_NEW_PASSWORD": {
"TITLE": "Set New Password",
"DESCRIPTION": "Enter your new password",
"PASSWORD": {
"LABEL": "Password",
"PLACEHOLDER": "Password",

4
app/javascript/dashboard/i18n/locale/en/signup.json
View file

@ -1,7 +1,7 @@
{
"REGISTER": {
"TRY_WOOT": "Register an account",
"TITLE": "Register",
"TITLE": "Sign Up",
"TRY_WOOT": "Create your chatwoot account",
"TERMS_ACCEPT": "By signing up, you agree to our <a href=\"https://www.chatwoot.com/terms\">T & C</a> and <a href=\"https://www.chatwoot.com/privacy-policy\">Privacy policy</a>",
"ACCOUNT_NAME": {
"LABEL": "Account name",

11
app/javascript/dashboard/routes/auth/Auth.vue
View file

@ -1,5 +1,14 @@
<template>
<div class="row auth-wrap login align-center">
<div class="row auth--wrap h-full w-full">
<router-view></router-view>
<auth-right-screen />
</div>
</template>
<script>
import AuthRightScreen from 'dashboard/routes/auth/components/AuthRightScreen.vue';
export default {
components: {
AuthRightScreen,
},
};
</script>

4
app/javascript/dashboard/routes/auth/Confirmation.vue
View file

@ -1,5 +1,7 @@
<template>
<loading-state :message="$t('CONFIRM_EMAIL')"></loading-state>
<div class="flex-divided-view">
<loading-state :message="$t('CONFIRM_EMAIL')"></loading-state>
</div>
</template>
<script>
import LoadingState from '../../components/widgets/LoadingState';

112
app/javascript/dashboard/routes/auth/PasswordEdit.vue
View file

@ -1,60 +1,74 @@
<template>
<form
class="login-box medium-4 column align-self-middle"
@submit.prevent="login()"
>
<div class="column log-in-form">
<h4>{{ $t('SET_NEW_PASSWORD.TITLE') }}</h4>
<label :class="{ error: $v.credentials.password.$error }">
{{ $t('LOGIN.PASSWORD.LABEL') }}
<input
v-model.trim="credentials.password"
type="password"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
@input="$v.credentials.password.$touch"
<div class="password-edit flex-divided-view">
<div class="form--wrap w-full">
<auth-header
:title="$t('SET_NEW_PASSWORD.TITLE')"
:sub-title="$t('SET_NEW_PASSWORD.DESCRIPTION')"
/>
<form class="" @submit.prevent="login()">
<div class="input-wrap">
<auth-input
v-model.trim="credentials.password"
type="password"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
icon-name="lock-closed"
:class="{ error: $v.credentials.password.$error }"
:label="$t('LOGIN.PASSWORD.LABEL')"
:error="
$v.credentials.password.$error
? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
: ''
"
@input="$v.credentials.password.$touch"
@blur="$v.credentials.password.$touch"
/>
<auth-input
v-model.trim="credentials.confirmPassword"
type="password"
icon-name="lock-shield"
:class="{ error: $v.credentials.confirmPassword.$error }"
:label="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
:error="
$v.credentials.confirmPassword.$error
? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
: ''
"
@blur="$v.credentials.confirmPassword.$touch"
@input="$v.credentials.confirmPassword.$touch"
/>
</div>
<auth-submit-button
:label="$t('SET_NEW_PASSWORD.SUBMIT')"
:is-disabled="
$v.credentials.password.$invalid ||
$v.credentials.confirmPassword.$invalid ||
newPasswordAPI.showLoading
"
:is-loading="newPasswordAPI.showLoading"
icon="arrow-chevron-right"
@click="login()"
/>
<span v-if="$v.credentials.password.$error" class="message">
{{ $t('SET_NEW_PASSWORD.PASSWORD.ERROR') }}
</span>
</label>
<label :class="{ error: $v.credentials.confirmPassword.$error }">
{{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL') }}
<input
v-model.trim="credentials.confirmPassword"
type="password"
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
@input="$v.credentials.confirmPassword.$touch"
/>
<span v-if="$v.credentials.confirmPassword.$error" class="message">
{{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR') }}
</span>
</label>
<woot-submit-button
:disabled="
$v.credentials.password.$invalid ||
$v.credentials.confirmPassword.$invalid ||
newPasswordAPI.showLoading
"
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
:loading="newPasswordAPI.showLoading"
button-class="expanded"
>
</woot-submit-button>
<!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
<!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
</form>
</div>
</form>
</div>
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import Auth from '../../api/auth';
import AuthInput from './components/AuthInput';
import AuthHeader from 'dashboard/routes/auth/components/AuthHeader';
import AuthSubmitButton from './components/AuthSubmitButton';
import WootSubmitButton from '../../components/buttons/FormSubmitButton';
import { DEFAULT_REDIRECT_URL } from '../../constants';
export default {
components: {
WootSubmitButton,
AuthInput,
AuthHeader,
AuthSubmitButton,
},
props: {
resetPasswordToken: { type: String, default: '' },
@ -131,3 +145,13 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.password-edit {
flex-direction: column;
margin: var(--space-larger) 0;
}
.input-wrap {
padding-bottom: var(--space-one);
}
</style>

75
app/javascript/dashboard/routes/auth/ResetPassword.vue
View file

@ -1,37 +1,54 @@
<template>
<form
class="login-box medium-4 column align-self-middle"
@submit.prevent="submit()"
>
<h4>{{ $t('RESET_PASSWORD.TITLE') }}</h4>
<div class="column log-in-form">
<label :class="{ error: $v.credentials.email.$error }">
{{ $t('RESET_PASSWORD.EMAIL.LABEL') }}
<input
v-model.trim="credentials.email"
type="text"
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
@input="$v.credentials.email.$touch"
/>
<span v-if="$v.credentials.email.$error" class="message">
{{ $t('RESET_PASSWORD.EMAIL.ERROR') }}
</span>
</label>
<woot-submit-button
:disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
:button-text="$t('RESET_PASSWORD.SUBMIT')"
:loading="resetPassword.showLoading"
button-class="expanded"
<div class="reset--password flex-divided-view">
<div class="form--wrap w-full">
<auth-header
:title="$t('RESET_PASSWORD.TITLE')"
:sub-title="$t('RESET_PASSWORD.DESCRIPTION')"
/>
<form class="w-full" @submit.prevent="submit()">
<div class="input-wrap">
<auth-input
v-model.trim="credentials.email"
type="email"
icon-name="mail"
:class="{ error: $v.credentials.email.$error }"
:label="$t('RESET_PASSWORD.EMAIL.LABEL')"
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
:error="
$v.credentials.email.$error
? $t('RESET_PASSWORD.EMAIL.ERROR')
: ''
"
@blur="$v.credentials.email.$touch"
/>
</div>
<auth-submit-button
:label="$t('RESET_PASSWORD.SUBMIT')"
:is-disabled="
$v.credentials.email.$invalid || resetPassword.showLoading
"
:is-loading="resetPassword.showLoading"
icon="arrow-chevron-right"
@click="submit()"
/>
</form>
</div>
</form>
</div>
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import Auth from '../../api/auth';
import AuthInput from './components/AuthInput';
import AuthHeader from 'dashboard/routes/auth/components/AuthHeader';
import AuthSubmitButton from './components/AuthSubmitButton';
export default {
components: {
AuthInput,
AuthHeader,
AuthSubmitButton,
},
data() {
return {
// We need to initialize the component with any
@ -82,3 +99,13 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.reset--password {
flex-direction: column;
margin: var(--space-larger) 0;
}
.input-wrap {
padding-bottom: var(--space-one);
}
</style>

235
app/javascript/dashboard/routes/auth/Signup.vue
View file

@ -1,96 +1,97 @@
<template>
<div class="medium-10 column signup">
<div class="text-center medium-12 signup--hero">
<img
:src="globalConfig.logo"
:alt="globalConfig.installationName"
class="hero--logo"
<!-- <div class="row signup"> -->
<div class="sign-up flex-divided-view">
<div class="form--wrap w-full">
<auth-header
:title="$t('REGISTER.TITLE')"
:sub-title="$t('REGISTER.TRY_WOOT')"
/>
<h2 class="hero--title">
{{ $t('REGISTER.TRY_WOOT') }}
</h2>
</div>
<div class="row align-center">
<div class="small-12 medium-6 large-5 column">
<form class="signup--box login-box" @submit.prevent="submit">
<woot-input
v-model="credentials.fullName"
:class="{ error: $v.credentials.fullName.$error }"
:label="$t('REGISTER.FULL_NAME.LABEL')"
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
:error="
$v.credentials.fullName.$error
? $t('REGISTER.FULL_NAME.ERROR')
: ''
"
@blur="$v.credentials.fullName.$touch"
/>
<woot-input
v-model.trim="credentials.email"
type="email"
:class="{ error: $v.credentials.email.$error }"
:label="$t('REGISTER.EMAIL.LABEL')"
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
:error="
$v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''
"
@blur="$v.credentials.email.$touch"
/>
<woot-input
v-model="credentials.accountName"
:class="{ error: $v.credentials.accountName.$error }"
:label="$t('REGISTER.ACCOUNT_NAME.LABEL')"
:placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')"
:error="
$v.credentials.accountName.$error
? $t('REGISTER.ACCOUNT_NAME.ERROR')
: ''
"
@blur="$v.credentials.accountName.$touch"
/>
<woot-input
v-model.trim="credentials.password"
type="password"
:class="{ error: $v.credentials.password.$error }"
:label="$t('LOGIN.PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
:error="
$v.credentials.password.$error
? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
: ''
"
@blur="$v.credentials.password.$touch"
/>
<woot-input
v-model.trim="credentials.confirmPassword"
type="password"
:class="{ error: $v.credentials.confirmPassword.$error }"
:label="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
:error="
$v.credentials.confirmPassword.$error
? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
: ''
"
@blur="$v.credentials.confirmPassword.$touch"
/>
<div class="w-ful column">
<form @submit.prevent="submit">
<div class="input-wrap">
<auth-input
v-model="credentials.fullName"
:class="{ error: $v.credentials.fullName.$error }"
:label="$t('REGISTER.FULL_NAME.LABEL')"
icon-name="person"
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
:error="
$v.credentials.fullName.$error
? $t('REGISTER.FULL_NAME.ERROR')
: ''
"
@blur="$v.credentials.fullName.$touch"
/>
<auth-input
v-model.trim="credentials.email"
type="email"
:class="{ error: $v.credentials.email.$error }"
icon-name="mail"
:label="$t('REGISTER.EMAIL.LABEL')"
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
:error="
$v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''
"
@blur="$v.credentials.email.$touch"
/>
<auth-input
v-model="credentials.accountName"
:class="{ error: $v.credentials.accountName.$error }"
icon-name="person-account"
:label="$t('REGISTER.ACCOUNT_NAME.LABEL')"
:placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')"
:error="
$v.credentials.accountName.$error
? $t('REGISTER.ACCOUNT_NAME.ERROR')
: ''
"
@blur="$v.credentials.accountName.$touch"
/>
<auth-input
v-model.trim="credentials.password"
type="password"
:class="{ error: $v.credentials.password.$error }"
icon-name="lock-closed"
:label="$t('LOGIN.PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
:error="
$v.credentials.password.$error
? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
: ''
"
@blur="$v.credentials.password.$touch"
/>
<auth-input
v-model.trim="credentials.confirmPassword"
type="password"
:class="{ error: $v.credentials.confirmPassword.$error }"
icon-name="lock-shield"
:label="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
:error="
$v.credentials.confirmPassword.$error
? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
: ''
"
@blur="$v.credentials.confirmPassword.$touch"
/>
</div>
<div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
<vue-hcaptcha
:sitekey="globalConfig.hCaptchaSiteKey"
@verify="onRecaptchaVerified"
/>
</div>
<woot-submit-button
:disabled="isSignupInProgress || !hasAValidCaptcha"
:button-text="$t('REGISTER.SUBMIT')"
:loading="isSignupInProgress"
button-class="large expanded"
>
</woot-submit-button>
<auth-submit-button
:label="$t('REGISTER.SUBMIT')"
:is-disabled="isSignupInProgress || !hasAValidCaptcha"
:is-loading="isSignupInProgress"
icon="arrow-chevron-right"
@click="submit"
/>
<p class="accept--terms" v-html="termsLink"></p>
</form>
<div class="column text-center sigin--footer">
<div class="column text-center auth--footer">
<span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
<router-link to="/app/login">
{{
@ -114,8 +115,15 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import alertMixin from 'shared/mixins/alertMixin';
import { DEFAULT_REDIRECT_URL } from '../../constants';
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
import AuthInput from './components/AuthInput';
import AuthHeader from './components/AuthHeader';
import AuthSubmitButton from './components/AuthSubmitButton';
export default {
components: {
AuthInput,
AuthHeader,
AuthSubmitButton,
VueHcaptcha,
},
mixins: [globalConfigMixin, alertMixin],
@ -208,52 +216,29 @@ export default {
};
</script>
<style scoped lang="scss">
.signup {
.signup--hero {
margin-bottom: var(--space-larger);
.sign-up {
margin: var(--space-medium) 0;
}
.hero--logo {
width: 180px;
}
.input-wrap {
padding-bottom: var(--space-medium);
}
.hero--title {
margin-top: var(--space-large);
font-weight: var(--font-weight-light);
}
}
.accept--terms {
text-align: center;
margin: var(--space-normal) 0 0 0;
}
.signup--box {
padding: var(--space-large);
.h-captcha--box {
justify-content: center;
display: flex;
margin-bottom: var(--space-one);
}
label {
font-size: var(--font-size-default);
color: var(--b-600);
input {
padding: var(--space-slab);
height: var(--space-larger);
font-size: var(--font-size-default);
}
}
}
.sigin--footer {
padding: var(--space-medium);
font-size: var(--font-size-default);
> a {
font-weight: var(--font-weight-bold);
}
}
.accept--terms {
font-size: var(--font-size-small);
text-align: center;
margin: var(--space-normal) 0 0 0;
}
.h-captcha--box {
margin-bottom: var(--space-one);
@media screen and (max-width: 1200px) {
.sign-up {
margin-top: var(--space-larger);
width: 100%;
}
}
</style>

54
app/javascript/dashboard/routes/auth/components/AuthHeader.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<div class="w-full">
<img :src="globalConfig.logoThumbnail" class="hero--logo" />
<div class="header--wrap">
<span class="hero--title">
{{ title }}
</span>
<h6 class="hero-sub--title">
{{ subTitle }}
</h6>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
export default {
mixins: [globalConfigMixin],
props: {
title: {
type: String,
default: '',
},
subTitle: {
type: String,
default: '',
},
},
computed: {
...mapGetters({ globalConfig: 'globalConfig/get' }),
},
};
</script>
<style lang="scss" scoped>
.hero--logo {
width: 60px;
}
.header--wrap {
margin: var(--space-large) 0 var(--space-large) 0;
}
.hero--title {
font-size: var(--font-size-giga);
font-weight: var(--font-weight-bold);
}
.hero-sub--title {
font-size: var(--font-size-small);
color: var(--b-500);
}
</style>

102
app/javascript/dashboard/routes/auth/components/AuthInput.vue Normal file
View file

@ -0,0 +1,102 @@
<template>
<label class="auth-input--wrap">
<div class="label-wrap">
<fluent-icon v-if="iconName" :icon="iconName" size="16" />
<span v-if="label">{{ label }}</span>
</div>
<div class="input--wrap">
<input
class="auth-input"
:value="value"
:type="type"
:placeholder="placeholder"
:readonly="readonly"
@input="onChange"
@blur="onBlur"
/>
<p v-if="helpText" class="help-text"></p>
<span v-if="error" class="message">
{{ error }}
</span>
</div>
</label>
</template>
<script>
export default {
props: {
label: {
type: String,
default: '',
},
value: {
type: [String, Number],
default: '',
},
type: {
type: String,
default: 'text',
},
placeholder: {
type: String,
default: '',
},
iconName: {
type: String,
default: '',
},
helpText: {
type: String,
default: '',
},
error: {
type: String,
default: '',
},
readonly: {
type: Boolean,
deafaut: false,
},
},
methods: {
onChange(e) {
this.$emit('input', e.target.value);
},
onBlur(e) {
this.$emit('blur', e.target.value);
},
},
};
</script>
<style lang="scss" scoped>
.auth-input--wrap {
.label-wrap {
display: flex;
align-items: center;
color: var(--s-900);
margin-bottom: var(--space-small);
span {
margin-left: var(--space-small);
font-size: var(--font-size-small);
}
}
.auth-input {
font-size: var(--font-size-small) !important;
height: 4.2rem !important;
padding: var(--space-small) !important;
width: 100% !important;
background: var(--b-50) !important;
margin-bottom: var(--font-size-two) !important;
}
.message {
display: flex;
justify-content: flex-end;
margin-top: var(--space-minus-two);
height: 20px;
margin-bottom: 0;
}
}
</style>

26
app/javascript/dashboard/routes/auth/components/AuthRightScreen.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<div class="image--wrap flex-divided-view">
<img src="../../login.png" alt="Signup" />
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.image--wrap {
flex-direction: column;
img {
height: 100vh;
width: 100vw;
}
}
@media screen and (max-width: 1200px) {
.image--wrap {
display: none;
}
}
</style>

54
app/javascript/dashboard/routes/auth/components/AuthSubmitButton.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<woot-button
size="expanded"
color-scheme="primary"
class-names="submit--button"
:is-disabled="isDisabled"
:is-loading="isLoading"
@click="onClick"
>
{{ label }}
<fluent-icon :icon="icon" size="18" />
</woot-button>
</template>
<script>
export default {
props: {
label: {
type: String,
default: '',
},
icon: {
type: String,
default: '',
},
isDisabled: {
type: Boolean,
default: false,
},
isLoading: {
type: Boolean,
default: false,
},
},
methods: {
onClick() {
this.$emit('click');
},
},
};
</script>
<style lang="scss" scoped>
.submit--button {
display: flex;
align-items: center;
&::v-deep .button__content {
align-items: center;
display: flex;
justify-content: center;
}
}
</style>

BIN
app/javascript/dashboard/routes/login.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 333 KiB

126
app/javascript/dashboard/routes/login/Login.vue
View file

@ -1,81 +1,85 @@
<template>
<div class="medium-12 column login">
<div class="text-center medium-12 login__hero align-self-top">
<img
:src="globalConfig.logo"
:alt="globalConfig.installationName"
class="hero__logo"
/>
<h2 class="hero__title">
{{
useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
}}
</h2>
</div>
<div class="row align-center">
<div v-if="!email" class="small-12 medium-4 column">
<form class="login-box column align-self-top" @submit.prevent="login()">
<div class="column log-in-form">
<label :class="{ error: $v.credentials.email.$error }">
{{ $t('LOGIN.EMAIL.LABEL') }}
<input
<div class="log-in">
<div class="login-form--wrap flex-divided-view">
<div class="form--wrap w-full">
<auth-header
:title="
useInstallationName(
$t('LOGIN.TITLE'),
globalConfig.installationName
)
"
:sub-title="$t('LOGIN.DESCRIPTION')"
/>
<div v-if="!email" class="w-full">
<form class="" @submit.prevent="login()">
<div>
<auth-input
v-model.trim="credentials.email"
type="text"
data-testid="email_input"
:class="{ error: $v.credentials.email.$error }"
:label="$t('LOGIN.EMAIL.LABEL')"
icon-name="mail"
type="email"
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
@input="$v.credentials.email.$touch"
@blur="$v.credentials.email.$touch"
/>
</label>
<label :class="{ error: $v.credentials.password.$error }">
{{ $t('LOGIN.PASSWORD.LABEL') }}
<input
<auth-input
v-model.trim="credentials.password"
:class="{ error: $v.credentials.password.$error }"
:label="$t('LOGIN.PASSWORD.LABEL')"
icon-name="lock-closed"
type="password"
data-testid="password_input"
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
@input="$v.credentials.password.$touch"
@blur="$v.credentials.password.$touch"
/>
</label>
<woot-submit-button
:disabled="
</div>
<auth-submit-button
:label="$t('LOGIN.SUBMIT')"
:is-disabled="
$v.credentials.email.$invalid ||
$v.credentials.password.$invalid ||
loginApi.showLoading
"
:button-text="$t('LOGIN.SUBMIT')"
:loading="loginApi.showLoading"
button-class="large expanded"
>
</woot-submit-button>
:is-loading="loginApi.showLoading"
icon="arrow-chevron-right"
@click="login()"
/>
</form>
<div class="column text-center auth--footer">
<p v-if="!globalConfig.disableUserProfileUpdate">
<router-link to="auth/reset/password">
{{ $t('LOGIN.FORGOT_PASSWORD') }}
</router-link>
</p>
<p v-if="showSignupLink()">
<router-link to="auth/signup">
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
</router-link>
</p>
</div>
</form>
<div class="column text-center sigin__footer">
<p v-if="!globalConfig.disableUserProfileUpdate">
<router-link to="auth/reset/password">
{{ $t('LOGIN.FORGOT_PASSWORD') }}
</router-link>
</p>
<p v-if="showSignupLink()">
<router-link to="auth/signup">
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
</router-link>
</p>
</div>
<woot-spinner v-else size="" />
</div>
<woot-spinner v-else size="" />
</div>
<auth-right-screen />
</div>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import WootSubmitButton from '../../components/buttons/FormSubmitButton';
import { mapGetters } from 'vuex';
import AuthHeader from 'dashboard/routes/auth/components/AuthHeader';
import AuthRightScreen from 'dashboard/routes/auth/components/AuthRightScreen';
import AuthInput from 'dashboard/routes/auth/components/AuthInput';
import AuthSubmitButton from 'dashboard/routes/auth/components/AuthSubmitButton';
export default {
components: {
WootSubmitButton,
AuthHeader,
AuthRightScreen,
AuthInput,
AuthSubmitButton,
},
mixins: [globalConfigMixin],
props: {
@ -172,3 +176,21 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.log-in {
display: flex;
justify-content: center;
height: 100%;
}
.login-form--wrap {
flex-direction: column;
margin: var(--space-medium) 0;
}
@media screen and (max-width: 1200px) {
.login-form--wrap {
margin: var(--space-larger) 0;
}
}
</style>

2
app/javascript/shared/components/FluentIcon/dashboard-icons.json
View file

@ -77,6 +77,7 @@
"list-outline": "M2.75 18h12.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.494L2.75 18h12.5-12.5Zm0-6.5h18.5a.75.75 0 0 1 .102 1.493L21.25 13H2.75a.75.75 0 0 1-.102-1.493l.102-.007h18.5-18.5Zm0-6.497h15.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.493l.102-.007h15.5-15.5Z",
"location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
"lock-closed-outline": "M12 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 20 10.25v9.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75v-9.5A2.25 2.25 0 0 1 6.25 8H8V6a4 4 0 0 1 4-4Zm5.75 7.5H6.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75Zm-5.75 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 9.5 6v2h5V6A2.5 2.5 0 0 0 12 3.5Z",
"lock-shield-outline": "M10 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 18 10.25V11c-.319 0-.637.11-.896.329l-.107.1c-.164.17-.33.323-.496.457L16.5 10.25a.75.75 0 0 0-.75-.75H4.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h9.888a6.024 6.024 0 0 0 1.54 1.5H4.25A2.25 2.25 0 0 1 2 19.75v-9.5A2.25 2.25 0 0 1 4.25 8H6V6a4 4 0 0 1 4-4Zm8.284 10.122c.992 1.036 2.091 1.545 3.316 1.545.193 0 .355.143.392.332l.008.084v2.501c0 2.682-1.313 4.506-3.873 5.395a.385.385 0 0 1-.253 0c-2.476-.86-3.785-2.592-3.87-5.13L14 16.585v-2.5c0-.23.18-.417.4-.417 1.223 0 2.323-.51 3.318-1.545a.389.389 0 0 1 .566 0ZM10 13.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 7.5 6v2h5V6A2.5 2.5 0 0 0 10 3.5Z",
"mail-inbox-all-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3Zm2.075 11.5H4.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188Zm9.425-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Zm-11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10.5-10.5Zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75 6.5h10.5-10.5Z",
"mail-outline": "M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
"map-outline": "m9.203 4 .047-.002.046.001a.73.73 0 0 1 .067.007l.016.004c.086.014.17.044.252.092l.051.034 5.07 3.565L19.82 4.14a.75.75 0 0 1 1.174.51l.007.104v10.632a.75.75 0 0 1-.238.548l-.08.066-5.5 3.866a.744.744 0 0 1-.828.023L9.25 16.297l-5.07 3.565a.75.75 0 0 1-1.174-.51l-.007-.104V8.616a.75.75 0 0 1 .238-.548l.08-.066 5.5-3.866a.762.762 0 0 1 .2-.101l.122-.028.064-.008Zm10.298 2.197-4 2.812v8.799l4-2.812v-8.8ZM8.5 6.193l-4 2.812v8.8l4-2.813V6.193Zm1.502 0v8.8l4 2.811V9.005l-4-2.812Z",
@ -96,6 +97,7 @@
"people-team-outline": "M14.754 10c.966 0 1.75.784 1.75 1.75v4.749a4.501 4.501 0 0 1-9.002 0V11.75c0-.966.783-1.75 1.75-1.75h5.502Zm0 1.5H9.252a.25.25 0 0 0-.25.25v4.749a3.001 3.001 0 0 0 6.002 0V11.75a.25.25 0 0 0-.25-.25ZM3.75 10h3.381a2.738 2.738 0 0 0-.618 1.5H3.75a.25.25 0 0 0-.25.25v3.249a2.501 2.501 0 0 0 3.082 2.433c.085.504.24.985.453 1.432A4.001 4.001 0 0 1 2 14.999V11.75c0-.966.784-1.75 1.75-1.75Zm13.125 0h3.375c.966 0 1.75.784 1.75 1.75V15a4 4 0 0 1-5.03 3.866c.214-.448.369-.929.455-1.433A2.5 2.5 0 0 0 20.5 15v-3.25a.25.25 0 0 0-.25-.25h-2.757a2.738 2.738 0 0 0-.618-1.5ZM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm6.5 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm6.5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.5 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
"person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",
"person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
"person-account-outline": "M11 15c0-.35.06-.687.17-1H4.253a2.249 2.249 0 0 0-2.249 2.249v.578c0 .892.319 1.756.899 2.435 1.566 1.834 3.952 2.74 7.098 2.74.397 0 .783-.015 1.156-.044A2.998 2.998 0 0 1 11 21v-.535c-.321.024-.655.036-1 .036-2.738 0-4.704-.746-5.958-2.213a2.25 2.25 0 0 1-.539-1.462v-.577c0-.414.336-.75.75-.75H11V15ZM10 2.005a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM12 15a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-6Zm2.5 1a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Z",
"power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
"quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
"resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",