oauth 로그인 버튼 디자인

app.py

@@ -2772,11 +2772,11 @@ def login():
         
         return redirect('/user')  
     else:
-        oauth_content = '<ul>'
+        oauth_content = '<div class="oauth-wrapper"><ul class="oauth-list">'
         oauth_supported = load_oauth('_README')['support']
         for i in range(len(oauth_supported)):
-            oauth_content += '<li><a href="/oauth/{}/init" class="oauth_{}">{}</a></li>'.format(oauth_supported[i], oauth_supported[i], oauth_supported[i] + '로 로그인') # oauth_{} 클래스는 이후 oauth button 부분을 손대기 위해 추가한 것, 어순 어떻게 좀 해봐
-        oauth_content += '</ul>'
+            oauth_content += '<link rel="stylesheet" href="/views/oauth.css"><li><a href="/oauth/{}/init"><div class="oauth-btn oauth-btn-{}"><div class="oauth-btn-logo oauth-btn-{}"></div>{}</div></a></li>'.format(oauth_supported[i], oauth_supported[i], oauth_supported[i], load_lang('oauth_signin_' + oauth_supported[i]))
+        oauth_content += '</ul></div>'
         return easy_minify(flask.render_template(skin_check(),    
             imp = [load_lang('login'), wiki_set(), custom(), other2([0, 0])],
             data =  '''
@@ -2785,11 +2785,11 @@ def login():
                         <hr>
                         <input placeholder="''' + load_lang('password') + '''" name="pw" type="password">
                         <hr>
-                        ''' + oauth_content + '''
-                        <hr>
                         ''' + captcha_get() + '''
                         <button type="submit">''' + load_lang('login') + '''</button><a href="/register">''' + load_lang('register_suggest') + '''</a>
                         <hr>
+                        ''' + oauth_content + '''
+                        <hr>
                         <span>''' + load_lang('http_warring') + '''</span>
                     </form>
                     ''',
@@ -2819,12 +2819,14 @@ def login_oauth(platform = None, func = None):
 
     if func == 'init':
         referrer_re = re.compile(r'(?P<host>^(https?):\/\/([^\/]+))\/(?P<refer>[^\/?]+)')
-        referrer = referrer_re.search(flask.request.referrer)
-        if referrer.group('host') != load_oauth('publish_url'):
-            return redirect('/')
+        if flask.request.referrer != None:
+            referrer = referrer_re.search(flask.request.referrer)
+            if referrer.group('host') != load_oauth('publish_url'):
+                return redirect('/')
+            else:
+                flask.session['referrer'] = referrer.group('refer')
         else:
-            flask.session['referrer'] = referrer.group('refer')
-
+            return redirect('/')
         if oauth_data['client_id'] == '' or oauth_data['client_secret'] == '':
             return '관리자가 이 기능을 비활성화시켰습니다.'
         elif publish_url == 'https://':

language/en-US.json

@@ -108,6 +108,8 @@
     "oauth_conn_done" : " connected",
     "oauth_conn_not" : " not found",
     "oauth_conn_new" : "Connect..",
+    "oauth_signin_facebook" : "Sign in with facebook",
+    "oauth_signin_naver" : "Sign in with NAVER",
 
     "user_head_warring" : "user's head will deleted if you close the browser or when you are editting as guest",
     "http_warring" : "warning : if you are not on https connection, your information can be leaked. we won't response to that.",

language/ko-KR.json

@@ -100,6 +100,8 @@
     "oauth_conn_done" : "됨",
     "oauth_conn_not" : "없음",
     "oauth_conn_new" : "연결하기",
+    "oauth_signin_facebook" : "Facebook으로 로그인",
+    "oauth_signin_naver" : "네이버 아이디로 로그인",
 
     "authority_error" : "권한이  부족합니다.",
     "no_login_error" : "비 로그인 상태 입니다.",

views/oauth.css

@@ -0,0 +1,50 @@
+.oauth-wrapper {
+    display: inline-block;
+}
+.oauth-list {
+    list-style: none;
+    padding: 0;
+}
+.oauth-list li {
+    display: inline-block;
+}
+
+.oauth-btn {
+    position: relative;
+    margin-left: 20px;
+    border: none;
+    display: inline-block;
+    padding: 25px;
+    padding-left: 75px;
+    border-radius: 10px;
+    color: #fff;
+}
+.oauth-btn a {
+    position: relative;
+}
+.oauth-btn.oauth-btn-facebook {
+    background-color: #3b5998;
+}
+.oauth-btn.oauth-btn-naver {
+    background-color: #00d337;
+}
+
+.oauth-btn-logo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    margin: 20px;
+    margin-left: 25px;
+    padding: 10px;
+    background-size: cover;
+    background-position: center center;
+}
+
+.oauth-btn-logo.oauth-btn-facebook {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOSA4aC0zdjRoM3YxMmg1di0xMmgzLjY0MmwuMzU4LTRoLTR2LTEuNjY3YzAtLjk1NS4xOTItMS4zMzMgMS4xMTUtMS4zMzNoMi44ODV2LTVoLTMuODA4Yy0zLjU5NiAwLTUuMTkyIDEuNTgzLTUuMTkyIDQuNjE1djMuMzg1eiIvPjwvc3ZnPg==);
+}
+.oauth-btn-logo.oauth-btn-naver {
+    background-image : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEzLDI3VjIyOS45NzJIOTEuNTRWMTI2LjcwNmw3NC44NDQsMTAzLjI4NUwyNDQsMjI5Ljk3MlYyNy4wMDlIMTY2LjM4NFYxMjguNDg2TDkyLjQ2NCwyNy4wMDlaIi8+PC9zdmc+)
+}