New authentication UI (#5181)
* Add social accounts authentication && improve email confirmation * Pass env variables to docker * Update helm chart * Update email verification templates * Small refactoring * Send email verification && redirect to /auth/email-verification-sent * added new login form * added main assets * added main social buttons * changed reset password form * refactored reset password page * Fix helm chart * Fix typo * Pass enabled advanced auth methods to client * Rename class * Fix * Fix helm * Fix github scope * changed register page * adjusted no social auth methods * Some fixes * Fix schema generation * Fixes * Apply comments * Update changelog * added responsiveness, refactored inputs * cleanup * fixed email-confirmed.tsx * updated reset page, changed style on register page * added fonts, fixed some ui problems * removed some code * fixed index.html * made resizing less expressed * fixed form sizing, issue#5166 * fixed submiting form by enter * made toggle bigger, fixed headers * updated versions * removed extra lines * fixed fields on form * changed tests * fixed more tests * fixed comments * reverted header * added grid-unit-size for height, removed for fonts * added new animation Co-authored-by: Maya <maya17grd@gmail.com>main
Kirill Lakhov
3 years ago
committed by
GitHub
parent
e5d01359aa
commit
92ba1ab845
@ -0,0 +1,3 @@
|
||||
<svg width="32" height="14" viewBox="0 0 35 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M34.4685 7.59028C34.232 7.36755 33.9177 7.24668 33.5931 7.25014L4.78619 7.25013L9.72432 2.312C9.96605 2.07718 10.1025 1.7543 10.1025 1.41589C10.1025 1.07747 9.96605 0.754591 9.7226 0.518043C9.22878 0.0380432 8.43799 0.0484026 7.95626 0.543943L1.01353 7.48668C0.903022 7.56611 0.806332 7.6628 0.72518 7.77503L0 8.50021L0.721727 9.22194C0.802879 9.33417 0.901296 9.43258 1.01353 9.51373L7.95627 16.4565C8.27051 16.7811 8.73324 16.9088 9.17008 16.7932C9.60692 16.6809 9.94879 16.3391 10.061 15.9022C10.1767 15.4654 10.0489 15.0027 9.72433 14.6884L4.78619 9.75028H33.5931C34.1077 9.75719 34.5756 9.44812 34.7707 8.96985C34.9623 8.49158 34.8432 7.94424 34.4685 7.59028Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@ -0,0 +1,5 @@
|
||||
<svg width="15" height="15" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.2">
|
||||
<path d="M10.9948 22C12.5049 22 13.9254 21.7138 15.2562 21.1415C16.5871 20.5692 17.7558 19.7762 18.7626 18.7626C19.7693 17.7489 20.5588 16.5802 21.1312 15.2562C21.7104 13.9323 22 12.5153 22 11.0052C22 9.48817 21.7104 8.0677 21.1312 6.74377C20.5588 5.41984 19.7693 4.25106 18.7626 3.23742C17.7558 2.22379 16.5871 1.43081 15.2562 0.858486C13.9254 0.286162 12.5049 0 10.9948 0C9.48472 0 8.06425 0.286162 6.73343 0.858486C5.4095 1.43081 4.24071 2.22379 3.22708 3.23742C2.22034 4.25106 1.43081 5.41984 0.858486 6.74377C0.286162 8.0677 0 9.48817 0 11.0052C0 12.5153 0.286162 13.9323 0.858486 15.2562C1.43081 16.5802 2.22034 17.7489 3.22708 18.7626C4.24071 19.7762 5.41294 20.5692 6.74377 21.1415C8.0746 21.7138 9.49162 22 10.9948 22ZM7.78843 15.4528C7.44366 15.4528 7.1506 15.3321 6.90926 15.0907C6.66792 14.8494 6.54725 14.5494 6.54725 14.1909C6.54725 13.8599 6.67137 13.5737 6.91961 13.3324L9.23648 11.0155L6.91961 8.69864C6.67137 8.4504 6.54725 8.16079 6.54725 7.82981C6.54725 7.47124 6.66792 7.17474 6.90926 6.94029C7.1506 6.69895 7.44366 6.57828 7.78843 6.57828C8.15389 6.57828 8.46419 6.69895 8.71932 6.94029L11.0155 9.23648L13.3221 6.94029C13.5634 6.69205 13.8702 6.56794 14.2426 6.56794C14.5943 6.56794 14.8873 6.68861 15.1218 6.92995C15.3631 7.17129 15.4838 7.4678 15.4838 7.81946C15.4838 8.15734 15.3597 8.4504 15.1114 8.69864L12.7945 11.0155L15.1011 13.3324C15.3562 13.5668 15.4838 13.853 15.4838 14.1909C15.4838 14.5494 15.3631 14.8494 15.1218 15.0907C14.8804 15.3321 14.5805 15.4528 14.2219 15.4528C13.8496 15.4528 13.5427 15.3286 13.3014 15.0804L11.0155 12.8049L8.72967 15.0804C8.48143 15.3286 8.16769 15.4528 7.78843 15.4528Z" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,6 @@
|
||||
<svg width="80" height="15" viewBox="0 0 80 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.63399 15C2.37083 15 0 12.5333 0 7.48889C0 2.46667 2.34908 0 6.63399 0H10.6576V2.62222H6.63399C3.78464 2.62222 2.56659 4.06667 2.56659 7.48889C2.56659 10.9333 3.80639 12.3778 6.63399 12.3778H15.0638V15H6.63399Z" fill="white"/>
|
||||
<path d="M22.412 0L27.2466 13.1004C27.7814 14.5415 28.8724 15 30.2842 15C31.7817 15 32.7657 14.476 33.3005 13.1004L38.3918 0H35.5895L30.9902 11.8559C30.8404 12.2052 30.6265 12.3581 30.2842 12.3581C29.942 12.3581 29.7067 12.2052 29.5783 11.8559L25.1929 0H22.412Z" fill="white"/>
|
||||
<path d="M53.0989 3.1441C53.2487 2.79476 53.484 2.64192 53.8262 2.64192C54.1685 2.64192 54.4038 2.79476 54.5322 3.1441L58.9176 15H61.7199L56.8425 1.89956C56.3291 0.524017 55.3451 0 53.8476 0C52.3288 0 51.3448 0.524017 50.81 1.89956L45.74 15H48.521L53.0989 3.1441Z" fill="white"/>
|
||||
<path d="M69.0681 0V2.5665H73.2661V15H75.802V2.5665H80V0H69.0681Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
@ -0,0 +1,5 @@
|
||||
// Copyright (C) 2022 CVAT.ai Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
declare module '*.svg';
|
||||
@ -0,0 +1,5 @@
|
||||
<svg width="15" height="15" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.2">
|
||||
<path d="M11 22C12.5046 22 13.9214 21.7116 15.2502 21.1348C16.5791 20.565 17.7462 19.7736 18.7517 18.7607C19.7641 17.7477 20.5586 16.58 21.1352 15.2576C21.7117 13.9281 22 12.5071 22 10.9947C22 9.48937 21.7117 8.07546 21.1352 6.753C20.5586 5.4235 19.7641 4.25228 18.7517 3.23933C17.7462 2.22638 16.5756 1.43501 15.2397 0.865228C13.9108 0.288409 12.4941 0 10.9895 0C9.48482 0 8.06807 0.288409 6.73921 0.865228C5.41035 1.43501 4.23969 2.22638 3.22723 3.23933C2.2218 4.25228 1.43081 5.4235 0.854267 6.753C0.284755 8.07546 0 9.48937 0 10.9947C0 12.5071 0.284755 13.9281 0.854267 15.2576C1.43081 16.58 2.22531 17.7477 3.23778 18.7607C4.25024 19.7736 5.4209 20.565 6.74976 21.1348C8.07862 21.7116 9.49537 22 11 22ZM11 15.458C10.1633 15.458 9.38287 15.3384 8.65868 15.0993C7.94151 14.8601 7.29115 14.5576 6.70757 14.1918C6.13103 13.819 5.63535 13.4286 5.22052 13.0206C4.80569 12.6056 4.48929 12.2187 4.27133 11.86C4.05337 11.4942 3.94439 11.2093 3.94439 11.0053C3.94439 10.7942 4.05337 10.5094 4.27133 10.1506C4.48929 9.78481 4.80569 9.39792 5.22052 8.98993C5.63535 8.5749 6.13103 8.18449 6.70757 7.8187C7.28412 7.44588 7.93448 7.1434 8.65868 6.91127C9.38287 6.6721 10.1633 6.55252 11 6.55252C11.8437 6.55252 12.6277 6.6721 13.3519 6.91127C14.0761 7.1434 14.7264 7.44588 15.303 7.8187C15.8795 8.18449 16.3717 8.5749 16.7795 8.98993C17.1873 9.39792 17.5002 9.78481 17.7181 10.1506C17.9431 10.5094 18.0556 10.7942 18.0556 11.0053C18.0556 11.2093 17.9431 11.4942 17.7181 11.86C17.5002 12.2187 17.1873 12.6056 16.7795 13.0206C16.3717 13.4286 15.8795 13.819 15.303 14.1918C14.7264 14.5576 14.0761 14.8601 13.3519 15.0993C12.6277 15.3384 11.8437 15.458 11 15.458ZM11 13.8647C11.5273 13.8647 12.0089 13.7346 12.4449 13.4743C12.8808 13.2141 13.2253 12.8659 13.4784 12.4297C13.7386 11.9936 13.8686 11.5188 13.8686 11.0053C13.8686 10.4777 13.7386 9.99584 13.4784 9.55971C13.2253 9.12358 12.8808 8.7789 12.4449 8.52566C12.0089 8.27242 11.5273 8.1458 11 8.1458C10.4727 8.1458 9.99105 8.27242 9.55513 8.52566C9.11921 8.7789 8.77117 9.12358 8.51103 9.55971C8.25088 9.99584 8.1208 10.4777 8.1208 11.0053C8.1208 11.5188 8.25088 11.9936 8.51103 12.4297C8.77117 12.8659 9.11921 13.2141 9.55513 13.4743C9.99105 13.7346 10.4727 13.8647 11 13.8647ZM11.0105 12.2609C10.659 12.2609 10.3602 12.1378 10.1141 11.8916C9.86801 11.6384 9.74497 11.3429 9.74497 11.0053C9.74497 10.6676 9.86801 10.3757 10.1141 10.1295C10.3602 9.87626 10.659 9.74964 11.0105 9.74964C11.348 9.74964 11.6398 9.87626 11.8859 10.1295C12.132 10.3757 12.255 10.6676 12.255 11.0053C12.255 11.3429 12.132 11.6384 11.8859 11.8916C11.6398 12.1378 11.348 12.2609 11.0105 12.2609Z" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,11 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100%" height="100%" fill="black"/>
|
||||
<rect width="100%" height="100%" fill="url(#paint0_radial_463_12470)" fill-opacity="0.6"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_463_12470" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419 523.5) rotate(68.1634) scale(1401.63 2071.53)">
|
||||
<stop/>
|
||||
<stop offset="0.489583" stop-color="#412515"/>
|
||||
<stop offset="0.953125"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 490 B |
@ -0,0 +1,3 @@
|
||||
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4042 0C7.34236 0 0 7.34236 0 16.4042C0 23.6504 4.69911 29.802 11.2191 31.97C12.0415 32.1195 12.3405 31.6176 12.3405 31.1797C12.3405 30.7899 12.3245 29.7593 12.3191 28.3923C7.75354 29.3801 6.79235 26.1922 6.79235 26.1922C6.04477 24.2966 4.97145 23.7893 4.97145 23.7893C3.48162 22.7747 5.08359 22.796 5.08359 22.796C6.72827 22.9135 7.59334 24.4834 7.59334 24.4834C9.05647 26.9932 11.4327 26.267 12.3672 25.8505C12.5167 24.7878 12.9439 24.0669 13.4085 23.6558C9.76668 23.2446 5.93797 21.8349 5.93797 15.5498C5.93797 13.7556 6.57876 12.2925 7.62538 11.1444C7.45984 10.7332 6.89381 9.06181 7.78558 6.80304C7.78558 6.80304 9.16327 6.36516 12.2978 8.4851C13.6061 8.12199 15.0105 7.94043 16.4042 7.93509C17.7979 7.94043 19.2023 8.12199 20.5106 8.4851C23.6451 6.36516 25.0174 6.80304 25.0174 6.80304C25.9145 9.06181 25.3538 10.7332 25.183 11.1444C26.2349 12.2925 26.865 13.7556 26.865 15.5498C26.865 21.8509 23.031 23.2339 19.3785 23.6451C19.9659 24.147 20.4892 25.1509 20.4892 26.6781C20.4892 28.8728 20.4732 30.6404 20.4732 31.1797C20.4732 31.6176 20.7669 32.1302 21.5999 31.97C28.1146 29.7966 32.8083 23.6504 32.8083 16.4042C32.8083 7.34236 25.466 0 16.4042 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="white"/>
|
||||
<path d="M24.6426 16.2067C24.6426 15.5949 24.593 14.9798 24.4871 14.3779H15.998V17.8437H20.8594C20.6576 18.9614 20.0095 19.9502 19.0603 20.5786V22.8273H21.9606C23.6637 21.2598 24.6426 18.9449 24.6426 16.2067Z" fill="#4285F4"/>
|
||||
<path d="M15.9987 25C18.426 25 20.473 24.203 21.9645 22.8273L19.0643 20.5786C18.2574 21.1275 17.2157 21.4384 16.002 21.4384C13.654 21.4384 11.6632 19.8543 10.9489 17.7246H7.95605V20.0428C9.48389 23.082 12.5958 25 15.9987 25Z" fill="#34A853"/>
|
||||
<path d="M10.945 17.7245C10.568 16.6068 10.568 15.3964 10.945 14.2786V11.9604H7.95542C6.67892 14.5035 6.67892 17.4997 7.95542 20.0427L10.945 17.7245Z" fill="#FBBC04"/>
|
||||
<path d="M15.9987 10.5615C17.2818 10.5417 18.5219 11.0245 19.4512 11.9108L22.0207 9.34123C20.3937 7.8134 18.2342 6.97342 15.9987 6.99987C12.5958 6.99987 9.48389 8.91793 7.95605 11.9604L10.9456 14.2786C11.6566 12.1456 13.6507 10.5615 15.9987 10.5615Z" fill="#EA4335"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -1,7 +0,0 @@
|
||||
// Copyright (C) 2020-2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
// Copyright (C) 2022 CVAT.ai Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
import React, { useState } from 'react';
|
||||
import Icon from '@ant-design/icons';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import { ClearIcon } from 'icons';
|
||||
import { Input } from 'antd';
|
||||
|
||||
interface SocialAccountLinkProps {
|
||||
id?: string;
|
||||
prefix: string;
|
||||
autoComplete?: string;
|
||||
placeholder: string;
|
||||
value?: string;
|
||||
onReset: () => void;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
function CVATSigningInput(props: SocialAccountLinkProps): JSX.Element {
|
||||
const {
|
||||
id, prefix, autoComplete, onReset, placeholder, value, onChange,
|
||||
} = props;
|
||||
const [valueNonEmpty, setValueNonEmpty] = useState(false);
|
||||
return (
|
||||
<Input
|
||||
value={value}
|
||||
autoComplete={autoComplete}
|
||||
placeholder={placeholder}
|
||||
prefix={<Text>{prefix}</Text>}
|
||||
id={id}
|
||||
suffix={(
|
||||
valueNonEmpty ? (
|
||||
<Icon
|
||||
component={ClearIcon}
|
||||
onClick={() => {
|
||||
setValueNonEmpty(false);
|
||||
onReset();
|
||||
}}
|
||||
/>
|
||||
) : null
|
||||
)}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { value: inputValue } = event.target;
|
||||
setValueNonEmpty(!!inputValue);
|
||||
if (onChange) onChange(event);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(CVATSigningInput);
|
||||
@ -0,0 +1,83 @@
|
||||
// Copyright (C) 2022 CVAT.ai Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import Layout from 'antd/lib/layout';
|
||||
import { Col, Row } from 'antd/lib/grid';
|
||||
import { CVATMinimalisticLogo } from 'icons';
|
||||
import Icon from '@ant-design/icons';
|
||||
import Title from 'antd/lib/typography/Title';
|
||||
import SVGSigningBackground from '../../assets/signing-background.svg';
|
||||
|
||||
interface SignInLayoutComponentProps {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
}
|
||||
|
||||
interface Sizes {
|
||||
xs?: { span: number };
|
||||
sm?: { span: number };
|
||||
md?: { span: number };
|
||||
lg?: { span: number };
|
||||
xl?: { span: number };
|
||||
xxl?: { span: number };
|
||||
}
|
||||
|
||||
interface FormSizes {
|
||||
wrapper: Sizes;
|
||||
form: Sizes;
|
||||
}
|
||||
|
||||
export const formSizes: FormSizes = {
|
||||
wrapper: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 24 },
|
||||
lg: { span: 24 },
|
||||
xl: { span: 15 },
|
||||
xxl: { span: 12 },
|
||||
},
|
||||
form: {
|
||||
xs: { span: 14 },
|
||||
sm: { span: 14 },
|
||||
md: { span: 14 },
|
||||
lg: { span: 14 },
|
||||
xl: { span: 16 },
|
||||
xxl: { span: 16 },
|
||||
},
|
||||
};
|
||||
|
||||
function SignInLayout(props: SignInLayoutComponentProps): JSX.Element {
|
||||
const { children } = props;
|
||||
const { Content, Header } = Layout;
|
||||
const titleSizes = {
|
||||
xs: { span: 0 },
|
||||
sm: { span: 0 },
|
||||
md: { span: 0 },
|
||||
lg: { span: 0 },
|
||||
xl: { span: 8 },
|
||||
xxl: { span: 10 },
|
||||
};
|
||||
return (
|
||||
<Layout>
|
||||
<SVGSigningBackground className='cvat-signing-background' />
|
||||
<Header className='cvat-signing-header'>
|
||||
<Icon className='cvat-logo-icon' component={CVATMinimalisticLogo} />
|
||||
</Header>
|
||||
<Layout className='cvat-signing-layout'>
|
||||
<Content>
|
||||
<Row justify='center' align='middle' style={{ height: '100%' }}>
|
||||
<Col {...titleSizes} className='cvat-signing-title'>
|
||||
<Title>Open Data</Title>
|
||||
<Title>Annotation Platform</Title>
|
||||
</Col>
|
||||
{children}
|
||||
</Row>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignInLayout;
|
||||
@ -0,0 +1,43 @@
|
||||
// Copyright (C) 2022 CVAT.ai Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import { Col, Row } from 'antd/lib/grid';
|
||||
import Button from 'antd/lib/button/button';
|
||||
import Icon from '@ant-design/icons';
|
||||
import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
|
||||
|
||||
interface SocialAccountLinkProps {
|
||||
children: string;
|
||||
className?: string;
|
||||
href: string;
|
||||
icon: React.ForwardRefExoticComponent<CustomIconComponentProps>;
|
||||
}
|
||||
|
||||
function SocialAccountLink(props: SocialAccountLinkProps): JSX.Element {
|
||||
const {
|
||||
children, className, href, icon,
|
||||
} = props;
|
||||
return (
|
||||
<Row>
|
||||
<Col flex='auto'>
|
||||
<Button
|
||||
href={href}
|
||||
className={`cvat-social-authentication-button ${className}`}
|
||||
>
|
||||
<Row align='middle' style={{ width: '100%' }}>
|
||||
<Col>
|
||||
<Icon component={icon} />
|
||||
</Col>
|
||||
<Col flex='auto'>
|
||||
{children}
|
||||
</Col>
|
||||
</Row>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(SocialAccountLink);
|
||||
@ -0,0 +1,338 @@
|
||||
// Copyright (C) 2022 CVAT.ai Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
@import '../../styles.scss';
|
||||
|
||||
$heading-font: 'Sora', sans-serif;
|
||||
$signing-font: 'Roboto Flex', sans-serif;
|
||||
|
||||
$heading-color: white;
|
||||
$error-color: #ff4d4f;
|
||||
$action-button-color-1: black;
|
||||
$action-button-color-2: gray;
|
||||
$action-button-color-3: #d4d4d4;
|
||||
|
||||
$base-transition: all 0.8s ease;
|
||||
|
||||
$social-google-background: #4286f5;
|
||||
|
||||
.cvat-signing-layout {
|
||||
font-family: $signing-font;
|
||||
}
|
||||
|
||||
.cvat-signing-title {
|
||||
.ant-typography {
|
||||
color: $heading-color;
|
||||
margin: 0;
|
||||
font-size: 68px;
|
||||
font-family: $heading-font;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ant-typography:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-signing-header {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cvat-signing-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: $grid-unit-size*128;
|
||||
}
|
||||
|
||||
.cvat-credentials-link {
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-credentials-form-item {
|
||||
.ant-input-affix-wrapper {
|
||||
border: none;
|
||||
box-shadow: 0 1px 0 0 $border-color-1;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
transition: $base-transition;
|
||||
}
|
||||
|
||||
.ant-input-prefix {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-focused {
|
||||
box-shadow: 0 2px 0 0 black;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-focused:hover {
|
||||
box-shadow: 0 2px 0 0 black;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
font-size: 20px;
|
||||
padding: $grid-unit-size * 1.5 0 $grid-unit-size * 0.75 0 !important;
|
||||
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus {
|
||||
box-shadow: 0 0 0 1000px white inset !important;
|
||||
transition: background-color 10s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-typography {
|
||||
text-transform: uppercase;
|
||||
color: $border-color-1;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-credentials-form-item.ant-form-item-has-error {
|
||||
.ant-input-affix-wrapper {
|
||||
border: none;
|
||||
box-shadow: 0 1px 0 0 $error-color;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
transition: $base-transition;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-focused {
|
||||
box-shadow: 0 2px 0 0 $error-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-credentials-navigation {
|
||||
margin-bottom: $grid-unit-size*4;
|
||||
}
|
||||
|
||||
.cvat-credentials-action-button {
|
||||
width: 100%;
|
||||
border-radius: $grid-unit-size*2;
|
||||
background-color: $action-button-color-1;
|
||||
height: $grid-unit-size*11;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
transition: $base-transition;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $action-button-color-1;
|
||||
color: $action-button-color-2;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-login-form-wrapper {
|
||||
border-radius: $grid-unit-size * 4;
|
||||
background: $background-color-1;
|
||||
padding: $grid-unit-size * 6;
|
||||
height: $grid-unit-size*81;
|
||||
|
||||
.cvat-credentials-form-item {
|
||||
height: $grid-unit-size*9.5;
|
||||
|
||||
.ant-form-item-explain {
|
||||
margin-bottom: $grid-unit-size*0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-form-item-explain-error:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-signing-form {
|
||||
position: relative;
|
||||
height: $grid-unit-size*52;
|
||||
|
||||
.ant-form-item:last-child:not(.cvat-credentials-form-item) {
|
||||
position: absolute;
|
||||
bottom: $grid-unit-size*6;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-login-form {
|
||||
@extend .cvat-signing-form;
|
||||
|
||||
margin-top: $grid-unit-size*10;
|
||||
|
||||
.ant-form-item:first-child {
|
||||
margin-bottom: $grid-unit-size*15;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-login-form-extended {
|
||||
.ant-form-item:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-password-reset-form-wrapper {
|
||||
@extend .cvat-login-form-wrapper;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cvat-password-reset-tip {
|
||||
font-weight: bold;
|
||||
margin-bottom: $grid-unit-size*20;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-password-reset-form {
|
||||
@extend .cvat-signing-form;
|
||||
|
||||
.cvat-credentials-form-item {
|
||||
margin-bottom: $grid-unit-size*3;
|
||||
}
|
||||
|
||||
margin-top: $grid-unit-size*6;
|
||||
}
|
||||
|
||||
.cvat-register-form-wrapper {
|
||||
@extend .cvat-login-form-wrapper;
|
||||
|
||||
.cvat-register-form {
|
||||
@extend .cvat-signing-form;
|
||||
|
||||
height: $grid-unit-size*68;
|
||||
}
|
||||
|
||||
.cvat-agreements-form-item {
|
||||
height: $grid-unit-size*5.5;
|
||||
|
||||
.ant-form-item-explain {
|
||||
margin-top: -$grid-unit-size;
|
||||
}
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-checkbox {
|
||||
top: 0;
|
||||
|
||||
.ant-checkbox-inner {
|
||||
width: $grid-unit-size*5;
|
||||
height: $grid-unit-size*3;
|
||||
border-radius: 12px;
|
||||
background: #d9d9d9;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: $grid-unit-size*2;
|
||||
width: $grid-unit-size*2;
|
||||
border-radius: $grid-unit-size;
|
||||
top: $grid-unit-size*0.5;
|
||||
left: $grid-unit-size*0.5;
|
||||
background-color: white;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-checkbox-checked {
|
||||
.ant-checkbox-inner {
|
||||
width: $grid-unit-size*5;
|
||||
height: $grid-unit-size*3;
|
||||
border-radius: 12px;
|
||||
background: $slider-color;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: $grid-unit-size*2;
|
||||
width: $grid-unit-size*2;
|
||||
border-radius: $grid-unit-size;
|
||||
top: $grid-unit-size*0.5;
|
||||
left: $grid-unit-size*2.5;
|
||||
background-color: white;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-register-form-last-field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-register-form-wrapper-extended {
|
||||
@extend .cvat-login-form-wrapper;
|
||||
|
||||
height: $grid-unit-size*88;
|
||||
|
||||
.cvat-register-form-last-field {
|
||||
margin-bottom: $grid-unit-size;
|
||||
}
|
||||
|
||||
.cvat-register-form {
|
||||
@extend .cvat-signing-form;
|
||||
|
||||
height: $grid-unit-size*76;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-social-authentication-button {
|
||||
@extend .cvat-credentials-action-button;
|
||||
|
||||
.anticon {
|
||||
margin-top: $grid-unit-size*0.5;
|
||||
}
|
||||
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: $grid-unit-size;
|
||||
padding: $grid-unit-size $grid-unit-size*4;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cvat-social-authentication-google {
|
||||
background: $social-google-background;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $social-google-background;
|
||||
color: $action-button-color-3;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue