Ekapp/skolehjem/resources/views/app/users/login.blade.php

@extends("user.layout.base")

@section("title")
    Login
@endsection

@section("content")
    <main style="background-color: #00788a; height: 100%;">
        <!--Make the app open in fullscreen-->
        <link rel="manifest" href="manifest.json">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="application-name" content="Ekapp">
        <meta name="apple-mobile-web-app-title" content="Ekapp">
        <meta name="theme-color" content="00788a">
        <meta name="msapplication-navbutton-color" content="00788a">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="msapplication-starturl" content="/users/login.blade.php">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" type="images/svg" sizes="192x192" href="appIcon.svg">
        <link rel="apple-touch-icon" type="images/svg" sizes="192x192" href="appIcon.svg">
        <link rel="stylesheet" type="text/css" href="/../../../css/addtohomescreen.css">
        <script src="/../../../js/addtohomescreen.js"></script>

        <div class="brand">
            <img src="{{URL::asset('/images/logos/Logo-hvid.svg')}}" alt="Syddansk Erhvervsskole">
        </div>
        <form action="{{ route("users.login") }}" method="post">
            @csrf
            <input class="appinput" type="email" name="email" placeholder="Email" required>
            <div class="input-group text-left">
                <input type="password" class="appinput form-control" name="password" id="password" placeholder="Password" required>
                <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-password" onclick="show('password', 'fa-password')" style="background-color: #00788a; color: white;"></span>
            </div>
            <label class="toggle">
                <input class="toggle__input" type="checkbox" name="rememberpassword">
                <span class="toggle__label">
                    <span class="toggle__text text-white">Remember me</span>
                </span>
            </label>
            {!! session()->get('success#passwordchange') !!}
            {!! session()->get('error#wrongcredentials') !!}
            {!! session()->get('success#loggedout') !!}
            <input class="btn btn-dark" type="submit" value="Sign in">
            <button type="button" class="btn btn-dark" onclick="location.href = '{{ route("users.signup") }}'" style="line-height: 2rem;">Register</button>
        </form>
        <a class="text-white text-center" href="{{ route('users.show-forgot') }}">Forgot password?</a>
    </main>
@endsection

@section("scripts")
    <script>
        function show($passID, $faID) {
            var inputPass = document.getElementById($passID);
            var faEye = document.getElementById($faID);

            if (inputPass.type === "password") {
                inputPass.type = "text";
                faEye.style.color = "#999";
            } else {
                inputPass.type = "password";
                faEye.style.color = "#fff";
            }
        }


        addToHomescreen();

    </script>
@endsection