discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed auth popup style

Browse Source
This commit is contained in:
kvakazyambra 2023-05-18 23:02:19 +03:00
parent 72c6a38008
commit f8bb60a8a4
6 changed files with 229 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/ru/translation.json
View File

@ -142,7 +142,7 @@
"No such account, please try to register": "Такой адрес не найден, попробуйте зарегистрироваться", "No such account, please try to register": "Такой адрес не найден, попробуйте зарегистрироваться",
"Nothing here yet": "Здесь пока ничего нет", "Nothing here yet": "Здесь пока ничего нет",
"Nothing is here": "Здесь ничего нет", "Nothing is here": "Здесь ничего нет",
"Or continue with social network": "Или продолжите через соцсеть", "Or continue with social network": "Или войдите через соцсеть",
"Or paste a link to an image": "Или вставьте ссылку на изображение", "Or paste a link to an image": "Или вставьте ссылку на изображение",
"Our regular contributor": "Наш постоянный автор", "Our regular contributor": "Наш постоянный автор",
"Paragraphs": "Абзацев", "Paragraphs": "Абзацев",

24
src/components/Nav/AuthModal/AuthModal.module.scss
View File

@ -105,20 +105,19 @@
.auth { .auth {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
padding: $container-padding-x; padding: $container-padding-x;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
padding: 10rem 6rem; padding: 4rem !important;
} }
} }
.submitButton { .submitButton {
display: block; display: block;
font-weight: 700; font-weight: 700;
margin-top: 32px;
padding: 1.6rem !important; padding: 1.6rem !important;
width: 100%; width: 100%;
margin-top: 32px;
} }
.authControl { .authControl {
@ -129,12 +128,12 @@
.authLink { .authLink {
cursor: pointer; cursor: pointer;
@include font-size(1.6rem);
} }
.authSubtitle { .authSubtitle {
@include font-size(1.5rem); @include font-size(1.5rem);
margin-bottom: 1em;
margin: 1em;
} }
.authInfo { .authInfo {
@ -147,6 +146,21 @@
} }
} }
.authForm {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
h4 {
font-weight: bold;
}
}
.authFormForgetPassword {
justify-content: center;
}
.validationError { .validationError {
position: relative; position: relative;
top: -8px; top: -8px;

102
src/components/Nav/AuthModal/ForgotPasswordForm.tsx
View File

@ -66,57 +66,59 @@ export const ForgotPasswordForm = () => {
} }
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} class={clsx(styles.authForm, styles.authFormForgetPassword)}>
<h4>{t('Forgot password?')}</h4>
<div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
<Show when={submitError()}>
<div class={styles.authInfo}>
<ul>
<li class={styles.warn}>{submitError()}</li>
</ul>
</div>
</Show>
<Show when={isUserNotFount()}>
<div class={styles.authSubtitle}>
{/*TODO: text*/}
{t("We can't find you, check email or")}{' '}
<a
href="#"
onClick={(event) => {
event.preventDefault()
changeSearchParam('mode', 'register')
}}
>
{t('register')}
</a>
</div>
</Show>
<Show when={validationErrors().email}>
<div class={styles.validationError}>{validationErrors().email}</div>
</Show>
<div class="pretty-form__item">
<input
id="email"
name="email"
autocomplete="email"
type="email"
value={email()}
placeholder={t('Email')}
onInput={(event) => handleEmailInput(event.currentTarget.value)}
/>
<label for="email">{t('Email')}</label>
</div>
<div> <div>
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit"> <h4>{t('Forgot password?')}</h4>
{isSubmitting() ? '...' : t('Restore password')} <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
</button> <Show when={submitError()}>
</div> <div class={styles.authInfo}>
<div class={styles.authControl}> <ul>
<span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}> <li class={styles.warn}>{submitError()}</li>
{t('I know the password')} </ul>
</span> </div>
</Show>
<Show when={isUserNotFount()}>
<div class={styles.authSubtitle}>
{/*TODO: text*/}
{t("We can't find you, check email or")}{' '}
<a
href="#"
onClick={(event) => {
event.preventDefault()
changeSearchParam('mode', 'register')
}}
>
{t('register')}
</a>
</div>
</Show>
<Show when={validationErrors().email}>
<div class={styles.validationError}>{validationErrors().email}</div>
</Show>
<div class="pretty-form__item">
<input
id="email"
name="email"
autocomplete="email"
type="email"
value={email()}
placeholder={t('Email')}
onInput={(event) => handleEmailInput(event.currentTarget.value)}
/>
<label for="email">{t('Email')}</label>
</div>
<div>
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
{isSubmitting() ? '...' : t('Restore password')}
</button>
</div>
<div class={styles.authControl}>
<span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
{t('I know the password')}
</span>
</div>
</div> </div>
</form> </form>
) )

