미티어가 react를 지원하기는 하지만, 근본적으로는 아직까지는 blaze를 중심으로 많이 설계가 되어있고, 실제로 미티어에서 쉽게 로그인을 다는 방법은 blaze로 설계된 기본 accounts-ui를 땜빵식으로 리액트로 랩핑해서 쓰는 방법이 있다(작성 현재 meteor 1.3).
일반적인 모던웹처럼 Sign in이 상단의 헤더에 있는 경우에는 아주 간단하게 처리가 가능하다. 다른 패키지들도 있기 있는데 여러가지 테스트해본 결과 항상 그렇들 뭐가 하나 삑사리(?) 나서 잘 진행되지 않는다. 그냥 공식 문서에 있는 랩핑 방법을 추천한다. https://www.meteor.com/tutorials/react/adding-user-accounts
meteor add accounts-ui-unstyled accounts-passwordBS3 스타일로 입힐 것이므로 unstyled를 설치한다. 이 경우 자동으로 accounts-ui 패키지도 설치가 된다.
문제는 Sign in을 눌러서 나오는 dropdown 형식이 기본이고, 상단 헤더가 없거나 원하는 시점에서 모달로 로그인창을 띄우려면 폼을 바로 열리게하여야하는데 이 방법은 session을 조작하여 표시하는 것이 가능하다.
constructor(props){
super(props);
Session.set(‘Meteor.loginButtons.dropdownVisible’, true);
}위 코드를 AccountsUIWrapper.jsx에 넣는다. account-ui가 사용하고 있는 session을 조작하여 폼이 바로 열리도록 하는 것이다.
자, 이제 스타일만 입혀주자. 개인 프로젝트에 사용하기 위하여 아래와 같이 BS3스타일에서 필요한 부분만 SCSS를 만들어 놓았다.
#login-buttons {
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#login-sign-in-link, .login-close-text {
display: none;
}
button, input, textarea {
margin: 0;
font: inherit;
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
a {
cursor: pointer;
}
.login-button {
display: block;
width: 100%;
padding: 6px 12px;
margin: 20px 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
.message {
padding: 12px;
background: #dff0d8;
margin-top: 10px;&.error-message {
background: #f2dede;
color: red;
}
}
}
