mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Add our custom SessionInput component and use it in the registration page
This commit is contained in:
parent
2813e92ad2
commit
55e39a02b3
|
@ -270,43 +270,98 @@ $session_message-container-border-radius: 5px;
|
|||
|
||||
.module-message__container {
|
||||
border-radius: $session_message-container-border-radius;
|
||||
}
|
||||
|
||||
.module-message__attachment-container,
|
||||
.module-image--curved-bottom-right,
|
||||
.module-image--curved-bottom-left {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-left-radius: $session_message-container-border-radius;
|
||||
border-bottom-right-radius: $session_message-container-border-radius;
|
||||
}
|
||||
label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.conversation-header .session-icon-button {
|
||||
@include standard-icon-button();
|
||||
}
|
||||
.module-message__attachment-container,
|
||||
.module-image--curved-bottom-right,
|
||||
.module-image--curved-bottom-left {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-left-radius: $session_message-container-border-radius;
|
||||
border-bottom-right-radius: $session_message-container-border-radius;
|
||||
}
|
||||
|
||||
.module-conversation-header,
|
||||
.message-selection-overlay {
|
||||
height: $session-conversation-header-height;
|
||||
}
|
||||
.conversation-header .session-icon-button {
|
||||
@include standard-icon-button();
|
||||
}
|
||||
|
||||
.message-selection-overlay {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
.module-conversation-header,
|
||||
.message-selection-overlay {
|
||||
height: $session-conversation-header-height;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
float: left;
|
||||
margin-top: 17px;
|
||||
margin-left: 7px;
|
||||
.message-selection-overlay {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
|
||||
.close-button {
|
||||
float: left;
|
||||
margin-top: 17px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
.message-selection-overlay div[role="button"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.message-selection-overlay .button-group {
|
||||
float: right;
|
||||
margin-top: 13.5px;
|
||||
}
|
||||
}
|
||||
.message-selection-overlay div[role="button"] {
|
||||
display: inline-block;
|
||||
}
|
||||
.input-with-label-container {
|
||||
height: 46.5px;
|
||||
width: 280px;
|
||||
color: $session-color-white;
|
||||
padding: 2px 0 2px 0;
|
||||
transition: opacity $session-transition-duration;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
.message-selection-overlay .button-group {
|
||||
float: right;
|
||||
margin-top: 13.5px;
|
||||
label {
|
||||
line-height: 14px;
|
||||
opacity: 0;
|
||||
color: #737373;
|
||||
font-size: 10px;
|
||||
line-height: 11px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
outline: 0;
|
||||
height: 14px;
|
||||
width: 280px;
|
||||
background: transparent;
|
||||
color: $session-color-white;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid $session-color-white;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
|
83
ts/components/session/SessionInput.tsx
Normal file
83
ts/components/session/SessionInput.tsx
Normal file
|
@ -0,0 +1,83 @@
|
|||
import React from 'react';
|
||||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface Props {
|
||||
i18n: LocalizerType;
|
||||
label: string;
|
||||
type: string;
|
||||
placeholder: string;
|
||||
enableShowHide?: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
inputValue: string;
|
||||
forceShow: boolean;
|
||||
}
|
||||
|
||||
export class SessionInput extends React.PureComponent<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.updateInputValue = this.updateInputValue.bind(this);
|
||||
|
||||
this.state = {
|
||||
inputValue: '',
|
||||
forceShow: false,
|
||||
};
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { placeholder, type, label, enableShowHide } = this.props;
|
||||
const { inputValue, forceShow } = this.state;
|
||||
|
||||
const correctType = forceShow ? 'text' : type;
|
||||
|
||||
return (
|
||||
<div className="input-with-label-container">
|
||||
<label
|
||||
htmlFor="floatField"
|
||||
className={classNames(
|
||||
inputValue !== ''
|
||||
? 'input-with-label-container filled'
|
||||
: 'input-with-label-container'
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
id="floatField"
|
||||
type={correctType}
|
||||
placeholder={placeholder}
|
||||
value={inputValue}
|
||||
onBlur={e => {
|
||||
this.updateInputValue(e);
|
||||
}}
|
||||
onChange={e => {
|
||||
this.updateInputValue(e);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
this.setState({
|
||||
forceShow: !this.state.forceShow,
|
||||
})
|
||||
}
|
||||
className={classNames(enableShowHide ? '' : '')}
|
||||
>
|
||||
SHOW
|
||||
</button>
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private updateInputValue(e: any) {
|
||||
this.setState({
|
||||
inputValue: e.target.value,
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react';
|
||||
import { SessionButton, SessionButtonTypes } from './SessionButton';
|
||||
import { AccentText } from './AccentText';
|
||||
import { SessionInput } from './SessionInput';
|
||||
//import classNames from 'classnames';
|
||||
|
||||
//import { LocalizerType } from '../../types/Util';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
@ -13,6 +14,7 @@ declare global {
|
|||
|
||||
interface Props {
|
||||
showSubtitle: boolean;
|
||||
i18n: LocalizerType;
|
||||
/* profileName: string;
|
||||
avatarPath: string;
|
||||
avatarColor: string;
|
||||
|
@ -45,12 +47,48 @@ export class SessionRegistrationView extends React.Component<Props> {
|
|||
<AccentText showSubtitle={showSubtitle || true} />
|
||||
</div>
|
||||
<div className="session-content-registration">
|
||||
<div className="entry-fields">
|
||||
<SessionInput
|
||||
label="Mnemonic Seed"
|
||||
type="password"
|
||||
placeholder="Enter Seed"
|
||||
i18n={this.props.i18n}
|
||||
enableShowHide={true}
|
||||
/>
|
||||
<SessionInput
|
||||
label="Display Name"
|
||||
type="text"
|
||||
placeholder="Enter Optional Display Name"
|
||||
i18n={this.props.i18n}
|
||||
/>
|
||||
<SessionInput
|
||||
label="Optional Password"
|
||||
type="password"
|
||||
placeholder="Enter Optional Password"
|
||||
i18n={this.props.i18n}
|
||||
/>
|
||||
<SessionInput
|
||||
label="Verify Password"
|
||||
type="password"
|
||||
placeholder="Optional Password"
|
||||
i18n={this.props.i18n}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SessionButton
|
||||
onClick={() => {
|
||||
alert('clicked');
|
||||
alert('TODO');
|
||||
}}
|
||||
buttonType={SessionButtonTypes.Green}
|
||||
text="Generate Session ID"
|
||||
buttonType={SessionButtonTypes.FullGreen}
|
||||
text="Continue Your Session"
|
||||
/>
|
||||
<div>or</div>
|
||||
<SessionButton
|
||||
onClick={() => {
|
||||
alert('TODO');
|
||||
}}
|
||||
buttonType={SessionButtonTypes.White}
|
||||
text="Link Device To Existing Account"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue