[Day 29] 会员登入及登出(一)

我们先做登入的画面,
在app/Http/Controllers/UserAuthController.php新增signInPage方法.

//使用者登入画面
public function signInPage()
{
    $name = 'sign_in';
    $binding = [
        'title' => ShareData::TITLE,
        'name' => $name,
    ];
    return view('user.sign-in', $binding);
}

然後新增resources/views/user/sign-in.blade.php

<!-- 指定继承 layout.master 母模板 -->
@extends('layout.master')

<!-- 传送资料到母模板,并指定变数为title -->
@section('title', $title)

<!-- 传送资料到母模板,并指定变数为content -->
@section('content')
<form id="form1" method="post" action="">
<!-- 自动产生 csrf_token 隐藏栏位-->
{!! csrf_field() !!}
<div class="login_form">
    <div class="login_title">登入</div>
    <div class="login_label">帐号(必须为E-mail)</div>
    <div class="login_textbox">
        <input name="account" class="form_textbox" type="text" value="{{ old('account') }}" placeholder="请输入帐号"/>
    </div>
    <div class="login_label">密码</div>
    <div class="login_textbox">
        <input name="password" class="form_textbox" type="password" value="{{ old('password') }}" placeholder="请输入密码"/>
    </div>
    <div class="login_error">
        <!-- 错误讯息模板元件 -->
        @include('layout.ValidatorError')
    </div>
    <div class="btn_group">
        <button type="button" class="btn btn-warning btn_login" onclick="SignUp()">注册</button>
        <button type="submit" class="btn btn-success btn_login">登入</button>
    </div>
</div>
</form>

<script>
function SignUp()
{
    location.href="/user/auth/sign-up";
}
</script>
@endsection

scss档案修改如下

$mainTitleHeight: 56px;
$loginFormWidth: 360px;

$mainColor: #0097A7;
$textColor: #FFF;
//背景颜色
$BackWhiteColor: #FFFFFF;
$BackWhiteColor2: #FAFAFA;
$lightgrayColor: #A7A7A7;

$mainFont: 24px;
$mainFont2: 16px;
$toolBarFont: 16px;
$loginTitleFont: 32px;
$formMainFont: 20px;
$formTextBoxTextFont: 16px;
$formTextBoxBorderFont: 40px;

$mainLeftMargin: 24px;



//上面Bar的样式
.toolbar_section{
    height: $mainTitleHeight;
    background: $mainColor;

    .toolbar_title{
        line-height: $mainTitleHeight;
        font-size: $mainFont;
        margin-left: $mainLeftMargin;
        color: $textColor;
    }

    .toolbar_title2{
        line-height: $mainTitleHeight;
        font-size: $mainFont2;
        margin-left: $mainLeftMargin;
        color: $textColor;
    }

    .toolbar_right{
        float: right;
        height: $mainTitleHeight;
        margin-right: 24px;
        font-size: $toolBarFont;
    }

    .toolbar_text{
        margin-left: 12px;
        color: $textColor;
        line-height: $mainTitleHeight;
    }
}

//注册登入表单
.login_form{
    width: $loginFormWidth;
    margin: auto;

    .login_title{
        margin-top: 15px;
        margin-bottom: 30px;
        font-size: $loginTitleFont;
        font-weight: 600;
        text-align: center;
    }

    .login_label{
        font-size: $formMainFont;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .login_textbox{
        font-size: $formTextBoxTextFont;
        line-height: $formTextBoxBorderFont;
        margin-bottom: 20px;
        .form_textbox{
            padding-left: 12px;
            width: 100%;
        }
    }

    .login_error {
        font-size: $formTextBoxTextFont;
    }

    .btn_group{
        text-align: right;
        .btn_login{
            font-size: $formMainFont;
            height: 40px;
            width: 120px;
            color: $textColor;
            box-shadow: none;
            border-radius: 3px;
            border-width: 0;
        }
    }
}


.background_white {
    min-height: calc(100vh - #{$mainTitleHeight});
    background: $BackWhiteColor;
}

.background_white2 {
    min-height: calc(100vh - #{$mainTitleHeight});
    background: $BackWhiteColor2;
}


/****************改变Bootstrap样式****************/


.container {
    width: 100vw;
    padding: 0;
    background: $BackWhiteColor2;
}

//排版
.form.col-sm-1 {
    padding: 0;
}

//选单
.nav-pills>li{

    &>a{
        border-radius: 0;
        color: $lightgrayColor;
        font-size: $formTextBoxTextFont;

        &:hover{
            background: #E9E9E9;
        }
    }

    &.active{
        border-right: solid 4px $mainColor;

        &>a, {
            color: $mainColor;
            background: transparent;

            &:hover{
                color: $mainColor;
                background: #E9E9E9;
            }
        }
    }
}

点击旁边的登入就会进入登入画面.
https://ithelp.ithome.com.tw/upload/images/20201002/201056942YjR0z5C3G.png


<<:  [Day 28] 建立注册的画面及功能(十二) - 寄出注册通知信

>>:  [Day 30] 会员登入及登出(二)

Day-8 Geeker 们最爱的工程型怀旧游戏神器 OSSC

如果要把怀旧玩家分种类、我想我会分成以下三种。 玩家、这类型的人以游戏为主、不一定会在乎用什麽方式玩...

沟通技巧中的利害关系人管理

产品经理平常需要沟通的对象很多,而这些对象对专案的影响程度大小可能不尽相同,为了有效的擅用产品经理自...

D23-(9/23)-宅配通(2642)-航运、空运、不能错过陆运

注:发文日和截图的日期不一定是同一天,所以价格计算上和当日不同,是很正常的。 声明:这一系列文章并无...

Day24-介接 API(二)Google Calendar(II)Events——Read、Update、Delete

大家好~ 昨天成功在日历上新增 Event 了, 今天来对日历的 Event 做其他操作吧~ Rea...

Chapter1-DJ最爱的音频动感图像(I)基本流程图 & 操作DOM介面

在开始前,还没看过序章的朋友们,可以点击进去,教学大纲和主题方向都写在里面罗! 看完这章节,你会学到...