From 7c5466572cd197ee652bc1fdf3ace07e217958b3 Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Sun, 18 Jul 2021 18:15:11 +0800 Subject: [PATCH] feat: init sign-in button --- .../components/AppContent/index.module.scss | 1 + .../src/components/Button/index.module.scss | 25 ++++++++++ packages/ui/src/components/Button/index.tsx | 27 +++++++++++ .../ui/src/components/Input/index.module.scss | 2 - packages/ui/src/components/Input/index.tsx | 4 +- packages/ui/src/include.d/dom.d.ts | 48 +++++++++++++++++++ packages/ui/src/locales/en.json | 2 + packages/ui/src/locales/zh-CN.json | 2 + packages/ui/src/pages/Home/index.module.scss | 11 ++++- packages/ui/src/pages/Home/index.tsx | 22 +++++++-- packages/ui/src/scss/normalized.scss | 5 ++ 11 files changed, 141 insertions(+), 8 deletions(-) create mode 100644 packages/ui/src/components/Button/index.module.scss create mode 100644 packages/ui/src/components/Button/index.tsx diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss index 3658d5c97..d398ea509 100644 --- a/packages/ui/src/components/AppContent/index.module.scss +++ b/packages/ui/src/components/AppContent/index.module.scss @@ -13,6 +13,7 @@ --color-gradient: linear-gradient(12.07deg, #3c4ce3 8.81%, #717ce0 93.49%); --color-button-background: #3c4ce3; --color-button-background-disabled: #626fe8; + --color-button-background-hover: #2234df; --color-button-text: #f5f5f5; --color-button-text-disabled: #eee; --color-error: #ff6b66; diff --git a/packages/ui/src/components/Button/index.module.scss b/packages/ui/src/components/Button/index.module.scss new file mode 100644 index 000000000..57eaf3ed6 --- /dev/null +++ b/packages/ui/src/components/Button/index.module.scss @@ -0,0 +1,25 @@ +@use '/src/scss/underscore' as _; + +.button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: _.unit(3) _.unit(8); + border-radius: 12px; + background: var(--color-button-background); + color: var(--color-button-text); + font: var(--font-heading-3); + box-shadow: var(--shadow-button); + transition: background 0.2s ease-in-out, color 0.2s ease-in-out; + cursor: pointer; + + &:not(.disabled):hover { + background: var(--color-button-background-hover); + } + + &.disabled { + background: var(--color-button-background-disabled); + color: var(--color-button-text-disabled); + } +} diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx new file mode 100644 index 000000000..6bd2b9c98 --- /dev/null +++ b/packages/ui/src/components/Button/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import classNames from 'classnames'; +import styles from './index.module.scss'; + +export type Props = { + isDisabled?: boolean; + className?: string; + value?: string; + onClick?: React.MouseEventHandler; +}; + +const Button = ({ isDisabled = false, className, value, onClick }: Props) => { + return ( + { + if (!isDisabled) { + onClick?.(event); + } + }} + /> + ); +}; + +export default Button; diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss index 300ed87f5..81cfe9f61 100644 --- a/packages/ui/src/components/Input/index.module.scss +++ b/packages/ui/src/components/Input/index.module.scss @@ -10,8 +10,6 @@ background: var(--color-control-background); color: var(--color-heading); font: var(--font-heading-3); - border: none; - outline: none; &::placeholder { color: var(--color-placeholder); diff --git a/packages/ui/src/components/Input/index.tsx b/packages/ui/src/components/Input/index.tsx index 2b1a90c73..c024494c4 100644 --- a/packages/ui/src/components/Input/index.tsx +++ b/packages/ui/src/components/Input/index.tsx @@ -3,6 +3,7 @@ import React from 'react'; import styles from './index.module.scss'; export type Props = { + autoComplete?: AutoCompleteType; className?: string; placeholder?: string; type?: InputType; @@ -10,13 +11,14 @@ export type Props = { onChange: (value: string) => void; }; -const Input = ({ className, placeholder, type = 'text', value, onChange }: Props) => { +const Input = ({ autoComplete, className, placeholder, type = 'text', value, onChange }: Props) => { return ( { onChange(value); }} diff --git a/packages/ui/src/include.d/dom.d.ts b/packages/ui/src/include.d/dom.d.ts index 405265130..9b1811626 100644 --- a/packages/ui/src/include.d/dom.d.ts +++ b/packages/ui/src/include.d/dom.d.ts @@ -1,3 +1,4 @@ +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types type InputType = | 'button' | 'checkbox' @@ -21,3 +22,50 @@ type InputType = | 'time' | 'url' | 'week'; + +// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute +type AutoCompleteType = + | 'name' + | 'honorific-prefix' + | 'given-name' + | 'additional-name' + | 'family-name' + | 'honorific-suffix' + | 'nickname' + | 'username' + | 'new-password' + | 'current-password' + | 'one-time-code' + | 'organization-title' + | 'organization' + | 'street-address' + | 'address-line1' + | 'address-line2' + | 'address-line3' + | 'address-level4' + | 'address-level3' + | 'address-level2' + | 'address-level1' + | 'country' + | 'country-name' + | 'postal-code' + | 'cc-name' + | 'cc-given-name' + | 'cc-additional-name' + | 'cc-family-name' + | 'cc-number' + | 'cc-exp' + | 'cc-exp-month' + | 'cc-exp-year' + | 'cc-csc' + | 'cc-type' + | 'transaction-currency' + | 'transaction-amount' + | 'language' + | 'bday' + | 'bday-day' + | 'bday-month' + | 'bday-year' + | 'sex' + | 'url' + | 'photo'; diff --git a/packages/ui/src/locales/en.json b/packages/ui/src/locales/en.json index cc2db4b7e..c69b77336 100644 --- a/packages/ui/src/locales/en.json +++ b/packages/ui/src/locales/en.json @@ -1,5 +1,7 @@ { "translation": { + "sign-in": "Sign In", + "sign-in.loading": "Signing in...", "sign-in.username": "Username", "sign-in.password": "Password" } diff --git a/packages/ui/src/locales/zh-CN.json b/packages/ui/src/locales/zh-CN.json index 3412ceb52..1a261a420 100644 --- a/packages/ui/src/locales/zh-CN.json +++ b/packages/ui/src/locales/zh-CN.json @@ -1,5 +1,7 @@ { "translation": { + "sign-in": "登录", + "sign-in.loading": "登录中...", "sign-in.username": "用户名", "sign-in.password": "密码" } diff --git a/packages/ui/src/pages/Home/index.module.scss b/packages/ui/src/pages/Home/index.module.scss index d3c5d3d02..44d21e330 100644 --- a/packages/ui/src/pages/Home/index.module.scss +++ b/packages/ui/src/pages/Home/index.module.scss @@ -5,14 +5,21 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; + height: 100%; .title { font: var(--font-heading-1); color: var(--color-heading); + margin-bottom: _.unit(9); } - > input { + > input:not([type='button']) { align-self: stretch; - margin: _.unit(1.5) 0; + margin-top: _.unit(3); + } + + > input[type='button'] { + margin-top: _.unit(6); } } diff --git a/packages/ui/src/pages/Home/index.tsx b/packages/ui/src/pages/Home/index.tsx index fca018672..a2e80e64f 100644 --- a/packages/ui/src/pages/Home/index.tsx +++ b/packages/ui/src/pages/Home/index.tsx @@ -1,3 +1,4 @@ +import Button from '@/components/Button'; import Input from '@/components/Input'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -7,18 +8,33 @@ const Home = () => { const { t } = useTranslation(); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); + const [isLoading, setIsLoading] = useState(false); return ( -
+
登录 Logto
- + + -
+