owncloudのログインページとシェアURLページをかっこよくカスタマイズするだけ

    >

みんな大好きowncloud。owncloudのソースコードを弄っていたらいろいろ発見があったのですがそのなかで実用性(?)がありそうな、ログインページのカスタマイズをやってみました。

簡単に弄ってこんな感じにしてみた。

before

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_802d7d85-11f9-4729-aae5-7fc9b3af6220.png

after

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_40d2da07-b424-4488-a196-0afd39c2ba78.png

opacity弄れば大抵なんでもかっこよくなる定期。

では具体的にやり方紹介。そんないじってないので大丈夫かと思うがセキュリティホール空くかもしれないので自己責任でやってください。

やっていきましょう

まずはいじるためのモールドがほしいので、プラグインの一つであるWallpaper app | ownCloud Marketplaceをインストールします。

したらサーバーにsshしてフォルダの存在を確認してみます。

ls ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/

したらrmate ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/appinfo/app.phpでファイルを編集。

僕が書き直したコードは以下。

<?php

if (\OC::$server->getUserSession()->isLoggedIn() !== true
    && strpos(\OC::$server->getRequest()->getRequestUri(), '/login') !== false) {
    \OCP\Util::addStyle('wallpaper', 'login');
        \OCP\Util::addScript('wallpaper', 'login');
    $manager = \OC::$server->getContentSecurityPolicyManager();
    $policy = new \OC\Security\CSP\ContentSecurityPolicy();
    $policy->addAllowedImageDomain('source.unsplash.com');
    $policy->addAllowedImageDomain('images.unsplash.com');
        $policy->addAllowedImageDomain('yuis.xsrv.jp');
    $manager->addDefaultPolicy($policy);
}

if (\OC::$server->getUserSession()->isLoggedIn() !== true
    && strpos(\OC::$server->getRequest()->getRequestUri(), '/s') !== false) {
    \OCP\Util::addStyle('wallpaper', 'login');
        \OCP\Util::addScript('wallpaper', 'login');
    $manager = \OC::$server->getContentSecurityPolicyManager();
    $policy = new \OC\Security\CSP\ContentSecurityPolicy();
    $policy->addAllowedImageDomain('source.unsplash.com');
    $policy->addAllowedImageDomain('images.unsplash.com');
        $policy->addAllowedImageDomain('yuis.xsrv.jp');
    $manager->addDefaultPolicy($policy);
}

要点としては

\OCP\Util::addScript('wallpaper', 'login');./js/login.js/loginに当てはまるurlに対して読み込んでくれ、ということで、

$policy->addAllowedImageDomain('yuis.xsrv.jp');では画像をロードするサーバーを許可しています。
自分のサーバーに好きな画像を置いておき、そこにcssでリンクするのですが、このコードで許可されてないとクライアント側でエラーでます。

Navigation and Pre-App configuration — ownCloud Developer Manual 9.0 documentation

で、まずcss。

rmate ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/css/login.cssで、以下参考。

body {
    /* background-image: url('https://source.unsplash.com/1600x900/?nature,water') !important; */
    /* background-image: url('https://hdqwalls.com/download/anime-girl-in-girls-frontline-ga-1600x900.jpg') !important; */
    background-image: url('https://yuis.xsrv.jp/data/6ceJfI2hvdbFFGudVpAX2A6jE5Ubb2Dw.jpg') !important;
    background-size: cover !important;
}

#body-login .wrapper {
    min-height: 100%;
    margin: 0 auto -70px;
    width: 300px;
    opacity: 0.3 !important;
}

#body-login p.info {
    margin: 0 auto;
    padding-top: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0.7 !important;
}

次にjsでrmate ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/js/login.jsで以下コード。



$(document).ready(function(){ // document.querySelector('#body-login > footer > p').remove() document.querySelector('#body-login > footer > p').innerHTML = `If any problem about our shared files please contact us at <strong><a href="https://114514.click/homepage">https://114514.click/homepage</a></strong>` });

以上です。

これでログインページとシェアURLのページにてcssとjsが適用され、上の画像のようなかっこいいログイン画面になります。


お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


関連するかもしれない記事

ごめんなさい!この記事には関連記事が1つも見つかりませんでした。

Close Menu