148
src/components/Nav/AuthModal/LoginForm.tsx
View File

@ -115,82 +115,86 @@ export const LoginForm = () => {
} }
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} class={styles.authForm}>
<h4>{t('Enter the Discours')}</h4>
<Show when={submitError()}>
<div class={styles.authInfo}>
<div class={styles.warn}>{submitError()}</div>
<Show when={isEmailNotConfirmed()}>
<a href="#" onClick={handleSendLinkAgainClick}>
{t('Send link again')}
</a>
</Show>
</div>
</Show>
<Show when={isLinkSent()}>
<div class={styles.authInfo}>{t('Link sent, check your email')}</div>
</Show>
<div class="pretty-form__item">
<input
id="email"
name="email"
autocomplete="email"
type="email"
value={email()}
placeholder={t('Email')}
onInput={(event) => handleEmailInput(event.currentTarget.value)}
/>
<label for="email">{t('Email')}</label>
</div>
<Show when={validationErrors().email}>
<div class={styles.validationError}>{validationErrors().email}</div>
</Show>
<div class="pretty-form__item">
<input
id="password"
name="password"
autocomplete="password"
type={showPassword() ? 'text' : 'password'}
placeholder={t('Password')}
onInput={(event) => handlePasswordInput(event.currentTarget.value)}
/>
<label for="password">{t('Password')}</label>
<button
type="button"
class={styles.passwordToggle}
onClick={() => setShowPassword(!showPassword())}
>
<Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
</button>
</div>
<Show when={validationErrors().password}>
<div class={styles.validationError}>{validationErrors().password}</div>
</Show>
<div> <div>
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit"> <h4>{t('Enter the Discours')}</h4>
{isSubmitting() ? '...' : t('Enter')} <Show when={submitError()}>
</button> <div class={styles.authInfo}>
</div> <div class={styles.warn}>{submitError()}</div>
<div class={styles.authActions}> <Show when={isEmailNotConfirmed()}>
<a <a href="#" onClick={handleSendLinkAgainClick}>
href="#" {t('Send link again')}
onClick={(ev) => { </a>
ev.preventDefault() </Show>
changeSearchParam('mode', 'forgot-password') </div>
}} </Show>
> <Show when={isLinkSent()}>
{t('Forgot password?')} <div class={styles.authInfo}>{t('Link sent, check your email')}</div>
</a> </Show>
<div class="pretty-form__item">
<input
id="email"
name="email"
autocomplete="email"
type="email"
value={email()}
placeholder={t('Email')}
onInput={(event) => handleEmailInput(event.currentTarget.value)}
/>
<label for="email">{t('Email')}</label>
</div>
<Show when={validationErrors().email}>
<div class={styles.validationError}>{validationErrors().email}</div>
</Show>
<div class="pretty-form__item">
<input
id="password"
name="password"
autocomplete="password"
type={showPassword() ? 'text' : 'password'}
placeholder={t('Password')}
onInput={(event) => handlePasswordInput(event.currentTarget.value)}
/>
<label for="password">{t('Password')}</label>
<button
type="button"
class={styles.passwordToggle}
onClick={() => setShowPassword(!showPassword())}
>
<Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
</button>
</div>
<Show when={validationErrors().password}>
<div class={styles.validationError}>{validationErrors().password}</div>
</Show>
<div>
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
{isSubmitting() ? '...' : t('Enter')}
</button>
</div>
<div class={styles.authActions}>
<a
href="#"
onClick={(ev) => {
ev.preventDefault()
changeSearchParam('mode', 'forgot-password')
}}
>
{t('Forgot password?')}
</a>
</div>
</div> </div>
<SocialProviders /> <div>
<SocialProviders />
<div class={styles.authControl}> <div class={styles.authControl}>
<span class={styles.authLink} onClick={() => changeSearchParam('mode', 'register')}> <span class={styles.authLink} onClick={() => changeSearchParam('mode', 'register')}>
{t('I have no account yet')} {t('I have no account yet')}
</span> </span>
</div>
</div> </div>
</form> </form>
) )

154
src/components/Nav/AuthModal/RegisterForm.tsx
View File

@ -134,87 +134,91 @@ export const RegisterForm = () => {
return ( return (
<> <>
<Show when={!isSuccess()}> <Show when={!isSuccess()}>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} class={styles.authForm}>
<h4>{t('Create account')}</h4> <div>
<Show when={submitError()}> <h4>{t('Create account')}</h4>
<div class={styles.authInfo}> <Show when={submitError()}>
<ul> <div class={styles.authInfo}>
<li class={styles.warn}>{submitError()}</li> <ul>
</ul> <li class={styles.warn}>{submitError()}</li>
</ul>
</div>
</Show>
<div class="pretty-form__item">
<input
name="fullName"
type="text"
placeholder={t('Full name')}
autocomplete=""
onInput={(event) => handleNameInput(event.currentTarget.value)}
/>
<label for="fullName">{t('Full name')}</label>
</div> </div>
</Show> <Show when={validationErrors().name}>
<div class="pretty-form__item"> <div class={styles.validationError}>{validationErrors().name}</div>
<input </Show>
name="fullName" <div class="pretty-form__item">
type="text" <input
placeholder={t('Full name')} id="email"
autocomplete="" name="email"
onInput={(event) => handleNameInput(event.currentTarget.value)} autocomplete="email"
/> type="email"
<label for="fullName">{t('Full name')}</label> value={email()}
</div> placeholder={t('Email')}
<Show when={validationErrors().name}> onInput={(event) => handleEmailInput(event.currentTarget.value)}
<div class={styles.validationError}>{validationErrors().name}</div> onBlur={handleEmailBlur}
</Show> />
<div class="pretty-form__item"> <label for="email">{t('Email')}</label>
<input
id="email"
name="email"
autocomplete="email"
type="email"
value={email()}
placeholder={t('Email')}
onInput={(event) => handleEmailInput(event.currentTarget.value)}
onBlur={handleEmailBlur}
/>
<label for="email">{t('Email')}</label>
</div>
<Show when={validationErrors().email}>
<div class={styles.validationError}>{validationErrors().email}</div>
</Show>
<Show when={emailChecks()[email()]}>
<div class={styles.validationError}>
{t("This email is already taken. If it's you")},{' '}
<a
href="#"
onClick={(event) => {
event.preventDefault()
changeSearchParam('mode', 'login')
}}
>
{t('enter')}
</a>
</div> </div>
</Show> <Show when={validationErrors().email}>
<div class="pretty-form__item"> <div class={styles.validationError}>{validationErrors().email}</div>
<input </Show>
id="password" <Show when={emailChecks()[email()]}>
name="password" <div class={styles.validationError}>
autocomplete="current-password" {t("This email is already taken. If it's you")},{' '}
type="password" <a
placeholder={t('Password')} href="#"
onInput={(event) => handlePasswordInput(event.currentTarget.value)} onClick={(event) => {
/> event.preventDefault()
<label for="password">{t('Password')}</label> changeSearchParam('mode', 'login')
</div> }}
<Show when={validationErrors().password}> >
<div class={clsx(styles.registerPassword, styles.validationError)}> {t('enter')}
{validationErrors().password} </a>
</div>
</Show>
<div class="pretty-form__item">
<input
id="password"
name="password"
autocomplete="current-password"
type="password"
placeholder={t('Password')}
onInput={(event) => handlePasswordInput(event.currentTarget.value)}
/>
<label for="password">{t('Password')}</label>
</div> </div>
</Show> <Show when={validationErrors().password}>
<div class={clsx(styles.registerPassword, styles.validationError)}>
{validationErrors().password}
</div>
</Show>
<div>
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
{isSubmitting() ? '...' : t('Join')}
</button>
</div>
</div>
<div> <div>
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit"> <SocialProviders />
{isSubmitting() ? '...' : t('Join')}
</button>
</div>
<SocialProviders /> <div class={styles.authControl}>
<span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
<div class={styles.authControl}> {t('I have an account')}
<span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}> </span>
{t('I have an account')} </div>
</span>
</div> </div>
</form> </form>
</Show> </Show>

4
src/components/Nav/AuthModal/SocialProviders.module.scss
View File

@ -1,6 +1,6 @@
.container { .container {
border-bottom: 1px solid #141414; border-bottom: 1px solid #dfdfdf;
border-top: 1px solid #141414; border-top: 1px solid #dfdfdf;
margin-top: 1em; margin-top: 1em;
padding: 0.8em 0 1em; padding: 0.8em 0 1em;
} }